/* vehicle-accidents.com — concept v3 stylesheet ("dramatic" pass).
   Near-black charcoal ground, one decisive crimson accent, a diagonal
   cut through the hero, a duotone-to-colour treatment on the portrait,
   oversized display type, cinematic scroll motion. Plain CSS, no build
   step. Same font stack as v1/v2 (Newsreader + Source Sans 3).

   Structure notes:
   - header.site is fixed; transparent over the hero, solid once the
     page's own JS adds ".scrolled" (desktop). Below 980px the hero is
     taller than a screen, so the header carries a frosted backdrop at
     all times and, where the browser supports scroll-driven animation,
     goes solid within the first 160px of scroll.
   - Below 980px the hero drops its 100svh min-height and grows to fit
     its stacked content (copy + form card). Same fix as v2. Nothing in
     the hero is fixed-height; the only overflow:hidden clips decor.
   - Photo geometry: the reference is a 4-panel turnaround sheet
     (2752x1536, panels 688px wide, panel aspect ~0.45). The hero shows
     panel 4 (facing into the copy); the "why" portrait shows panel 3
     (the profile). Both crops are computed, not eyeballed. */

:root{
  --bg:#0B0B0D;          /* true near-black, "on-black" sections */
  --char:#141417;        /* page ground */
  --char-2:#1B1B20;      /* raised surfaces on charcoal */
  --char-3:#232329;      /* hover / borders */
  --paper:#F2EFE9;       /* text on dark */
  --dim:#A9A6A2;         /* secondary text on dark */
  --dim-2:#7C7975;       /* tertiary */
  --line:rgba(242,239,233,.10);
  --line-2:rgba(242,239,233,.18);
  --crim:#C1121F;        /* the accent, buttons and rules */
  --crim-hot:#E6253A;    /* crimson for text on charcoal (~5:1) */
  --crim-deep:#7A0B14;   /* hover fills, cut shadows */
  --crim-ink:#A50F1B;    /* crimson on the light section */
  --bone:#EFEBE4;        /* the one light section */
  --bone-2:#E3DACB;      /* sand card on bone */
  --ink:#15151A;
  --muted:#5C5A57;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Source Sans Pro",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1180px;
  --ribbon-h:0px;
  --ease-out:cubic-bezier(.16,.8,.3,1);
  --ease-cine:cubic-bezier(.77,0,.18,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;background:var(--char)}
body{
  margin:0;background:var(--char);color:var(--paper);
  font-family:var(--sans);font-size:clamp(18px,1vw + 13px,20px);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));
}
@media(min-width:980px){body{padding-bottom:0}}
::selection{background:var(--crim);color:var(--paper)}
img{display:block;max-width:100%}
a{color:var(--paper)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--crim-hot);outline-offset:3px}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance;font-optical-sizing:auto;color:var(--paper)}
h1{font-size:clamp(58px,8.4vw,112px);line-height:.92;letter-spacing:-.025em;font-weight:600}
h2{font-size:clamp(36px,4.6vw,60px);line-height:1.0;letter-spacing:-.02em}
h3{font-size:clamp(22px,2vw,26px);line-height:1.25}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.eyebrow{font-family:var(--sans);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:700;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor;flex:none;opacity:.9}
.eyebrow.crimson{color:var(--crim-hot)}
.tnum{font-variant-numeric:tabular-nums}
section{padding:clamp(72px,10vw,140px) 0;position:relative}

/* ============ CHAPTER MARKS ============
   The boss's ask, in one device: everything after the cinematic hero
   read as flat, disconnected boxes with no sense that it's still the
   same story. A numbered chapter mark on every informational section
   turns "scroll past a stack of cards" into "read through a case file" --
   cheap to add, consistent everywhere, no risk to the content itself. */
.chapter-n{font-family:var(--serif);font-style:italic;font-weight:500;font-size:15px;letter-spacing:0;text-transform:none;opacity:.75}
.stack>*+*{margin-top:22px}

/* unconfirmed-claim marker: dotted crimson underline, hover for the reason */
.c{text-decoration:underline dotted;text-decoration-color:var(--crim-hot);text-underline-offset:.22em;text-decoration-thickness:1.5px;cursor:help}
.why .c{text-decoration-color:var(--crim-ink)}

/* ============ concept ribbon + scroll progress ============ */
.ribbon{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--ribbon-h);line-height:var(--ribbon-h);
  background:var(--bg);color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:center;
  padding:0 12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--line)}
.ribbon .c{text-decoration-color:var(--dim-2);color:var(--paper)}
.scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:transparent;pointer-events:none}
.scrollbar-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--crim-deep),var(--crim),var(--crim-hot));transform-origin:0 50%;transform:scaleX(0)}

/* ============ header: fixed, transparent over the hero, solid on .scrolled ============ */
header.site{position:fixed;top:var(--ribbon-h);left:0;right:0;z-index:40;padding:18px 0 14px;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease,padding .3s ease}
header.site.scrolled{background:rgba(11,11,13,.92);border-bottom-color:var(--line);box-shadow:0 12px 40px -20px rgba(0,0,0,.8);backdrop-filter:blur(14px) saturate(.9);-webkit-backdrop-filter:blur(14px) saturate(.9);padding:12px 0 10px}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.mark{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.mark .nm{font-family:var(--serif);font-size:26px;line-height:1;color:var(--paper);font-weight:500;letter-spacing:-.01em}
.mark .desc{font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-top:6px;color:var(--dim)}
nav.main{display:none;gap:30px;align-items:center;font-size:16px;font-weight:600}
nav.main a{text-decoration:none;color:var(--paper);padding:10px 0;position:relative}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:2px;background:var(--crim-hot);transition:right .35s var(--ease-cine)}
nav.main a:hover::after{right:0}
nav.main a.phone{color:var(--crim-hot);font-size:18px;font-weight:700;text-decoration-color:var(--dim-2)}
nav.main a.phone::after{display:none}
@media(min-width:980px){nav.main{display:flex}}
/* mobile nav drawer: menu-btn toggles nav.main.open below 980px. Anchored
   to --header-h (already measured live in JS for the hero padding) so it
   always starts right under the real header, not a guessed offset. */
nav.main.open{display:flex;position:fixed;top:var(--header-h,64px);left:0;right:0;z-index:39;
  flex-direction:column;align-items:stretch;gap:0;background:rgba(11,11,13,.97);
  backdrop-filter:blur(14px) saturate(.9);-webkit-backdrop-filter:blur(14px) saturate(.9);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:8px clamp(20px,5vw,64px) 18px;max-height:calc(100svh - var(--header-h,64px));overflow-y:auto}
