/* =============================================================================
   stropk.ai — v2 design system, built on the voxel art.

   The visual language comes straight out of the renders: hard edges (no radius
   anywhere), heavy 3px keylines, solid offset shadows, cream grounds. Every
   surface reads as a stacked brick. Blue is reserved for interaction states —
   it is the accent inside the art's own palette, so it never looks bolted on.

   Layout is flow/grid throughout. The wireframe this replaces was absolutely
   positioned on a fixed 1440px block and could not survive a phone.
   ========================================================================== */

:root{
  /* Scroll distance spent scrubbing the hero clip, then letting the page rise
     over it. Read back by v2.js, so change them here only. */
  --scrub:240vh;
  --rise:100vh;

  --ink:#141414;
  --ink-soft:#4C473F;
  --muted:#6F6A60;
  --faint:#B0A99E;
  --paper:#FFFFFF;
  --cream:#F6F1E6;      /* hero ground — sampled from the render backdrop */
  --cream-deep:#FEEED0; /* band ground — sampled from the crew render */
  --line:#E4DDCC;
  --accent:#2E5BFF;

  --disp:'Plus Jakarta Sans','Jakarta Fallback',Arial,sans-serif;
  --body:'Inter','Inter Fallback',Arial,sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --hdr-h:68px;
}

/* ---- metric-matched fallbacks -------------------------------------------
   The webfonts load with display=swap, so until they arrive the page renders in
   the fallback and then RE-LAYS OUT when they land. The old stack led with
   -apple-system, which is ~16% narrower than Inter, so every paragraph re-wrapped
   and the document jumped 146px — including 47px inside the booking form, which
   is content moving under the visitor's thumb.

   Anchoring to Arial instead is most of the fix on its own: measured against
   Arial, Plus Jakarta Sans 800 is 100.31% and Inter 400 is 106.5%, versus 105.6%
   and 116.6% against -apple-system. size-adjust closes the rest, so the fallback
   occupies the same space as the real font and the swap costs no reflow.

   Line heights here are all explicit, so vertical metrics do not need overriding
   — only the advance width, which is what re-wraps text. Re-measure with
   `fontshift` (webfont vs blocked-webfont section heights) if either face is
   ever swapped for another. */
@font-face{
  font-family:'Jakarta Fallback';
  src:local('Arial');
  size-adjust:100%;      /* Jakarta 800 measured 100.31% of Arial */
  ascent-override:96%;
}
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial');
  size-adjust:106.5%;    /* Inter 400 measured 106.5% of Arial */
  ascent-override:90%;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{width:min(var(--wrap),100% - (var(--gut) * 2));margin-inline:auto;}

/* ---- type ---------------------------------------------------------------- */
/* text-wrap:balance evens the line lengths and stops the one-word last line —
   "9pm." and "to." were each dropping alone under a full-width line. It only
   applies to short blocks, which is exactly headings, and browsers without it
   simply wrap the way they already did. */
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-0.022em;line-height:1.08;margin:0;
  text-wrap:balance;}
h1{font-size:clamp(34px,6.2vw,62px);}
h2{font-size:clamp(28px,4.4vw,44px);}
h3{font-size:clamp(19px,2.2vw,23px);letter-spacing:-0.01em;line-height:1.25;}
p{margin:0;}
.lede{font-size:clamp(17px,2vw,20px);line-height:1.55;color:var(--ink-soft);}
.eyebrow{
  font-family:var(--disp);font-size:12px;font-weight:800;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--muted);margin:0;
}

/* ---- buttons: the brick ------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:13px;font-weight:800;letter-spacing:0.12em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:16px 34px;border:3px solid var(--ink);border-radius:0;
  background:var(--ink);color:#fff;box-shadow:6px 6px 0 var(--ink);
  transition:transform .08s ease,box-shadow .08s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--accent);}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--accent);}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.sm{padding:11px 22px;font-size:12px;box-shadow:4px 4px 0 var(--ink);}
.btn.sm:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--accent);}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:4px;}

/* Quiet inline link — the "or just book a time" escape hatch. */
.link-quiet{
  font-size:15px;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.link-quiet:hover{color:var(--accent);}

/* ---- header -------------------------------------------------------------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hdr-h);
  display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.hdr.solid{background:var(--cream);border-bottom-color:var(--line);}
/* No width here: .wrap owns it. Setting width:100% would override .wrap (it is
   declared later) and slam the nav against the viewport edge. */
.hdr-inner{display:flex;align-items:center;gap:22px;}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:auto;}
.brand img{height:26px;width:auto;}
.brand span{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-0.02em;}

