/* ============================================================================
   BASE — identical on every Pittsburgh IT build. The visitor never sees any of it.
   Token NAMES are fixed; only the VALUES change per client. Everything below the
   token block is structural: the accessibility floor, the form skeleton, tap
   targets, the motion contract. Roughly 20 lines get rewritten per client and
   several hundred lines of quality are inherited.
   MOBILE FIRST — every rule here is the small-screen rule. Breakpoints add.
   ========================================================================== */
:root{
  --surface:#FFFFFF;
  --surface-2:#F1F1EE;
  --band:#131313;
  --band-ink:#FFFFFF;
  --band-ink-2:#A0A09C;
  --accent-on-band:#F2C500;
  --ink:#121212;
  --ink-2:#4A4A46;
  --ink-3:#5C5C58;
  --accent:#F2C500;
  --accent-2:#FFD827;
  --accent-ink:#131313;
  --line:#DCDCD8;
  --maxw:1220px;
  --gutter:22px;
  --radius:0px;
  --font-display:Chivo,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.08;
  font-weight:700;letter-spacing:-.021em}
p{margin:0 0 1em}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}

/* --- container ------------------------------------------------------------ */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
@media(min-width:760px){:root{--gutter:34px}}
@media(min-width:1180px){:root{--gutter:48px}}

/* --- accessibility floor -------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:var(--accent-ink);padding:12px 18px;border-radius:0 0 var(--radius) 0;
  font-weight:700;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
/* honeypot: OFF-SCREEN, never display:none — a hidden field some bots skip,
   and a screen reader is told to leave it alone. */
.hp{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none}

/* --- tap targets ---------------------------------------------------------- */
a,button,input,select,textarea,summary{font-family:inherit}
.btn,button,input[type=submit]{min-height:48px}
nav a,footer a{display:inline-block;min-height:24px}

/* --- button skeleton (templates restyle the skin, not the mechanics) ------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:14px 26px;border:1px solid transparent;border-radius:var(--radius);
  font-weight:650;font-size:16px;line-height:1.1;text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}

/* --- form skeleton -------------------------------------------------------- */
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--ink);
  font-size:16px;/* 16px stops iOS zooming the page on focus */
  font-family:inherit;transition:border-color .18s ease,box-shadow .18s ease}
.field textarea{min-height:140px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,197,0,.45)}
.field ::placeholder{color:var(--ink-3);opacity:1}
.frow{display:grid;gap:16px}
@media(min-width:680px){.frow{grid-template-columns:1fr 1fr}}
.thanks{display:none;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;background:var(--surface-2)}
.thanks.show{display:block}
.thanks h3{font-size:24px;margin-bottom:10px}
.formerror{color:#121212;font-size:15px;font-weight:600;margin-top:10px}

/* --- MOTION CONTRACT ------------------------------------------------------
   Nothing starts hidden unless JavaScript has already run. The `js` class is set
   by an inline <head> script, and ONLY when prefers-reduced-motion is not set.
   No JS, blocked JS, old browser, or reduced motion => the page is simply visible.
   This is the inverse of how most sites do it, and it is why a script failure
   here cannot produce a blank page on a lead-generating site. */
html.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
html.js .reveal.d2{transition-delay:.16s}
html.js .reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  html.js .reveal,html.js .reveal.in{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* --- nav skeleton --------------------------------------------------------- */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:64px}
.navtoggle{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-right:-10px;background:none;border:0;
  color:inherit;cursor:pointer}
@media(min-width:940px){.navtoggle{display:none}}
.nav-links{display:none}
.nav-links.open{display:flex}
.nav-links{gap:0}
/* Desktop nav reset. Deliberately scoped to #nav so its specificity (1,1,0) beats any
   later `.nav-links{position:absolute…}` a template writes for its mobile drawer —
   equal specificity later in the file wins over a media query, which silently left the
   drawer stacked at the left edge on six of seven templates before this was scoped.
   It sets ONLY the structural properties that must not leak from mobile to desktop;
   gap, colour and type stay the template's business. */
@media(min-width:940px){
  #nav .nav-links,#nav .nav-links.open{display:flex;position:static;inset:auto;
    flex-direction:row;align-items:center;padding:0;margin:0;border:0;background:none;
    width:auto;height:auto;min-height:0;max-height:none;box-shadow:none;transform:none;
    visibility:visible;opacity:1;overflow:visible;
    gap:var(--nav-gap,32px)}
}
html.menu-open,html.menu-open body{overflow:hidden}

/* --- footer skeleton ------------------------------------------------------ */
footer a{text-decoration:none}
.credit{font-size:13.5px}
.credit a{text-decoration:underline;text-underline-offset:3px}

/* --- button rows ----------------------------------------------------------
   On a phone two CTAs sitting side by side at different intrinsic widths look
   accidental, and neither is a comfortable thumb target. They go full width until
   there is room for a row. Scoped as `.btnrow > .btn` (0,2,0) so a template's own
   `.btn{}` rule later in the file cannot silently undo it — the same cascade trap
   that left the desktop nav stacked. */
.btnrow{display:flex;flex-wrap:wrap;gap:12px}
.btnrow > .btn{flex:1 1 100%}
@media(min-width:560px){.btnrow > .btn{flex:0 0 auto}}

/* --- long-string guard ----------------------------------------------------
   A client email address or a compound word set in a heavy display face at
   20px uppercase does not wrap, and pushes a 390px page sideways. Found on the
   Ironworks contact page: dispatch@vantagemechanical.com forced the document to
   462px. Plumbing, so every template inherits the fix. */