nav.main.open a{padding:16px 0;border-bottom:1px solid var(--line)}
nav.main.open a:last-of-type{border-bottom:0}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;border:1px solid var(--line-2);background:rgba(11,11,13,.35);color:var(--paper);border-radius:2px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:0 14px;cursor:pointer}
@media(min-width:980px){.menu-btn{display:none}}

/* below 980 the hero is taller than a screen and the JS only flips .scrolled
   past the hero, so the header carries a frosted backing at all times and
   (where supported) goes solid within the first 160px of scroll */
@media(max-width:979px){
  header.site{background:rgba(11,11,13,.38);backdrop-filter:blur(14px) saturate(.9);-webkit-backdrop-filter:blur(14px) saturate(.9);padding:12px 0 10px}
  header.site .mark .nm{font-size:22px}
  header.site .mark .desc{font-size:11px;letter-spacing:.14em}
  @supports (animation-timeline:scroll()){
    header.site{animation:headerSolid linear both;animation-timeline:scroll(root);animation-range:0 160px}
    @keyframes headerSolid{from{background:rgba(11,11,13,.38);border-bottom-color:transparent}to{background:rgba(11,11,13,.92);border-bottom-color:var(--line)}}
  }
}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 30px;border-radius:0;text-decoration:none;font-weight:700;font-size:18px;border:0;cursor:pointer;font-family:var(--sans);letter-spacing:.01em;position:relative;isolation:isolate;color:var(--paper)}
.btn-crimson{background:transparent}
.btn-crimson::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--crim-hot),var(--crim) 60%);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:filter .25s ease,transform .25s var(--ease-out)}
.btn-crimson{box-shadow:0 18px 40px -16px rgba(193,18,31,.7)}
.btn-crimson:hover::before{filter:brightness(1.1)}
.btn-crimson:active::before{transform:translateY(1px)}
.btn-crimson:focus-visible{outline-color:var(--paper)}
.textlink{color:var(--paper);font-weight:600;text-decoration:none;border-bottom:2px solid var(--crim-hot);padding-bottom:2px;transition:color .2s}
.textlink:hover{color:var(--crim-hot)}

/* ============ HERO ============ */
/* PINNED scroll-scrub (desktop/tablet, >=980px): .hero-track is tall
   (set below) so there's real scroll distance to scrub the video across;
   .hero sticks to the top of the viewport for that whole distance, then
   releases to the next section once the track ends -- exactly the "stays
   put while it plays, then continues" behaviour, the scroll-world engine's
   core technique. Below 980px: no pin (phones scrub less reliably and the
   stacked copy+form already needs its own natural height), the section
   just grows to fit its content -- the exact clipping fix from v2. */
.hero-track{position:relative;height:100svh}
@media(min-width:980px){.hero-track{height:340vh}}

/* The copy + form sit OUT OF THE WAY while the story plays (the boss's
   real complaint: the card sat on top of the video the whole time, so
   scrolling looked like nothing was happening and the crash beat never
   registered), then fade and slide in together once the sequence lands
   on Ozzie. JS toggles ".revealed" on both at the same scroll threshold
   it uses to freeze the video on the final frame, so opacity, motion
   AND click-ability all flip together -- an invisible form sitting on
   top of the video would otherwise still eat clicks meant for it. */
@media(min-width:980px){
  /* Only the FORM gets hidden-until-Ozzie: it's the piece that actually
     sits on top of the video (the headline column lives in the black
     panel to the left of the diagonal cut and never overlapped the
     footage, so it stays visible the whole time -- hiding it too just
     read as an empty black slab). !important because .hero-form carries
     its own page-load ANIMATION (further down this file) that sets
     opacity via keyframes+forwards -- an animated value beats a plain
     declaration regardless of rule order or specificity, so a normal-
     priority opacity:0 here was being silently overridden the moment
     that animation finished. animation:none kills it outright; the
     transition below then drives the reveal instead. */
  .hero-form{
    opacity:0!important;transform:translateY(24px)!important;
    animation:none!important;pointer-events:none;
    transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
  .hero-form.revealed{opacity:1!important;transform:none!important;pointer-events:auto}
}
.hero{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;background:var(--char);isolation:isolate;
  --photo:112vw}
@media(min-width:980px){.hero{position:sticky;top:0;height:100svh;min-height:0}}
/* mobile: min-height (not height) was zeroed out here to stop the form
   clipping off the bottom -- but min-height only ever sets a floor, it
   never caps growth, so the real fix is just leaving it at 100svh; a
   taller stacked mobile layout still grows past that fine. The zeroed
   version was the actual bug: it shrank the hero container down to the
   text's height, which shrank the full-bleed video down with it (boss's
   direct report, 2026-09-14: "video doesn't have full display" on his
   phone). */
@media(min-width:640px) and (max-width:979px){.hero{--photo:74vw}}
@media(max-width:979px) and (orientation:landscape){.hero{--photo:52vw}}

/* photo layer. Desktop: the layer is 200% of the hero wide and shifted
   left, so one 4-panel sheet spans two hero widths and panel 4 (the one
   facing into the copy) lands with its head at ~55% of the hero width,
   between the copy column and the form card. Panels 1-3 sit under the
   diagonal cut or off-canvas. */
.hero-bg{position:absolute;top:0;bottom:0;left:-117%;width:200%;z-index:0;
  background-size:cover;background-position:50% 10%;background-repeat:no-repeat;
  transform-origin:55% 30%;
  transform:translateY(calc(var(--p,0) * -60px)) scale(1.06);
  filter:grayscale(1) contrast(1.12) brightness(.82);
  animation:colourIn 2.2s ease 1.1s forwards}
@keyframes colourIn{to{filter:grayscale(.12) contrast(1.06) brightness(.9)}}

/* #scrollVideo overrides .hero-bg's quadrant-crop positioning above: that
   trick (200% wide, shifted left) was built for panning into one corner
   of the static 4-panel turnaround sheet. The scroll sequence plays a
   clean, already-single-subject real video instead, so it just needs a
   plain full-bleed cover, no pan/zoom math -- object-fit does the
   cropping now, on every screen size, no separate mobile background-
   position hacks needed at all. Higher specificity (ID) wins over the
   .hero-bg class rules and their media-query variants further down. */
#scrollVideo.hero-bg{left:0;top:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 20%;background:#0b0b0d;
  transform:none;filter:none;animation:none}

/* duotone: crimson multiplied over the desaturated photo (highlights go
   crimson, shadows stay black), then it eases back to let colour through */