.nav{display:flex;align-items:center;gap:4px;}
.nav a,.nav button{
  font-family:var(--disp);font-size:14px;font-weight:700;color:var(--ink);
  background:none;border:0;padding:9px 13px;cursor:pointer;text-decoration:none;
  font-family:var(--disp);letter-spacing:-0.01em;
}
.nav a:hover,.nav button:hover{color:var(--accent);}


@media (max-width:900px){
  /* The nav is down to socials + one CTA, so the drawer and its hamburger both
     went: a menu that hides a single button is worse than no menu. Show the CTA
     inline instead - brand (126px) + CTA (~140px) fits the 335px content width
     at 375px with room to spare. These pages DO scroll, unlike the homepage, so
     the header CTA earns its place here; it is the only booking link once the
     hero has gone by.

     The socials go, not the CTA. They are in the footer of every one of these
     pages, and all three items would not fit the row. */
  .nav{position:static;flex-direction:row;align-items:center;gap:0;
    background:none;border:0;padding:0;display:flex;}
  .nav .btn.sm{display:inline-flex;margin:0;width:auto;}
}

/* ---- hero: scroll-scrubbed clip ------------------------------------------
   The stage is tall; the pin inside it is one viewport and sticks for the whole
   stage, so scroll position drives video.currentTime and the clip only ever
   moves when the visitor does. */
.hero-stage{position:relative;height:calc(100vh + var(--scrub) + var(--rise));}
.hero-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--cream);z-index:1;}
/* The <picture> is only a source-switch for the poster; it must not become a box
   in the layout or the absolutely-positioned .hero-still would resolve against it
   instead of .hero-pin. display:contents makes it vanish and leaves the img where
   it was. */
.hero-still-pic{display:contents;}
.hero-still,.hero-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center bottom;display:block;}
/* iOS keeps a muted, never-played video blank even after a seek, so the still
   holds until the clip actually paints its first frame. */
.hero-video{opacity:0;transition:opacity .25s linear;}
body.clip-live .hero-video{opacity:1;}

/* Sits high enough that the copy block clears the vans on the poster frame —
   they occupy roughly the bottom 40% until the scrub drives them out. */
.hero-copy{position:absolute;left:0;right:0;top:13vh;will-change:opacity,transform;}
.hero-copy h1{max-width:14ch;}
.hero-copy .lede{margin-top:18px;max-width:41ch;}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px;}
@media (max-width:900px){.hero-copy h1{max-width:none;} .hero-copy .lede{max-width:34ch;}}
@media (max-width:600px){.hero-copy{top:11vh;} .hero-copy .lede{font-size:16px;}}
/* A phone's URL bar eats ~180px of visible height, and `vh` does NOT shrink to
   match — it always reports the large viewport. So the copy block is measured
   generously while the box it sits in is short, and the CTA lands on the roof of
   the DETAILING van. Keyed off max-height (which DOES track the live viewport)
   and set in px rather than vh for the same reason. Measured: this is the gap
   between the CTA and the top of the fleet, at 375x667 and 390x664. */
@media (max-width:820px) and (orientation:portrait) and (max-height:700px){
  .hero-copy{top:calc(var(--hdr-h) + 6px);}
  .hero-copy h1{font-size:31px;}
  .hero-copy .lede{margin-top:10px;font-size:15px;}
  .hero-actions{margin-top:14px;}
}

.hero-hint{
  position:absolute;left:0;right:0;bottom:max(26px,env(safe-area-inset-bottom));
  text-align:center;font-family:var(--disp);font-size:11px;font-weight:800;
  letter-spacing:0.2em;text-transform:uppercase;color:#8A8172;pointer-events:none;
}

/* The page rises over the pinned hero rather than pushing it off. */
.page-below{position:relative;z-index:2;background:var(--paper);
  margin-top:calc(-1 * var(--rise));box-shadow:0 -30px 60px rgba(0,0,0,0.16);}

/* ---- sections ------------------------------------------------------------ */
/* Asymmetric on purpose: generous above an eyebrow (breath before a new idea),
   tighter below the last element, because the NEXT band's top padding finishes
   the gap. It was 116px top AND bottom, so every boundary was a 232px void —
   measured at 26-33% of every page on this site. #what below already overrode
   it to 68, which was the tell that the scale, not the section, was wrong. */
.sec{padding:clamp(56px,6.5vw,88px) 0 clamp(44px,5vw,68px);}
.sec-cream{background:var(--cream);}
/* `max-width:52ch` here resolved against the INHERITED 17px Inter, not the 44px
   display face of the h2 inside it — so the cap landed at ~447px and forced
   every headline to break at ~18 characters AND every lede to run 3-4 lines at
   ~48 characters. One wrong unit, both halves of "it reads as a wall". Cap the
   two children on their own terms instead. */
