/* Strome Engineering Corporation: site styles, v4 r4 (Mia, 2026-10-24; site r19). r4 rebuilds the contact block as the
   quick quote (cards, chips, sliders, switches) and adds --copper-tint; nothing else changed.
   r3 (site r18) adds the toggles at the end of
   this file (Seth on r17: "Lots of words. Almost so many you get lost in it."). Everything above is r2 unchanged.
   r2 (Mia, 2026-10-23).
   Seth, 10/23: "the information and flow of the website is great.. but it is BLAND." Then, on colour: "logo is cool and
   moody but website can have some life." Words, pages and order are unchanged from r14 except the 10/23 origin story.
   The idea: the mechanical sheet, in the materials of the mechanical room.
   - Paper and a faint drafting grid open every page.
   - Steel is the structure: one full-bleed band per page and the quote box at the end.
   - Copper (#9C5221, the colour of a line set) is what you press and read on paper: buttons, links, numbers, arrows.
   - Brass (#F0AE45, a valve body) is copper's partner on steel: the step numbers, the ticks, the quote button.
   One warm hue in two values against one cool one, so the page has life without getting busy.
   Contrast (WCAG): copper on paper 5.4:1, paper on copper 5.4:1, brass on steel 5.0:1, ink on brass 9.0:1,
   paper on steel 9:1, on-steel-2 on steel 6.9:1.
   Barlow Semi Condensed 600 (the logo's face, self-hosted, SIL OFL) for display; the visitor's system sans for
   reading. Always light (Seth, 10/18). The logo never sits on steel, and the logo itself stays ink (Logo Guide r3). */

@font-face{
  font-family:"Barlow Semi Condensed";
  src:url("fonts/BarlowSemiCondensed-600.ttf") format("truetype");
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  --paper:#FAF8F3;      /* warm white, Logo Guide */
  --sheet:#FFFFFF;      /* documents sitting on the paper */
  --wash:#ECF0F2;       /* a pale tint of steel */
  --ink:#1A1A1A;
  --ink-2:#4A5156;      /* secondary text, 7.6:1 on paper */
  --rule:#DED9CF;
  --rule-2:#C5CDD2;
  --steel:#2F4858;      /* structure: bands, frames, rules */
  --steel-deep:#243A48;
  --steel-tint:#A6B0B7;
  --copper:#9C5221;     /* warm accent on paper: buttons, links, numbers, arrows */
  --copper-deep:#7E4119;
  --brass:#F0AE45;      /* warm accent on steel: step numbers, ticks, the quote button */
  --brass-light:#F6C676;
  --copper-tint:#F7ECE2; /* a selected card or switch on the quote form (r19) */
  --on-dark:#FAF8F3;
  --on-steel-2:#CBD4DA; /* secondary text on steel, about 6.9:1 */
  --line-on-steel:rgba(250,248,243,.45);
  --display:"Barlow Semi Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r-sheet:6px;
  --r-field:10px;
  --r-panel:24px;
  --r-pill:999px;
  --lift:0 1px 0 rgba(26,26,26,.05),0 22px 44px -26px rgba(47,72,88,.5);
  --gutter:clamp(18px,4.5vw,48px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
@media (min-width:900px){body{font-size:18px}}
::selection{background:var(--brass-light);color:var(--ink)}
main{display:block;overflow-x:clip}
img,svg{max-width:100%}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;color:var(--ink);text-wrap:balance}
/* display sizes up about a third from r14, set tighter, so the headline is the image */
h1{font-size:clamp(46px,7.2vw,100px);line-height:.94;letter-spacing:-.018em}
h2{font-size:clamp(34px,5vw,68px);line-height:.98;letter-spacing:-.012em}
h3{font-size:clamp(22px,2.1vw,28px);line-height:1.12}
p,ul,ol,dl,dd,figure,fieldset{margin:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
/* links in running text are copper on paper (brass on steel, below) */
main :is(p,li) a:not(.btn){color:var(--copper)}
:focus-visible{outline:3px solid var(--steel);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-80px;z-index:60;background:var(--ink);color:var(--on-dark);padding:12px 16px;border-radius:10px;font-family:var(--display);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink-2);max-width:36em}
.muted{color:var(--ink-2)}
.fine{font-size:15px;color:var(--ink-2)}
.kicker{display:block;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.2;color:var(--copper)}
.tagline{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.3vw,30px);line-height:1.18;color:var(--steel);max-width:25em}
.prose{display:grid;gap:18px;max-width:64ch}
.prose p{color:var(--ink)}
.prose p.muted{color:var(--ink-2)}

/* the plan sheet: a faint drafting grid behind the top of every page, fading out into the content.
   Minor lines every 24px, a heavier line every fifth, the way vellum is ruled. Texture, never a picture. */
main>.wrap:first-child{position:relative;isolation:isolate}
main>.wrap:first-child::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);pointer-events:none;
  background-image:
    linear-gradient(rgba(47,72,88,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,72,88,.11) 1px,transparent 1px),
    linear-gradient(rgba(47,72,88,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,72,88,.05) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 35%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 35%,transparent 100%);
}