.hero-duotone{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(120deg,var(--crim-deep) 0%,var(--crim) 55%,#3A0A10 100%);
  mix-blend-mode:multiply;opacity:1;animation:duoBack 2.2s ease 1.1s forwards}
@keyframes duoBack{to{opacity:.42}}

.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,20,23,.85) 30%,rgba(20,20,23,.35) 52%,rgba(20,20,23,.05) 72%,rgba(20,20,23,.45) 100%),
    linear-gradient(0deg,rgba(20,20,23,.95) 0%,rgba(20,20,23,.4) 22%,transparent 45%),
    linear-gradient(180deg,rgba(11,11,13,.6) 0%,transparent 26%)}

/* the diagonal cut: was a SOLID charcoal slab under the copy, which hid
   the fact that the same full-bleed video actually runs underneath the
   whole hero, not just the right side (boss's direct question,
   2026-09-14: does the video continue under there?). Answer was yes --
   so the slab is now a translucent veil instead of a flat fill: dark
   enough to keep the headline readable, blurred+dimmed enough that it
   doesn't compete with the type, but genuinely see-through, so the
   driving footage bleeds through as a moody hint of motion and color
   rather than vanishing behind a hard black panel. Still a 3px crimson
   hairline along the edge from the parent showing through underneath. */
.hero-cut{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,var(--crim-hot),var(--crim-deep));
  clip-path:polygon(0 0,46% 0,36% 100%,0 100%);
  transition:clip-path .6s var(--ease-cine);
  filter:drop-shadow(18px 0 40px rgba(0,0,0,.55))}
/* Ozzie's face sits close enough to centre in his own clip that the
   normal cut still crosses it (boss's direct finding, 2026-09-14) --
   but only during HIS beat; the rest of the sequence reads fine at the
   normal width, and he doesn't want the panel permanently narrower. JS
   below toggles .hero-peek only while video.currentTime is in Ozzie's
   range, so the panel eases narrower just for that stretch and back to
   its normal width for everything before and after it. */
.hero.hero-peek .hero-cut{clip-path:polygon(0 0,32% 0,22% 100%,0 100%)}
/* Reverted to solid: the see-through veil never read as "video peeking
   through" to the boss, just as a flat burgundy tint -- because the
   .hero-scrim gradient underneath already darkens this same region
   independently, so there was rarely enough live detail left for the
   backdrop-filter to reveal. Boss's call, 2026-09-14: back to solid
   black rather than keep chasing a effect that isn't landing. */
.hero-cut::after{content:"";position:absolute;inset:0;background:#121215;
  clip-path:polygon(0 0,calc(46% - 3px) 0,calc(36% - 3px) 100%,0 100%);
  transition:clip-path .6s var(--ease-cine)}
.hero-cut::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;mix-blend-mode:overlay;
  clip-path:polygon(0 0,46% 0,36% 100%,0 100%);z-index:1;transition:clip-path .6s var(--ease-cine)}
.hero.hero-peek .hero-cut::after{clip-path:polygon(0 0,calc(32% - 3px) 0,calc(22% - 3px) 100%,0 100%)}
.hero.hero-peek .hero-cut::before{clip-path:polygon(0 0,32% 0,22% 100%,0 100%)}

.hero-grid{position:relative;z-index:4;flex:1;display:flex;flex-direction:column;gap:36px;padding:var(--photo) 0 56px}
@media(min-width:980px){
  /* header.site floats fixed over the hero, so this top padding is a
     clearance requirement, not just breathing room -- it can shrink
     with the viewport for the overflow fix below, but never below the
     header's real measured height (--header-h, set by JS) plus a gap,
     or the copy renders underneath the nav. --header-h defaults to a
     safe guess for the first paint before JS measures it. */
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.8fr);align-items:center;align-content:center;gap:56px;
    padding:max(clamp(48px,7vh,140px),calc(var(--header-h,100px) + 28px)) 0 clamp(32px,5vh,90px)}
  /* Overrides the scroll-fade this rule used to do (opacity -> 0 by
     p=.8): that was built for a single-screen hero and would have
     erased the headline AND the form (now nested inside hero-body,
     per the boss's fix moving the card off his face) right as the
     reveal is supposed to happen. The headline stays put the whole
     ride now; only the form fades in on its own, gated below. */
  .hero-body{transform:none;opacity:1}
}
.hero-body{max-width:620px}
.hero-body>*{opacity:0;transform:translateY(28px);animation:heroUp 1s var(--ease-out) forwards}
.hero-body>*:nth-child(1){animation-delay:.15s}
.hero-body>*:nth-child(2){animation-delay:.3s}
.hero-body>*:nth-child(3){animation-delay:.55s}
.hero-body>*:nth-child(4){animation-delay:.72s}
.hero-body>*:nth-child(5){animation-delay:.88s}
@keyframes heroUp{to{opacity:1;transform:none}}
/* Height-capped on top of the page-wide width-based clamp: on a tall
   narrow window 8.4vw is small and this does nothing, but on a wide,
   SHORT window (a normal laptop lid) 8.4vw alone renders near max size
   regardless of how little vertical room the pinned 100svh hero has --
   that's the exact bug that clipped the free-case-review form off the
   bottom (boss report, 2026-09-13): three h1 lines at ~103px each plus
   the card below blew past the viewport and .hero's overflow:hidden
   silently ate the rest. min() with a vh term makes the headline shrink
   on short screens too, so total hero content actually fits. */
/* The h1 itself no longer plays the generic .hero-body>* fade-up --
   that was a block-wide opacity+translateY on the WHOLE three-line
   headline at once, then a flat clip-path box-wipe on top of just the
   third line. Together they read as one rigid left-to-right reveal
   (boss's direct note, 2026-09-14): a straight hard edge sweeping over
   static type. Real cinematic title reveals don't wipe a box over
   fixed text -- they let the type itself move, each line independently,
   masked by its own line box so it rises out from underneath rather
   than being uncovered. See .line-mask/.line-inner below.*/
.hero-body h1{margin-top:10px;text-shadow:0 2px 40px rgba(0,0,0,.35);opacity:1;transform:none;animation:none}
@media(min-width:980px){.hero-body h1{font-size:clamp(40px,min(8.4vw,7.5vh),112px)}}
/* Below ~900px of real browser height (smaller laptop lids, a shorter
   external monitor, extra toolbars eating chrome) the vh-scaled sizes
   above hit their floors and stop shrinking enough on their own -- so
   trim the secondary lines outright rather than let them re-clip the
   form. Same content, just the compact cut of it. */