.sec-head{max-width:none;margin-bottom:clamp(28px,3.4vw,44px);}
.sec-head h2{max-width:900px;}
.sec-head .lede{max-width:62ch;margin-top:16px;}

/* ---- feature row: framed art beside copy --------------------------------
   Replaced the old .svc-row list. That layout was built for a run of alternating
   rows and only one ever survived the restructure, which left an orphan hairline
   above a small unframed cut-out. The art here is a diorama, so it wears the same
   keyline as the hero for the reasons in VOXEL.md — its cream backdrop cannot be
   colour-matched to the band. Art sits LEFT to mirror the hero's right. */
.feat-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
  gap:clamp(28px,5vw,68px);align-items:center;}
.feat-body .eyebrow{margin-bottom:14px;}
.feat-body h2{margin-bottom:20px;}
.feat-body p{color:var(--ink-soft);max-width:54ch;}
.feat-body p + p{margin-top:14px;}
@media (max-width:900px){.feat-grid{grid-template-columns:1fr;}
  .feat-art{max-width:420px;}}
.svc-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-family:var(--disp);font-size:13px;font-weight:800;letter-spacing:0.08em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
}
.svc-more::after{content:"→";transition:transform .15s ease;}
.svc-more:hover{color:var(--accent);}
.svc-more:hover::after{transform:translateX(4px);}
@media (max-width:760px){
  .svc-row,.svc-row.flip{grid-template-columns:1fr;gap:22px;}
  .svc-row.flip .svc-art{order:0;} .svc-row.flip .svc-body{order:0;}
  .svc-art{justify-content:flex-start;}
  .svc-art img{max-height:158px;}
}


/* ---- what we build: three cards + the Front Desk band --------------------
   All four visible at once. The bundle gets its own full-width band rather
   than a fourth equal tile — it is meant to read as the obvious buy, not as
   one more option. */
.prod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,26px);}
.prod-card{border:3px solid var(--ink);background:var(--paper);
  box-shadow:7px 7px 0 var(--ink);display:flex;flex-direction:column;}
/* Characters are transparent cut-outs, so the card supplies the cream they
   were rendered against. align-items:flex-end stands them on the keyline
   instead of floating them. */
.prod-art{background:var(--cream);border-bottom:3px solid var(--ink);
  display:flex;align-items:flex-end;justify-content:center;
  height:270px;padding:16px 16px 0;}
.prod-art img{max-height:238px;width:auto;max-width:100%;}
.prod-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1;}
.prod-body h3{margin-bottom:10px;}
.prod-body p{font-size:16px;color:var(--ink-soft);flex:1;}
.prod-body .svc-more{margin-top:18px;align-self:flex-start;}

.fd-band{margin-top:clamp(20px,2.6vw,30px);
  border:3px solid var(--ink);background:var(--cream-deep);
  box-shadow:9px 9px 0 var(--ink);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,44px);}
/* height:auto is REQUIRED, not tidiness. The width/height attributes on these
   imgs exist so the browser reserves the box before the bytes arrive; without an
   explicit auto height the attribute becomes the used height and the art renders
   at full intrinsic size. Same trap that hit .step-art. */
.fd-band img{width:100%;height:auto;max-width:540px;justify-self:center;}
.fd-band h3{font-size:clamp(24px,3vw,32px);margin-bottom:12px;}
.fd-band p{color:var(--ink-soft);font-size:17px;}
.fd-band .svc-more{margin-top:20px;}

@media (max-width:900px){
  .prod-grid{grid-template-columns:1fr;gap:22px;}
  .prod-art{height:240px;}
  .fd-band{grid-template-columns:1fr;gap:24px;}
  .fd-band img{max-width:100%;}
}

/* ---- testimonial + verified numbers -------------------------------------- */
.quote-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start;}
@media (max-width:860px){.quote-grid{grid-template-columns:1fr;}}
/* With James's video alongside: three columns wide, then straight to a stack.
   An intermediate two-column step would orphan the third child. */
.quote-grid.has-video{grid-template-columns:300px minmax(0,1.25fr) minmax(0,0.85fr);
  gap:clamp(28px,3.4vw,48px);}
@media (max-width:1180px){.quote-grid.has-video{grid-template-columns:1fr;}}

/* One card, no stat column. /review-automations uses this because there are no
   publishable review or SMS numbers to put beside the quote — see the comment on
   that section. It spans the full wrap rather than sitting at the stat-grid's
   width: a 760px card in a 1240px section strands half the row and reads as the
   same unfinished dead space this pass set out to remove. The prose is capped
   instead, so widening the card doesn't produce 140-character lines. */