/* Headings are deliberately NOT in this guard. break-word on a display heading
   shatters a word mid-syllable the moment its container is narrower than the word —
   it turned "Everything we make," into "Everyth / ing we / make," on Marquee. A
   heading that does not fit is a LAYOUT bug; fix the column, do not hyphenate it. */
h1,h2,h3,h4{overflow-wrap:normal;word-break:normal}
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}
.crow span,.crow b,.cinfo span,address{overflow-wrap:anywhere}

/* --- utility -------------------------------------------------------------- */
.sec{padding:64px 0}
@media(min-width:760px){.sec{padding:96px 0}}
@media(min-width:1180px){.sec{padding:124px 0}}
.eyebrow{font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px}
.lead{font-size:19px;line-height:1.6;color:var(--ink-2)}
@media(min-width:760px){.lead{font-size:21px}}


/* ============================================================
   TEMPLATE 10 — LEDGER
   Concept: one honest ledger instead of a brochure. Every job on
   the site is a priced row, every number says whether it is flat
   or a starting point, and what is NOT in the price is printed
   beside what is — so a visitor works out their own total before
   they ring.

   SIGNATURE ELEMENT — THE RATE MARK.
   A small square that appears wherever a number appears and
   answers the one question this industry avoids: is that the
   real number?
     SOLID (yellow, ink border)  the price is FLAT. It is what you
                                 pay on the day.
     HOLLOW (ink border only)    the price is a STARTING POINT,
                                 and what moves it is printed on
                                 the same line.
   It governs a row of the estimator, a service, a line of the
   rate sheet, the price on the nav tab and the total in the
   footer, and it means exactly the same thing in all five.
   THE ESTIMATOR is the mark at full size: jobs down, home sizes
   across, the price in the cell, and the crew and hours under it
   so the number has a shape. Delete the square and you lose
   whether the number can be trusted.

   COLOUR — one loud accent, and a hard rule about it.
   Signal yellow #F2C500 is 1.76:1 on white, so it is NEVER type
   on white. Every eyebrow, label and link base.css would have set
   in the accent is re-set in ink below, and :focus-visible is
   re-set to an ink outline for the same reason. As a FILL with
   near-black on it, and as TYPE on the dark band, the same yellow
   is 11.34:1. On white it marks; on black it speaks.

   MOBILE FIRST — every base rule is the small-screen rule and
   every breakpoint below is min-width.
   ============================================================ */

:root{
  --sq:11px;         /* the rate mark, one size everywhere      */
  --rule:2px;        /* a heading rule                          */
  --cell:14px;       /* the vertical padding of one ledger row  */
}

/* --- preview bar (demo builds only) ------------------------- */
.tplbar{background:var(--band);color:var(--band-ink-2);font-size:12.5px;
  letter-spacing:.01em;padding:9px 20px;text-align:center;position:relative;z-index:120}
.tplbar b{color:var(--accent-on-band);font-weight:600}

/* base.css resets ul but not ol; "what happens next" is ordered */
ol{margin:0;padding:0;list-style:none}

/* THE ACCENT IS NOT READABLE AS TYPE ON WHITE. base.css sets the
   eyebrow and the focus ring in it, so both are re-set here. */
.eyebrow{color:var(--ink-3);font-size:10.5px;letter-spacing:.2em;font-weight:600;margin:0 0 14px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:0}

/* ============================================================
   THE RATE MARK — the signature, drawn once
   ============================================================ */
.mk{display:inline-block;flex:0 0 var(--sq);width:var(--sq);height:var(--sq);
  border:2px solid var(--ink);background:transparent;position:relative;top:1px}
.mk--flat{background:var(--accent)}
.onband .mk{border-color:var(--band-ink)}
.onband .mk--flat{background:var(--accent)}
/* ON AN ACCENT-FILLED SURFACE THE MARK INVERTS. A yellow square on a
   yellow ground is invisible, so on the nav tab, the accent card and
   the thank-you bar "solid" is filled with the ink instead. The
   semantic is unchanged: solid = flat, hollow = a starting point. */
.ratetab .mk,.acell .mk,.thmark .mk{border-color:var(--accent-ink)}
.ratetab .mk--flat,.acell .mk--flat,.thmark .mk--flat{background:var(--accent-ink)}
/* the legend. It sits ABOVE the data — a key that arrives after
   the table is not a key. */