@media(min-width:980px) and (max-height:1080px){
  .hero-body .eyebrow,.hero-body .fine,.hero-form-sub{display:none}
  .hero-body h1{margin-top:0}
  .hero-body .lede{margin-top:8px}
  .hero-body .actions{margin-top:12px}
  .hero-form{margin-top:0;padding:14px 20px 12px;gap:6px}
}
/* A genuinely short window (a small laptop lid with extra browser
   chrome) -- drop the lede paragraph too rather than let the form clip. */
@media(min-width:980px) and (max-height:960px){
  .hero-body .lede{display:none}
  .hero-body .actions{margin-top:0}
}
/* Below that, the header-clearance floor alone is eating most of the
   available height -- shrink the form itself further rather than let
   it clip again. */
@media(min-width:980px) and (max-height:760px){
  .hero-body h1{font-size:clamp(34px,min(8.4vw,6vh),112px)}
  .hero-form{gap:4px;padding:10px 18px 10px}
  .hero-form input{min-height:34px;padding:6px 12px}
}
.hero-body h1 .crack{color:var(--crim-hot);font-style:italic;font-weight:500}
/* Each line sits in its own overflow-hidden mask exactly its own height
   (line-height 1, matching the h1's own), so the line-inner underneath
   can rise up from below the mask's bottom edge into place -- a soft
   focus-pull (blur + a slight scale settle) rides along with the rise
   instead of a hard clip-path edge sweeping across static letterforms.
   Staggered per line so the three beats ("Hurt." / "Angry." / "Not
   alone.") land one after another like cut points, not one flat sweep. */
.hero-body h1 .line-mask{display:block;overflow:hidden;line-height:1}
.hero-body h1 .line-inner{display:block;opacity:0;filter:blur(14px);transform:translateY(60%) scale(1.04);
  animation:lineRise 1s var(--ease-cine) forwards}
.hero-body h1 .line-mask:nth-child(1) .line-inner{animation-delay:.25s}
.hero-body h1 .line-mask:nth-child(2) .line-inner{animation-delay:.5s}
.hero-body h1 .line-mask:nth-child(3) .line-inner{animation-delay:.78s}
@keyframes lineRise{to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
.hero-body .lede{font-size:clamp(17px,min(1.9vw,2.6vh),24px);line-height:1.4;max-width:34ch;color:var(--dim);margin-top:12px}
.hero-body .actions{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:16px}
.hero-body .fine{font-size:15px;margin-top:10px;color:var(--dim-2)}

/* hero-form: compact glass card, name + phone only. Lives inside
   .hero-body now (left side, with the headline), not its own grid
   column on the right where it used to sit on top of Ozzie's face. */
.hero-form{position:relative;z-index:4;width:100%;max-width:460px;margin-top:0;
  background:rgba(20,20,23,.78);backdrop-filter:blur(16px) saturate(.9);-webkit-backdrop-filter:blur(16px) saturate(.9);
  border:1px solid var(--line-2);border-top:3px solid var(--crim);padding:16px 22px 14px;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4);
  opacity:0;transform:translateY(28px);animation:heroUp 1s var(--ease-out) .7s forwards}
@keyframes heroIn{to{opacity:1;transform:none}}

/* "Call me." -- the video's only text cue since the clip has no audio.
   Sits on Ozzie's SIDE of the frame (the right grid column), clear of
   his face: anchored low, where the aftermath/impact beats' empty sky
   and the lower third of his shot both have room. Hidden until the
   same reveal moment as the form. */
.hero-callme{position:relative;z-index:4;grid-column:2;align-self:end;
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(22px,2.3vw,30px);line-height:1.25;
  color:var(--paper);text-shadow:0 4px 30px rgba(0,0,0,.7);margin:0 0 20px;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .6s var(--ease-out) .15s,transform .6s var(--ease-out) .15s}
.hero-callme.revealed{opacity:1;transform:none}
@media(max-width:979px){.hero-callme{display:none}}
.hero-form-title{font-family:var(--serif);font-size:19px;line-height:1.1;color:var(--paper);font-weight:500;letter-spacing:-.01em}
.hero-form-sub{font-size:14px;color:var(--dim);margin-top:-6px}
.hero-form label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:3px}
.hero-form input{width:100%;font:inherit;font-size:16px;padding:9px 14px;border:1px solid var(--line-2);border-radius:0;background:rgba(255,255,255,.05);color:var(--paper);min-height:40px;transition:border-color .2s,background .2s}
.hero-form input:focus{border-color:var(--crim-hot);background:rgba(255,255,255,.08);outline-offset:0}
.hero-form input::placeholder{color:var(--dim-2)}
.hero-form .btn{margin-top:4px}
.hero-form-note{font-size:14px;color:var(--dim);text-align:center}
.hero-form-note a{color:var(--crim-hot);font-weight:700;text-decoration-color:var(--dim-2)}