.quote-grid.quote-solo{grid-template-columns:minmax(0,1fr);}
.quote-solo blockquote{max-width:24ch;}
.quote-solo .quote-lines p{max-width:78ch;}

.quote-card{background:var(--paper);border:3px solid var(--ink);box-shadow:9px 9px 0 var(--ink);
  padding:clamp(26px,3.4vw,40px);}
.quote-card blockquote{margin:0;font-family:var(--disp);font-weight:700;
  font-size:clamp(20px,2.6vw,27px);line-height:1.3;letter-spacing:-0.015em;}
.quote-card blockquote em{font-style:normal;color:var(--accent);}
.quote-lines{margin-top:20px;display:grid;gap:11px;}
.quote-lines p{color:var(--ink-soft);font-size:16px;}
.quote-by{display:flex;align-items:center;gap:13px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.quote-by b{font-family:var(--disp);font-size:15px;font-weight:800;}
.quote-by span{font-size:14px;color:var(--muted);}

.stat-grid{display:grid;gap:16px;}
.stat{border:3px solid var(--ink);background:var(--cream);padding:22px 24px;box-shadow:6px 6px 0 var(--ink);}
.stat b{display:block;font-family:var(--disp);font-size:clamp(30px,4.2vw,42px);font-weight:800;
  line-height:1;letter-spacing:-0.03em;}
.stat span{display:block;margin-top:8px;font-size:14.5px;color:var(--ink-soft);}
.stat-note{font-size:13px;color:var(--muted);margin-top:4px;}

/* ---- review band: the crew under five lighting stars ---------------------
   The crew is a cut-out so the band colour shows through with no seam; the base
   image carries DIMMED stars and a bright sprite of each is layered on its exact
   twin, which is what lets them light one at a time. */
.crew-band{background:var(--cream-deep);padding:clamp(58px,8vw,84px) 0;overflow:hidden;}
.crew-inner{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(30px,5vw,64px);align-items:center;}
.crew-copy h2{margin-bottom:16px;}
.crew-copy p{color:var(--ink-soft);}
.crew-copy .svc-more{margin-top:20px;}
.crew-art{position:relative;justify-self:end;width:100%;max-width:680px;}
/* crew.png is BOTH loading="lazy" and (until now) unsized, which is the worst
   pairing there is: it arrived exactly as the visitor scrolled onto it and shoved
   217px of page under their thumb. Sized in the markup now; height:auto keeps the
   attributes advisory. */
.crew-art .crew-base{width:100%;height:auto;}
.crew-star{position:absolute;display:block;height:auto;}
@media (max-width:860px){.crew-inner{grid-template-columns:1fr;} .crew-art{justify-self:stretch;}}

/* enter animation — IntersectionObserver adds .in */
.crew-art,.crew-copy > *{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.3,1);}
.crew-band.in .crew-art,.crew-band.in .crew-copy > *{opacity:1;transform:none;}
.crew-copy > *:nth-child(1){transition-delay:.10s;}
.crew-copy > *:nth-child(2){transition-delay:.18s;}
.crew-copy > *:nth-child(3){transition-delay:.26s;}
.crew-star{opacity:0;transform:scale(.7);transform-origin:50% 60%;
  transition:opacity .34s ease,transform .34s cubic-bezier(.2,1.5,.4,1);}
.crew-band.in .crew-star{opacity:1;transform:none;}
.crew-band.in .crew-star:nth-of-type(2){transition-delay:.52s;}
.crew-band.in .crew-star:nth-of-type(3){transition-delay:.66s;}
.crew-band.in .crew-star:nth-of-type(4){transition-delay:.80s;}
.crew-band.in .crew-star:nth-of-type(5){transition-delay:.94s;}
.crew-band.in .crew-star:nth-of-type(6){transition-delay:1.08s;}

/* ---- the form ------------------------------------------------------------ */
.lead-sec{background:var(--cream);border-top:3px solid var(--ink);}
.lead-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);
  gap:clamp(34px,5vw,64px);align-items:center;}
@media (max-width:1000px){.lead-grid{grid-template-columns:1fr;} .lead-art{display:none;}}

.vx-form{max-width:600px;}
.vx-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;}
.vx-field{display:flex;flex-direction:column;gap:8px;min-width:0;}
.vx-field.wide{grid-column:1 / -1;}
.vx-field label{font-family:var(--disp);font-size:11px;font-weight:800;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);}
.vx-field label .opt{color:var(--faint);}
.vx-input{
  font:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:3px solid var(--ink);border-radius:0;padding:14px 16px;width:100%;outline:none;
  box-shadow:6px 6px 0 var(--ink);
  transition:box-shadow .1s ease,border-color .1s ease;
}
.vx-input::placeholder{color:var(--faint);}
.vx-input:focus{border-color:var(--accent);box-shadow:6px 6px 0 var(--accent);}
@media (max-width:560px){.vx-grid{grid-template-columns:1fr;}}