/* buttons: pills, so they read as things to press. The main action is copper everywhere on paper. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:var(--r-pill);border:2px solid var(--ink);background:var(--ink);color:var(--on-dark);font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.01em;line-height:1;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{background:#000;border-color:#000}
.btn-primary{background:var(--copper);border-color:var(--copper)}
.btn-primary:hover{background:var(--copper-deep);border-color:var(--copper-deep)}
.btn-quiet{background:var(--paper);color:var(--ink);border-color:var(--rule-2)}
.btn-quiet:hover{background:var(--sheet);border-color:var(--ink)}
/* on steel (the quote box) the button is brass with ink text */
.btn-paper{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.btn-paper:hover{background:var(--brass-light);border-color:var(--brass-light)}
.btn-paper:focus-visible{outline-color:var(--brass)}
.btn[disabled]{opacity:.6;cursor:wait}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.textlink{font-family:var(--display);font-weight:600;font-size:19px;color:var(--copper);text-decoration:underline;text-underline-offset:.25em}

/* header */
.site-head{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
@supports (backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px)){
  .site-head{background:rgba(250,248,243,.9);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{display:block;width:auto}
.brand .lockup{height:46px}
.brand .oneline{display:none;height:18px}
.links{display:flex;align-items:center;gap:4px;font-family:var(--display);font-weight:600;font-size:18px;line-height:1}
.links a{padding:10px 12px;border-radius:var(--r-pill);color:var(--ink-2);text-decoration:none}
.links a:hover,.links a[aria-current="page"]{color:var(--ink);background:var(--wash)}
.links a.btn{margin-left:10px;min-height:46px;padding:0 20px;font-size:18px;color:var(--on-dark);background:var(--copper);border-color:var(--copper)}
.links a.btn:hover{background:var(--copper-deep);border-color:var(--copper-deep);color:var(--on-dark)}
.menu{display:none;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--ink);border-radius:var(--r-pill);background:transparent;color:var(--ink);font-family:var(--display);font-weight:600;font-size:17px;cursor:pointer}
@media (max-width:1080px){
  .menu{display:inline-flex}
  .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;padding:10px var(--gutter) 22px;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 24px 40px -30px rgba(26,26,26,.45)}
  .links.open{display:flex}
  .links a{padding:14px 12px;border-radius:12px}
  .links a.btn{margin:12px 0 0;min-height:52px}
}
@media (max-width:600px){
  .brand .lockup{display:none}
  .brand .oneline{display:block}
  .nav{min-height:64px}
}

/* home hero: the headline runs the full width of the sheet, then the four doors on the left and the package on the right */
.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);column-gap:clamp(36px,5vw,84px);row-gap:clamp(30px,3.6vw,52px);align-items:start;padding-block:clamp(36px,6vw,92px) clamp(64px,8vw,120px)}
.hero-top{grid-column:1/-1;min-width:0}
.hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero-line{font-family:var(--display);font-weight:600;font-size:clamp(46px,7.4vw,96px);line-height:.93;color:var(--ink);letter-spacing:-.02em;max-width:15em}
.doors{margin-top:10px}
.doors{display:inline-flex;flex-wrap:wrap;gap:4px;align-self:flex-start;padding:5px;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-pill)}
.door{appearance:none;-webkit-appearance:none;border:0;background:transparent;min-height:46px;padding:0 18px;border-radius:var(--r-pill);color:var(--ink-2);font-family:var(--display);font-weight:600;font-size:19px;line-height:1;cursor:pointer;transition:background-color .15s,color .15s}
.door:hover{color:var(--ink);background:var(--paper)}
.door[aria-selected="true"]{background:var(--steel);color:var(--on-dark)}
@media (max-width:560px){
  .doors{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:20px}
  .door{border-radius:15px;padding:0 10px;font-size:17px}
}
.panel h2{font-size:clamp(30px,3.3vw,46px);line-height:1.02;letter-spacing:-.01em;max-width:16em}
.panel .tagline{margin-top:12px;font-size:clamp(19px,1.7vw,23px)}
.panel .lede{margin-top:12px}
.panel .more{display:inline-block;margin-top:16px}
.panel .for{display:none}
.js .panel:not(.is-active){display:none}
.js .doors-used .panel.is-active,.js.doors-used .panel.is-active{animation:panel-in .26s ease-out}
@keyframes panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.no-js .doors{display:none}
.no-js .panel .for{display:block;margin-bottom:10px}
.no-js .panel+.panel{margin-top:36px;padding-top:30px;border-top:1px solid var(--rule)}
@media (max-width:900px){.hero{grid-template-columns:1fr}}