.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;display:none;flex-direction:column;align-items:center;gap:10px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim-2);font-weight:700;opacity:calc(1 - var(--p,0) * 4)}
.scroll-cue span{width:1px;height:40px;background:linear-gradient(var(--crim-hot),transparent);animation:cueDrop 1.8s ease-in-out infinite}
@keyframes cueDrop{0%{opacity:0;transform:translateY(-10px)}50%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
.video-note{position:absolute;right:clamp(20px,5vw,64px);bottom:20px;z-index:5;display:none;font-size:14px;color:var(--dim);background:rgba(11,11,13,.7);border:1px solid var(--line);padding:6px 10px;max-width:340px;text-align:right;line-height:1.4}
@media(min-width:980px){.scroll-cue{display:flex}.video-note{display:block}}

/* Below 980: photo becomes a top band (panel 4 centred, sized by width so
   the crop is identical no matter how tall the section grows), the copy
   starts at --photo, and the cut becomes a rising diagonal slab under the
   copy so the section reads as one continuous piece. */
@media(max-width:979px){
  .hero-bg{left:0;width:100%;background-size:460% auto;background-position:98% 0;transform-origin:50% 20%;transform:translateY(calc(var(--p,0) * -30px)) scale(1.02)}
  .hero-scrim{background:
    linear-gradient(180deg,rgba(11,11,13,.62) 0,rgba(20,20,23,.1) 140px,rgba(20,20,23,.12) calc(var(--photo) - 26vw),rgba(20,20,23,.8) var(--photo),rgba(20,20,23,1) calc(var(--photo) + 10vw))}
  .hero-cut{top:calc(var(--photo) - 14vw);inset-inline:0;bottom:0;clip-path:polygon(0 14vw,100% 0,100% 100%,0 100%);filter:drop-shadow(0 -14px 30px rgba(0,0,0,.5))}
  .hero-cut::after{clip-path:polygon(0 calc(14vw + 3px),100% 3px,100% 100%,0 100%)}
  .hero-cut::before{clip-path:polygon(0 14vw,100% 0,100% 100%,0 100%)}
  .hero-body h1{margin-top:22px}
}
@media(min-width:640px) and (max-width:979px){
  .hero-bg{background-size:300% auto;background-position:106% 0}
}
@media(max-width:979px) and (orientation:landscape){
  .hero-bg{background-size:200% auto;background-position:110% 0}
}

/* ============ FEE ============ */
.fee{text-align:center;background:var(--char)}
.fee .wrap::before{content:"";display:block;width:56px;height:3px;background:var(--crim);margin:0 auto 34px}
.fee .big{font-family:var(--serif);font-size:clamp(36px,5.6vw,76px);line-height:1.02;letter-spacing:-.02em;max-width:20ch;margin:0 auto;font-weight:500}
.fee .sub{max-width:52ch;margin:28px auto 0;color:var(--dim);font-size:18px}

/* ============ PROOF ============ */
/* Soft seam, not a ruled line: same charcoal as its neighbors, so the
   only thing marking the boundary is a faint glow, not a hard edge
   (boss's direct note, 2026-09-13: too many sharp cuts between sections
   that share the same background). */
.proof{position:relative;background:var(--char);padding:clamp(48px,6vw,80px) 0}
.proof::before,.proof::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 50%,transparent);pointer-events:none}
.proof::before{top:0}.proof::after{bottom:0}
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:900px){.badges{grid-template-columns:repeat(4,1fr)}}
.badge{background:var(--char-2);padding:28px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;transition:background .25s}
.badge:hover{background:var(--char-3)}
.badge-ico{font-size:18px;color:var(--crim-hot);letter-spacing:.2em}
.badge b{font-family:var(--serif);font-size:20px;color:var(--paper);font-weight:500;line-height:1.15}
.badge span{font-size:14px;color:var(--dim)}
.stats{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:26px;text-align:center}
@media(min-width:900px){.stats{grid-template-columns:repeat(3,1fr);gap:0}
  .stats li+li{border-left:1px solid var(--line)}}
.stats b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(44px,5vw,68px);color:var(--paper);line-height:1;letter-spacing:-.03em}
/* "2021 & 2026" was set at the same size as the single-digit stats next
   to it, so it wrapped to two stacked lines and broke the row's rhythm
   (boss's direct note, 2026-09-13). Sized down and locked to one line;
   the ampersand drops back further so it reads as a small connector,
   not a third number. */
.stats b.years{font-size:clamp(30px,3.4vw,46px);white-space:nowrap}
.stats b.years .amp{display:inline;font-size:.6em;color:var(--dim);margin:0 .1em;font-style:italic}
.stats span{display:block;font-size:15px;color:var(--dim);margin-top:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* ============ on-black surfaces (moment, clock, footer) ============ */
.on-black{background:var(--bg);color:var(--paper);position:relative}
.on-black p{color:var(--dim)}
.on-black h1,.on-black h2,.on-black h3,.on-black .serif{color:var(--paper)}
.on-black::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:var(--grain)}
.on-black>*{position:relative;z-index:1}

/* ============ THE MOMENT: full-bleed statement ============ */
/* Was a plain fade-up plus a diagonal band sliding in -- read as "just a
   normal section" (boss's direct note, 2026-09-14) for a beat that's
   supposed to BE the impact. Three things now sell it: a real flash
   (a white-hot pulse that slams in and burns off fast, like a camera
   flash / the instant of the hit), a small sharp shake on the copy
   right as it lands, and the two lines rising out of blur one at a time
   like the hero's headline, instead of arriving as one flat block. */
.moment{min-height:0;display:flex;align-items:center;padding:clamp(90px,12vw,170px) 0;overflow:hidden}
.moment::after{content:"";position:absolute;inset:-20% -10%;pointer-events:none;z-index:0;
  background:linear-gradient(115deg,transparent 42%,rgba(193,18,31,.16) 42%,rgba(193,18,31,.16) 58%,transparent 58%);
  transform:translateX(-12%);transition:transform 1.8s var(--ease-cine)}
.moment.in::after{transform:translateX(0)}
.moment-flash{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--paper);opacity:0}
.moment.in .moment-flash{animation:momentFlash .9s var(--ease-out) .1s both}
@keyframes momentFlash{0%{opacity:0}8%{opacity:.9}100%{opacity:0}}
.moment.in .wrap{animation:momentShake .5s var(--ease-out) .1s both}
@keyframes momentShake{
  0%{transform:translate3d(0,0,0)}12%{transform:translate3d(-6px,2px,0)}
  24%{transform:translate3d(5px,-2px,0)}36%{transform:translate3d(-3px,1px,0)}
  50%{transform:translate3d(2px,-1px,0)}100%{transform:translate3d(0,0,0)}}
.moment-line{position:relative;z-index:2;font-family:var(--serif);font-size:clamp(40px,7vw,112px);line-height:.98;letter-spacing:-.03em;color:var(--paper);font-weight:500;max-width:14ch;text-wrap:balance}
.moment-line .line-mask{display:block;overflow:hidden}
.moment-line .line-inner{display:block;opacity:0;filter:blur(14px);transform:translateY(60%) scale(1.04)}
.moment.in .moment-line .line-inner{animation:lineRise 1s var(--ease-cine) forwards}
.moment.in .moment-line .line-mask:nth-child(1) .line-inner{animation-delay:.3s}
.moment.in .moment-line .line-mask:nth-child(2) .line-inner{animation-delay:.55s}
.moment .moment-sub{position:relative;z-index:2;margin-top:34px;font-size:15px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--crim-hot);display:flex;align-items:center;gap:14px}
.moment .moment-sub::before{content:"";width:48px;height:2px;background:var(--crim-hot);flex:none}

/* ============ WHY: the one light section ============ */
/* The bone-to-charcoal flip is the hardest cut on the page -- a flat
   horizontal line where black stops and cream starts. Soften it with a
   blurred haze of each colour bleeding a little into the other, so it
   reads as a dissolve rather than a jump cut, top and bottom both. */
.why{background:var(--bone);color:var(--ink);position:relative;isolation:isolate}
.why::before,.why::after{content:"";position:absolute;left:0;right:0;height:140px;
  background:var(--bone);filter:blur(36px);pointer-events:none;z-index:-1}
