/* ── roi.html: the reel is the hero (27 September 2026) ──────────────────
   Everything specific to the ROI page lives here; site.css is shared by
   every page and is not touched. Colours are the brand palette only: Ink
   #0B0F19, Dim #1D2638, Steel #5D728E, Line #C2C9D2, Raised #E6E6E6,
   Paper #FFFFFF, Bronze #9C8462, Tally blue #1F6BFF. */

/* The band. It wears the reel's own background, which the page script
   rewrites frame by frame as the film plays (Ink, a wipe to Tally blue, a
   wipe to white, a wipe back to Ink), so the edge of the frame never shows
   at any width. #0A0E19 is Ink as the encoder left it, measured with ffmpeg
   off the poster and the film's first frame: the band holds it before the
   film starts, on the poster, and without script. */
.roi-reel{
  --reel-bg:#0A0E19;
  --nav-h:70px;          /* the fixed bar: .nav-in is 70px, 62px on a phone */
  --pad-b:0px;           /* room under the film for the toggle, phones only */
  position:relative;
  margin-top:var(--nav-h);
  padding-bottom:var(--pad-b);
  background:var(--reel-bg);
  overflow:hidden;
}

/* Shown whole, never cropped: the full width of the page unless that would
   run taller than the screen under the nav, and never past the film's own
   1920px. Wider screens get the band either side; narrower ones get it
   under the film. */
.roi-reel-stage{
  position:relative;
  margin:0 auto;
  width:min(100%, calc((100vh - var(--nav-h) - var(--pad-b)) * 16 / 9), 1920px);
  width:min(100%, calc((100svh - var(--nav-h) - var(--pad-b)) * 16 / 9), 1920px);
  aspect-ratio:16 / 9;
  /* The film's grid runs to its edges; these fades let it dissolve into
     the band instead of stopping at a line. Measured over every frame, the
     film's own words sit between 4.6% and 78.5% of its height and 8.3% in
     from either side, so neither fade reaches a word. */
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 2.5%, #000 86%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 2.5%, #000 86%, transparent);
}
.roi-reel-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5.5%, #000 94.5%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 5.5%, #000 94.5%, transparent);
}

/* The reel is the button now (role="button" in the markup): a click, or
   Enter/Space once it has focus, jumps to the calculator below. No visible
   word is added — the pointer cursor and the ring on focus are the only
   tells, same as the film's own baked-in "Try the calculator" would have
   been had it been real. The ring is drawn on .roi-reel, not the stage:
   the stage fades top and bottom into that band (the mask above), and an
   outline there would fade with it. :has() lets the unmasked band carry a
   ring that stays crisp on Ink, Tally blue or white alike, the same three
   colours the toggle's own ring already has to work against. */
.roi-reel-stage{cursor:pointer}
.roi-reel-stage:focus-visible{outline:none}
.roi-reel:has(.roi-reel-stage:focus-visible){
  outline:2px solid #FFFFFF;
  outline-offset:-6px;
  box-shadow:0 0 0 4px #0B0F19 inset;
}

/* The one control (WCAG 2.2.2). It sits in the film's empty lower band,
   under its lowest words, on the nav's right gutter so it lines up with
   "Talk to us" above. A disc of Ink keeps the icon readable whatever the
   film is showing behind it: dark, blue or white. */
.roi-reel-toggle{
  position:absolute;
  z-index:1;
  right:clamp(22px, 4.4vw, 88px);
  bottom:clamp(8px, 2vw, 28px);
  width:44px;
  height:44px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(11,15,25,.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  color:#FFFFFF;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  transition:background-color .2s ease, transform .2s ease;
}
.roi-reel-toggle[hidden]{display:none}
.roi-reel-toggle:hover{background:rgba(11,15,25,.9)}
.roi-reel-toggle:active{transform:scale(.94)}
.roi-reel-toggle svg{display:block; width:14px; height:14px; fill:currentColor}
.roi-reel-toggle .i-play,
.roi-reel-toggle.is-paused .i-pause{display:none}
.roi-reel-toggle.is-paused .i-play{display:block}
/* A white ring over an Ink one: one of the two shows on every background
   the film passes through. The site-wide ring would square the corners. */
.roi-reel-toggle:focus-visible{
  outline:2px solid #FFFFFF;
  outline-offset:2px;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 4px #0B0F19;
}

/* The page's title, under the film rather than over it: the same eyebrow,
   headline and line of copy, now the lead-in to the calculator. On a wide
   screen it takes the card's two columns: the headline over the sliders,
   the copy over the result, starting where the result's own words start. */
.roi-head.subhero{
  padding-top:clamp(48px, 6.4vw, 96px);
  padding-bottom:0;
  border-bottom:0;
}
/* Where the reel's click and Enter/Space land: enough clearance for the
   fixed nav to never cover the words, matching the 84px every other
   in-page jump on the site already lands with (site.css, section[id]). */
.roi-head h1{scroll-margin-top:84px}
@media (min-width:1001px){
  .roi-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end}
  .roi-head .eyebrow{grid-column:1}
  .roi-head h1{grid-column:1; grid-row:2}
  .roi-head .sub{grid-column:2; grid-row:2; margin:0; max-width:34em;
    padding-left:clamp(24px, 3.4vw, 52px);
    font-size:clamp(17px, 1.3vw, 19px); line-height:1.6}
}
/* It rises in when it is reached, not on load (the script adds this class
   only when it can take it off again). */
@media (prefers-reduced-motion:no-preference){
  .roi-head-wait .eyebrow,
  .roi-head-wait h1.setwide span,
  .roi-head-wait .sub{animation-play-state:paused}
}

/* One surface from the title to the card: no rule between them, and the
   gap is the page's own rhythm rather than two sections' padding added. */
.roi-page.kyn{border-top:0}
.roi-page .sec{padding-top:clamp(40px, 5.6vw, 80px); padding-bottom:clamp(80px, 9vw, 136px)}

/* Side by side, the result runs taller than the three sliders, which left
   a void under the last one. The rows share the column's height instead,
   so the rules between them fall at even thirds and the two halves of the
   card end together. Stacked, each row keeps its own height. */
@media (min-width:1001px){
  .roi-page .value-inputs{padding-top:clamp(12px, 1.6vw, 24px); padding-bottom:clamp(12px, 1.6vw, 24px)}
  .roi-page .vrow{flex:1 1 0; align-content:center}
}

@media (max-width:700px){
  .roi-head.subhero{padding-top:40px}
  .roi-page .sec{padding-top:32px; padding-bottom:64px}
}

/* Phones. The bar is 62px here. The currency switch becomes three equal
   keys under their label: one row at any width, where the pills used to
   wrap one onto a line of its own. */
@media (max-width:640px){
  .roi-reel{--nav-h:62px}
  .roi-page .roi-cur{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; width:100%}
  .roi-page .roi-top-lbl{grid-column:1 / -1; margin:0 0 2px}
  .roi-page .roi-c{justify-content:center; padding:0 8px}
}
/* Under 520px the film is full width and barely 290px tall, and its empty
   lower band gets too shallow to hold the toggle clear of the words. A
   30px strip of the band's colour under it takes the toggle instead, which
   then sits half on the film's faded foot and half on the strip. */
@media (max-width:520px){
  .roi-reel{--pad-b:30px}
  .roi-reel-toggle{bottom:8px}
}
@media (max-width:360px){
  .roi-reel-toggle{right:14px}
}

@media (prefers-reduced-motion:reduce){
  .roi-reel-toggle{transition:none}
  .roi-reel-toggle:active{transform:none}
}