/* the package: a stack of sheets, the top one framed like a drawing sheet with a steel title bar */
.stack{position:relative;min-width:0}
.sheet{position:relative;z-index:1;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-sheet);box-shadow:var(--lift);outline:1px solid var(--rule-2);outline-offset:-8px}
@media (min-width:901px){
  .stack{margin-top:6px}
  .stack::before,.stack::after{content:"";position:absolute;inset:0;z-index:0;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-sheet)}
  .stack::before{transform:translate(12px,14px) rotate(1.5deg)}
  .stack::after{transform:translate(6px,7px) rotate(.7deg)}
}
.sheet-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 14px;margin:8px 8px 0;padding:16px 16px 14px;background:var(--steel);border-bottom:4px solid var(--brass);border-radius:2px 2px 0 0}
.sheet-head .t{font-family:var(--display);font-weight:600;font-size:27px;line-height:1.1;color:var(--on-dark)}
.sheet-head .s{font-size:14px;color:var(--on-steel-2)}
.docs{list-style:none;margin:0;padding:4px 24px}
.docs li{display:grid;grid-template-columns:2.1em minmax(0,1fr);gap:1px 10px;padding:11px 0;border-top:1px solid var(--rule)}
.docs li:first-child{border-top:0}
.docs .n{grid-row:span 2;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.35;color:var(--copper)}
.docs b{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3}
.docs span{font-size:15px;line-height:1.45;color:var(--ink-2)}
.sheet-foot{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;padding:14px 24px 20px;border-top:2px solid var(--ink);margin-inline:8px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.sheet-foot .rev{color:var(--copper);margin-top:1px}
.sheet-foot a{font-family:var(--display);font-weight:600;font-size:16px}

/* sections */
.section{padding-block:clamp(72px,9vw,132px)}
.section.tight{padding-top:0}
.sec-head{display:grid;gap:18px;max-width:46em;margin-bottom:clamp(34px,4.4vw,60px)}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start}
.split .prose{max-width:none}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* the steel band: at most one per page, on the section that says how to start (the steps on Home and Services,
   "bring us in" on the audience pages). Full-bleed steel with the drafting grid in paper lines; brass for anything
   you'd point at. */