.why::before{top:-70px}
.why::after{bottom:-70px}
.why p{color:var(--ink)}
.why .eyebrow{color:var(--muted)}
.why .eyebrow::before{background:var(--crim-ink)}
.why .wrap.grid{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:900px){.why .wrap.grid{grid-template-columns:1.15fr .85fr;gap:72px;align-items:start}}
blockquote{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,3.2vw,44px);line-height:1.18;color:var(--ink);letter-spacing:-.01em}
blockquote footer{font-family:var(--sans);font-style:normal;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--crim-ink);margin-top:20px;font-weight:700}
.card-sand{background:var(--bone-2);border-left:3px solid var(--crim-ink);padding:22px 26px;font-size:16px;color:var(--muted);font-style:italic;line-height:1.5}

/* profile crop: the sheet is 4 panels; panel 3 (x 50-75%) is the profile.
   img is 480% of the container (one panel = 120%), shifted left 250% so
   panel 3 sits in view, and pulled up 20% so the frame reads head and
   shoulders (image y ~10%-60%). Crimson offset frame via ::before. */
.why-portrait{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--char);max-width:440px;
  clip-path:inset(-28px -28px 100% -28px);transition:clip-path 1.3s var(--ease-cine) .25s}
@media(min-width:900px){.why-portrait{max-width:none;margin-top:8px}}
.why.in .why-portrait{clip-path:inset(-28px)}
.why-portrait::before{content:"";position:absolute;inset:0;border:2px solid var(--crim-ink);transform:translate(14px,14px);pointer-events:none;z-index:3;
  transition:transform 1.2s var(--ease-cine) .5s}
.why.in .why-portrait::before{transform:translate(0,0)}
.why-portrait img.crop-profile{position:absolute;width:480%;max-width:none;height:auto;left:-10%;top:-20%;
  filter:grayscale(.2) contrast(1.06)}
/* Scroll-driven face turn (boss's direct ask, 2026-09-14): the turnaround
   sheet is 4 panels -- look-back, profile, three-quarter, straight-on --
   and JS below sweeps `left` through them as this section scrolls into
   view, landing on straight-on and staying there. -10% here is that same
   resting value, so no-JS/reduced-motion users just get him facing the
   camera with no animation at all, never the profile he didn't like. */
.why-portrait::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,13,0) 55%,rgba(11,11,13,.6) 100%),linear-gradient(90deg,rgba(122,11,20,.18),transparent 40%)}

/* .why is the one light section, dropped between two dark ones -- the
   flat horizontal edge was the hardest cut on the page. These wedges
   reuse the hero-cut's exact diagonal angle (see .hero-cut) so the light
   section arrives and leaves along the SAME line established in the
   opening beat, instead of a plain seam. */
.why::before,.why::after{content:"";position:absolute;left:0;width:64%;max-width:820px;height:56px;
  background:var(--char);pointer-events:none;z-index:1}
.why::before{top:-1px;clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
.why::after{bottom:-1px;clip-path:polygon(0 0,16% 0,100% 100%,0 100%)}

/* ============ TEAM ============
   Full-bleed photo + the hero's own duotone-scrim trick (see .hero-scrim)
   so the "Not alone" line from the opening pays off here instead of
   introducing a new visual language for one section. */
.team{padding:0;overflow:hidden;background:var(--char)}
/* Taller frame + a shorter, steeper fade: the eight faces fill nearly the
   whole photo with almost no dead space below their chins, so the old
   fade (still .75 opaque a third of the way up) was dimming the front
   row's actual faces, not just the suits underneath them (boss's direct
   note, 2026-09-13). The dark band now hugs the bottom ~20% -- collars
   and lapels, not faces -- and clears to fully transparent well before
   it reaches anyone's chin. */
.team-photo{position:relative;height:clamp(420px,58vw,680px);overflow:hidden}
.team-photo img,.team-photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%;
  filter:grayscale(.1) contrast(1.05) brightness(.96)}
.team-scrim{position:absolute;inset:0;
  background:linear-gradient(0deg,var(--char) 0%,rgba(20,20,23,.88) 9%,rgba(20,20,23,.3) 20%,transparent 40%),
    linear-gradient(100deg,rgba(20,20,23,.32) 0%,transparent 30%)}
/* Pulled up less than before -- with the scrim lightened so faces stay
   visible (above), less overlap means less copy sitting directly across
   a face or a light-coloured top. A text-shadow on both lines is the
   legibility backstop for wherever it still crosses the photo. */
.team-copy{position:relative;margin-top:clamp(-96px,-9vw,-64px);padding-bottom:clamp(64px,9vw,104px)}
.team-copy .eyebrow{text-shadow:0 2px 16px rgba(0,0,0,.9)}
.team-copy h2{font-size:clamp(32px,4.4vw,54px);margin-top:16px;max-width:16ch;text-shadow:0 4px 24px rgba(0,0,0,.85)}
.team-copy .lede-2{margin-top:20px;max-width:58ch;color:var(--dim);font-size:18px;line-height:1.6}

/* ============ CLOCK ============ */
/* Was one dotted underline running under a full sentence plus a flat
   solid rule beneath it -- two competing line styles, neither of them
   the thing the copy is actually about (boss's direct note, 2026-09-14:
   "the clock is running" needs an actual clock, not more lines). This
   is a real countdown ring: full circle on load, draining to a sliver
   as the section scrolls into view, exactly like a timer running out. */
.clock{text-align:center}
.clock .eyebrow{justify-content:center;margin:0 auto 22px}
.clock-badge{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:32px}
.clock-dial{position:relative;flex:none;width:clamp(64px,8vw,88px);height:clamp(64px,8vw,88px)}
.clock-dial svg{position:absolute;inset:0;width:100%;height:100%}
.clock-face-ring{fill:none;stroke:var(--line-2);stroke-width:5}
/* tick marks: 12 identical full-size layers, each rotated 30deg further,
   with a short bar sitting at the top of its own rotated frame -- the
   simplest way to ring 12 marks with no JS and no repeated math. */
.clock-ticks{position:absolute;inset:0}
.clock-ticks span{position:absolute;inset:0;display:flex;justify-content:center}
.clock-ticks span::before{content:"";width:2px;height:9px;margin-top:6px;background:var(--dim-2);border-radius:1px}
.clock-ticks span:nth-child(1){transform:rotate(0deg)}
.clock-ticks span:nth-child(2){transform:rotate(30deg)}
.clock-ticks span:nth-child(3){transform:rotate(60deg)}
.clock-ticks span:nth-child(4){transform:rotate(90deg)}
.clock-ticks span:nth-child(5){transform:rotate(120deg)}
.clock-ticks span:nth-child(6){transform:rotate(150deg)}
.clock-ticks span:nth-child(7){transform:rotate(180deg)}
.clock-ticks span:nth-child(8){transform:rotate(210deg)}
.clock-ticks span:nth-child(9){transform:rotate(240deg)}
.clock-ticks span:nth-child(10){transform:rotate(270deg)}
.clock-ticks span:nth-child(11){transform:rotate(300deg)}
.clock-ticks span:nth-child(12){transform:rotate(330deg)}
.clock-ticks span:nth-child(1)::before,.clock-ticks span:nth-child(4)::before,
.clock-ticks span:nth-child(7)::before,.clock-ticks span:nth-child(10)::before{
  height:12px;width:3px;background:var(--dim)}
