/* ===========================================================================
   RedCap Labs — short visual page. Hand-written, no build step, mobile first.
   2026-08-17 design pass: real type scale, one vertical rhythm, deliberate
   hierarchy, images in composed space. White-dominant, warm neutrals, one
   dark band and a dark footer for section transition.
   Fonts are SELF-HOSTED (assets/fonts). No CDN, no third-party request —
   privacy.html depends on that staying true.
   =========================================================================== */

@font-face{
  font-family:"Outfit";
  src:url("assets/fonts/outfit-var.woff2") format("woff2-variations"),
      url("assets/fonts/outfit-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"InterVar";
  src:url("assets/fonts/inter-var.woff2") format("woff2-variations"),
      url("assets/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------------------------------------------------------------------------
   CONTRAST — 2026-08-17 accessibility pass. Every foreground/background pair
   below was MEASURED, not eyeballed, and the target is WCAG AAA (7:1) for body
   and small text, because the readers are older executives.
   Measured ratios (sRGB relative luminance, WCAG 2.x formula):
     dark band + footer ground #121a22
       white headline .................... 17.55:1
       body text #dfe5ea ................. 13.82:1
       red accent #ff8066 (eyebrow, .big) . 7.13:1
       footer fine print #c3ccd4 ......... 10.79:1
     light bands
       ink on white ...................... 16.66:1
       body #3f4b57 on white ..............  8.92:1
       caption #4a545f on white ..........  7.71:1  (warm 7.27)
       red #95281f on white ..............  8.07:1  (warm 7.62, stone 7.04)
     hero, measured against the actual composited image + scrim, worst pixel
     under each text element, 1024-1440 wide
       h1 white .......................... 8.60 to 16.35:1
       sub #eef2f6 ...................... 15.16 to 16.55:1
       eyebrow #ff8066 ................... 7.45:1
   The dark ground was taken DOWN, not up: for light text on a dark field a
   lighter ground lowers every ratio on it. Deepening the ground is what buys
   the red enough headroom to stay a saturated red at 7:1 instead of a pink.
   If any of these colours change, re-measure. Do not nudge by eye.
   --------------------------------------------------------------------------- */

:root{
  /* --- ink --- */
  --ink:#161f28;          /* headlines on light ground */
  --ink-2:#3f4b57;        /* body copy */
  --ink-3:#4a545f;        /* captions, fine print */
  --deep:#121a22;         /* dark band + footer ground */
  --accent:#95281f;       /* the one red, on light ground */
  --accent-lt:#ff8066;    /* the red on dark ground — AAA at 7.13:1 */
  --on-deep:#dfe5ea;      /* body text on the dark ground */
  --on-deep-2:#c3ccd4;    /* fine print on the dark ground */

  /* --- ground --- */
  --paper:#ffffff;
  --warm:#faf8f5;         /* barely-there warm band */
  --stone:#f3efe8;        /* the heavier light band */
  --rule:#e6e1d7;
  --rule-soft:#efebe3;

  /* --- type --- */
  --display:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --text:"InterVar",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --fs-eyebrow:0.72rem;
  --fs-fine:0.8rem;
  --fs-small:0.9rem;
  --fs-body:clamp(1.02rem,0.99rem + 0.18vw,1.115rem);
  --fs-lead:clamp(1.09rem,1.02rem + 0.42vw,1.3rem);
  --fs-h3:clamp(1.13rem,1.06rem + 0.4vw,1.34rem);
  --fs-h2:clamp(1.6rem,1.26rem + 1.6vw,2.25rem);
  --fs-big:clamp(1.8rem,1.32rem + 2.2vw,2.8rem);
  --fs-h1:clamp(1.98rem,1.44rem + 2.5vw,3.15rem);

  /* --- rhythm (one scale, used everywhere) --- */
  --s1:8px; --s2:14px; --s3:22px; --s4:32px;
  --s5:48px; --s6:68px; --s7:96px;
  --section:clamp(58px,7.4vw,116px);
  --max:1200px;
  --gutter:clamp(22px,5vw,44px);
  --radius:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--text);
  font-size:var(--fs-body);
  line-height:1.62;
  font-feature-settings:"kern" 1,"liga" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:10px 16px;z-index:9}
.skip:focus{left:0}

/* ---------------------------------------------------------------- type ---- */
h1,h2,.big{
  font-family:var(--display);
  color:var(--ink);
  font-weight:650;
  letter-spacing:-0.021em;
  line-height:1.08;
  margin:0 0 var(--s3);
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);letter-spacing:-0.028em}

/* ---------------------------------------------------------------------------
   LINE BREAKS ARE OWNED BY THE MARKUP ON EVERY MULTI-SENTENCE DISPLAY LINE.
   Left free, the browser breaks where the measure runs out, which repeatedly
   produced breaks inside a phrase — "The plan can pay for the fill. It /
   cannot be there for the dose." and "PDC is decided at home, one / dose at a
   time." `text-wrap:balance` evens the lines, it does not choose sensible
   break points, and a ch-based max-width only decides WHEN a bad break
   happens, not where.
   So: every display line made of two sentences or two clauses is written as
   two spans, and the spans are blocks. The clause break is then fixed at every
   width, and any further wrapping happens INSIDE a clause, where balance
   splits it evenly and cannot orphan a leading pronoun onto the line above.
   Verified by rendering and reading back the actual line boxes at 1600, 1440,
   1280, 1180, 1100, 1024, 900, 768, 600, 390 and 320px — not by inspecting the
   CSS. If you edit one of these lines, re-run that check.
   --------------------------------------------------------------------------- */
.hero h1 > span,
.statement .big > span,
.lines > span{display:block}
/* one hyphenated compound that was splitting as "continuous- / thread" */
.nb{white-space:nowrap}
h2{font-size:var(--fs-h2)}
.big{font-size:var(--fs-big);color:var(--accent);margin-bottom:var(--s3)}

p{margin:0 0 var(--s3);text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-underline-offset:3px}

.eyebrow{
  font-family:var(--text);
  font-size:var(--fs-eyebrow);
  font-weight:640;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--s3);
  line-height:1.2;
}
.sub{
  font-size:var(--fs-lead);
  line-height:1.58;
  color:var(--ink-2);
  max-width:56ch;
}
.sub + .sub{margin-top:calc(var(--s3) * -0.35)}