.key{display:grid;gap:0;margin:26px 0 0;border-top:var(--rule) solid var(--ink)}
.key li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.key b{color:var(--ink);font-family:var(--font-body);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.key span{display:block}
@media(min-width:760px){
  .key{grid-template-columns:1fr 1fr}
  .key li{padding:12px 20px 12px 0}
  .key li:first-child{border-right:1px solid var(--line)}
}

/* ============================================================
   TYPE — Chivo 900 for anything large, IBM Plex Sans for every
   label and every line of body copy. Both faces have monospaced
   digits by default (615 and 600 units), which is why a column of
   prices lines up here whether or not tabular-nums is honoured.
   ============================================================ */
.h-xl{font-size:clamp(35px,8.2vw,63px);line-height:1.0;letter-spacing:-.03em;font-weight:900}
.h-lg{font-size:clamp(27px,5.2vw,46px);line-height:1.03;letter-spacing:-.026em;font-weight:900}
.h-md{font-size:clamp(21px,3.5vw,29px);line-height:1.1;letter-spacing:-.018em;font-weight:700}
.measure{max-width:58ch}
.pre{white-space:pre-line}
.lead{font-size:17px;line-height:1.6;color:var(--ink-2)}
.kicker{margin:0 0 16px;font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3)}
.fineprint{font-size:12.5px;color:var(--ink-3);margin:14px 0 0;max-width:54ch}
.rate{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.note{margin:26px 0 0;padding:18px 0 0;border-top:var(--rule) solid var(--ink);
  font-size:14.5px;line-height:1.62;color:var(--ink-2);max-width:70ch}
.stone{background:var(--surface-2)}
.onband{background:var(--band);color:var(--band-ink)}
.onband h1,.onband h2,.onband h3,.onband b{color:var(--band-ink)}
.onband p,.onband .lead{color:var(--band-ink-2)}
.onband .kicker,.onband .eyebrow{color:var(--accent-on-band)}
.plainlink{display:inline-block;color:var(--ink);text-decoration:none;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding-bottom:4px;border-bottom:var(--rule) solid var(--accent)}
.plainlink:hover{border-bottom-color:var(--ink)}
.sec-tight{padding-top:0}

/* --- buttons: a hard cell, never a pill --------------------- */
.btn{border-radius:0;padding:17px 26px;font-family:var(--font-body);font-weight:600;
  font-size:12.5px;letter-spacing:.15em;text-transform:uppercase}
.btn-primary{border-color:var(--ink)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--ink)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--surface)}
.onband .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.onband .btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.onband .btn-line{color:var(--band-ink);border-color:var(--band-ink)}
.onband .btn-line:hover{background:var(--band-ink);color:var(--band)}

/* ============================================================
   NAV — THE PRICE TAB.
   The right-hand element of the bar is not a link and not a
   button: it is the PRICE, on a solid yellow tab that hangs
   BELOW the bar and crosses its rule, the way a tab hangs off
   the edge of a ledger page. The cheapest real number on the
   site is therefore pinned to the top of every page, with its
   rate mark, and tapping it goes to the estimator rather than to
   a form. None of the other nine bars carries a number.

   On a phone the tab becomes a full-width yellow strip directly
   under the bar row — the two things somebody wants at 8am are
   what it costs and how to start — and the four page links open
   IN FLOW underneath it. Never absolutely positioned: an
   absolute drawer is what leaked onto desktop on six of the
   first seven templates.
   ============================================================ */
#nav{position:sticky;top:0;background:var(--surface)}
.nav-inner{flex-wrap:wrap;gap:0;min-height:0;align-items:stretch;position:relative}
.wm{display:flex;align-items:center;gap:10px;order:1;margin-right:auto;min-height:56px;
  text-decoration:none;color:var(--ink);font-family:var(--font-display);font-weight:900;
  font-size:clamp(19px,4.8vw,23px);letter-spacing:-.03em;line-height:1;white-space:nowrap}
.wm i{display:block;width:13px;height:13px;flex:0 0 13px;background:var(--accent);
  border:2px solid var(--ink)}
.wm:hover i{background:var(--ink)}
.navtoggle{order:2;align-self:center}
.bars{display:block;width:22px}
.bars i{display:block;height:2px;background:var(--ink);margin:5px 0}
.navrow{order:1;display:flex;align-items:center;justify-content:space-between;
  flex:1 1 100%;border-bottom:1px solid var(--ink)}
/* the tab */
.ratetab{order:3;flex:1 1 100%;display:flex;align-items:center;gap:12px;
  background:var(--accent);color:var(--accent-ink);text-decoration:none;
  padding:9px var(--gutter);margin:0 calc(var(--gutter) * -1);min-height:44px}
.ratetab .rtv{display:flex;align-items:center;gap:9px;line-height:1.15;
  font-family:var(--font-display);font-weight:900;font-size:15px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ratetab .rtl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  margin-left:auto;text-align:right;line-height:1.2}
.ratetab:hover{background:var(--accent-2)}
/* the drawer: in flow, full width, ruled rows */
.nav-links{order:4;flex:1 1 100%;flex-direction:column;gap:0}
#nav .nav-links.open{display:flex}
.nav-links a{display:flex;align-items:center;gap:11px;padding:16px 0;min-height:56px;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.nav-links a::before{content:"";width:9px;height:9px;flex:0 0 9px;border:2px solid var(--line)}
.nav-links a[aria-current]::before,.nav-links .navcta::before{
  background:var(--accent);border-color:var(--ink)}
.nav-links a:hover::before{border-color:var(--ink)}
.nav-links .navcta{border-bottom:0;color:var(--ink)}
@media(min-width:940px){
  #nav{padding-bottom:38px}
  .nav-inner{flex-wrap:nowrap;min-height:64px;align-items:center}
  /* the rule is inset to the GUTTER so it lands on the same left and right edge as
     every section below it. On .nav-inner's own border it sat on the padding box. */
  .nav-inner::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);
    bottom:0;height:1px;background:var(--ink)}
  .navrow{display:contents}
  .wm{min-height:0;font-size:23px}
  #nav .nav-links,#nav .nav-links.open{display:flex;flex:0 0 auto;gap:30px}
  .nav-links a{border:0;padding:0;min-height:24px;font-size:11.5px;letter-spacing:.15em;
    color:var(--ink-2)}
  /* on desktop the mark appears ONLY where it means something: the page you are
     on, and the action. Five hollow squares in a row was rhythm, not information. */
  .nav-links a::before{display:none}
  .nav-links a[aria-current]::before,.nav-links .navcta::before{display:block;
    width:8px;height:8px;flex:0 0 8px}
  .nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
  .nav-links .navcta{color:var(--ink)}
  .nav-links .navcta::before{background:var(--accent);border-color:var(--ink)}
  /* the tab hangs off the bottom edge and crosses the rule */
  .ratetab{position:absolute;right:var(--gutter);top:calc(100% + 1px);flex:0 0 auto;
    width:auto;margin:0;padding:6px 18px;min-height:0;gap:16px;line-height:1.15}
  .ratetab .rtl{margin-left:0;font-size:10px;text-align:left}
  .ratetab .rtv{font-size:16px}
}
#nav.scrolled .nav-inner::after{height:2px}
#nav.scrolled .navrow{border-bottom-width:2px}