/* hands: pivoted at dial center, pointing straight up at rotate(0), each
   just rotated to its resting angle -- hour and minute both parked on
   11, the "five minutes to midnight" read, so the only thing moving is
   the second hand ticking off real seconds. */
.clock-hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:2px 2px 0 0}
.clock-hand-hour{width:5px;height:26%;background:var(--paper);margin-left:-2.5px;transform:rotate(-30deg)}
.clock-hand-min{width:3.5px;height:37%;background:var(--paper);margin-left:-1.75px;transform:rotate(-30deg)}
.clock-hand-sec{width:2px;height:40%;background:var(--crim-hot);margin-left:-1px;
  animation:clockTick 60s steps(60) infinite}
@keyframes clockTick{to{transform:rotate(360deg)}}
.clock-pivot{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  background:var(--crim-hot);border-radius:50%;z-index:2}
.clock-years{display:flex;align-items:baseline;gap:10px}
.clock-years b{font-family:var(--serif);font-size:clamp(48px,7vw,72px);font-weight:500;color:var(--paper);line-height:1}
.clock-years span{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.clock .line{font-family:var(--serif);font-size:clamp(30px,4.4vw,60px);line-height:1.1;max-width:24ch;margin:0 auto;color:var(--paper);font-weight:500;letter-spacing:-.02em}
.clock .small{display:block;margin-top:28px;font-size:17px;letter-spacing:.04em}

/* ============ CASES ============ */
.cases{background:var(--char)}
.cases h2{padding-top:clamp(56px,8vw,104px)}
.cases ul{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:640px){.cases ul{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cases ul{grid-template-columns:repeat(4,1fr)}}
.cases li{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.cases.in li{opacity:1;transform:none}
.cases.in li:nth-child(1){transition-delay:.05s}.cases.in li:nth-child(2){transition-delay:.12s}
.cases.in li:nth-child(3){transition-delay:.19s}.cases.in li:nth-child(4){transition-delay:.26s}
.cases.in li:nth-child(5){transition-delay:.33s}.cases.in li:nth-child(6){transition-delay:.4s}
.cases.in li:nth-child(7){transition-delay:.47s}.cases.in li:nth-child(8){transition-delay:.54s}
.cases li a{display:block;position:relative;background:var(--char-2);padding:28px 24px 32px;min-height:200px;text-decoration:none;color:inherit;transition:background .3s,transform .3s var(--ease-out);overflow:hidden}
.cases li a::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--crim-hot);transition:width .45s var(--ease-cine)}
.cases li a:hover{background:var(--crim-deep)}
.cases li a:hover::before{width:100%}
.cases li b{display:block;font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.12;margin-bottom:10px;color:var(--paper);letter-spacing:-.01em}
.cases li span{font-size:16px;color:var(--dim);line-height:1.45;transition:color .3s}
.cases li a:hover span{color:var(--paper)}
/* Was a bare 30px stroke icon floating on the card -- read as thin and
   generic no matter how much path detail went into it (boss's direct
   note, 2026-09-14: "the icon looks simple"). A filled badge behind it
   gives it actual presence: a solid crimson circle, the icon reversed
   out in white on top, the whole thing bigger. */
.cases li .ico-wrap{width:56px;height:56px;border-radius:50%;background:var(--crim);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  box-shadow:0 8px 20px -8px rgba(193,18,31,.6);transition:background .3s,transform .3s var(--ease-out)}
.cases li a:hover .ico-wrap{background:var(--paper);transform:scale(1.06)}
.cases li .ico{width:28px;height:28px;stroke:var(--paper);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.cases li a:hover .ico{stroke:var(--crim)}
.cases .after{margin-top:28px;color:var(--dim);font-size:18px}

/* ============ RESULTS ============ */
.results{background:var(--char);position:relative}
.results::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 50%,transparent);pointer-events:none}
.results .ph{border:1px dashed var(--crim-hot);padding:28px;color:var(--dim);font-style:italic;font-size:18px;max-width:64ch;background:var(--char-2)}

/* ============ FAQ ============ */
.faq{background:var(--char)}
.faq-list{margin-top:36px;display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.faq-list details{background:var(--char-2);padding:22px 26px}
.faq-list summary{cursor:pointer;font-family:var(--serif);font-size:22px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--paper);font-weight:500}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--sans);font-size:28px;color:var(--crim-hot);flex:none;line-height:1;transition:transform .3s var(--ease-cine)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{margin-top:14px;color:var(--dim);font-size:18px;line-height:1.6;max-width:64ch}

/* ============ CALL ============ */
.call{background:var(--char);position:relative}
.call::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 50%,transparent);pointer-events:none}
.call .grid{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:900px){.call .grid{grid-template-columns:1fr 1fr;gap:80px}}
.call .num{font-family:var(--serif);font-size:clamp(40px,5vw,66px);color:var(--crim-hot);text-decoration:none;display:inline-block;line-height:1.05;font-weight:500;letter-spacing:-.02em;text-decoration-color:var(--dim-2)}
.call .num.c{text-decoration:underline dotted;text-decoration-color:var(--dim-2)}
.call .stack p{color:var(--dim)}
.call address{font-style:normal;font-size:18px;color:var(--dim);line-height:1.6}
.call address a{color:var(--paper)}
form.short{display:flex;flex-direction:column;gap:14px}
form.short label{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:6px}
form.short input,form.short textarea{width:100%;font:inherit;font-size:18px;padding:14px 16px;border:1px solid var(--line-2);border-radius:0;background:var(--char-2);color:var(--paper);min-height:56px;transition:border-color .2s}
form.short input:focus,form.short textarea:focus{border-color:var(--crim-hot);outline-offset:0}
form.short textarea{min-height:150px;resize:vertical}
form.short .btn{align-self:flex-start;min-width:220px}
form.short .note{font-size:15px;color:var(--dim);font-style:italic;margin-top:4px}
/* honeypot: present in the DOM and tab order removed, but never visible --
   real visitors never touch it, bots that autofill every input do. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin-top:2px}
.form-status{margin-top:12px;font-size:15px;font-weight:600}
.form-status.ok{color:var(--crim-hot)}
.form-status.err{color:#e0554a}
.hero-form .form-status{margin-top:10px;font-size:14px}

/* ============ FOOTER ============ */
footer.site{padding:64px 0 48px;font-size:16px;border-top:1px solid var(--line)}
footer.site .cols{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:900px){footer.site .cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}}
footer.site a{color:var(--paper);text-decoration:none}
footer.site a:hover{color:var(--crim-hot)}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;align-content:start}
footer.site .legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}