/* ------------------------------------------------------------- header ---- */
.site-head{border-bottom:1px solid var(--rule-soft);background:var(--paper)}
.head-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;
  padding-top:var(--s3);padding-bottom:var(--s3);
}
.site-head img{display:block;height:24px;width:auto}
/* ---- header contact: the CTA panel's quieter sibling -------------------
   It ECHOES the panel at the call to action, it does not clone it. Three
   attributes carry the relationship and everything else deliberately differs:
     shared   the letter-spaced uppercase label, the border, the rounded block
     differs  a lighter ground (warm, not stone), a lighter rule (rule-soft, not
              rule), a smaller radius (10 vs 14), a fraction of the padding, no
              filled button, no shadow
   That gradient of intensity is the point: the bottom panel is the destination
   and arrives after the argument; this one is a contact affordance noticed in
   passing. If this ever gains a fill, a shadow or a button it will start
   competing with the fold, which is the failure mode here.
   ------------------------------------------------------------------------ */
.head-contact{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0;
  background:var(--warm);
  border:1px solid var(--rule-soft);
  border-radius:10px;
  padding:7px 13px;
}
/* Same words as the label above the contact panel at the call to action, and
   the same case convention (set uppercase by CSS, written in sentence case in
   the markup). One step smaller and one step lighter than that one, because
   here it sits beside the wordmark and must stay subordinate to it.
   #4a545f on white measures 7.71:1 — AAA. */