/* ============================================================
   HOME — HERO 3: FULL-SCREEN TYPOGRAPHIC STATEMENT.
   One sentence, set as large as the page can carry, with the
   accent sweeping in behind the second half of it. No photograph:
   on a page whose entire argument is that the numbers are
   published, a stock picture of somebody smiling with a mop is
   the opposite of the argument. The rate strip sits inside the
   same section so the three lead prices are on the first screen
   as well. No height here is viewport-derived.
   ============================================================ */
.hero-stmt{padding:34px 0 0}
.hero-stmt h1{max-width:15ch}
.hero-stmt .lead{max-width:52ch;margin-top:22px}
.hero-stmt .btnrow{margin-top:26px}
@media(min-width:900px){
  .hero-stmt{padding:46px 0 0}
  .hero-stmt h1{max-width:21ch}
  .hero-stmt .stmtgrid{display:grid;grid-template-columns:1.42fr .58fr;gap:48px;align-items:end}
  .hero-stmt .lead{margin-top:0}
}

/* --- THE DRAWN MOMENT: the accent sweeps in behind the words --
   One drawn moment on the site, in the hero, and it is the accent
   doing its actual job — marking. The block wipes left to right
   behind the second half of the headline. Gated behind html.js,
   so no JS, blocked JS or reduced motion renders it already
   marked rather than never marked. */
.hl{display:inline}
.hl b{font-weight:inherit;padding:0 .05em;margin:0 -.05em;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 88%;background-size:100% .40em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
html.js .hl b{background-size:0 .40em;
  animation:sweep .75s cubic-bezier(.22,.61,.36,1) .35s 1 forwards}
@keyframes sweep{to{background-size:100% .40em}}

/* --- the rate strip: three numbers, on the first screen ------ */
.strip{margin-top:34px;border-top:var(--rule) solid var(--ink);display:grid;gap:0}
.strip li{display:grid;grid-template-columns:1fr auto;gap:3px 16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line)}
.strip .st{grid-column:1;display:flex;align-items:center;gap:10px;font-size:15.5px;
  font-weight:600;color:var(--ink)}
.strip .sn{grid-column:1;grid-row:2;font-size:12.5px;color:var(--ink-3)}
.strip .sv{grid-column:2;grid-row:1;justify-self:end;font-size:26px}
.strip .sf{grid-column:2;grid-row:2;justify-self:end;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--ink-3)}
@media(min-width:760px){
  .strip{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
  .strip li{border-bottom:0;border-right:1px solid var(--line);padding:18px 22px 18px 0}
  .strip li:last-child{border-right:0}
  .strip li + li{padding-left:22px}
  .strip .sv{font-size:30px}
}

/* ============================================================
   THE ESTIMATOR — the section this template exists for.
   A real <table>: jobs down, home sizes across, the price in the
   cell, and under every price the crew and the hours, so a number
   has a shape. On a phone the header row is replaced by a label
   inside each cell and every job becomes its own ruled block —
   the information is identical at both widths, nothing is hidden
   and nothing scrolls sideways.
   ============================================================ */
.est{width:100%;border-collapse:collapse;margin-top:8px;display:block}
.est thead{display:none}
.est tbody{display:block}
.est tr{display:block;margin-top:26px;border-top:var(--rule) solid var(--ink)}
.est th,.est td{text-align:left;padding:0}
.est th[scope=row]{display:block;padding:14px 0 10px}
.ejob{display:flex;align-items:center;gap:11px;font-family:var(--font-display);
  font-weight:900;font-size:clamp(21px,4.4vw,27px);letter-spacing:-.024em;color:var(--ink)}
.eshape{display:block;margin-top:7px;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.est td{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:var(--cell) 0;border-top:1px solid var(--line)}
.est td .cl{font-size:14px;color:var(--ink-2)}
.est td .cl i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;margin-top:2px}
.est td .rate{font-size:25px}
@media(min-width:820px){
  .est{display:table;margin-top:30px;table-layout:fixed}
  .est thead{display:table-header-group}
  .est tbody{display:table-row-group}
  .est tr{display:table-row;margin:0;border:0}
  .est thead th{display:table-cell;padding:0 0 13px;vertical-align:bottom;
    border-bottom:var(--rule) solid var(--ink);width:22%}
  .est thead th:first-child{width:34%}
  .est thead th b{display:block;font-family:var(--font-display);font-weight:900;
    font-size:19px;letter-spacing:-.02em;color:var(--ink)}
  .est thead th span{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-3);
    font-weight:400;font-variant-numeric:tabular-nums}
  .est thead th.eh{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
    font-weight:600;color:var(--ink-3);padding-bottom:16px}
  .est th[scope=row]{display:table-cell;padding:20px 24px 20px 0;vertical-align:top;
    border-bottom:1px solid var(--line)}
  .est td{display:table-cell;padding:20px 24px 20px 0;vertical-align:top;
    border-top:0;border-bottom:1px solid var(--line)}
  .est td .cl{display:none}
  .est td .rate{font-size:28px}
}
@media(min-width:1080px){
  .est td .rate{font-size:32px}
  .ejob{font-size:26px}
}

