/* THE MODEL HOME · heirshiptitle.com concept build — revision 2, H3 PAGE
   ---------------------------------------------------------------------------
   Same sections and the same engine as the :4514 page; the only difference is
   the cover. This page opens on the DRAWN sheet (H3) instead of the
   photograph, so the model is already drafted before A-2 begins — and A-2
   therefore receives the assembled house rather than building it again.

   ONE INTERACTION GRAMMAR. Every major section (#chA #chB #what #team #close)
   is a pinned canvas that gains one piece of information per scroll step, on
   the same easing and the same ~85vh step band. Nothing on this page is a plain
   scroll sheet any more, and the old #breath section is gone — its line is the
   last step of #chA.

   Static (no JS / reduced motion / ?complete) = every canvas is a finished
   sheet with all of its steps printed, in the DEFAULT (?v=help) variant. */

:root{
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --edge-ink: #4a5057;
  --hair: #e3dfd2;
  /* KIMI SPIN: the resolved colour. The old set had exactly one accent and it
     was red, so every "done" state read as a warning. A warm drafting green
     now marks everything that goes RIGHT — the heirs who want to sell, the
     cleared problems, the PAID stamp, the ticked boxes. Red keeps its single
     job: the one refusing heir and the struck price tag. */
  --go: #2e7d4f;
  --go-wash: #eaf3ec;
  /* A-3 rows are FIXED height so the step-by-step lift of the text block is
     exact arithmetic — half of whatever is still hidden below it. It is a
     variable so a short viewport can shrink it and the lift follows. */
  --a3row: 4.8rem;
}
::selection{ background:#e3e7dc; }
html{ scrollbar-color:#b9beb6 #f1f1ec; }
body{ background:var(--paper); }

a{ color:var(--ink); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.hero-cta{ transition:background-color .15s ease-out; }
.hero-cta:hover{ background:#0f1317; }
.hero-cta:active{ transform:translateY(1px); }
.mast-call:hover, .ts-call:hover{ border-bottom:1px solid var(--ink); }

/* -------------------------------------------- A-1 hero: the drawn sheet
   Approved treatment H3, verified round 2 — DO NOT TOUCH. Layout lives in the
   critical <style> block; what is here needs the .axo base rules below it to
   already exist. The drawing sits on warm paper, so it is inked a shade
   heavier than the white sheets, and it is sized off --w (fixed px) so the
   normalised dash still lands ~1.2 device px — the same reason the rest of
   the set avoids non-scaling-stroke. */
.hero-num a:hover{ border-bottom-color:var(--ink); }
/* The drawing owns the whole right column and is fitted to it (the viewBox
   letterboxes itself, centred), so it can never reach across into the copy.
   --w stays a plain number because --sw divides by it; it is set per
   breakpoint to roughly the rendered width so the line lands ~1.2 device px. */
.hero-stage .axo{ --w:960; width:100%; height:100%; max-width:none; }
.hero-stage .edge{ stroke:#363c43; stroke-width:calc(var(--sw) * .88); }
.hero-stage .e-det{ stroke-width:calc(var(--sw) * .68); }
.hero-stage .e-plate{ stroke-width:calc(var(--sw) * .80); }
.hero-stage .f-roof-n{ fill:#f3f5f0; } .hero-stage .f-roof-w{ fill:#eef1ea; }
.hero-stage .f-roof-s{ fill:#e7ebe2; } .hero-stage .f-roof-e{ fill:#dde2d8; }
.hero-stage .f-plate-top{ fill:#fdfdfa; } .hero-stage .f-plate-side{ fill:#e5e8e0; }
.hero ::selection{ background:#e8e2d2; }

/* ---- the scroll cue (client pick: cue-F of the stills lab, always on)
   Tracked SCROLL over a short rule caught mid-draw: solid to ~62%, a fade
   long enough to read AS a fade, and a faint 16% construction line under
   the undrawn third. Static / reduced-motion / no-JS show exactly this
   mid-draw state; the motion page animates the ink (transform/opacity
   only — no dash animation, so no non-scaling-stroke question at all).
   page.js adds .cue-off on the first scroll and it never comes back. */
.cue-tick{
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:3rem; z-index:3;
  transition:opacity .5s ease-out;
}
.cue-label{
  font-size:.8rem; font-weight:600; letter-spacing:.22em;
  color:#6f6857; white-space:nowrap; margin-right:-.22em;
}
.cue-drop{
  display:block; width:2px; height:40px;
  background:linear-gradient(180deg, rgba(54,60,67,.16) 0 100%);
}
.cue-ink{
  display:block; width:100%; height:100%; transform-origin:top;
  transform:scaleY(.78);   /* at rest: the draw is on its way down */
  background:linear-gradient(180deg,
    #363c43 0, #363c43 62%, rgba(54,60,67,.40) 78%, rgba(54,60,67,0) 90%,
    rgba(54,60,67,0) 100%);
}
html.cue-off .cue-tick{ opacity:0; }
html.cue-off .cue-ink{ animation:none; }

/* ------------------------------------------------ the repeating title strip */
.tstrip{
  display:flex; justify-content:space-between; align-items:center; gap:2rem;
  padding:.85rem 3.4rem; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  font-size:.78rem; font-weight:600; letter-spacing:.2em; color:var(--soft);
}
.tstrip .ts-call{
  font-size:1.13rem; letter-spacing:.1em; color:var(--ink); text-decoration:none;
  border-bottom:1px solid rgba(38,43,49,.35); padding-bottom:1px;
}
.tstrip.in-frame{ position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem; border-bottom:none; padding:.85rem 1.6rem; }

/* ------------------------------------------------ the pinned canvas
   Static document is compact — only the motion page buys the long spans.
   ROUND 3 PACING (client #1 complaint): every step now gets ~85vh of
   scroll runway (was ~26vh — scenes blew past at natural scroll speed),
   and the payoff lines hold a second, identical dwell step. */
.pinact{ position:relative; }
html.motion #chA  { height:1035vh; }  /* 11 steps: consequence + turn each
                                         hold a double dwell */
html.motion #chB  { height:610vh; }   /*  6 steps — takeover holds a dwell */
html.motion #what { height:440vh; }   /*  4 steps (help) */
html.motion.v-buy #what{ height:525vh; } /* 5 steps (buy) */
html.motion #team { height:440vh; }   /*  4 steps — row 1 pinned-visible */
html.motion #close{ height:440vh; }   /*  4 steps — full counters dwell */
.frame{
  position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column;
  padding:2.4rem 3rem 4.6rem;
}
html.motion .frame{ height:100vh; min-height:0; }
.frame::before{ content:""; position:absolute; inset:1.1rem; border:1px solid var(--hair); pointer-events:none; }
.sheethead{ display:flex; justify-content:space-between; align-items:baseline; padding:0 1.6rem 1.4rem; }
.sheettitle{ font-size:1.13rem; font-weight:600; letter-spacing:.28em; }
.sheetno{ font-size:.78rem; letter-spacing:.2em; color:var(--soft); }

/* drafting chrome: zone labels — the drawing-set register, not copy */
.zlab{
  display:block; font-size:.74rem; font-weight:600; letter-spacing:.24em; color:var(--soft);
  padding-bottom:.7rem; border-bottom:1px solid var(--hair); margin-bottom:1.7rem;
}

/* ------------------------------------------------ the model itself
   CHROME BUG, VERIFIED: pathLength="1" + stroke-dasharray:1 combined with
   vector-effect:non-scaling-stroke makes Chrome compute the dash in DEVICE
   pixels, so anything rendered past 1:1 against its viewBox comes out
   half-drawn. non-scaling-stroke is therefore banned here; the stroke is set
   in USER units and each instance declares its own rendered width (--w in px)
   so the line still lands at ~1.1 device px at any size. */
.axo{
  --sw:calc(1.1 * 500 / var(--w, 500));
  width:calc(var(--w, 500) * 1px); max-width:100%; height:auto; display:block; overflow:visible;
}
.axo .f{ stroke:none; }
.f-wall{ fill:#ffffff; } .f-wall2{ fill:#f1f2ee; }
.f-roof-n{ fill:#f5f6f2; } .f-roof-w{ fill:#f1f3ee; }
.f-roof-s{ fill:#eaece6; } .f-roof-e{ fill:#e1e4dd; }
.f-plate-top{ fill:#fdfdfb; } .f-plate-side{ fill:#e9ebe5; }
.edge{
  fill:none; stroke:var(--edge-ink); stroke-width:var(--sw);
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:0;
}
.e-det{ stroke-width:calc(var(--sw) * .82); }
.e-plate{ stroke-width:calc(var(--sw) * .91); }

/* KIMI SPIN, the glyph grid: the set is the standalone "What we do" build's
   drawings, all on one 240x240 grid — stroke width in USER units, never
   non-scaling-stroke, so the dash always covers a whole path */
.glyph{
  --w:460; --sw:calc(2.3 * 240 / var(--w));
  width:calc(var(--w) * 1px); max-width:100%; height:auto; display:block; overflow:visible;
}
.glyph .s{
  fill:none; stroke:var(--edge-ink); stroke-width:var(--sw);
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0;
}
.glyph .thin{ stroke-width:calc(var(--sw) * .62); }
.glyph .hv{ stroke-width:calc(var(--sw) * 1.45); }
.glyph .vred{ stroke:var(--red); }
.glyph .stamp{ stroke:var(--go); }
.glyph .gf{ fill:#e9ece5; stroke:none; }
/* OPAQUE PAPER (client flag: the glyphs were X-ray wireframes — back sheets
   showed through front ones). Every stacked plane gets a paper-toned fill laid
   down immediately before its own outline, so the front sheet occludes the one
   behind it. Fill, not stroke: the stroke-draw is untouched. */
.glyph .gp{ fill:var(--paper); stroke:none; }

/* =========================================================== A-2 · the tree */
.a2grid{
  flex:1; display:grid; grid-template-columns:minmax(0,27rem) minmax(0,44rem);
  justify-content:center; align-items:center; gap:4rem; padding:0 1.6rem; min-height:0;
}
.caps{ position:relative; }
.cap{
  font-size:clamp(1.7rem,2.05vw,2.2rem); line-height:1.28; font-weight:500;
  letter-spacing:-.012em; text-wrap:pretty; margin-bottom:1.1rem;
}
.cap.long{ font-size:clamp(1.45rem,1.75vw,1.85rem); line-height:1.34; }
.cap:last-child{ margin-bottom:0; }

.a2fig{ position:relative; }
/* the assembling house only exists on the motion page: the finished sheet is
   the tree, with the small drawn house at its root */
.a2house{ display:none; --w:620; }
.a2house > *{ width:100%; max-width:calc(var(--w) * 1px); margin-inline:auto; }

.a2tree{ position:relative; max-width:40rem; }
.dadwrap{ display:flex; align-items:center; gap:1.8rem; }
/* the small drawn house sits to the RIGHT of the root so the trunk still
   drops out of the DAD box — it is the hand-off from the A-2 assembly */
.roothouse{ --w:172; flex:none; order:2; }
.node{
  border:1px solid var(--edge-ink); background:#fff;
  display:flex; flex-direction:column; align-items:center; padding:.85rem 1rem .7rem;
}
.node .frac{ font-size:2rem; font-weight:500; line-height:1; }
.node .who{ font-size:1.25rem; color:var(--soft); margin-top:.45rem; }
.node.dad{ padding:.95rem 2rem; }
.node.dad .frac{ font-size:1.3rem; font-weight:600; letter-spacing:.24em; }
.node.no{ border-color:var(--red); background:#f8eae7; }
.node.no .frac{ color:var(--red); }
/* the hopeful verdicts are green (spin accent); the refusal keeps the red */
.status{ font-size:1.3rem; font-weight:600; color:var(--go); white-space:nowrap; margin-left:auto; }
.status.no{ color:var(--red); font-weight:600; }

.vlist{ position:relative; padding-top:24px; }
.vlist::before{
  content:""; position:absolute; left:26px; top:0; width:1px; height:calc(100% - 50px);
  background:var(--edge-ink); transform-origin:top;
}
.vrow{ position:relative; padding-left:62px; min-height:96px; display:flex; align-items:center; }
.vrow::before{
  content:""; position:absolute; left:26px; top:50%; width:34px; height:1px;
  background:var(--edge-ink); transform-origin:left;
}
.node.wide{
  flex-direction:row; align-items:center; gap:1.3rem; width:100%;
  padding:1rem 1.6rem;
}
.node.wide .frac{ font-size:1.95rem; }
.node.wide .who{ margin-top:0; }

/* the turn — last step of A-2, and the reason #breath no longer exists */
.turn{
  font-size:clamp(2.2rem,4.2vw,3.7rem); font-weight:500; letter-spacing:-.02em;
  line-height:1.08; text-align:center; margin:3rem 1.6rem 0;
}

/* ========================================================= A-3 · the checks
   ROUND 3: three problem rows (index + text, fixed height for the exact
   lift), the model carrying a pre-tinted degrade layer, and the takeover
   line that ends the scene. */
.a3grid{
  flex:1; display:grid; grid-template-columns:minmax(0,28rem) minmax(0,46rem);
  justify-content:center; align-items:center; gap:4rem; padding:0 1.6rem; min-height:0;
  position:relative;
}
#chB .housecol{ --w:420; position:relative; grid-column:1; grid-row:1; }
/* explicit seats: the motion .bturn also claims col 2 row 1, and without an
   explicit seat auto-placement would shove the text column down a row */
#chB .textcol{ grid-column:2; grid-row:1; }
/* the degrade layer: a <use> clone of the model, STATICALLY pre-tinted gray
   with a faint red cast. The filter never animates — only the layer's
   opacity does, which keeps the transform/opacity/dashoffset mandate.
   Hidden by default: the finished sheet shows the model at full colour. */
#chB .tint{
  position:absolute; left:0; top:0; opacity:0;
  filter:grayscale(.85) sepia(.34) hue-rotate(-42deg) saturate(1.5) brightness(.97);
}
/* the green "going right" stamp the model earns on the final beat */
.housestamp{ position:absolute; right:2%; bottom:6%; width:4.6rem; height:4.6rem; }
.housestamp .s{
  fill:none; stroke:var(--go); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0;
}
.head{ font-size:clamp(2.1rem,2.7vw,2.7rem); line-height:1.14; font-weight:500; letter-spacing:-.018em; text-wrap:balance; }
.checks{ list-style:none; margin-top:2.2rem; }
.checks li{
  height:var(--a3row); display:grid; grid-template-columns:2.6rem 1fr;
  gap:1.6rem; align-items:center; border-bottom:1px solid var(--hair);
}
.checks li:first-child{ border-top:1px solid var(--hair); }
.checks p{ font-size:1.5rem; font-weight:500; }
.checks .idx{ font-size:.74rem; font-weight:600; letter-spacing:.22em; color:var(--soft); }

/* the takeover: "We clear them one at a time…" — static sheet prints it
   full width below the pair; the motion page overlays it on the text cell */
.bturn{
  grid-column:1/-1; margin-top:2.6rem; text-align:center;
  font-size:clamp(2.1rem,3.2vw,3.2rem); font-weight:500; line-height:1.28;
  letter-spacing:-.015em; text-wrap:balance;
}
.bturn span{ display:block; }

/* ============================================================ A-4 · what we do
   ROUND 3: the line leads, the drawing illustrates (was glyph-first with a
   "DETAIL nn" register — the register stole focus and is deleted). */
.wsteps{ list-style:none; position:relative; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3.4rem; padding:0 1.6rem; min-height:0; }
.wstep{ display:flex; flex-direction:column; align-items:center; gap:2.4rem; text-align:center; }
.wstep p{
  font-size:clamp(1.8rem,2.9vw,2.6rem); line-height:1.2; font-weight:500;
  letter-spacing:-.018em; max-width:22ch; text-wrap:balance;
}

/* =========================================================== A-5 · the team */
.teamline{ font-size:1.25rem; line-height:1.5; color:#3b4046; max-width:62rem; padding:0 1.6rem; margin-bottom:1.3rem; text-wrap:pretty; }
/* the card width is capped against the VIEWPORT HEIGHT as well as its own
   column, so two rows of three always fit inside the pinned frame instead of
   bleeding out of it onto the sheets above and below */
.teamgrid{
  list-style:none; flex:1; align-content:center; min-height:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,min(15.5rem,calc(50vh - 184px))));
  justify-content:center; gap:1.4rem 2.2rem; padding:0 1.6rem;
}
.teamgrid figure{ border:1px solid #b4b9b2; padding:.55rem; background:#fff; height:100%; }
.teamgrid img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border:1px solid var(--hair); filter:saturate(.9); }
.teamgrid figcaption{ display:flex; flex-direction:column; gap:.15rem; padding:.75rem .2rem .15rem; }
.teamgrid strong{ font-size:1.25rem; font-weight:600; letter-spacing:.01em; }
.teamgrid span{ font-size:1.25rem; color:var(--soft); }

/* ================================================== A-6 · the closing sheet
   KIMI SPIN. One composed sheet that fills in, not three lonely panels.
   Vertical rhythm: proof (counters, ruled row) → honesty (the found-you
   note, laid out like a spec note) → resolve (the call panel, printed on
   the hero's warm board tone with an ink frame — the one bordered panel on
   the whole page, so the ask reads as the point of the set). */
.closestage{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1.6rem,3.2vh,2.8rem); padding:0 1.6rem; min-height:0;
  width:100%; max-width:72rem; margin-inline:auto;
}
.counters{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.counters div{ padding:clamp(1.2rem,2.6vh,2rem) 1.6rem; border-left:1px solid var(--hair); }
.counters div:first-child{ border-left:none; }
.counters dt{ font-size:clamp(3.4rem,5.6vw,4.9rem); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.02em; text-align:center; line-height:1; }
.counters dt i{ font-style:normal; }
.counters dd{ font-size:1.25rem; line-height:1.4; color:var(--soft); text-align:center; margin-top:.7rem; text-wrap:balance; }

/* the honest note, set as a spec note: label column, text column, one rule */
.found{ display:grid; grid-template-columns:12.5rem minmax(0,1fr); gap:2.6rem; align-items:start; }
.found .zlab{ margin-bottom:0; }
.found p{ font-size:1.3rem; line-height:1.6; color:#3b4046; text-wrap:pretty; }

/* the ask. Warm board panel, ink frame, the drawn house beside the words. */
.callband{
  display:flex; align-items:center; gap:clamp(1.8rem,3vw,3.2rem);
  background:var(--board); border:1.5px solid var(--ink);
  padding:clamp(1.4rem,3vh,2.2rem) clamp(1.6rem,3vw,2.8rem);
}
.callhouse{ --w:190; width:190px; flex:none; }
.closecall{ border-left:1px solid #d9d2bd; padding-left:clamp(1.8rem,3vw,3.2rem); flex:none; }
.closeline{ font-size:clamp(2.6rem,3.6vw,3.4rem); font-weight:500; letter-spacing:-.02em; line-height:1.05; }
.hero-cta.big{ font-size:1.18rem; padding:1.05rem 2.3rem; margin-top:1.5rem; }
.esp{ margin-top:1.2rem; font-size:1.25rem; }
.esp a{ color:#3b4046; text-underline-offset:4px; }

/* ROUND 3: SMS opt-in, secondary to the call — same panel, third column.
   Compliance: raw-HTML form, unchecked consent box, disclosure at 14.4px. */
.smsopt{ border-left:1px solid #d9d2bd; padding-left:clamp(1.8rem,3vw,3.2rem); max-width:26rem; }
.smslead{ font-size:1.25rem; font-weight:500; line-height:1.4; text-wrap:pretty; }
.smsrow{ display:flex; gap:.6rem; margin-top:1rem; }
.smsrow input{
  flex:1; min-width:0; font:inherit; font-size:1.13rem; color:var(--ink);
  padding:.75rem 1rem; border:1px solid var(--ink); background:#fff; border-radius:0;
}
.smsrow button{
  font:inherit; font-size:1.13rem; font-weight:600; letter-spacing:.04em;
  padding:.75rem 1.4rem; background:var(--ink); color:#fff; border:1px solid var(--ink);
  border-radius:0; cursor:pointer; transition:background-color .15s ease-out;
}
.smsrow button:hover{ background:#0f1317; }
.smsconsent{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1rem; }
.smsconsent input{ flex:none; width:1.05rem; height:1.05rem; margin:.15rem 0 0; accent-color:var(--ink); }
.smsconsent label{ font-size:.9rem; line-height:1.45; color:#3b4046; }
.smsconsent a{ color:#3b4046; text-underline-offset:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ROUND 3 footer: a real company footer in the same drafting aesthetic —
   one ink rule, centred, no project conceit. */
.sitefoot{ max-width:64rem; margin:4.6rem auto 4rem; padding:2.6rem 1.6rem 0;
  border-top:1.5px solid var(--ink); text-align:center; }
.sf-firm{ font-size:1.13rem; font-weight:600; letter-spacing:.28em; }
.sf-line{ margin-top:1.1rem; font-size:1.35rem; }
.sf-line a{ font-weight:600; text-decoration:none; border-bottom:1px solid rgba(38,43,49,.42); }
.sf-esp{ margin-top:.7rem; font-size:1.2rem; }
.sf-esp a{ color:#3b4046; text-underline-offset:4px; }
.sf-links{ margin-top:1.4rem; font-size:1.13rem; }
.sf-links a{ margin:0 1.1rem; color:var(--soft); text-underline-offset:4px; }

/* ========================================================================= */
/* MOTION: scroll selects the state, time (~1s, eased) draws it.             */
/* Everything below only exists when JS ran and motion is allowed.           */
/* ========================================================================= */

/* A-1: the sheet is drafted live on load, ~1.5s. Never scroll-driven — the
   first screen is already finished HTML; this only draws it in.
   VERIFIED ROUND 2 — DO NOT TOUCH. */
@keyframes heroRise{ from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:none; } }
@keyframes heroFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes heroDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
html.motion .hero-mast{ animation:heroFade .7s ease-out both .02s; }
html.motion .hero-copy h1{ animation:heroRise .80s var(--ease) both .10s; }
html.motion .hero-copy .hero-sub{ animation:heroRise .80s var(--ease) both .40s; }
html.motion .hero-copy .hero-act{ animation:heroRise .80s var(--ease) both .60s; }
html.motion .hero-stage .e-plate{ animation:heroDraw .55s ease-out both .16s; }
html.motion .hero-stage .e-wall{ animation:heroDraw .60s ease-out both .40s; }
html.motion .hero-stage .e-roof{ animation:heroDraw .60s ease-out both .66s; }
html.motion .hero-stage .e-det{ animation:heroDraw .45s ease-out both .94s; }
html.motion .hero-stage .f-plate-top, html.motion .hero-stage .f-plate-side{ animation:heroFade .5s ease-out both .42s; }
html.motion .hero-stage .f-wall, html.motion .hero-stage .f-wall2{ animation:heroFade .5s ease-out both .70s; }
html.motion .hero-stage .f-roof-n, html.motion .hero-stage .f-roof-w,
html.motion .hero-stage .f-roof-s, html.motion .hero-stage .f-roof-e{ animation:heroFade .5s ease-out both .95s; }
html.motion.no-anim .hero-mast, html.motion.no-anim .hero *{ animation:none !important; }

/* the live cue: the rule draws downward, holds, fades out, draws again —
   a gentle ~2.5s loop, crisp and geometric (transform/opacity only) */
@keyframes cueDraw{
  0%{ transform:scaleY(0); opacity:1; }
  45%{ transform:scaleY(1); opacity:1; }
  62%{ transform:scaleY(1); opacity:1; }
  85%, 100%{ transform:scaleY(1); opacity:0; }
}
html.motion .cue-ink{ animation:cueDraw 2.5s var(--ease) infinite; }

/* shared plumbing — one easing, one rhythm, page-wide */
html.motion .pinact .cap{
  position:absolute; top:50%; left:0; right:0; margin:0;
  transform:translateY(calc(-50% + 10px)); opacity:0;
  transition:opacity .7s var(--ease), transform .8s var(--ease);
}
html.motion .pinact .cap.on{ opacity:1; transform:translateY(-50%); }
html.motion .axo .edge{ transition:stroke-dashoffset 1s ease-out, opacity .25s ease-out; }
html.motion .axo .f{ transition:opacity .6s ease-out, transform 1s var(--ease); }
html.motion .axo g{ transition:transform 1.1s var(--ease), opacity .8s var(--ease); }

/* ---------------- A-2: the assembled house ARRIVES, then the tree steps ----
   H3 PAGE ONLY. The hero above has already drafted this model line by line,
   so re-drawing it here from a bare plate drew the same house twice and the
   sheet read as a repeat. A-2 therefore opens on the FINISHED model, set down
   a little large and a little right — roughly where the cover left it — and
   step 1 settles it onto the sheet. No stroke is redrawn: the arrival is
   transform only, so the ink never flickers. ROUND 3: eleven steps — every
   child gets its own line (m2..m5 one node each), the three verdicts land
   with the fourth child (m5), the holdout turns red at m6, the consequence
   line dwells twice (m7-m8, caption only), and the turn takes the canvas
   at m9 with its own dwell (m10). */
html.motion .a2house{
  display:flex; flex-direction:column; justify-content:center;
  position:absolute; inset:0;
  transition:opacity .8s var(--ease), transform 1.1s var(--ease);
}
/* step 0 · the model is handed over from the cover: whole, just not landed */
html.motion #chA .a2house{ transform:translate(5%,-2%) scale(1.12); }
/* the tree waits, invisible but holding its own layout */
html.motion .a2tree{ opacity:0; transition:opacity .8s var(--ease); }
html.motion .dadwrap{ opacity:0; transform:translateY(10px); transition:opacity .8s var(--ease), transform .9s var(--ease); }
html.motion .vlist::before{ transform:scaleY(0); transition:transform 1s var(--ease); }
html.motion .vrow{ opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease), transform .8s var(--ease); }
html.motion .vrow::before{ transform:scaleX(0); transition:transform .7s var(--ease); }
html.motion .caps{ transition:transform 1.1s var(--ease); }
/* the "wants to sell" verdicts land with the fourth child (m5); the
   holdout's red follows on its own beat (m6) */
html.motion #chA .status{ opacity:0; transition:opacity .6s var(--ease); }
html.motion #chA .node.no{ border-color:var(--edge-ink); background:#fff; transition:border-color .6s ease-out, background-color .6s ease-out; }
html.motion #chA .node.no .frac{ color:var(--ink); transition:color .6s ease-out; }

/* m1: the model settles onto the sheet — "when he passed away" */
html.motion #chA.m1 .a2house{ transform:none; }
/* m2: the house yields, the captions take its slot, the tree root arrives */
html.motion #chA.m2 .a2house{ opacity:0; transform:translate(-16%,-5%) scale(.84); }
html.motion #chA.m2 .caps{ transform:translateX(clamp(0px,3.4vw,68px)); }
html.motion #chA.m2 .a2tree{ opacity:1; transition-delay:.25s; }
html.motion #chA.m2 .dadwrap{ opacity:1; transform:none; transition-delay:.35s; }
/* m2..m5: one heir per step, the trunk drawing down as they arrive */
html.motion #chA.m2 .vlist::before{ transform:scaleY(.3); }
html.motion #chA.m3 .vlist::before{ transform:scaleY(.54); }
html.motion #chA.m4 .vlist::before{ transform:scaleY(.78); }
html.motion #chA.m5 .vlist::before{ transform:scaleY(1); }
html.motion #chA.m2 .vrow[data-row="1"], html.motion #chA.m3 .vrow[data-row="2"],
html.motion #chA.m4 .vrow[data-row="3"], html.motion #chA.m5 .vrow[data-row="4"]{ opacity:1; transform:none; }
html.motion #chA.m2 .vrow[data-row="1"]::before, html.motion #chA.m3 .vrow[data-row="2"]::before,
html.motion #chA.m4 .vrow[data-row="3"]::before, html.motion #chA.m5 .vrow[data-row="4"]::before{ transform:scaleX(1); }
/* m5: the fourth child arrives and the three "wants to sell" verdicts land
   in the same beat · m6: the holdout turns red ("One doesn't.") */
html.motion #chA.m5 .vrow[data-row="1"] .status,
html.motion #chA.m5 .vrow[data-row="2"] .status,
html.motion #chA.m5 .vrow[data-row="3"] .status{ opacity:1; }
html.motion #chA.m5 .vrow[data-row="2"] .status{ transition-delay:.1s; }
html.motion #chA.m5 .vrow[data-row="3"] .status{ transition-delay:.2s; }
html.motion #chA.m6 .vrow[data-row="4"] .status{ opacity:1; }
html.motion #chA.m6 .node.no{ border-color:var(--red); background:#f8eae7; }
html.motion #chA.m6 .node.no .frac{ color:var(--red); }
/* m9: the whole diagram yields and the turn takes the canvas */
html.motion #chA .a2grid{ transition:opacity .7s var(--ease), transform .9s var(--ease); }
html.motion #chA .turn{
  position:absolute; left:3rem; right:3rem; top:50%; margin:0;
  transform:translateY(calc(-50% + 16px)); opacity:0;
  transition:opacity .8s var(--ease), transform .9s var(--ease);
}
html.motion #chA.m9 .a2grid{ opacity:0; transform:scale(.975); }
html.motion #chA.m9 .turn{ opacity:1; transform:translateY(-50%); transition-delay:.18s; }

/* ---------------- A-3: degrade in, then the clearing takeover ------------
   s0 a level pair · s1-s3 one bullet per step, the text block lifting by
   exact row arithmetic and the tint layer one notch up each time ·
   s4 (+s5 dwell): the text yields, the tint lifts, the green stamp draws
   itself on the model, and the promise takes the text column. */
html.motion #chB .textcol{ transform:translateY(calc(3 * var(--a3row) / 2)); transition:transform .95s var(--ease), opacity .6s var(--ease); }
html.motion #chB.m1 .textcol{ transform:translateY(var(--a3row)); }
html.motion #chB.m2 .textcol{ transform:translateY(calc(var(--a3row) / 2)); }
html.motion #chB.m3 .textcol{ transform:none; }
html.motion #chB.m4 .textcol{ opacity:0; transform:translateY(-16px); }
html.motion #chB .checks li{ opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease), transform .7s var(--ease); }
html.motion #chB.m1 .checks li[data-b="1"], html.motion #chB.m2 .checks li[data-b="2"],
html.motion #chB.m3 .checks li[data-b="3"]{ opacity:1; transform:none; }
/* the degrade: opacity only, one notch per problem */
html.motion #chB .tint{ transition:opacity .9s var(--ease); }
html.motion #chB.m1 .tint{ opacity:.45; }
html.motion #chB.m2 .tint{ opacity:.75; }
html.motion #chB.m3 .tint{ opacity:1; }
html.motion #chB.m4 .tint{ opacity:0; transition-duration:1.1s; }
/* the stamp waits for the takeover, then draws circle first, check second */
html.motion #chB .housestamp{ opacity:0; transition:opacity .5s ease-out .45s; }
html.motion #chB .housestamp .s{ stroke-dashoffset:1; transition:stroke-dashoffset .7s ease-out; }
html.motion #chB.m4 .housestamp{ opacity:1; }
html.motion #chB.m4 .housestamp .s{ stroke-dashoffset:0; transition-delay:.5s; }
html.motion #chB.m4 .housestamp .s + .s{ transition-delay:.95s; }
/* the takeover line overlays the (now empty) text cell */
html.motion .bturn{
  grid-column:2; grid-row:1; margin:0; align-self:center;
  opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease) .2s, transform .95s var(--ease) .2s;
}
html.motion #chB.m4 .bturn{ opacity:1; transform:none; }

/* ---------------- A-4: one glyph draws itself per step -------------------- */
html.motion #what .wsteps{ display:block; }
html.motion #what .wstep{
  position:absolute; left:1.6rem; right:1.6rem; top:50%;
  transform:translateY(calc(-50% + 14px)); opacity:0;
  transition:opacity .7s var(--ease), transform .8s var(--ease);
}
html.motion #what .wstep.on{ opacity:1; transform:translateY(-50%); }
html.motion #what .glyph .s{ stroke-dashoffset:1; transition:stroke-dashoffset .9s ease-out; }
html.motion #what .wstep.on .glyph .s{ stroke-dashoffset:0; }
html.motion #what .glyph .gf, html.motion #what .glyph .gp{ opacity:0; transition:opacity .45s ease-out; }
html.motion #what .wstep.on .glyph .gf, html.motion #what .wstep.on .glyph .gp{ opacity:1; }
/* The drawing arrives piece by piece, not all at once. The delay is keyed to
   POSITION rather than to .s, because the paper fills are children too: each
   fill is laid down one beat before the outline it sits under, so the sheet is
   opaque from the moment its own edge is inked. */
html.motion #what .wstep.on .glyph > :nth-child(1){ transition-delay:.02s; }
html.motion #what .wstep.on .glyph > :nth-child(2){ transition-delay:.09s; }
html.motion #what .wstep.on .glyph > :nth-child(3){ transition-delay:.16s; }
html.motion #what .wstep.on .glyph > :nth-child(4){ transition-delay:.23s; }
html.motion #what .wstep.on .glyph > :nth-child(5){ transition-delay:.30s; }
html.motion #what .wstep.on .glyph > :nth-child(6){ transition-delay:.37s; }
html.motion #what .wstep.on .glyph > :nth-child(7){ transition-delay:.44s; }
html.motion #what .wstep.on .glyph > :nth-child(8){ transition-delay:.51s; }
html.motion #what .wstep.on .glyph > :nth-child(9){ transition-delay:.58s; }
html.motion #what .wstep.on .glyph > :nth-child(10){ transition-delay:.65s; }
html.motion #what .wstep.on .glyph > :nth-child(11){ transition-delay:.72s; }
html.motion #what .wstep.on .glyph > :nth-child(12){ transition-delay:.79s; }

/* ---------------- A-5: the cards fly in and settle, one per step ---------- */
html.motion #team .tcard{ opacity:0; transition:opacity .7s var(--ease), transform .9s var(--ease); }
html.motion #team .tcard:nth-child(odd){ transform:translate(-30px,26px) rotate(-1.8deg) scale(.93); }
html.motion #team .tcard:nth-child(even){ transform:translate(30px,26px) rotate(1.8deg) scale(.93); }
html.motion #team .tcard.on{ opacity:1; transform:none; }

/* ---------------- A-6: the sheet fills in, numbers on the scrub -----------
   CUMULATIVE: each block holds its layout from the start (no reflow as it
   arrives) and the scroll enters them one at a time — counters, note, call
   panel — so the scene ends on the FINISHED sheet. The little house draws
   itself in as the call panel lands. */
html.motion #close .cstep{ opacity:0; transform:translateY(30px);
  transition:opacity .75s var(--ease), transform .95s var(--ease); }
html.motion #close .cstep.on{ opacity:1; transform:none; }
html.motion #close .counters div{ opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .75s var(--ease); }
html.motion #close .counters.on div{ opacity:1; transform:none; }
html.motion #close .counters.on div:nth-child(2){ transition-delay:.12s; }
html.motion #close .counters.on div:nth-child(3){ transition-delay:.24s; }
html.motion #close .callhouse .edge{ stroke-dashoffset:1; }
html.motion #close .callhouse .f{ opacity:0; }
html.motion #close .callband.on .callhouse .edge{ stroke-dashoffset:0; transition:stroke-dashoffset .9s ease-out .15s; }
html.motion #close .callband.on .callhouse .f{ opacity:1; transition:opacity .5s ease-out .55s; }

/* ---------------- the footer is the one thing still in flow -------------- */
html.motion .fl{ opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
html.motion .fl.is-on{ opacity:1; transform:none; }

html.motion.no-anim *{ transition:none !important; }

/* ------------------------------------------------ narrow fallback
   MOBILE LAW: every scene single-focus, one column, nothing overlapping.
   The real phone pass is still a later round; this keeps the grammar. */
@media (max-width: 1180px){
  /* hero: still side by side; the 37/63 split holds, only the gutters tighten. */
  .hero-deck{ gap:1.8rem; padding:0 2rem 2.4rem; }
  .hero-stage .axo{ --w:640; }
  .a2grid, .a3grid{ gap:2.4rem; }
  .teamgrid{ grid-template-columns:repeat(3,minmax(0,min(12.5rem,calc(50vh - 184px)))); gap:1.2rem 1.6rem; }
  .glyph{ --w:400; }
}
@media (max-width: 980px){
  /* hero: the pair stacks — words first, then the model under them, one focus. */
  .hero-mast{ padding:1.4rem 1.6rem .2rem; flex-direction:column; align-items:flex-start; gap:.5rem; }
  .hero-deck{ grid-template-columns:minmax(0,1fr); gap:2rem; padding:1.6rem 1.6rem 6rem; align-content:center; }
  .hero-copy h1{ max-width:14ch; }
  .hero-stage{ align-self:auto; justify-self:center; }
  .hero-stage .axo{ --w:544; width:calc(544 * 1px); height:auto; max-width:100%; }
  .frame{ padding:1.6rem 1rem 4.4rem; }
  .sheethead{ padding:0 .6rem 1rem; }
  .sheettitle{ font-size:1rem; letter-spacing:.14em; }
  .sheetno{ white-space:nowrap; }
  /* A-2 · caption in a fixed slot at the top, drawing below it, never sharing */
  .a2grid{
    grid-template-columns:minmax(0,1fr); justify-content:stretch;
    align-content:start; align-items:start; gap:1.2rem; padding:1.2rem .6rem 0;
  }
  .caps{ min-height:8.4rem; }
  .cap{ font-size:1.5rem; }
  .cap.long{ font-size:1.3rem; }
  html.motion .pinact .cap{ top:0; transform:translateY(10px); }
  html.motion .pinact .cap.on{ transform:none; }
  html.motion #chA.m2 .caps{ transform:none; }
  html.motion .a2house{ position:absolute; inset:0; }
  /* A phone column has no room for the arrival to swing sideways, and .a2house
     is inset:0 — scaling the FIGURE widens the whole column and pushes 2px of
     document past the viewport. So on one column the arrival scales the
     DRAWING instead, which is only --w wide and centred. Only the STATE-0
     rules are restated here; the .m1 settle and the .m2 yield out-specify
     them and are left alone. */
  html.motion #chA .a2house{ transform:none; }
  html.motion #chA .a2house .axo{ transform:scale(1.07); transition:transform 1.1s var(--ease); }
  html.motion #chA.m1 .a2house .axo{ transform:none; }
  /* the cap has to stay: without it .a2house > * {width:100%} out-specifies
     .axo and the assembling house grows until its base runs under the strip */
  .a2house{ --w:430; }
  .a2tree{ max-width:none; }
  .zlab{ margin-bottom:1.1rem; }
  .roothouse{ --w:96; }
  .dadwrap{ gap:1rem; }
  .node.dad{ padding:.7rem 1.1rem; }
  .node.dad .frac{ font-size:1.13rem; }
  .node .who{ font-size:1.25rem; }
  .vlist{ padding-top:16px; }
  .vlist::before{ left:18px; height:calc(100% - 40px); }
  .vrow{ padding-left:46px; min-height:78px; }
  .vrow::before{ left:18px; width:26px; }
  .node.wide{ padding:.7rem 1rem; gap:.8rem; }
  .node.wide .frac{ font-size:1.6rem; }
  .status{ font-size:1.25rem; }
  .turn{ font-size:2rem; margin:2rem .6rem 0; }
  html.motion #chA .turn{ left:1.4rem; right:1.4rem; }
  /* A-3 · the house steps out (so no degrade layer on phone); the text
     block keeps the same exact lift; the takeover fills the single column */
  .a3grid{
    grid-template-columns:minmax(0,1fr); justify-content:stretch;
    align-items:center; gap:1.2rem; padding:.6rem .6rem 0;
  }
  .housecol{ display:none; }
  #chB .textcol{ grid-column:1; }
  .head{ font-size:1.8rem; }
  .checks{ margin-top:1.4rem; }
  .checks li{ grid-template-columns:2rem 1fr; gap:1rem; }
  .checks p{ font-size:1.25rem; }
  html.motion .bturn{ grid-column:1; }
  .bturn{ font-size:1.6rem; margin-top:2rem; }
  /* A-4 · the glyph and its line, nothing else */
  .glyph{ --w:260; }
  .wsteps{ gap:2.4rem; padding:0 .6rem; }
  .wstep{ gap:1.5rem; }
  .wstep p{ font-size:1.55rem; max-width:18ch; }
  html.motion #what .wstep{ left:1rem; right:1rem; }
  /* A-5 */
  .teamline{ font-size:1.13rem; padding:0 .6rem; margin-bottom:1rem; }
  /* still THREE across, so it stays two rows — a third row does not fit a
     pinned frame at this height and used to spill over the strip below */
  .teamgrid{ grid-template-columns:repeat(3,minmax(0,min(11rem,calc(50vh - 190px)))); gap:1rem 1.2rem; padding:0 .6rem; }
  .teamgrid figcaption{ padding:.5rem .15rem .1rem; }
  .teamgrid strong, .teamgrid span{ font-size:1.13rem; line-height:1.24; }
  /* A-6 · the composed sheet collapses to one column; counters keep their
     ruled row (three narrow cells beat three stacked rows for height).
     Everything is compacted hard: the whole sheet must fit INSIDE the pinned
     frame or the column bleeds over the sheethead and the strip below. */
  .closestage{ gap:.7rem; padding:0 .6rem; }
  .counters div{ padding:.55rem .5rem; }
  .counters dt{ font-size:1.9rem; }
  .counters dd{ font-size:1.13rem; line-height:1.22; margin-top:.35rem; }
  .found{ grid-template-columns:minmax(0,1fr); gap:0; }
  .found .zlab{ margin-bottom:.6rem; }
  .found p{ font-size:1.13rem; line-height:1.45; }
  .callband{ flex-direction:column; gap:.7rem; padding:.85rem .9rem; text-align:center; }
  .callhouse{ --w:60; width:60px; }
  .closecall{ border-left:none; padding-left:0; }
  .closeline{ font-size:1.9rem; }
  .hero-cta.big{ margin-top:.7rem; padding:.8rem 1.7rem; }
  .esp{ margin-top:.7rem; }
  /* the form drops below the call copy; the consent row stays left-aligned
     (centred legal text is unreadable) */
  .smsopt{ border-left:none; padding-left:0; border-top:1px solid #d9d2bd; padding-top:.8rem; max-width:none; width:100%; }
  .smslead{ font-size:1.13rem; }
  .smsrow{ margin-top:.7rem; }
  .smsrow input{ padding:.5rem .7rem; }
  .smsrow button{ padding:.5rem 1rem; }
  .smsconsent{ margin-top:.7rem; text-align:left; }
  .smsconsent label{ line-height:1.35; }
  /* single-focus law: when the call panel arrives, the found-you note
     yields its slot (collapses, not just fades) — counters + panel then
     fit the frame exactly. Desktop keeps all three blocks visible. */
  html.motion #close .found{ max-height:24rem; overflow:hidden;
    transition:opacity .6s var(--ease), max-height .9s var(--ease), transform .95s var(--ease); }
  html.motion #close.m2 .found{ opacity:0; max-height:0; transform:none; }
  .sitefoot{ margin:2.6rem 1rem 3rem; }
  .tstrip{ padding:.85rem 1.4rem; letter-spacing:.12em; }
  .tstrip .ts-sheet{ display:none; }
}
@media (max-width: 620px){
  /* the strip wrapped to two lines on a phone and grew taller than the frame
     reserved for it, so the last team row landed underneath it. The wordmark
     is already in the masthead — on a phone the strip is just the number. */
  .tstrip .ts-firm{ display:none; }
  .tstrip{ justify-content:flex-end; }
  /* hero: the stacked pair still has to land inside one screen. ROUND 3
     adopts the scratch build's has-cue compaction — house ~250px and a
     6rem bottom band for the cue — which also fixes the ~20px overflow
     the stacked hero used to spill past the viewport at 390x844. */
  .hero-deck{ gap:1.1rem; padding:1.2rem 1.4rem 6rem; }
  .hero-stage .axo{ --w:250; width:calc(250 * 1px); }
  .cue-tick{ bottom:2.4rem; gap:.65rem; }
  .cue-label{ font-size:.75rem; }
  .cue-drop{ height:34px; }
  .frame{ padding-bottom:5.2rem; }
  .cap{ font-size:1.35rem; }
  .cap.long{ font-size:1.2rem; }
  .caps{ min-height:7rem; }
  .zlab{ margin-bottom:.8rem; padding-bottom:.5rem; }
  .node.dad{ padding:.5rem .9rem; }
  .vlist{ padding-top:12px; }
  .vlist::before{ height:calc(100% - 32px); }
  .vrow{ min-height:64px; padding-left:38px; }
  .vrow::before{ left:14px; width:20px; }
  .vlist::before{ left:14px; }
  .node.wide{ padding:.55rem .8rem; gap:.55rem; }
  .node.wide .frac{ font-size:1.4rem; }
  .a2house{ --w:300; }
  .roothouse{ --w:78; }
  .glyph{ --w:210; }
  .wstep p{ font-size:1.4rem; }
  /* phone: two across, three rows, every card sized off the viewport height
     so the last row lands inside the frame instead of under the strip */
  /* three across on a phone too: two rows beat three, and a narrower card
     costs less height than the extra row does. Width is capped three ways —
     a flat max, the height budget, and the viewport — so the grid can never
     outgrow either axis. */
  .teamgrid{
    grid-template-columns:repeat(3,minmax(0,min(9rem,calc(50vh - 190px),calc((100vw - 6.5rem)/3))));
    gap:.9rem .7rem;
  }
  .teamgrid figure{ padding:.45rem; }
  .teamgrid figcaption{ padding:.45rem .1rem .05rem; }
  .teamgrid strong, .teamgrid span{ font-size:1.13rem; line-height:1.22; }
  .teamline{ font-size:1.2rem; }
  .node.wide{ flex-wrap:wrap; }
  .status{ margin-left:0; }
}

/* A short viewport shrinks the team cards, and at that size a 20px role wraps
   to a second line and pushes the last row under the strip. Drop the caption
   to 18px there — still above the 18px floor, and the row stays one line.
   This block is LAST on purpose: same specificity, source order decides. */
@media (max-height: 860px){
  .teamgrid strong, .teamgrid span{ font-size:1.13rem; line-height:1.24; }
}

/* Very short phones (roughly 360x640 and below): the A-2 tree and the A-3
   list still had to shed height to clear the strip. The A-3 lift follows the
   row variable automatically. */
@media (max-width: 620px) and (max-height: 700px){
  :root{ --a3row:3.9rem; }
  .caps{ min-height:6rem; }
  .cap{ font-size:1.25rem; }
  .cap.long{ font-size:1.1rem; }
  .vrow{ min-height:54px; }
  .node.wide{ padding:.4rem .7rem; }
  .node.wide .frac{ font-size:1.25rem; }
  .checks p{ font-size:1.15rem; }
  .head{ font-size:1.55rem; }
  .bturn{ font-size:1.4rem; }
}

/* Short DESKTOP viewports (<=900px tall): the composed closing sheet plus
   the SMS form must still fit the pinned frame — shrink the counters, the
   panel and the form gaps there. Comes last so source order settles ties. */
@media (min-width: 981px) and (max-height: 900px){
  .closestage{ gap:1.3rem; }
  .counters div{ padding:1rem 1.4rem; }
  .counters dt{ font-size:3.4rem; }
  .found p{ font-size:1.2rem; line-height:1.5; }
  .callband{ padding:1.2rem 1.6rem; gap:1.6rem; }
  .callhouse{ --w:150; width:150px; }
  .closecall, .smsopt{ padding-left:1.6rem; }
  .closeline{ font-size:2.6rem; }
  .hero-cta.big{ margin-top:1rem; }
  .esp{ margin-top:.8rem; }
  .smslead{ font-size:1.13rem; }
  .smsrow, .smsconsent{ margin-top:.7rem; }
}