/* Consent bricks. Both are unchecked by default and NEITHER is `required` —
   consent to automated calls and to texts has to be freely given, so gating
   submission on it is the pattern to avoid. The native input stays in the DOM
   for keyboard and screen readers; only its visual is replaced. */
.vx-consent{display:flex;align-items:flex-start;gap:13px;margin-top:22px;cursor:pointer;}
.vx-consent input{position:absolute;width:1px;height:1px;opacity:0;}
.vx-check{flex:0 0 auto;width:24px;height:24px;margin-top:2px;border:3px solid var(--ink);
  background:var(--paper);box-shadow:4px 4px 0 var(--ink);position:relative;
  transition:background .1s ease,border-color .1s ease;}
.vx-consent input:checked + .vx-check{background:var(--accent);border-color:var(--accent);}
.vx-consent input:checked + .vx-check::after{content:"";position:absolute;left:5px;top:0;
  width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);}
.vx-consent input:focus-visible + .vx-check{outline:3px solid var(--accent);outline-offset:3px;}
.vx-consent-text{font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
.vx-consent-text a{color:var(--muted);}

.vx-submit{margin-top:30px;}
.vx-foot{margin-top:18px;display:flex;flex-direction:column;gap:8px;}
.vx-msg{margin-top:18px;font-size:15px;}
.vx-msg[hidden]{display:none;}
.vx-msg.ok{color:var(--ink);font-family:var(--disp);font-weight:700;}
.vx-msg.bad{color:#B3261E;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* The .svc-car product-carousel rules that lived here were removed 2026-07-28.
   They styled a carousel that no longer exists in any page (see the static
   lineup below, which took its slot), and they hung off .svc-body, which went
   with the old services layout. The .ag-* base rules they modified are also
   unreferenced by any markup or by v2.js. */
#what{padding-top:clamp(44px,5vw,68px);padding-bottom:clamp(44px,5vw,68px);}
#what .sec-head{margin-bottom:clamp(24px,3vw,36px);}

/* Static lineup beside the form — the carousel's old slot. */
.lead-art .lineup{width:100%;max-width:460px;margin-inline:auto;display:block;}
.lead-art .lineup-cap{margin-top:16px;text-align:center;font-family:var(--disp);
  font-size:11px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);}

/* Agent carousel beside the form. touch-action pan-y so a horizontal swipe is
   ours while the page still scrolls vertically. */
.ag-carousel{touch-action:pan-y;}
.ag-viewport{overflow:hidden;}
.ag-track{display:flex;transition:transform .38s cubic-bezier(.22,.8,.3,1);}
.ag-slide{flex:0 0 100%;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:14px;height:320px;}
.ag-slide img{max-height:280px;max-width:100%;width:auto;object-fit:contain;}
.ag-cap{font-family:var(--disp);font-size:11px;font-weight:800;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);}
.ag-ui{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px;}
.ag-btn{width:42px;height:42px;padding:0;font:inherit;font-size:18px;line-height:1;color:var(--ink);
  background:var(--paper);border:3px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 var(--ink);
  cursor:pointer;transition:transform .08s ease,box-shadow .08s ease;}
.ag-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--accent);}
.ag-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--accent);}
.ag-dots{display:flex;gap:9px;}
.ag-dot{width:12px;height:12px;padding:0;background:var(--paper);border:3px solid var(--ink);
  border-radius:0;cursor:pointer;transition:background .12s ease,border-color .12s ease;}
.ag-dot.is-on{background:var(--accent);border-color:var(--accent);}
.ag-btn:focus-visible,.ag-dot:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}

/* ---- "hear it work": a real recorded call --------------------------------
   The single most persuasive thing on the site, so it is styled as a first-class
   object rather than a media widget. The transcript is printed under the player
   on purpose: most visitors will not press play, and the words still land. */
.hear-grid{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  gap:clamp(30px,5vw,64px);align-items:center;}
.hear-grid .sec-head{margin-bottom:0;}
@media (max-width:940px){.hear-grid{grid-template-columns:1fr;}}
.hearit{border:3px solid var(--ink);background:var(--paper);box-shadow:9px 9px 0 var(--ink);
  padding:clamp(24px,3vw,34px);}
.hearit-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);
  font-size:11px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:14px;}