.section.band{background-color:var(--steel);color:var(--on-dark);padding-block:clamp(80px,10vw,144px);
  background-image:
    linear-gradient(rgba(250,248,243,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(250,248,243,.10) 1px,transparent 1px),
    linear-gradient(rgba(250,248,243,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(250,248,243,.045) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center top}
.section.band h2,.section.band h3,.section.band b{color:var(--on-dark)}
.section.band p,.section.band .prose p,.section.band .prose p.muted,.section.band .muted{color:var(--on-steel-2)}
.section.band .lede,.section.band .prose p:first-child{color:var(--on-dark)}
.section.band a:not(.btn){color:var(--brass)}
.section.band :focus-visible{outline-color:var(--brass)}
.band+.section.tight{padding-top:clamp(72px,9vw,132px)}

/* trouble and fix. "What often happens" is a dashed outline: the drafting convention for something hidden or
   not drawn. "What we do" is a white sheet with a steel edge and a copper revision triangle. A copper drafting
   leader (dot to arrowhead) runs from one to the other on desktop; on phones each card carries its own label. */
.fixes{display:grid;gap:18px}
.fixes-head{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);font-family:var(--display);font-weight:600;font-size:20px;line-height:1.2}
.fixes-head span{padding-bottom:10px}
.fixes-head span:first-child{grid-column:1;color:var(--ink-2);border-bottom:2px dashed var(--rule-2)}
.fixes-head span:last-child{grid-column:3;color:var(--steel);border-bottom:3px solid var(--steel)}
.fix{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:stretch}
.fix .was{grid-column:1;grid-row:1}
.fix .now{grid-column:3;grid-row:1}
.fix::after{content:"";grid-column:2;grid-row:1;align-self:center;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 14'%3E%3Ccircle cx='3' cy='7' r='3' fill='%239C5221'/%3E%3Cpath d='M3 7h33' stroke='%239C5221' stroke-width='2'/%3E%3Cpath d='M34 1.5 48 7 34 12.5z' fill='%239C5221'/%3E%3C/svg%3E") center/48px 14px no-repeat}
.fix .was,.fix .now{min-width:0;border-radius:var(--r-sheet);padding:24px 26px}
.fix .was{border:2px dashed var(--rule-2);background:transparent}
.fix .was h3{color:var(--ink-2)}
.fix .was p{margin-top:8px;color:var(--ink-2)}
.fix .now{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;align-content:start;background:var(--sheet);border:1px solid var(--rule);border-left:6px solid var(--steel);box-shadow:var(--lift)}
.fix .now .rev{grid-row:1/4;margin-top:4px;color:var(--copper)}
.fix .now .lbl,.fix .now h3,.fix .now p{grid-column:2}
.fix .now p{margin-top:8px;color:var(--ink)}
.fix .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;font-family:var(--display);font-weight:600;font-size:15px;line-height:1.2;letter-spacing:.02em}
.fix .was .lbl{color:var(--ink-2)}
.fix .now .lbl{color:var(--steel)}
/* a timeline instead of a trouble (architects: "When" / "What you get"): the left side is a quiet wash, not a dashed guess */
.fixes.when .fixes-head span:first-child{border-bottom-style:solid;border-bottom-color:var(--rule-2)}
.fixes.when .fix .was{border:0;background:var(--wash)}
@media (max-width:760px){
  .fixes{gap:30px}
  .fixes-head{display:none}
  .fix{grid-template-columns:1fr;gap:8px}
  .fix .was,.fix .now{grid-column:1;padding:18px 18px 20px}
  .fix .now{grid-row:2}
  .fix::after{display:none}
  .fix .lbl{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;margin-bottom:6px}
}

/* how it works: a real sequence, so the numbers stay */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
.steps.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.steps li{padding-top:18px;border-top:2px solid var(--ink)}
.steps .n{display:block;font-family:var(--display);font-weight:600;font-size:clamp(56px,6vw,82px);line-height:.9;color:var(--copper)}
.steps.five .n{font-size:clamp(44px,4.4vw,60px)}
.steps h3{margin-top:14px}
.steps p{margin-top:8px;color:var(--ink-2)}
@media (max-width:1000px){.steps.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.steps,.steps.five{grid-template-columns:1fr}}

/* on the steel band the steps sit on one dimension string: brass numbers are the dimensions, each step is a
   measured run, and a brass architectural slash tick marks where one ends and the next begins */
.band .steps{column-gap:0;row-gap:clamp(44px,5vw,64px)}
.band .steps li{padding-top:0;border-top:0}
.band .steps .n{position:relative;padding:0 0 20px 2px;border-bottom:1px solid var(--line-on-steel);font-size:clamp(68px,8.6vw,124px);line-height:.86;color:var(--brass)}
.band .steps.five .n{font-size:clamp(54px,5.4vw,82px)}
.band .steps .n::before,.band .steps .n::after{content:"";position:absolute;bottom:-11px;width:2px;height:22px;background:var(--brass);transform:rotate(45deg)}
.band .steps .n::before{left:-1px}
.band .steps .n::after{right:-1px}
.band .steps h3{margin-top:28px}
.band .steps h3,.band .steps p{padding-right:clamp(18px,2.6vw,40px)}
.band .steps p{color:var(--on-steel-2)}
.band .sec-head{margin-bottom:clamp(44px,5.4vw,76px)}

/* packages: a schedule, one row per package */
.pk{border-top:3px solid var(--steel)}
.pk-row{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.7fr) minmax(0,.7fr);gap:10px clamp(18px,3vw,48px);align-items:start;padding:30px 0;border-bottom:1px solid var(--rule)}
.pk-row .anchor{position:absolute;top:0;left:0;width:0;height:0}
.pk-row .by{margin-top:8px;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.25;color:var(--steel)}
.adds{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:14px}
.adds .lab{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink)}
.pk-row .adds a{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border:2px solid var(--copper);border-radius:var(--r-pill);font-family:var(--display);font-weight:600;font-size:17px;line-height:1;color:var(--copper);text-decoration:none;background:var(--sheet)}
.pk-row .adds a:hover{background:var(--copper);color:var(--on-dark)}
.pk-row .k{font-family:var(--display);font-weight:600;font-size:18px;color:var(--steel)}
.pk-row h3{margin-top:4px;font-size:clamp(24px,2.4vw,32px);line-height:1.08}
.pk-row .desc p{color:var(--ink-2)}
.pk-row .desc p+p{margin-top:10px}
.pk-row .fee{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.pk-row .fee a{font-family:var(--display);font-weight:600;font-size:18px;color:var(--copper)}
/* the top package is the sheet on the table: white, framed in steel, with a heavy copper head and a brass pill */
.pk-row.lead{background:var(--sheet);border:2px solid var(--steel);border-top:8px solid var(--copper);border-radius:var(--r-sheet);box-shadow:var(--lift);padding:30px 24px;margin-block:14px}
.pk-row.lead .k{font-size:21px;color:var(--copper)}
.pill{display:inline-block;margin-left:8px;padding:4px 10px;border-radius:var(--r-pill);background:var(--brass);color:var(--ink);font-family:var(--display);font-weight:600;font-size:14px;line-height:1.2;vertical-align:3px}
@media (min-width:761px){.pk-row.lead{margin-inline:-26px;padding-inline:26px}}
@media (max-width:760px){.pk-row{grid-template-columns:1fr;gap:10px}.pk-row.lead{padding-inline:18px}}
.pk.narrow .pk-row{grid-template-columns:1fr;gap:10px}
.aside{margin-top:20px;color:var(--ink-2)}
.aside b{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink)}

/* the full package list on Services: copper numbers, a real sequence of eight documents */
.doclist{list-style:none;padding:0;border-top:3px solid var(--steel)}
.doclist li{display:grid;grid-template-columns:3em minmax(0,.9fr) minmax(0,2fr);gap:6px clamp(16px,3vw,40px);padding:22px 0;border-bottom:1px solid var(--rule)}
.doclist .n{font-family:var(--display);font-weight:600;font-size:30px;line-height:1.02;color:var(--copper)}
.doclist b{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.2}
.doclist p{color:var(--ink-2)}
.doclist-foot{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;margin-top:18px;color:var(--ink-2);max-width:52em}
.doclist-foot .rev{color:var(--copper);margin-top:3px}
@media (max-width:700px){.doclist li{grid-template-columns:2.4em minmax(0,1fr)}.doclist p{grid-column:2}}