/* --- haul-away: the one priced on a different axis ---------- */
.haulgrid{margin-top:26px;border-top:var(--rule) solid var(--ink)}
.haulgrid li{display:grid;grid-template-columns:1fr auto;gap:5px 18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line)}
.haulgrid .ht{grid-column:1;font-size:16.5px;font-weight:600;color:var(--ink)}
.haulgrid .hd{grid-column:1;grid-row:2;font-size:14px;color:var(--ink-2);max-width:44ch}
.haulgrid .rate{grid-column:2;grid-row:1/3;justify-self:end;font-size:24px}
@media(min-width:820px){
  .haulgrid li{grid-template-columns:220px 1fr 130px;gap:0 26px;padding:17px 0}
  .haulgrid .hd{grid-column:2;grid-row:1;max-width:56ch}
  .haulgrid .rate{grid-column:3;grid-row:1}
}

/* --- not in the price --------------------------------------- */
.nip{margin-top:34px;padding-top:20px;border-top:var(--rule) solid var(--ink)}
.niph{margin:0 0 4px;font-family:var(--font-body);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.nipl{margin-top:10px;border-top:1px solid var(--line)}
.nipl li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink)}
.nipl .rate{font-size:17px}
@media(min-width:760px){
  .nipl{display:grid;grid-template-columns:repeat(3,1fr)}
  .nipl li{border-right:1px solid var(--line);padding:13px 20px 13px 0}
  .nipl li:last-child{border-right:0}
  .nipl li + li{padding-left:20px}
}

/* ============================================================
   THE FOUR THINGS — named with the price, then handed off. The
   homepage names the number; it does not print the table twice.
   ============================================================ */
.offer{margin-top:28px;border-top:var(--rule) solid var(--ink)}
.orow{display:block;padding:22px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit}
.orow h3{display:flex;align-items:center;gap:11px;font-size:clamp(22px,4.2vw,29px);
  font-weight:900;letter-spacing:-.024em;margin-bottom:8px;transition:color .18s ease}
.orow p{margin:0;color:var(--ink-2);font-size:15.5px;max-width:54ch}
.ofee{display:block;margin-top:11px;font-size:19px}
.orow:hover h3{color:var(--ink-3)}
.offerfoot{margin:26px 0 0}
@media(min-width:820px){
  .orow{display:grid;grid-template-columns:1fr 190px;gap:6px 34px;align-items:baseline;padding:24px 0}
  .orow h3,.orow p{grid-column:1}
  .ofee{grid-column:2;grid-row:1/3;justify-self:end;margin:0;font-size:23px}
}

/* --- who turns up: the one photograph on the homepage -------- */
.pf{overflow:hidden;background:linear-gradient(150deg,#2B2B28,var(--band))}
.pf img{width:100%;display:block;object-fit:cover;
  /* ONE grade for every photograph on the site */
  filter:saturate(.90) contrast(1.05) brightness(1.03)}
/* Every frame's aspect equals its asset's declared w/h, so nothing
   crops anywhere in this template. A new asset at a different
   aspect reintroduces cropping silently — check template.json. */
.pf--43 img{aspect-ratio:4/3}
.pf--23 img{aspect-ratio:2/3}
.pf--169 img{aspect-ratio:16/9}
.pf--sq img{aspect-ratio:1/1}
.pf--94 img{aspect-ratio:9/4}
.proofgrid{display:grid;gap:28px}
.plist{margin-top:22px;border-top:var(--rule) solid var(--ink)}
.plist li{padding:16px 0;border-bottom:1px solid var(--line)}
.plist h3{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:700;
  letter-spacing:-.012em;margin-bottom:6px}
.plist p{margin:0;font-size:14.5px;color:var(--ink-2);max-width:52ch}
@media(min-width:900px){
  .proofgrid{grid-template-columns:1fr 1.06fr;gap:52px;align-items:start}
  .plist{margin-top:0}
}

/* --- the review slot ---------------------------------------- */
.saying{margin:0;max-width:44ch}
.saying blockquote{margin:0;font-family:var(--font-display);font-weight:900;
  font-size:clamp(23px,4.2vw,34px);line-height:1.14;letter-spacing:-.026em;
  padding-top:22px;border-top:var(--rule) solid var(--ink)}
.saying figcaption{margin-top:20px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--ink-3)}
@media(min-width:900px){.saying{max-width:34ch;margin-left:auto}}

/* --- the closing band --------------------------------------- */
.close{padding:52px 0}
.closeh{font-size:clamp(27px,5vw,44px);line-height:1.03;letter-spacing:-.028em;
  font-weight:900;margin-bottom:16px;max-width:17ch}
.closep{max-width:46ch;margin-bottom:28px}
.closetel{display:block;margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);font-family:var(--font-display);
  font-size:clamp(25px,4.4vw,34px);font-weight:900;letter-spacing:-.026em;
  color:var(--band-ink);text-decoration:none;font-variant-numeric:tabular-nums}
.closetel:hover{color:var(--accent-on-band)}
.closehrs{display:block;margin-top:8px;font-size:12.5px;color:var(--band-ink-2)}
@media(min-width:900px){
  .close{padding:80px 0 74px}
  .closegrid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end}
  .closetel{margin:0}
}