.hearit-badge::before{content:"";width:9px;height:9px;background:#D93025;}
.hearit-head p{font-size:15px;color:var(--ink-soft);margin-bottom:22px;}
.hearit-player{display:flex;align-items:center;gap:16px;}
.hearit-play{flex:0 0 auto;width:56px;height:56px;padding:0;cursor:pointer;
  font:inherit;font-size:17px;line-height:1;color:#fff;background:var(--ink);
  border:3px solid var(--ink);border-radius:0;box-shadow:6px 6px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s ease,box-shadow .08s ease;}
.hearit-play:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--accent);}
.hearit-play:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--accent);}
.hearit-play:focus-visible{outline:3px solid var(--accent);outline-offset:4px;}
.hearit-bar{flex:1 1 auto;height:14px;border:3px solid var(--ink);background:var(--cream);
  position:relative;overflow:hidden;cursor:pointer;}
.hearit-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);}
.hearit-time{flex:0 0 auto;font-family:var(--disp);font-size:13px;font-weight:800;
  color:var(--muted);font-variant-numeric:tabular-nums;}
.hearit-script{margin:24px 0 0;padding-top:22px;border-top:1px solid var(--line);
  font-size:15.5px;line-height:1.6;color:var(--ink-soft);}
.hearit-script .pause{display:block;margin:12px 0;font-family:var(--disp);font-size:11px;
  font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);}
body.reduce .hearit-play{transition:none;}

/* ---- James on camera ------------------------------------------------------
   Click to play, never autoplay: it is 5.7MB and vertical, and nobody wants
   sound firing at them. preload="none" so it costs a visitor nothing until asked. */
.vid-frame{border:3px solid var(--ink);box-shadow:9px 9px 0 var(--ink);background:var(--ink);
  max-width:300px;width:100%;}
.vid-frame video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:var(--ink);}
.vid-cap{font-size:13.5px;color:var(--muted);margin-top:16px;max-width:300px;}

/* ---- sub-page components ------------------------------------------------- */
/* Page hero — static plate, no scrub. The scrubbed clip is the homepage's alone. */
.phero{background:var(--cream);padding:calc(var(--hdr-h) + clamp(48px,7vw,88px)) 0 clamp(48px,7vw,84px);
  border-bottom:1px solid var(--line);}
/* The art carries real weight here: it is the only image above the fold on a
   sub-page, so it gets a proper column rather than a thumbnail slot. */
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
  gap:clamp(28px,5vw,64px);align-items:center;}
/* The hero art is a full diorama, not a cut-out, so it arrives with its own cream
   backdrop. That backdrop is NOT flat — it carries a vignette and it drifts between
   renders (#FAE9CD to #FFF1D4), so no single page colour can ever match it and any
   attempt to float it seamlessly shows as a soft rectangle. Framing it in the same
   keyline the step cards use turns that seam into an intentional edge and kills the
   problem outright. Do not swap this back for a bare floating image. */
.phero-art,.feat-art{border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);
  background:#FBEBD2;overflow:hidden;line-height:0;}
.phero-grid img,.feat-art img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;max-height:none;margin-inline:0;}
/* Heroes with no art column. Without a measure the h1 runs the full 1240px and
   sets one enormous line; .lede already caps itself, so only the heading and
   the block around it need holding in. */
.phero-solo{max-width:min(58rem,100%);}
.phero .lede{margin-top:20px;max-width:48ch;}
.phero .hero-actions{margin-top:28px;}
@media (max-width:820px){.phero-grid{grid-template-columns:1fr;}
  .phero-grid .phero-art{order:-1;max-width:420px;}}

/* Three steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,28px);}
@media (max-width:820px){.steps{grid-template-columns:1fr;}}
.step{border:3px solid var(--ink);background:var(--paper);box-shadow:7px 7px 0 var(--ink);
  padding:0;overflow:hidden;display:flex;flex-direction:column;}
/* Art bleeds to the card's keyline. object-fit:cover means the render fills the
   box edge to edge, so its own cream backdrop never has to be colour-matched to
   anything — which is the trap that cost us a visible rectangle on the last hero. */
/* height:auto is load-bearing: the width/height attributes are there to reserve
   space and stop layout shift, but without this the attribute height wins over
   aspect-ratio and the art renders at its full natural height. */