/* simple lists with a copper tick */
.ticks{list-style:none;padding:0;display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;color:var(--ink-2)}
.ticks li::before{content:"";width:14px;height:3px;margin-top:.75em;background:var(--copper)}
.ticks b{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink)}
.ticks.spaced{margin-top:28px}

/* checks: heading plus paragraph, two columns */
.checks{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px)}
.checks li{padding:24px 0;border-top:1px solid var(--rule)}
.checks li:nth-child(-n+2){border-top:3px solid var(--steel)}
.checks p{margin-top:8px;color:var(--ink-2)}
.checks.one{grid-template-columns:1fr}
.checks.one li:nth-child(2){border-top:1px solid var(--rule)}
@media (max-width:760px){.checks{grid-template-columns:1fr}.checks li:nth-child(2){border-top:1px solid var(--rule)}}

/* a note from a recent job: a sheet on the table, with a copper head */
.memo{background:var(--sheet);border:1px solid var(--rule);border-top:6px solid var(--copper);border-radius:var(--r-sheet);box-shadow:var(--lift);padding:clamp(22px,3vw,36px)}
.memo+.memo{margin-top:20px}
.memo .k{font-family:var(--display);font-weight:600;font-size:18px;color:var(--copper)}
.memo p{margin-top:10px;font-size:clamp(20px,1.8vw,24px);line-height:1.42;color:var(--ink)}

/* panels */
.panel-wash{background:var(--wash);border-radius:var(--r-panel);padding:clamp(28px,5vw,72px)}
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(24px,5vw,72px);align-items:start}
.story .kicker{margin-bottom:14px}
.story p+p{margin-top:16px}
.story .prose p+p{margin-top:0}
.story .lede{color:var(--ink)}
@media (max-width:860px){.story{grid-template-columns:1fr}}
/* the quote box at the end of every page: steel with the grid and a brass button, so the page closes on the
   same sheet it opened on */
.cta-band{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:28px;align-items:center;color:var(--on-dark);border-radius:var(--r-panel);padding:clamp(34px,5.6vw,76px);
  background-color:var(--steel);
  background-image:
    linear-gradient(rgba(250,248,243,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(250,248,243,.10) 1px,transparent 1px),
    linear-gradient(rgba(250,248,243,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(250,248,243,.045) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center center}
.cta-band h2{color:var(--on-dark);font-size:clamp(38px,5.6vw,76px)}
.cta-band p{margin-top:14px;max-width:40em;color:var(--on-steel-2)}
.cta-band a:not(.btn){color:var(--brass)}
.cta-band :focus-visible{outline-color:var(--brass)}
@media (max-width:760px){.cta-band{grid-template-columns:1fr}}

/* sub-page hero */
.subhero{padding-block:clamp(40px,6.4vw,104px) clamp(56px,7vw,112px);max-width:62em}
.subhero .kicker{margin-bottom:20px}
.subhero h1{max-width:12em}
.subhero .tagline{margin-top:24px}
.subhero .lede{margin-top:20px}
.subhero .actions{margin-top:32px}
.subhero.short h1{font-size:clamp(40px,5.6vw,74px);max-width:16em}

/* FAQ */
.faq{border-top:3px solid var(--steel);max-width:54em}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:20px 0;list-style:none;cursor:pointer;font-family:var(--display);font-weight:600;font-size:clamp(20px,1.9vw,24px);line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin:5px 4px 0 0;border-right:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:10px}
.faq .a{padding:0 0 22px;max-width:46em;color:var(--ink-2)}

/* contact: the quick quote (r19, Mia 2026-10-24). Seth: "too long... Get their input fast and easy... buttons for
   size and what they want. Make it fun." Four short steps. Once site.js adds .quiz-on to the sheet, one step shows at
   a time with a progress bar; without JavaScript every step shows, stacked, and it posts as a plain form. Every card,
   chip and switch is a real radio or checkbox underneath, so the keyboard, screen readers and the submitted fields
   are the same as before. Selected cards are copper (what you press); selected chips are steel, like the home tabs. */
.contact{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.42fr);gap:clamp(28px,5vw,72px);align-items:start;padding-block:clamp(32px,5vw,80px) clamp(64px,8vw,112px)}
.contact-copy{display:grid;gap:18px}
.contact-copy h1{font-size:clamp(46px,6vw,80px)}
@media (min-width:861px){.contact-copy{position:sticky;top:112px}}
@media (max-width:860px){.contact{grid-template-columns:1fr;gap:24px}.contact-copy{gap:12px}.contact-copy .kicker{display:none}}

.form-sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r-sheet);box-shadow:var(--lift);padding:clamp(20px,3vw,36px);outline:1px solid var(--rule-2);outline-offset:-8px}
.form-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:10px 12px;margin-bottom:24px}
.form-head .t{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.2vw,30px);line-height:1.1}
.prog-t{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2;color:var(--copper)}
.prog{grid-column:1/-1;height:3px;background:var(--steel)}
.prog span{display:none}
.quiz-on .prog{height:8px;border-radius:var(--r-pill);background:var(--wash);overflow:hidden}
.quiz-on .prog span{display:block;width:25%;height:100%;border-radius:inherit;background:var(--copper);transition:width .35s cubic-bezier(.3,1.3,.6,1)}