/* ============ mobile bar ============ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr;min-height:64px;padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--line-2);background:var(--bg)}
.mbar a{display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;font-size:17px;min-height:64px;letter-spacing:.01em}
.mbar .a{background:var(--crim);color:var(--paper)}
.mbar .b{background:var(--bg);color:var(--paper)}
@media(min-width:980px){.mbar{display:none}}

/* ============ ABOUT TABS ============
   Five chapters (letter, record, bills, why-PI, firm) used to be a hard
   scroll. Boss's ask: click a tab, read that one, no scrolling past the
   other four. Tab bar sits in the dark section above; each panel keeps
   its original background so it still reads as its own chapter. */
.tabbar{display:flex;gap:4px;margin-top:28px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:1px solid var(--line)}
.tabbar::-webkit-scrollbar{display:none}
.tabbtn{flex:none;display:flex;align-items:center;gap:10px;background:transparent;border:0;border-bottom:3px solid transparent;color:var(--dim);font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.01em;padding:16px 18px;cursor:pointer;white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.tabbtn-n{font-family:var(--serif);font-style:italic;font-weight:500;opacity:.7;font-size:14px}
.tabbtn:hover{color:var(--paper)}
.tabbtn.active{color:var(--paper);border-bottom-color:var(--crim-hot)}
.tabbtn.active .tabbtn-n{color:var(--crim-hot);opacity:1}
.tabpanel{animation:tabIn .5s var(--ease-out) both;padding-top:clamp(36px,5vw,56px)}
.tabpanel[hidden]{display:none!important}
.tabpanel.cases h2{padding-top:0}

/* fee callout: pulled out of the letter's italic prose so the one line
   that matters most to a worried client (no upfront cost) reads as a
   promise, not another sentence to scroll past */
.fee-callout{margin-top:28px;display:flex;align-items:center;gap:22px;padding:22px 26px;
  background:var(--char);border-left:4px solid var(--crim-hot);border-radius:2px;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.5)}
.fee-callout-n{flex:none;font-family:var(--serif);font-weight:600;font-size:34px;color:var(--crim-hot);letter-spacing:-.02em}
.fee-callout p{font-family:var(--sans);font-weight:700;font-size:19px;line-height:1.35;color:var(--paper);margin:0}
.fee-callout .c{text-decoration-color:var(--dim-2)}
@media(max-width:480px){.fee-callout{gap:14px;padding:18px 20px}.fee-callout-n{font-size:26px}.fee-callout p{font-size:17px}}
/* the callout gets its own beat, a touch after the page settles, so it
   reads as the one promise worth pausing on */
.letter-page.in .fee-callout{animation:feePop .55s var(--ease-out) .22s both}
@keyframes feePop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ============ THE LETTER, as a leather-bound reader ============
   Boss's ask: click through the letter a page at a time instead of one
   long scroll, and make it "look like a letter" -- oxblood leather
   cover (reuses --crim-deep, no new brand colour) holding a sand-paper
   page. Page turns are click-triggered, not scroll-jacked. */
.letter-book{position:relative;padding:16px;border-radius:8px;scroll-margin-top:120px;
  background:linear-gradient(155deg,#5c0e18 0%,var(--crim-deep) 45%,#3a0810 100%);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.4)}
.letter-book::before{content:"";position:absolute;inset:0;border-radius:8px;background-image:var(--grain);opacity:.18;mix-blend-mode:overlay;pointer-events:none}
.letter-book::after{content:"";position:absolute;left:11px;top:16px;bottom:16px;width:2px;border-radius:2px;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0) 70%);pointer-events:none}
.letter-page-frame{position:relative;background:var(--bone-2);border-radius:3px;padding:clamp(28px,5vw,56px);min-height:320px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 18px 30px -18px rgba(0,0,0,.55)}
.letter-page{font-family:var(--serif);font-size:21px;line-height:1.7;color:var(--ink)}
.letter-page[hidden]{display:none!important}
.letter-page.in{animation:pageIn .6s var(--ease-out) both}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.letter-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px}
.letter-arrow{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid rgba(242,239,233,.35);background:rgba(0,0,0,.15);color:var(--paper);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,opacity .2s ease}
.letter-arrow:hover:not(:disabled){background:var(--crim-hot);border-color:var(--crim-hot)}
.letter-arrow:disabled{opacity:.3;cursor:default}
.letter-count{font-family:var(--sans);font-size:13px;letter-spacing:.1em;color:var(--dim);font-weight:700;min-width:38px;text-align:center}
@media(max-width:640px){.letter-page-frame{min-height:0}}
@media(prefers-reduced-motion:reduce){.letter-page.in,.letter-page.in .fee-callout{animation:none}}
@keyframes tabIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:640px){.tabbar{gap:0}.tabbtn{padding:14px 12px;font-size:13.5px;gap:7px}}
@media(prefers-reduced-motion:reduce){.tabpanel{animation:none}}

/* ============ scroll reveal ============ */
.rev{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.rev.in{opacity:1;transform:none}
.rev>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rev.in>*{opacity:1;transform:none}
.rev.in>*:nth-child(1){transition-delay:.06s}
.rev.in>*:nth-child(2){transition-delay:.18s}
.rev.in>*:nth-child(3){transition-delay:.3s}
.rev.in>*:nth-child(4){transition-delay:.42s}

/* ============ reduced motion: land on the finished state everywhere ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev,.rev>*,.cases li{opacity:1;transform:none;transition:none}
  .hero-body>*,.hero-form{opacity:1;transform:none;animation:none}
  .hero-body{transform:none;opacity:1}
  .hero-body h1 .line-inner{opacity:1;filter:none;transform:none;animation:none}
  .hero-bg{transform:none;animation:none;filter:grayscale(.12) contrast(1.06) brightness(.9)}
  .hero-duotone{animation:none;opacity:.42}
  .scroll-cue span{animation:none}
  .scroll-cue{opacity:1}
  .clock-hand-sec{animation:none;transform:rotate(0deg)}
  .moment::after{transition:none;transform:none}
  .why-portrait,.why-portrait::before{transition:none;clip-path:inset(-28px);transform:none}
  header.site{animation:none}
}