.head-label{
  font-size:0.66rem;font-weight:640;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.2;
  text-align:right;
}
.head-mail{
  font-size:var(--fs-small);font-weight:600;text-decoration:none;
  white-space:nowrap;color:var(--ink-2);
}
.head-mail:hover{color:var(--accent);text-decoration:underline}
/* On a narrow phone the label would wrap to two lines beside the wordmark and
   push the hero down. The signal is not lost — it still carries at the call to
   action, where there is room for it. The block styling comes off with it, so
   the phone header stays exactly as it was: wordmark and address, nothing else
   competing for the first screen. */
@media (max-width:560px){
  .head-label{display:none}
  .head-contact{background:none;border:0;padding:0;border-radius:0}
}

/* --------------------------------------------------------------- hero ----
   Phone first: the image is a block, the title sits beneath it on white.
   At 900px and up the title moves over the quiet left of the frame, with a
   left-only scrim. The product side of the image is never dimmed.          */
.hero{position:relative;background:#10161a}
.hero-img{display:block}
.hero-img img{display:block;width:100%;height:auto;object-fit:cover}
.hero-scrim{display:none}
.hero-inner{
  position:relative;
  padding-top:clamp(30px,5vw,44px);
  padding-bottom:clamp(34px,5vw,48px);
  background:var(--paper);
}
.hero h1{max-width:17ch;margin-bottom:var(--s3)}
.hero .sub{max-width:36ch;font-size:var(--fs-h3);color:var(--ink-2)}

/* ---- the play affordance ------------------------------------------------
   It must read as clickable AT REST, before any hover: half this audience is
   on a phone and will never hover at all. So it is a SOLID button with a real
   shadow and a filled play disc, not a translucent outline. One short,
   finite attention cue runs three times after load and then stops for good —
   a continuous pulse would cheapen a page whose credibility rests on
   restraint. The label says "sound on" because the snap IS the demonstration.
   ------------------------------------------------------------------------- */
.playbtn[hidden]{display:none}   /* the display rule below would otherwise
                                    defeat the hidden attribute, and the button
                                    is useless without JavaScript */
.playbtn{
  position:relative;
  display:inline-flex;align-items:center;gap:13px;
  margin-top:var(--s4);
  padding:13px 26px 13px 15px;
  border:1px solid transparent;border-radius:100px;
  background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:var(--fs-small);font-weight:660;
  letter-spacing:0.005em;cursor:pointer;
  white-space:normal;text-align:left;max-width:100%;   /* the longer label must
     wrap on a narrow phone rather than push the page sideways — nowrap here
     caused a 462px scroll width at a 390px viewport */
  box-shadow:0 2px 5px rgba(6,10,14,.18),0 14px 34px -12px rgba(6,10,14,.55);
  transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.playbtn:hover{transform:translateY(-2px);box-shadow:0 4px 9px rgba(6,10,14,.22),0 20px 44px -14px rgba(6,10,14,.6)}
.playbtn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.playbtn .lbl-sm{font-weight:600;opacity:.72}
/* on a narrow phone the label breaks mid-phrase; stack it cleanly instead */
@media (max-width:560px){
  .playbtn .lbl-sm{display:block;margin-top:2px}
  .playbtn{padding-top:11px;padding-bottom:11px}
}

/* the filled play disc — the part that reads as "video" at a glance */
.tri{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--accent);
  transition:background .16s ease,transform .16s ease;
}
.tri::before{
  content:"";display:block;width:0;height:0;margin-left:3px;
  border-left:10px solid #fff;
  border-top:6.5px solid transparent;
  border-bottom:6.5px solid transparent;
}
.playbtn:hover .tri{transform:scale(1.06)}

/* finite attention cue: three rings, then it stops and never runs again */
.playbtn::after{
  content:"";position:absolute;inset:-1px;border-radius:100px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,255,255,0);
  animation:cue 2.3s ease-out 1.1s 3 both;
}
.playbtn--dark::after{animation-name:cue-dark}
.playbtn.cued::after{animation:none}   /* cancelled the moment the reader engages */
@keyframes cue{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.60)}
  70%{box-shadow:0 0 0 15px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@keyframes cue-dark{
  0%{box-shadow:0 0 0 0 rgba(149,40,31,.45)}
  70%{box-shadow:0 0 0 15px rgba(149,40,31,0)}
  100%{box-shadow:0 0 0 0 rgba(149,40,31,0)}
}

/* the second trigger, at the call to action, on a light ground */
.playbtn--dark{
  background:var(--ink);color:#fff;
  box-shadow:0 2px 5px rgba(22,31,40,.14),0 14px 32px -14px rgba(22,31,40,.5);
}
.playbtn--dark .tri{background:var(--accent-lt)}
.playbtn--dark .tri::before{border-left-color:var(--ink)}

/* ---- fallback player (JS off). JS moves it into the lightbox. ---- */
.videowrap{max-width:520px;margin:var(--s5) auto}
.videowrap video{display:block;width:100%;height:auto;border-radius:10px;background:#000}
.videocap{font-size:var(--fs-small);color:var(--ink-3);margin-top:var(--s2)}

/* ---- lightbox ---- */
html.noscroll,html.noscroll body{overflow:hidden}
.lightbox{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(8,12,15,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:fade .18s ease-out;
}
.lightbox[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lightbox-panel{position:relative;width:100%;max-width:560px}
/* desktop presence: the video is the strongest asset on the page, so it gets
   real size on a large screen. Phone portrait is left alone — the crop was
   made for it. */
@media (min-width:1100px){.lightbox-panel{max-width:720px}}
@media (min-width:1400px){.lightbox-panel{max-width:820px}}
.lightbox .videowrap{
  margin:0;max-width:none;
  animation:rise .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.lightbox .videowrap video{
  border-radius:12px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  max-height:82vh;object-fit:contain;
}
.lightbox .videocap{color:var(--on-deep);text-align:center;margin-top:var(--s3)}
.lightbox-close{
  position:absolute;top:-48px;right:0;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);
  color:#fff;font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .16s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
.lightbox-close:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---------------------------------------------------------- statement ---- */
.statement{
  padding:var(--section) 0;
  text-align:center;
}
.statement .big{margin:0 auto var(--s3);max-width:34ch}
.statement .big span + span{margin-top:0.12em}
.statement .sub{margin:0 auto;max-width:52ch;color:var(--ink-3)}

/* -------------------------------------------------------------- bands ---- */
.band{padding:var(--section) 0}
.band-warm{background:var(--warm);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.band-stone{background:var(--stone)}
.band-deep{background:var(--deep);color:var(--on-deep)}
.band-deep h2{color:#fff}
.band-deep .big{color:var(--accent-lt);max-width:24ch}
.band-deep .sub{color:var(--on-deep)}
.band-deep .eyebrow{color:var(--accent-lt)}

/* -------------------------------------------------------------- split ---- */
.split{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
.split h2{max-width:20ch}
.figframe{
  border-radius:var(--radius);overflow:hidden;background:var(--paper);
  border:1px solid var(--rule-soft);
  box-shadow:0 1px 2px rgba(22,31,40,.05),0 18px 40px -22px rgba(22,31,40,.28);
}
.figframe img{display:block;width:100%;height:auto}

/* ---- duo: heading block left, supporting body right. The device that keeps
        a short page from reading as a narrow ribbon of text. ---- */
.duo{display:grid;gap:clamp(26px,3.4vw,56px);align-items:start}
.duo-head h2{max-width:18ch;margin-bottom:var(--s3)}
.duo-head .big{max-width:17ch;margin-bottom:0}
.duo-body{align-self:start}
.duo-body .sub{max-width:52ch}
.band-deep .duo-body{align-self:end}

/* --------------------------------------------------------------- cards --- */
.model-grid{display:grid;gap:clamp(24px,3vw,44px);align-items:start}
.model-grid h2{max-width:19ch;margin-bottom:0}
.card{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius);padding:clamp(22px,2.6vw,32px);
  box-shadow:0 1px 2px rgba(22,31,40,.04);
}
.card p{font-size:var(--fs-body);color:var(--ink-2)}
.card p + p{margin-top:calc(var(--s3) * -0.2)}

/* ----------------------------------------------------------- evidence ---- */
.evidence h2{max-width:17ch}
.evidence .sub{max-width:54ch;font-size:var(--fs-lead)}

/* ---------------------------------------------------------------- cta ---- */
.cta{padding:var(--section) 0 clamp(70px,8vw,124px)}
.cta h2{max-width:22ch}   /* 14ch broke it as "Worth a / conversation." — an
                             article stranded at the end of a line. 22ch holds
                             it on one line from 320px up. */
.cta .sub{max-width:52ch}
.mailpanel{
  margin-top:var(--s3);
  background:var(--stone);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:clamp(24px,3vw,36px);
  display:inline-block;
}
.mail-label{
  display:block;font-size:var(--fs-eyebrow);letter-spacing:0.15em;
  text-transform:uppercase;color:var(--ink-2);font-weight:640;
  margin-bottom:var(--s2);   /* ink-2 not ink-3: this sits on stone, 7.78:1 */
}
.mailbtn{
  display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:600;letter-spacing:-0.01em;
  font-size:clamp(1.06rem,0.98rem + 0.5vw,1.3rem);
  padding:14px 26px;border-radius:9px;
  transition:background .16s ease,transform .16s ease;
  word-break:break-word;
}
.mailbtn:hover{background:var(--accent);transform:translateY(-1px)}
.mailbtn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ------------------------------------------------------------- footer ---- */
.site-foot{background:var(--deep);color:var(--on-deep);padding:var(--s6) 0 var(--s6)}
.site-foot img{display:block;height:22px;width:auto;margin-bottom:var(--s3);opacity:.95}
.site-foot a{color:#ffffff}
.site-foot a:hover{color:#fff;text-decoration-thickness:2px}
.foot-top{
  display:flex;flex-wrap:wrap;gap:var(--s3);
  justify-content:space-between;align-items:flex-end;
}
/* the divider only exists to separate the row from fine print beneath it.
   The fine print was cut 2026-08-17, so the rule appears only if it returns. */
.foot-top:has(+ .fine){padding-bottom:var(--s4);border-bottom:1px solid rgba(255,255,255,.12)}
.site-foot p{font-size:var(--fs-small);margin:0 0 var(--s1)}
.footlinks a{margin-right:var(--s2)}
.fine{
  color:var(--on-deep-2);font-size:var(--fs-fine);line-height:1.62;
  max-width:74ch;margin-top:var(--s4);
}

/* ------------------------------------------- secondary pages (legal) ----- */
.legal{padding:var(--s6) 0 var(--s7)}
.legal h1{font-size:clamp(1.85rem,1.4rem + 2vw,2.7rem);max-width:22ch}
.legal h2{font-size:var(--fs-h3);margin:var(--s5) 0 var(--s2);max-width:44ch}
.legal p,.legal li{color:var(--ink-2);font-size:1.02rem;line-height:1.68;max-width:68ch}
.legal ul{padding-left:1.15em;margin:0 0 var(--s3)}
.legal li{margin-bottom:var(--s1)}
.legal .updated{font-size:var(--fs-small);color:var(--ink-3);margin-bottom:var(--s5)}
.backlink{display:inline-block;margin-top:var(--s6);font-weight:600;text-decoration:none}
.backlink:hover{text-decoration:underline}

/* -------------------------------------------------------- wide screens --- */
@media (min-width:900px){
  /* --- hero becomes an over-image composition --- */
  .hero{display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;overflow:hidden}
  .hero > *{grid-area:1/1}
  .hero-img img{
    width:100%;height:100%;
    max-height:min(74vh,660px);min-height:440px;
    object-fit:cover;object-position:78% 50%;
  }
  /* THE SCRIM IS LOAD-BEARING FOR LEGIBILITY, NOT DECORATION, AND IT IS TIED
     TO THE TEXT COLUMN — NOT TO THE VIEWPORT.
     The quiet left of this photograph is BRIGHT, not dark, so without a scrim
     the white headline measured 1.44:1 against it — a real failure that a
     text-shadow was concealing.
     But a scrim expressed in viewport percentages drifts off the text as the
     layout reflows and ends up dimming the product, which is the one thing it
     must never do. So the width is computed from the SAME two values the text
     column is computed from, and it stops 56px past the text's right edge.
     Everything right of that runs at full brightness: the caps are the product
     and this is the only place a reader sees them.
       --hero-left  distance from the viewport's left edge to the content column
       --hero-col   the text column's own width
     Change either one and the scrim follows automatically. If the hero image
     is ever swapped, RE-MEASURE — this photograph's left side is bright, and a
     darker one would need less. */
  .hero{
    --hero-left:max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
    --hero-col:min(calc(0.48 * (min(100vw, var(--max)) - 2 * var(--gutter))), 520px);
  }
  .hero-scrim{
    display:block;
    justify-self:start;
    width:calc(var(--hero-left) + var(--hero-col) + 56px);
    /* stops measured from the RIGHT edge, so the falloff stays pinned to the
       text no matter how wide the box gets.
       2026-08-18: SOLID under the text, eased out to the SAME edge as before.
       The old ramp reached .55 opacity only 26px in and .93 at 56px — a short,
       steep transition that read as a hard band, and it left the type sitting
       on a partly-transparent ground whose worst pixel depended on the photo.
       Now the text area is solid (the panel is opaque up to the text column's
       right edge) and the last 56px is a smoothstep to zero. Two consequences,
       both wanted: the edge is visibly gentler because the ramp spends its
       first half near transparent instead of jumping to .55, and every ratio
       under the type is now measured against a FIXED ground rather than
       against the image, which is what takes the headline to 19.6:1.
       The right-hand endpoint is unchanged, so the product side of the frame
       is still dimmed by exactly 0.0%. */
    background:linear-gradient(to left,
      rgba(8,12,16,0)    0,
      rgba(8,12,16,.03)  8px,
      rgba(8,12,16,.12)  18px,
      rgba(8,12,16,.30)  28px,
      rgba(8,12,16,.56)  38px,
      rgba(8,12,16,.80)  47px,
      rgba(8,12,16,.94)  53px,
      rgba(8,12,16,1)    56px,
      rgba(8,12,16,1)    100%);
  }
  .hero-inner{
    background:none;
    align-self:center;
    width:100%;                 /* grid item with auto margins would otherwise
                                   size to fit-content and drift off the page
                                   grid — this keeps the hero text aligned to
                                   the same left edge as the header wordmark */
    padding-top:0;padding-bottom:0;
  }
  /* the text column is deliberately narrower than the scrim's strong zone —
     that is what keeps every measured ratio above 7:1 */
  .hero-text{width:var(--hero-col);max-width:100%}
  /* text-shadows removed 2026-08-18: with the scrim solid under the text they
     were compensating for nothing and were slightly softening the glyph edges.
     If the scrim is ever made partly transparent again, put them back AND
     re-measure against the image. */
  .hero h1{color:#fff;max-width:min(100%,480px)}
  .hero .eyebrow{color:var(--accent-lt)}
  /* 470px, not 400: at 400 the fold line set as "...can run / it. Available to
     license." — "it." stranded at the head of the last line. 470 gives three
     lines that each end on a whole phrase from 1024 up, and it still sits well
     inside the solid part of the scrim, so contrast is unchanged. */
  .hero .sub{color:#eef2f6;max-width:min(100%,470px)}

  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split.text-right .split-text{order:2}
  .model-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .duo{grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr)}
  .cta .mailpanel{margin-top:0}
  .site-head img{height:27px}
  .videowrap{max-width:520px}   /* JS-off fallback only; the lightbox overrides */
}

/* the 1180px override that re-narrowed .hero .sub to 32ch is gone — it fought
   the 470px measure above and reintroduced the stranded "it." */

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

@media print{
  .skip,.playui,.videowrap{display:none}
  body{background:#fff;color:#000}
  .band-deep{background:#fff;color:#000}
  .band-deep h2,.band-deep .big{color:#000}
  .site-foot{background:#fff;color:#000}
  .media-frame,.figframe{box-shadow:none}
}