form{display:block}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
label,legend{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.25;color:var(--ink)}
label small,legend small{font-family:var(--body);font-weight:400;font-size:14px;color:var(--ink-2)}
input,select,textarea{width:100%;min-width:0;font:inherit;font-size:16px;line-height:1.4;padding:12px 14px;border:1px solid var(--rule-2);border-radius:var(--r-field);background:var(--paper);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(47,72,88,.28)}
textarea{min-height:110px;resize:vertical}

/* steps: stacked without JS, one at a time with it */
.step{border:0;padding:0;margin:0;min-width:0}
.step:focus{outline:none}
.step+.step{margin-top:34px;padding-top:28px;border-top:1px solid var(--rule)}
.step>legend.q{float:left;width:100%;padding:0;margin:0 0 18px;font-size:clamp(30px,3.2vw,42px);line-height:1.02;letter-spacing:-.01em}
.step>legend.q+*{clear:both}
.quiz-on .step{display:none}
.quiz-on .step+.step{margin-top:0;padding-top:0;border-top:0}
.quiz-on .step.on{display:block;animation:step-in .28s ease-out}
@keyframes step-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.stepnav{display:flex;align-items:center;gap:12px;margin-top:26px}
.stepnav .go,.stepnav .back{display:none}
.form-sheet:not(.quiz-on) .stepnav:not(.send){display:none}
.quiz-on .stepnav .go,.quiz-on .stepnav .back{display:inline-flex}
.stepnav .go,.stepnav [type=submit]{margin-left:auto;min-width:10em}
@media (max-width:540px){.stepnav .go,.stepnav [type=submit]{flex:1;min-width:0}}

/* the hidden control under every card, chip and switch: still focusable, still submitted */
.card input,.chip input,.toggle input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}