.step-art{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  flex:0 0 auto;border-bottom:3px solid var(--ink);background:#FBEBD2;}
.step-body{padding:24px 24px 26px;}
.step b{display:block;font-family:var(--disp);font-size:12px;font-weight:800;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.step h3{margin-bottom:9px;}
.step p{font-size:15.5px;color:var(--ink-soft);}

/* Plain fact list — what it plugs into, what's included */
/* ---- "What you get" — grouped kit cards ---------------------------------
   This replaced a flat two-column bullet list. Every line on the page is the
   same line it was; the grouping is what gives it hierarchy. Three groups per
   page, deliberately echoing the three steps above without repeating their
   hard shadow — border only, so the two bands don't fight. */
.kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,24px);}
@media (max-width:900px){.kit{grid-template-columns:1fr;}}
.kit-card{border:3px solid var(--ink);background:var(--paper);padding:24px 24px 26px;}
.kit-card b{display:block;font-family:var(--disp);font-size:12px;font-weight:800;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.kit-card ul{margin:0;padding:0;display:grid;gap:12px;}
.kit-card li{list-style:none;padding-left:24px;position:relative;
  color:var(--ink-soft);font-size:15.5px;line-height:1.5;}
.kit-card li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;
  background:var(--accent);}

/* FAQ */
/* Two columns of framed cards rather than one long hairline-separated stack —
   the stack read as a grey wall and roughly doubled the page's tail. Markup is
   untouched on purpose: each page carries FAQPage JSON-LD mirroring these exact
   questions and answers, so the copy has to stay byte-identical. */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,24px);
  align-items:start;}
@media (max-width:900px){.faq{grid-template-columns:1fr;}}
.faq-item{border:3px solid var(--ink);background:var(--paper);padding:24px 26px 26px;}
.faq-item h3{margin-bottom:9px;font-size:clamp(17px,1.7vw,19px);}
.faq-item p{color:var(--ink-soft);max-width:none;font-size:15.5px;}

/* Legal pages */
/* ---- paid callback landing page -----------------------------------------
   This page mirrors the Form Callback ad literally: a phone-first demo above
   the fold, no product-navigation detour, and the real consented callback form.
   It deliberately reuses .vx-* inputs so validation/tracking stay on the same
   production path as every other form. */
.callback-page{min-height:100vh;background:var(--cream);display:flex;flex-direction:column;}
.callback-page main{flex:1;}
.callback-hdr{height:72px;border-bottom:3px solid var(--ink);background:var(--paper);display:flex;align-items:center;}
.callback-hdr-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.callback-hdr .link-quiet{font-size:13px;}
.callback-hero{padding:clamp(46px,7vw,88px) 0 clamp(54px,8vw,96px);background:
  radial-gradient(circle at 13% 18%,rgba(234,81,46,.11),transparent 28%),var(--cream);}
.callback-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,520px);
  gap:clamp(38px,6vw,82px);align-items:center;}
.callback-copy h1{font-size:clamp(44px,6.2vw,80px);line-height:.98;max-width:11ch;}
.callback-copy .lede{margin-top:24px;max-width:54ch;font-size:clamp(17px,1.7vw,20px);}
.callback-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px;
  border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);background:var(--paper);}
.callback-proof div{padding:18px 18px 20px;min-width:0;}
.callback-proof div+div{border-left:3px solid var(--ink);}
.callback-proof b{display:block;font-family:var(--disp);font-size:clamp(23px,2.8vw,34px);
  line-height:1;font-weight:800;letter-spacing:-.04em;}
.callback-proof span{display:block;margin-top:7px;color:var(--muted);font-size:12.5px;line-height:1.35;}
.callback-expect{margin-top:34px;max-width:590px;}
.callback-expect>b{font-family:var(--disp);font-size:12px;text-transform:uppercase;letter-spacing:.14em;}
.callback-expect ol{counter-reset:callback-step;display:grid;gap:12px;margin:16px 0 0;padding:0;}
.callback-expect li{counter-increment:callback-step;list-style:none;position:relative;padding-left:38px;color:var(--ink-soft);}
.callback-expect li::before{content:counter(callback-step);position:absolute;left:0;top:-2px;width:26px;height:26px;
  display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--disp);font-size:11px;font-weight:800;}
.callback-card{background:var(--paper);border:3px solid var(--ink);box-shadow:12px 12px 0 var(--ink);
  padding:clamp(26px,3.8vw,42px);}