/* ============================================================
   FOOTER — THE FOOT OF THE LEDGER.
   Not a sitemap and not a contact block with a logo. It is the
   bottom of an invoice: a double sum rule, then the one total
   this site can honestly print — what it costs to find out your
   number — set as the largest thing in the footer with its own
   rate mark. Everything else is ruled underneath it.
   ============================================================ */
footer{background:var(--surface-2);padding:34px 0 26px}
.sumrule{height:0;border-top:1px solid var(--ink);border-bottom:var(--rule) solid var(--ink);
  padding-top:4px}
.ftotal{display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:end;
  padding:26px 0 22px;border-bottom:1px solid var(--line)}
.ftl{grid-column:1;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3)}
.ftw{grid-column:1;grid-row:2;font-family:var(--font-display);font-weight:900;
  font-size:clamp(22px,4.6vw,32px);letter-spacing:-.026em;color:var(--ink);max-width:16ch}
.ftv{grid-column:2;grid-row:1/3;justify-self:end;display:flex;align-items:center;gap:11px;
  font-family:var(--font-display);font-weight:900;font-size:clamp(30px,7vw,52px);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.fareas{padding:20px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2);
  max-width:74ch}
.fareas b{display:block;font-family:var(--font-body);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--ink-3);margin-bottom:7px}
.fdl{margin:0;display:grid;gap:0}
.fdl > div{display:grid;grid-template-columns:82px 1fr;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line)}
.fdl dt{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3)}
.fdl dd{margin:0;font-size:14.5px;color:var(--ink);overflow-wrap:anywhere}
.fdl a{text-decoration:none}
.fdl a:hover{color:var(--ink-3)}
.fnav{display:flex;flex-wrap:wrap;gap:2px 26px;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--line)}
.fnav a{padding:8px 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink)}
.fnav a:hover{color:var(--ink-3)}
.fbase{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:12.5px;color:var(--ink-3)}
.fbase a{color:var(--ink-2)}
@media(min-width:900px){
  .fgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:start}
  .fdl > div:first-child{border-top:1px solid var(--line)}
}

/* ============================================================
   SERVICES — the reference page
   ============================================================ */

/* --- HERO 7: LISTINGS GRID ----------------------------------
   The four services ARE the hero. The TYPE BLOCK IS FIRST IN
   SOURCE ORDER so the headline lands high at every width, then
   the grid runs on underneath inside the same section. Three
   photographic cells and one solid accent panel — the panel is
   the service priced on a different axis, so the odd one out in
   the grid is the odd one out in the price list too. */
.hero-list{padding:30px 0 0}
.hero-list h1{max-width:13ch}
.hero-list .lead{max-width:50ch;margin-top:20px}
.hero-list .btnrow{margin-top:24px}
.cards{display:grid;gap:14px;margin-top:32px}
.card{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--ink)}
.card .cb{padding:15px 16px 17px}
.card h2{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;
  letter-spacing:-.016em;margin-bottom:9px}
.card .rate{font-size:22px}
.card:hover .cb{background:var(--surface-2)}
.acell{background:var(--accent);color:var(--accent-ink);border-color:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;
  padding:18px 16px;text-decoration:none;min-height:180px}
.acell .ah{display:block}
.acell .ah p{margin-top:9px}
.acell h2{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;
  letter-spacing:-.016em;color:var(--accent-ink)}
.acell p{margin:0;font-size:13.5px;color:var(--accent-ink);max-width:34ch}
.acell .rate{color:var(--accent-ink);font-size:34px}
.acell:hover{background:var(--accent-2)}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr;gap:16px}}
@media(min-width:1000px){
  .hero-list{padding:44px 0 0}
  .hero-list .listtop{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:end}
  .hero-list .lead{margin-top:0}
  .cards{grid-template-columns:repeat(4,1fr);gap:18px}
  .acell{min-height:0}
  .acell .rate{font-size:38px}
}

/* --- the four services in full, each with IN and NOT IN ------ */
.item{padding:30px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0;padding-top:0}
.item h2{display:flex;align-items:center;gap:11px;font-size:clamp(24px,4.4vw,33px);
  font-weight:900;letter-spacing:-.026em;margin-bottom:10px}
.itemfee{margin:0;font-size:22px}
.itembd{margin-top:16px}
.itembd > p{color:var(--ink-2);max-width:64ch;margin:0 0 20px}
.inout{display:grid;gap:0;border-top:var(--rule) solid var(--ink)}
.inout > div{padding:14px 0;border-bottom:1px solid var(--line)}
.inout h3{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);margin-bottom:9px;font-family:var(--font-body)}
.inout li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:5px 0;font-size:14.5px;color:var(--ink)}
.inout li .rate{font-size:15px}
.inout .yes li{padding-left:19px;position:relative}
.inout .yes li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;
  background:var(--accent);border:2px solid var(--ink)}
.inout .no li{padding-left:19px;position:relative;color:var(--ink-2)}
.inout .no li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;
  border:2px solid var(--ink-3)}
@media(min-width:760px){
  .inout{grid-template-columns:1fr 1fr}
  .inout > div{padding:16px 24px 16px 0}
  .inout > div:first-child{border-right:1px solid var(--line)}
  .inout > div:last-child{padding-left:26px;padding-right:0}
}
@media(min-width:1000px){
  .item{display:grid;grid-template-columns:.66fr 1.34fr;gap:54px;align-items:start;padding:40px 0}
  .itembd{margin-top:0}
}