/* 1. what you need: big cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.card.lead{grid-column:1/-1}
.card .c{display:grid;grid-template-columns:minmax(0,1fr) 26px;column-gap:12px;align-content:center;min-height:74px;height:100%;padding:14px 16px;border:2px solid var(--rule-2);border-radius:14px;background:var(--paper);transition:border-color .15s,background-color .15s,box-shadow .15s,transform .12s}
.card .c b{grid-column:1;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.15;color:var(--ink)}
.card .c small{grid-column:1;margin-top:3px;font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.card .c::after{content:"";grid-column:2;grid-row:1/3;align-self:center;width:24px;height:24px;border:2px solid var(--rule-2);border-radius:50%;background:var(--sheet) center/14px 14px no-repeat;transition:border-color .15s,background-color .15s}
.card.lead .c{min-height:86px;background:var(--sheet);border-color:var(--steel-tint)}
.card.lead .c b{font-size:23px}
.card:hover .c{border-color:var(--steel);background:var(--sheet)}
.card:active .c{transform:scale(.985)}
.card input:checked+.c{border-color:var(--copper);background:var(--copper-tint);box-shadow:0 12px 24px -18px rgba(156,82,33,.8)}
.card input:checked+.c::after{border-color:var(--copper);background-color:var(--copper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");animation:pop .32s ease-out}
.card input:focus-visible+.c{outline:3px solid var(--steel);outline-offset:3px}
@keyframes pop{0%{transform:scale(.55)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* chips: homes, systems, and the optional details */
.grp{border:0;padding:0;margin:0 0 22px;min-width:0}
.grp>legend{padding:0;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chip span{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:48px;padding:0 18px;border:2px solid var(--rule-2);border-radius:var(--r-pill);background:var(--paper);font-family:var(--display);font-weight:600;font-size:19px;line-height:1.1;color:var(--ink);transition:border-color .15s,background-color .15s,color .15s,transform .12s}
.chip:hover span{border-color:var(--steel);background:var(--sheet)}
.chip:active span{transform:scale(.95)}
.chip input:checked+span{background:var(--steel);border-color:var(--steel);color:var(--on-dark)}
.chip input:focus-visible+span{outline:3px solid var(--steel);outline-offset:3px}

/* 2. how big: one slider per home. The big number is the readout and also the "type it" box. */
.quiz-on .sf-plain{display:none}
.sf-plain{margin-bottom:22px}
.sizes{display:grid;gap:12px;margin:0 0 22px}
.size{padding:16px 18px 12px;border:2px solid var(--rule);border-radius:14px;background:var(--paper);transition:border-color .2s}
.size:not(.cold){border-color:var(--rule-2)}
.size-top{display:flex;align-items:flex-end;gap:10px}
.size-top label{flex:1;min-width:0;padding-bottom:6px;font-size:18px}
.hut{flex:none;width:34px;height:30px;margin-bottom:5px;color:var(--steel-tint);transform:scale(var(--s,.75));transform-origin:50% 100%;transition:transform .2s cubic-bezier(.3,1.4,.6,1),color .2s}
.size:not(.cold) .hut{color:var(--copper)}
.read{display:flex;align-items:baseline;gap:6px}
.read input{width:5.6ch;padding:0 2px 2px;border:0;border-bottom:2px dashed var(--rule-2);border-radius:0;background:transparent;font-family:var(--display);font-weight:600;font-size:clamp(36px,4vw,46px);line-height:1;text-align:right;color:var(--copper)}
.read input::placeholder{color:var(--steel-tint);opacity:1}
.read input:focus{box-shadow:none;border-bottom-color:var(--steel);border-bottom-style:solid}
.read span{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink-2)}
.read input:placeholder-shown+span{visibility:hidden}
.size input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:4px 0 0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;--p:27%}
.size input[type=range]:focus{outline:none;box-shadow:none}
.size input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--copper) 0 var(--p),var(--rule) var(--p) 100%)}
.size input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;margin-top:-11px;border:3px solid var(--copper);border-radius:50%;background:var(--sheet);box-shadow:0 4px 10px -4px rgba(26,26,26,.55);transition:transform .12s,border-color .2s}
.size input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.size input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(47,72,88,.35)}
.size input[type=range]::-moz-range-track{height:10px;border-radius:999px;background:var(--rule)}
.size input[type=range]::-moz-range-progress{height:10px;border-radius:999px;background:var(--copper)}
.size input[type=range]::-moz-range-thumb{width:26px;height:26px;border:3px solid var(--copper);border-radius:50%;background:var(--sheet);box-shadow:0 4px 10px -4px rgba(26,26,26,.55)}
.size input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgba(47,72,88,.35)}
.size.cold input[type=range]::-webkit-slider-runnable-track{background:var(--rule)}
.size.cold input[type=range]::-webkit-slider-thumb{border-color:var(--steel-tint)}
.size.cold input[type=range]::-moz-range-progress{background:transparent}
.size.cold input[type=range]::-moz-range-thumb{border-color:var(--steel-tint)}
.scale{display:flex;justify-content:space-between;font-size:13px;line-height:1.2;color:var(--ink-2)}
.quip{min-height:1.5em;margin-top:6px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.size:not(.cold) .quip{color:var(--ink)}
.add-home{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;font-family:var(--display);font-weight:600;font-size:18px;color:var(--copper);cursor:pointer}
.add-home::before{content:"+";font-size:24px;line-height:1}
.add-home:hover{text-decoration:underline;text-underline-offset:.25em}
.sizes[hidden],.add-home[hidden],.recap[hidden]{display:none}

/* 3. plans and timing: switches */
.toggle{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;margin-top:12px;padding:14px 16px;border:2px solid var(--rule-2);border-radius:14px;background:var(--paper);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background-color .15s}
.toggle:hover{border-color:var(--steel)}
.toggle .sw{position:relative;width:52px;height:30px;margin-top:1px;border-radius:var(--r-pill);background:var(--rule-2);transition:background-color .2s}
.toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--sheet);box-shadow:0 2px 4px rgba(26,26,26,.3);transition:transform .22s cubic-bezier(.3,1.4,.6,1)}
.toggle input:checked~.sw{background:var(--copper)}
.toggle input:checked~.sw::after{transform:translateX(22px)}
.toggle input:focus-visible~.sw{outline:3px solid var(--steel);outline-offset:3px}
.toggle:has(input:checked){border-color:var(--copper);background:var(--copper-tint)}
.toggle .tt b{display:block;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.2}
.toggle .tt small{display:block;margin-top:3px;font-size:14.5px;line-height:1.4}
.plans-link{transition:opacity .2s}
.plans-link.off{opacity:.45}