.callback-card-head{padding-bottom:24px;margin-bottom:26px;border-bottom:1px solid var(--line);}
.callback-card-head h2{font-size:clamp(28px,3.4vw,40px);margin:12px 0 8px;}
.callback-card-head p{color:var(--muted);font-size:15px;}
.callback-live{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-size:11px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.callback-live i{width:10px;height:10px;background:#20a75a;box-shadow:0 0 0 5px rgba(32,167,90,.13);}
.callback-form{max-width:none;}
.callback-fields{grid-template-columns:1fr 1fr;gap:19px 20px;}
.callback-consent{margin-top:24px;padding:16px;border:1px solid var(--line);background:var(--cream);}
.callback-submit{width:100%;margin-top:24px;font-size:16px;}
.callback-fine{font-size:12px;line-height:1.45;color:var(--muted);margin-top:14px;}
.callback-form .vx-foot{text-align:center;align-items:center;}
.callback-success{border:3px solid var(--ink);background:var(--cream);box-shadow:6px 6px 0 var(--ink);padding:18px;}
.callback-trust{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:var(--paper);}
.callback-trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.callback-trust-grid div{padding:28px 30px;}
.callback-trust-grid div+div{border-left:3px solid var(--ink);}
.callback-trust-grid b{display:block;font-family:var(--disp);font-size:15px;margin-bottom:6px;}
.callback-trust-grid span{font-size:14px;color:var(--muted);}
.callback-footer{background:var(--cream);padding:26px 0;}
.callback-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-size:12px;color:var(--muted);}
.callback-footer-inner div{display:flex;gap:20px;flex-wrap:wrap;}
.callback-footer a{color:inherit;}
@media (max-width:900px){
  .callback-grid{grid-template-columns:1fr;align-items:start;}
  .callback-copy h1{max-width:13ch;}
  .callback-card{max-width:620px;width:100%;}
}
@media (max-width:600px){
  .callback-hdr{height:64px;}
  .callback-hdr .link-quiet{font-size:11px;}
  .callback-hero{padding:38px 0 58px;}
  .callback-copy h1{font-size:clamp(40px,13vw,58px);}
  .callback-proof{grid-template-columns:1fr;}
  .callback-proof div+div{border-left:0;border-top:3px solid var(--ink);}
  .callback-proof div{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:14px;padding:15px 17px;}
  .callback-proof span{margin-top:0;}
  .callback-expect{display:none;}
  .callback-card{padding:24px 20px;box-shadow:8px 8px 0 var(--ink);}
  .callback-fields{grid-template-columns:1fr;gap:17px;}
  .callback-trust-grid{grid-template-columns:1fr;}
  .callback-trust-grid div+div{border-left:0;border-top:1px solid var(--line);}
  .callback-trust-grid div{padding:22px 0;}
  .callback-footer-inner{align-items:flex-start;flex-direction:column;}
}

.legal{padding:calc(var(--hdr-h) + 56px) 0 90px;}
.legal h1{margin-bottom:10px;}
.legal h2{font-size:clamp(21px,2.6vw,26px);margin:40px 0 12px;}
.legal h3{font-size:17px;margin:22px 0 8px;}
.legal p,.legal li{color:var(--ink-soft);font-size:16px;margin-bottom:12px;}
.legal ul{padding-left:22px;}
.legal .legal-updated{color:var(--muted);font-size:14px;margin-bottom:26px;}
.legal .legal-intro{font-size:17.5px;color:var(--ink-soft);}
.legal .wrap{max-width:760px;}
/* The SMS block is what a carrier reviewer reads, so it gets its own frame
   rather than dissolving into the surrounding legal prose. */
.legal .sms-block{border:3px solid var(--ink);background:var(--cream);
  box-shadow:8px 8px 0 var(--ink);padding:26px 28px;margin:34px 0;}
.legal .sms-block h2{margin-top:0;}

/* ---- footer: cream, never a dark bar ------------------------------------- */
/* One row now, so it does not need the height of a four-column footer. */
.ftr{background:var(--cream);border-top:3px solid var(--ink);padding:clamp(22px,3vw,34px) 0;}
.ftr-base{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  margin-top:clamp(34px,4vw,52px);padding-top:22px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);}
/* That top border separated this row from the columns above it. As the only row
   in the footer it would draw a second line directly under the footer's own 3px
   rule. :first-child rather than deleted, so it returns if content is ever put
   back above it. */
.ftr-base:first-child{margin-top:0;padding-top:0;border-top:0;}
.ftr-base a{text-decoration:none;color:var(--muted);}
.ftr-base a:hover{color:var(--accent);}
/* Instagram only. margin-left:auto sends it to the far end of the row; on a
   narrow screen .ftr-base wraps and it simply starts the next line. */
.ftr-ig{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;}
.ftr-ig svg{width:18px;height:18px;display:block;}

/* ---- reduced motion ------------------------------------------------------
   No scrub and no decode: the still holds and the page still rises. */
body.reduce{--scrub:0vh;}
body.reduce .hero-video{display:none;}
body.reduce .hero-hint{display:none;}
body.reduce .ag-track{transition:none;}
body.reduce .vx-input,body.reduce .btn{transition:none;}
body.reduce .crew-art,body.reduce .crew-copy > *,body.reduce .crew-star{
  opacity:1;transform:none;transition:none;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}