/* --- THE RATE SHEET ----------------------------------------- */
.sheet{margin-top:28px;border-top:var(--rule) solid var(--ink)}
.srow{display:grid;grid-template-columns:1fr auto;gap:5px 20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line)}
.srow dt{grid-column:1;font-size:16.5px;font-weight:600;color:var(--ink)}
.srow .sd{grid-column:1;grid-row:2;margin:0;font-size:14px;color:var(--ink-2);max-width:56ch}
.srow .sv{grid-column:2;grid-row:1/3;justify-self:end;margin:0;font-size:21px}
@media(min-width:820px){
  .srow{grid-template-columns:.58fr 1fr 150px;gap:0 30px}
  .srow .sd{grid-column:2;grid-row:1}
  .srow .sv{grid-column:3;grid-row:1;font-size:23px}
}

/* --- questions ----------------------------------------------- */
.asks{margin-top:24px;border-top:1px solid var(--line)}
.asks details{border-bottom:1px solid var(--line)}
.asks summary{list-style:none;cursor:pointer;position:relative;padding:18px 44px 18px 0;
  min-height:48px;font-family:var(--font-display);font-size:19px;font-weight:700;
  letter-spacing:-.016em;line-height:1.28}
.asks summary::-webkit-details-marker{display:none}
/* the marker is the rate mark itself: a hollow square that fills
   with the accent when the answer is open */
.asks summary::after{content:"";position:absolute;right:2px;top:23px;width:13px;height:13px;
  border:2px solid var(--ink);background:transparent;transition:background .22s ease}
.asks details[open] summary::after{background:var(--accent)}
.asks .a{margin:0;padding:0 0 22px;color:var(--ink-2);max-width:66ch;font-size:16px}

/* ============================================================
   ABOUT — HERO 5: MOSAIC / COLLAGE
   Three frames at three different aspects lapped into an
   asymmetric block. TYPE FIRST IN SOURCE ORDER: on one column a
   collage placed first stacks on top of the headline and pushes
   it under the fold. Every frame carries its asset's own aspect,
   so nothing crops here either.
   ============================================================ */
.hero-mos{padding:30px 0 0}
.hero-mos h1{max-width:16ch}
.hero-mos .lead{max-width:48ch;margin-top:20px}
.mos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
/* A FRAME IS ONLY EVER AS TALL AS ITS PICTURE. .m1 spans two grid
   rows; without this the grid stretches the frame past its 2:3
   asset and the gradient behind it renders as a dark block. */
.mos > *{align-self:start}
.mos .m1{grid-column:1;grid-row:1/3}
.mos .m2{grid-column:2;grid-row:1}
.mos .m3{grid-column:2;grid-row:2}
@media(min-width:900px){
  .hero-mos{padding:44px 0 0}
  .hero-mos h1{max-width:19ch}
  .hero-mos .mosgrid{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:start}
  .mos{margin-top:0;gap:16px;align-content:start;max-width:520px;margin-left:auto}
  .mos .m3{margin-top:20px}
}
.telling{max-width:64ch;margin-top:22px}
.telling p{color:var(--ink-2);font-size:17px}
.telling p:first-child{color:var(--ink)}
.telling p:last-child{margin-bottom:0}
.how{margin-top:26px;border-top:var(--rule) solid var(--ink)}
.how li{padding:20px 0;border-bottom:1px solid var(--line)}
.how h3{display:flex;align-items:center;gap:11px;font-size:clamp(19px,3.4vw,24px);
  font-weight:900;letter-spacing:-.022em;margin-bottom:8px}
.how p{margin:0;color:var(--ink-2);font-size:15.5px;max-width:58ch}
@media(min-width:820px){
  .how li{display:grid;grid-template-columns:.6fr 1fr;gap:30px;align-items:baseline;padding:22px 0}
  .how h3{margin:0}
}
/* THE OWNER, ONCE — a signed note, not a bought headshot. The
   portrait frame is OPTIONAL and simply absent when a client has
   no photograph of their own, which is better than a stock one. */
.signed{margin-top:34px;padding-top:26px;border-top:var(--rule) solid var(--ink);
  display:grid;gap:24px}
.signedq{margin:0;font-family:var(--font-display);font-weight:900;
  font-size:clamp(23px,4.2vw,34px);line-height:1.12;letter-spacing:-.028em;max-width:22ch}
.signedwho{margin:0}
.signedwho b{display:block;font-family:var(--font-display);font-size:22px;font-weight:900;
  letter-spacing:-.024em}
.signedwho span{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
@media(min-width:900px){.signed{grid-template-columns:1.15fr .85fr;gap:54px;align-items:end}}

/* ============================================================
   CONTACT — HERO 8: CENTRED STATEMENT OVER A SOFT IMAGE.
   The card is FIRST in source order so the headline is the first
   thing rendered, and the photograph is pulled up underneath it
   by a negative margin. The band keeps its true 9:4 rather than
   being cropped to a viewport height, which is how a full-bleed
   hero usually buries a headline.
   ============================================================ */
.hero-soft{padding:30px 0 0}
.softcard{position:relative;z-index:2;background:var(--surface);text-align:center;
  padding:0 0 26px;max-width:44ch;margin:0 auto}
.softcard h1{max-width:14ch;margin:0 auto}
.softcard .lead{max-width:38ch;margin:18px auto 0}
.softband{position:relative;margin-top:-6px}
.softband .pf{border-top:var(--rule) solid var(--ink)}
@media(min-width:900px){
  .hero-soft{padding:44px 0 0}
  .softcard{max-width:52ch;padding:0 40px 34px}
  .softband{margin-top:-52px}
  .softband .pf{border-top:0}
}

/* --- the three ways in --------------------------------------- */
.reach{margin-top:24px;border-top:var(--rule) solid var(--ink)}
.reach li{border-bottom:1px solid var(--line)}
.reach a,.reach .rb{display:grid;grid-template-columns:1fr;gap:6px;padding:17px 0;
  text-decoration:none;color:var(--ink)}
.reach b{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3)}
.rv{font-family:var(--font-display);font-weight:900;font-size:clamp(20px,3.8vw,26px);
  line-height:1.22;letter-spacing:-.024em;overflow-wrap:anywhere}