/* 4. you: name and email, the rest behind "Add details" */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.recap{margin:0 0 18px;padding:10px 14px;border-radius:12px;background:var(--wash);font-family:var(--display);font-weight:600;font-size:17px;line-height:1.35;color:var(--steel)}
.extra{margin-top:18px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.extra>summary{display:flex;align-items:center;gap:10px;min-height:54px;list-style:none;cursor:pointer;font-family:var(--display);font-weight:600;font-size:19px;color:var(--copper)}
.extra>summary::-webkit-details-marker{display:none}
.extra>summary small{font-family:var(--body);font-weight:400;font-size:14px;color:var(--ink-2)}
.extra>summary::after{content:"";flex:none;width:9px;height:9px;margin-left:auto;margin-right:6px;border-right:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.extra[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.extra>summary:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
.extra-in{display:grid;gap:20px;padding:6px 0 22px}
.extra-in .grp{margin:0}
.extra .chip span{min-height:44px;padding:0 15px;font-size:16.5px}
.note{margin-top:16px;font-size:14px;color:var(--ink-2)}
.thanks{display:none;padding:18px 20px;border-left:4px solid var(--copper);border-radius:0 12px 12px 0;background:var(--wash);color:var(--ink)}
form.sent .thanks{display:block}
form.sent .step,.quiz-on form.sent .step.on{display:none}
@media (max-width:540px){.two,.cards{grid-template-columns:1fr}.card .c{min-height:64px}.card.lead .c{min-height:74px}}

/* plain pages: privacy, thanks, not found */
.page{padding-block:clamp(40px,6.4vw,104px) clamp(64px,8vw,112px)}
.page h1{font-size:clamp(42px,5.8vw,78px);max-width:16em;margin-bottom:8px}

/* footer */
.site-foot{border-top:1px solid var(--rule);padding-block:48px 60px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:28px}
.foot-grid strong{display:block;margin-bottom:6px;font-family:var(--display);font-weight:600;font-size:22px;color:var(--ink)}
.foot-grid p+p{margin-top:4px}
.foot-grid ul{list-style:none;padding:0;display:grid;gap:7px}
.foot-grid a{text-decoration:none;overflow-wrap:anywhere}
.foot-grid a:hover{color:var(--copper);text-decoration:underline}
.legal{margin-top:34px;padding-top:18px;border-top:1px solid var(--rule);font-size:14px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* r18 toggles (Mia, 2026-10-24). Seth on r17: "Lots of words... Very great copy if you're reading it all. But is it
   serving its purpose?" The words stay; the depth moves one tap down into native <details>: no JavaScript, crawlable,
   keyboard and phone friendly. Two kinds, one copper chevron (brass on steel):
   - .fold: the heading is the toggle (steps, the "what we do" cards, checks, the package list).
   - .more: a short copper line under a card ("What's included") or a reader's question on a band.
   Open text reads at body size, never smaller: calm comes from space, not small type. */
details.fold>summary,details.more>summary{list-style:none;cursor:pointer}
details.fold>summary::-webkit-details-marker,details.more>summary::-webkit-details-marker{display:none}

details.fold>summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
details.fold>summary::after{content:"";flex:none;width:11px;height:11px;margin:.5em 4px 0 0;border-right:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(45deg);transition:transform .2s}
details.fold[open]>summary::after{transform:rotate(225deg);margin-top:.8em}
details.fold>summary:hover :is(h3,b){color:var(--copper)}
.band details.fold>summary::after{border-color:var(--brass)}
.band details.fold>summary:hover h3{color:var(--brass-light)}

details.more{margin-top:10px}
details.more>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.2;color:var(--copper)}
details.more>summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
details.more[open]>summary::after{transform:translateY(2px) rotate(225deg)}
details.more>summary:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
details.more>.a{padding:2px 0 8px;max-width:44em}
details.more>.a p{color:var(--ink-2)}
details.more>.a p+p{margin-top:10px}
.section.band details.more>summary{color:var(--brass)}
.section.band details.more>summary:hover{color:var(--brass-light)}
.section.band details.more>.a p{color:var(--on-steel-2)}

/* package cards: name, one line, the button. The full scope sits under "What's included". */
.pk-row .desc .own,.pk-row .desc .key{color:var(--ink)}
@media (min-width:761px){.pk:not(.narrow) .pk-row .desc>details.more:first-child{margin-top:-10px}}
.pk-row .fee .btn{min-height:48px;padding:0 24px;font-size:19px}
.pk-row .fee a.btn-primary{color:var(--on-dark)}
.pk-row .fee a.btn-quiet{color:var(--ink)}
@media (min-width:761px){.pk:not(.narrow) .pk-row .fee{align-items:flex-end;text-align:right}}

/* home: the package sheet lists names only; what each one is for lives on Services */
.docs.names li{align-items:baseline;padding:12px 0}
.docs.names .n{grid-row:auto}
.docs.names b{font-size:21px}

/* home: why Strome and a recent job, side by side */
.story .copy{display:grid;gap:18px;align-content:start}
.story .copy .kicker{margin-bottom:0}
.story .copy .lede{color:var(--ink)}
.story .copy .textlink{justify-self:start}

/* steps: the number stays big; the title opens the detail */
.steps .fold{margin-top:14px}
.steps .fold>summary{justify-content:flex-start;gap:14px}
.steps .fold h3,.band .steps .fold h3{margin-top:0}
.band .steps .fold{margin-top:28px;padding-right:clamp(18px,2.6vw,40px)}
.band .steps .fold h3,.band .steps .fold p{padding-right:0}

/* trouble and fix: the "what we do" title opens its paragraph */
.fix .now details{grid-column:2;min-width:0}

/* Services: the eight documents as an accordion beside the heading */
.doclist.folds li{grid-template-columns:2.4em minmax(0,1fr);gap:0 14px;padding:0}
.doclist.folds .n{padding-top:17px;font-size:26px}
.doclist.folds summary{padding:18px 0}
.doclist.folds b{font-size:22px}
.doclist.folds details p{padding:0 0 22px;max-width:44em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}