.reach a:hover .rv{color:var(--ink-3)}
@media(min-width:820px){
  .reach a,.reach .rb{grid-template-columns:160px 1fr;gap:30px;align-items:baseline;padding:19px 0}
}

/* ============================================================
   THE FORM — THE QUOTE SLIP.
   The site has printed every number except one: the one for your
   place. The form is the line where that number gets filled in,
   so it is drawn as a hard grid of ruled BOXES — a paper form,
   not a stack of inputs — with the label printed in the corner of
   each box and, under it, WHY WE ASK. Under the last box is a
   double sum rule, the accounting mark for a line that adds up,
   and the submit is a full-width accent row of the same grid.
   Every label is a real <label for>, every box is 44px+ and every
   input is 16px so a thumb finds it and iOS never zooms.
   ============================================================ */
.slipwrap{display:grid;gap:34px}
.slipwrap > *{min-width:0}
.slipintro > h2{margin-bottom:12px}
.slipintro > .lead{max-width:46ch}
@media(min-width:1000px){
  .slipwrap{grid-template-columns:.72fr 1.28fr;gap:56px;align-items:start}
}
.slip{display:grid;gap:0;border:1px solid var(--ink)}
.box{display:grid;gap:0;margin:0;padding:13px 15px 14px;border-bottom:1px solid var(--line)}
.box label{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);transition:color .18s ease}
.box .why{display:block;margin:3px 0 6px;font-size:12px;color:var(--ink-3);line-height:1.45}
.box input,.box select,.box textarea{width:100%;min-width:0;min-height:44px;
  border:0;border-radius:0;background:transparent;color:var(--ink);padding:2px 0;
  font-family:var(--font-body);font-weight:500;font-size:17px;line-height:1.45}
.box textarea{min-height:118px;resize:vertical;font-size:16px;font-weight:400}
.box input:focus,.box select:focus,.box textarea:focus{outline:none;box-shadow:none}
.box:focus-within{background:var(--surface-2)}
.box:focus-within label{color:var(--ink)}
.box input::placeholder,.box textarea::placeholder{color:var(--ink-3)}
.slip select{max-width:100%;text-overflow:ellipsis}
/* the sum rule: the accounting mark for a line that adds up */
.sumline{height:0;margin:0;border-top:1px solid var(--ink);
  border-bottom:var(--rule) solid var(--ink);padding-top:4px}
.slipsend{width:100%;border:0;border-radius:0;background:var(--accent);color:var(--accent-ink);
  min-height:60px;font-size:13px;letter-spacing:.16em}
.slipsend:hover{background:var(--accent-2)}
.slip .fineprint{padding:0 15px 14px;margin:12px 0 0}
.slip .formerror{margin:12px 15px 0;padding-left:14px;border-left:4px solid var(--accent);
  font-size:14.5px;color:var(--ink)}
.slipthanks{border:1px solid var(--ink);border-radius:0;background:var(--surface);padding:0}
.thmark{display:flex;align-items:center;gap:11px;margin:0;padding:14px 15px;
  background:var(--accent);color:var(--accent-ink);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600}
.slipthanks h3{font-size:24px;font-weight:900;letter-spacing:-.024em;margin:0;padding:20px 15px 10px}
.slipthanks p{margin:0;padding:0 15px 20px;color:var(--ink-2);max-width:52ch}
@media(min-width:680px){
  .slip{grid-template-columns:1fr 1fr}
  .box{padding:15px 20px 16px}
  .box--wide{grid-column:1/-1}
  .box--l{border-right:1px solid var(--line)}
  .sumline{grid-column:1/-1}
  .slipsend{grid-column:1/-1}
  .slip .fineprint,.slip .formerror{grid-column:1/-1}
  .slip .fineprint{padding:0 20px 16px}
}

/* --- what happens after you send it -------------------------- */
.next{margin-top:8px;border-top:var(--rule) solid var(--ink);counter-reset:nx}
.next li{padding:16px 0;border-bottom:1px solid var(--line);counter-increment:nx}
.next h3{font-size:17px;font-weight:700;letter-spacing:-.012em;margin-bottom:6px}
.next h3::before{content:counter(nx,decimal-leading-zero) "  ";color:var(--ink-3);
  font-variant-numeric:tabular-nums;font-family:var(--font-display);font-weight:900}
.next p{margin:0;color:var(--ink-2);font-size:15px;max-width:48ch}

/* --- 404 ------------------------------------------------------ */
.nf{padding:62px 0 58px}
.nf h1{margin-bottom:18px;max-width:15ch}
.nf .lead{margin-bottom:28px;max-width:46ch}
@media(min-width:900px){.nf{padding:110px 0 96px}}

/* --- reduced motion ------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  html.js .hl b{background-size:100% .40em;animation:none}
  .asks summary::after{transition:none}
}