/* INNO Site — generated from redesign/prototype-fonts.html; edit the prototype, then rebuild. */
/* ============================================================
   INNO v2 — Apple-informed design system on INNO brand tokens
   (see docs/apple-design-learnings.md)
   ============================================================ */
:root{
  --navy:#01092E; --blue:#0232FF; --velocity:#00A0FF; --cyan:#00F6FF; --lilac:#DE9DFF;
  --ink:#01092E; --gray:#5F6787; --bg-gray:#F5F6FA;
  --d-ink:#FFFFFF; --d-gray:#98A2C8;
  --font:'Archivo',Helvetica,Arial,sans-serif; --r:28px;
  --font-h:'owners-narrow','Arial Narrow','Archivo',sans-serif;   /* headings: condensed, black */
  --font-n:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;  /* numbers and metric labels */
  /* Apple-style partial gradients: colors dissolve into the text color */
  --grad-light:linear-gradient(100deg,#0232FF,#0091FF 60%,#00CFFF);
  --grad-dark:linear-gradient(100deg,#00F6FF,#00A0FF 65%,#4D8DFF);
  /* one full-gradient hero moment per page */
  --grad-moment:linear-gradient(100deg,#19FAFF 0%,#00B8FF 45%,#B08CFF 100%);   /* bright end to end: the old lilac tail read anaemic, a dark violet read dull */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:#fff;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* ---- typography system: one weight (600), color does hierarchy ---- */
/* every heading on the site in capitals (Ezra, 2026-09-14); capitals want a touch of positive
   tracking, so the tight negative tracking the mixed-case titles had is lifted below */
h1,h2,h3,h4{font-weight:700;text-transform:uppercase;letter-spacing:.012em}   /* the hero's weight everywhere (Ezra, 2026-09-14) */
.t-hero{font-size:clamp(44px,5.8vw,80px);line-height:1.05;letter-spacing:-.015em}
.t-section{font-size:clamp(34px,4.2vw,56px);line-height:1.07;letter-spacing:.012em}
.t-sub{font-size:clamp(24px,2.6vw,32px);line-height:1.12}
.t-card{font-size:clamp(21px,2.1vw,28px);line-height:1.14}
.t-body{font-size:clamp(17px,1.7vw,21px);line-height:1.4;font-weight:500;color:var(--gray)}
.t-body b{font-weight:600;color:var(--ink)}
.dark .t-body{color:var(--d-gray)}
.dark .t-body b{color:var(--d-ink)}
.grad{background-image:var(--grad-light);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ink)}
.dark .grad,.grad.on-dark{background-image:var(--grad-dark);color:#fff}
.grad-moment{background-image:var(--grad-moment);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--velocity)}
.grad-full{background-image:linear-gradient(100deg,#0232FF,#00A0FF 60%,#00F6FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--blue)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--velocity)}
.link{color:var(--blue);font-weight:600;font-size:17px;display:inline-flex;align-items:center;gap:6px}
.link::after{content:"›";font-size:20px;transition:transform .25s}
.link:hover::after{transform:translateX(4px)}

/* reveal on scroll — gentle, Apple-like */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.25,.1,.25,1),transform .8s cubic-bezier(.25,.1,.25,1)}
.rv.in{opacity:1;transform:none}

/* ================= HEADER (theme-adaptive) ================= */
header{position:fixed;inset:0 0 auto 0;z-index:50;transition:padding .4s cubic-bezier(.3,.1,.2,1);padding:14px 0;
  pointer-events:none}   /* the closed .mnav still occupies layout inside the header: never let that empty band eat taps */
header .wrap,header .mnav{pointer-events:auto}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid transparent;
  transition:background .4s,box-shadow .4s,border-radius .4s,border-color .4s,padding .4s,max-width .4s cubic-bezier(.3,.1,.2,1)}
header.scrolled{padding:10px 16px}
header.scrolled .wrap{background:rgba(255,255,255,.7);backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
  border-radius:999px;border-color:rgba(255,255,255,.65);max-width:940px;padding:8px 10px 8px 22px;
  box-shadow:0 12px 40px rgba(1,9,46,.14)}
header.on-dark.scrolled .wrap{background:rgba(8,17,58,.55);border-color:rgba(255,255,255,.12);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.logo-h{height:44px;width:auto;transition:.3s}
header.scrolled .logo-h{height:36px}
.h-nav{display:flex;gap:30px;margin-left:8px;margin-right:auto}
.h-nav a{font-size:14px;font-weight:500;color:var(--ink);opacity:.75;transition:.25s}
.h-nav a:hover{opacity:1;color:var(--blue)}
header.on-dark .h-nav a{color:#fff}
header.on-dark .h-nav a:hover{color:var(--cyan)}
.h-actions{display:flex;gap:10px;align-items:center}

/* burger + mobile nav panel */
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(1,9,46,.16);
  background:transparent;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:17px;height:1.8px;border-radius:2px;background:var(--ink);
  transition:transform .3s cubic-bezier(.3,.1,.2,1),opacity .2s}
header.on-dark .burger{border-color:rgba(255,255,255,.22)}
header.on-dark .burger span{background:#fff}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.4px) rotate(-45deg)}
.mnav{display:none}
@media(max-width:1080px){
  .burger{display:flex}
  .mnav{display:flex;flex-direction:column;gap:2px;margin:10px 32px 0;padding:10px;
    border-radius:26px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.7);
    backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
    box-shadow:0 18px 50px rgba(1,9,46,.18);
    transform-origin:top;transform:translateY(-8px) scaleY(.96);opacity:0;visibility:hidden;
    transition:transform .28s cubic-bezier(.3,.1,.2,1),opacity .22s,visibility .22s}
  .mnav.open{transform:none;opacity:1;visibility:visible}
  header.on-dark .mnav{background:rgba(8,17,58,.82);border-color:rgba(255,255,255,.12);
    box-shadow:0 18px 50px rgba(0,0,0,.5)}
  header.scrolled .mnav{margin-left:0;margin-right:0}
  .mnav a{padding:13px 16px;border-radius:16px;font-size:16px;line-height:1.25;font-weight:500;color:var(--ink);transition:.2s}
  .mnav a:active{background:rgba(2,50,255,.07)}
  header.on-dark .mnav a{color:#fff}
  .mnav-cta{margin-top:8px;justify-content:center;color:#fff!important;font-size:15px!important}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:500;font-size:15px;
     padding:11px 22px;border-radius:999px;border:0;cursor:pointer;transition:.25s}
.btn-primary{color:#fff;background:var(--blue)}
.btn-primary:hover{background:#0028D4;transform:translateY(-1px)}
.btn-grad{color:#fff;background:linear-gradient(100deg,#0232FF 0%,#00A0FF 100%);box-shadow:0 8px 24px rgba(2,50,255,.3)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(2,50,255,.4)}
.btn-ghost{color:var(--ink);background:transparent;border:1.5px solid rgba(1,9,46,.16)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-ico{width:40px;height:40px;padding:0;border-radius:50%}
header.on-dark .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
header.on-dark .btn-ghost svg{fill:#fff}

/* ================= HERO ================= */
.hero{position:relative;overflow:hidden;padding:118px 0 40px;background:#fff;
  min-height:calc(100vh - 134px);min-height:calc(100dvh - 134px);display:flex;align-items:center}
.hero>.wrap{width:100%}
.hero-outline{position:absolute;right:-6%;top:4%;width:54%;opacity:.045;pointer-events:none}
.hero:not(.hero-v):not(.hero-x) .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative}
.hero-cta{display:flex;align-items:center;gap:26px}
.btn-lg{font-size:17px;font-weight:600;padding:16px 38px}
.hero:not(.hero-v):not(.hero-x) h1{margin-bottom:14px;font-weight:700;font-size:clamp(48px,6.6vw,96px);letter-spacing:-.005em;line-height:1.02}
.hero .sub{font-size:clamp(24px,2.7vw,38px);font-weight:700;color:var(--ink);line-height:1.15}
.hero .sub .grad{font-weight:600}
.hero .kicker{display:flex;align-items:center;gap:11px;margin:24px 0 38px;font-size:17px;font-weight:500;color:var(--gray)}
.hero .kicker b{color:var(--ink);font-weight:700}
.kmark{width:16px;height:9px;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(2,50,255,.30))}
.lead-form{background:#fff;border:1px solid rgba(1,9,46,.09);border-radius:var(--r);padding:24px;
  box-shadow:0 20px 60px rgba(1,9,46,.07);display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px}
.lead-form input{grid-column:span 1;font-family:var(--font);font-size:15px;padding:13px 18px;border-radius:14px;
  border:1.5px solid rgba(1,9,46,.1);background:#fff;color:var(--ink);outline:none;transition:.2s}
.lead-form input:nth-child(5){grid-column:span 2}
.lead-form input:focus{border-color:var(--velocity);box-shadow:0 0 0 3px rgba(0,160,255,.14)}
.lead-form input::placeholder{color:#9AA1BF}
/* phone = one field, two parts: a country pill (flag + dial code over a real, transparent <select>,
   so the native picker opens and the keyboard works) and the national number (Ezra, 2026-09-15) */
.phone{display:flex;align-items:stretch;border-radius:14px;border:1.5px solid rgba(1,9,46,.1);background:#fff;overflow:hidden;transition:.2s}
.phone:focus-within{border-color:var(--velocity);box-shadow:0 0 0 3px rgba(0,160,255,.14)}
.phone input{border:0!important;border-radius:0;box-shadow:none!important;flex:1;min-width:0;padding-left:14px}
.phone .cc{position:relative;display:flex;align-items:center;gap:6px;padding:0 10px 0 14px;border-right:1.5px solid rgba(1,9,46,.1);color:var(--ink);font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap}
.phone .cc-flag{font-size:19px;line-height:1}
.phone .cc-code{font-family:var(--font-n);font-weight:500;font-size:14px;letter-spacing:0}
.phone .cc-chev{color:#9AA1BF;flex:none}
.phone .cc:hover .cc-chev{color:var(--ink)}
.phone .cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}   /* 16px: iOS does not zoom the page when the picker opens */
.phone .cc:has(select:focus-visible){outline:2px solid var(--velocity);outline-offset:-2px;border-radius:12px 0 0 12px}
.cta-form .phone{border-color:transparent}
.cta-form .phone:focus-within{border-color:var(--velocity)}
.lead-form .btn{grid-column:span 2;font-size:16px;padding:15px}
.hero-art{position:relative;display:flex;justify-content:center}
/* floating mark: the wrapper carries the float so the sheen mask stays registered to the art */
.mark-wrap{position:relative;width:min(96%,560px);animation:float 8s ease-in-out infinite}
.hero-art .mark{width:100%;filter:drop-shadow(0 34px 70px rgba(2,50,255,.22))}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}
/* shorter throw for the small mobile chips — a hover, not a jump */
@keyframes chipFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
/* the sweep is masked by the logo's own alpha, so the glare only ever crosses the blades */
.mark-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:url('../img/logos/inno-logo-new-v1.webp');mask-image:url('../img/logos/inno-logo-new-v1.webp');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.mark-sheen::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:38%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.5) 46%,rgba(255,255,255,.82) 52%,transparent 100%);
  transform:translate3d(-170%,0,0);will-change:transform;
  animation:sheenSweep 7s cubic-bezier(.45,0,.2,1) 1.2s infinite}
@keyframes sheenSweep{0%{transform:translate3d(-170%,0,0)}22%{transform:translate3d(330%,0,0)}100%{transform:translate3d(330%,0,0)}}
.chip{position:absolute;overflow:hidden;background:rgba(255,255,255,.55);
  backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.72);
  border-radius:18px;padding:12px 18px;
  box-shadow:0 12px 36px rgba(1,9,46,.12),inset 0 1px 0 rgba(255,255,255,.95)}
.chip>*{position:relative;z-index:1}
.chip::after{content:"";position:absolute;top:-45%;bottom:-45%;left:0;width:46%;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.9) 50%,transparent 100%);
  transform:translate3d(-170%,0,0);will-change:transform;
  animation:sheenSweep 7s cubic-bezier(.45,0,.2,1) infinite}
.chip .l{font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--gray)}
.br-m{display:none}   /* a line break that exists only on phones */
.chip .v{font-size:23px;font-weight:600}
.chip1{top:6%;right:2%}.chip2{bottom:16%;left:-2%}.chip3{bottom:-4%;right:14%}
/* stagger the three flashes so the hero never blinks all at once */
.chip1::after{animation-delay:.6s}.chip2::after{animation-delay:1.9s}.chip3::after{animation-delay:3.2s}
@media(prefers-reduced-motion:reduce){
  .mark-wrap,.mark-sheen::after,.chip,.chip::after{animation:none!important}
  .mark-sheen,.chip::after{display:none}
}
.scroll-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:-56px;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.28em;color:#9AA1BF}
.scroll-cue .line{width:1.5px;height:42px;background:linear-gradient(180deg,var(--blue),var(--cyan));border-radius:2px;
  animation:cue 1.9s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0);opacity:0}35%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(26px);opacity:0}}

/* ================= CLIENT LOGO MARQUEE (light) ================= */
.strip{height:134px;padding:0;display:flex;align-items:center;background:var(--bg-gray);overflow:hidden}
.marquee{display:flex;gap:46px;width:max-content;animation:mq 64s linear infinite;animation-play-state:paused;will-change:transform}
.marquee.run{animation-play-state:running}
/* 76px canvases (the files are 16:9 with the mark inside) — 56 read too small (Ezra, 2026-09-14);
   64s keeps the desktop strip at the ~85px/s it moved at before the logos grew */
.marquee img{height:76px;width:auto;opacity:.72;filter:grayscale(1);transition:.3s}
.marquee img:hover{opacity:1;filter:none}
/* --mq-shift is one measured period in px, set per track by armMarquee() */
@keyframes mq{to{transform:translate3d(var(--mq-shift,-50%),0,0)}}

/* ================= PHILOSOPHY (navy block) ================= */
.dark{background:var(--navy);color:#fff}
.philosophy{padding:110px 0 96px;position:relative;overflow:hidden}
.philosophy::before{content:"";position:absolute;inset:0;background:url('../img/logo-modules/mark-construction-outline.webp') no-repeat right -8% top 40px/46% auto;opacity:.045;filter:invert(1)}
/* Philosophy head (Ezra, 2026-09-14, after tinuiti.com): a small centred eyebrow over one big
   gradient title, in place of the marquee ticker */
.philo-head{text-align:center;padding-top:16px;margin-bottom:72px}
.philo-head .eyebrow{display:block;margin-bottom:22px}
.philo-head h2{margin:0}
.ticker{overflow:hidden;border-block:1px solid rgba(255,255,255,.07);padding:20px 0;margin-bottom:90px}
.ticker-track{display:flex;gap:64px;width:max-content;animation:mq 11s linear infinite;animation-play-state:paused;will-change:transform;font-size:clamp(28px,3.6vw,48px);font-weight:600;text-transform:uppercase;letter-spacing:.012em;white-space:nowrap;letter-spacing:-.005em}
.ticker-track.run{animation-play-state:running}
.philosophy .copy{margin:0 auto;position:relative}
/* The measure is in em, never px. Because two lines are hard-broken with <br>, words-per-line
   is fixed by the copy until a segment overflows the measure and dumps its tail onto its own
   line — measured on the old 950px, 28px stranded a one-word line and 32px stranded a single
   word mid-paragraph. Expressing the measure in em locks the measure-to-size ratio (~33) so
   the line structure holds at every size and viewport. */
.fill-p{max-width:33em;text-align:left;margin-inline:auto}
/* .fill = the reveal mechanics, shared by every paragraph role (lead .fill-p and body .p-body);
   .fill-p keeps only the lead's size. --floor is the resting opacity: .36 white on navy (3.2:1). */
/* The copy is white throughout; the "grey" is simply low opacity, so a single opacity
   ramp per word carries it from grey to white as the block scrolls up. --p (0..1) is the
   only thing JS touches — every word derives its own state from its index, so the reveal
   costs one custom-property write per paragraph per frame instead of 40 style writes. */
.fill-p{font-size:clamp(22px,2.2vw,32px);line-height:1.42;letter-spacing:-.011em;
  font-weight:500;color:#fff;margin-bottom:40px}
/* the +6 overshoot matters: without it the final words top out at 1/5 opacity when --p
   reaches 1, and the paragraph never actually finishes lighting up.
   The .36 floor rather than .3: white at 30% over this navy computes to 2.56:1, which fails
   WCAG AA for normal text (4.5:1) and even the 3:1 large-text floor. .36 reaches 3.2:1 and
   costs almost nothing — the copy still starts clearly muted. */
.fill .w{opacity:clamp(var(--floor,.36),calc((var(--p,1) * (var(--n,1) + 6) - var(--i,0)) / 5),1)}
/* a word is one run: it never breaks inside itself, and a mixed-script word like "ה-P&L" keeps
   its own bidi context — the reveal paints each word twice and the two copies were breaking at
   different places inside the hyphen (Ezra, 2026-09-27) */
.fill .w,.fill .hl .w::after{white-space:nowrap;unicode-bidi:isolate}
/* The gradient phrases resolve grey -> gradient by FADING THE GRADIENT IN over a grey base,
   not by burning a grey cover off the top of a gradient. Both directions were built; the cover
   version cannot work, because an opaque twin never quite masks the antialiased glyph edges
   underneath and the phrase kept a cyan fringe at rest. Fading in has no coverage problem: at
   --p 0 the overlay is simply absent and the base grey — rgb(92,98,121), exactly the 36% white
   resting state composited on the navy — is indistinguishable from its unlit neighbours. */
.fill .hl{font-weight:600;background:none;-webkit-text-fill-color:currentColor;color:inherit}
.fill .hl .w{position:relative;opacity:1;--hf:clamp(0,calc((var(--p,1) * (var(--n,1) + 6) - var(--i,0)) / 5),1);
  /* the grey base leaves exactly as the gradient copy arrives: on iOS the two copies sat a hair
     apart and read as an embossed 3D letter (Ezra, 2026-09-14) */
  color:rgb(92 98 121 / calc(1 - var(--hf)));-webkit-text-fill-color:rgb(92 98 121 / calc(1 - var(--hf)))}
.fill .hl .w::after{content:attr(data-w);position:absolute;left:0;top:0;line-height:normal;
  /* line-height:normal — the copy sits in the word's content box (ascent+descent), so its
     baseline lands on the word's baseline whatever the font's metrics; with an inherited
     line-height the copy carried half the leading and sat low (root cause of the iOS "emboss") */
  background-image:linear-gradient(100deg,#00F6FF,#00A0FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  opacity:var(--hf)}
@media(prefers-reduced-motion:reduce){.fill .w{opacity:1}}
.engine-title{font-size:clamp(38px,4.8vw,64px);letter-spacing:.012em;text-align:center;margin:0}
.departments{padding-top:90px}
.platforms{margin-top:90px;position:relative;text-align:center}
.platforms .eyebrow{display:block;margin-bottom:38px;color:#7C87B8}
.plat-rail{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
/* Nine badges in a wrapping row landed on seven different top edges at 390 and took 313px of
   the section. They run as one line now, the same device the client logos use, so the
   credential reads as a strip rather than as a dumped list. */
.platforms-row{display:flex;align-items:center;gap:64px;width:max-content;
  animation:mq 86s linear infinite;animation-play-state:paused;will-change:transform}
.platforms-row.run{animation-play-state:running}
/* the same weight the client logos carry in POWERED: forced to pure white with the soft blue
   lift under them, not a grey knock-back. They were sitting at .78 with no filter and read as
   grey furniture on the navy. */
.platforms-row img{height:44px;width:auto;max-width:none;object-fit:contain;flex:none;
  opacity:.92;transition:opacity .3s,transform .3s;
  filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,160,255,.25))}
.platforms-row img:hover{opacity:1;transform:scale(1.05)}
.platforms:hover .platforms-row{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.platforms-row{animation:none}}

/* ================= DEPARTMENTS — FLIP CARDS ================= */
.departments{padding:50px 0 120px}
.dept-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:auto}
.dept{perspective:1400px;min-height:390px;cursor:pointer;border-radius:var(--r)}
.dept-inner{position:relative;width:100%;height:100%;min-height:390px;transition:transform .7s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d}
.dept-grid.armed .dept-inner,body.no-scrub .dept-inner{animation:peek 7s ease-in-out infinite}
.dept:nth-child(2) .dept-inner{animation-delay:1.2s}
.dept:nth-child(3) .dept-inner{animation-delay:2.4s}
.dept:nth-child(4) .dept-inner{animation-delay:3.6s}
@keyframes peek{0%,78%,100%{transform:rotateY(0)}86%{transform:rotateY(-16deg)}92%{transform:rotateY(4deg)}}
.dept:hover .dept-inner,.dept.flipped .dept-inner{transform:rotateY(180deg);animation:none}
@media (prefers-reduced-motion:reduce),(hover:none){.dept-inner{animation:none}}
.dept-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r);padding:36px 26px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dept-front{background:rgba(255,255,255,.045);transition:background .35s}
.dept:hover .dept-front{background:rgba(255,255,255,.075)}
.shape{height:150px;width:150px;display:flex;align-items:center;justify-content:center;margin-bottom:32px}
.shape img{filter:drop-shadow(0 14px 30px rgba(0,160,255,.32))}
.shape.h img{width:148px;height:auto}
.shape.v img{height:148px;width:auto}
.dept-front h3{font-size:22px;line-height:1.2}
.dept-front .tag{margin-top:8px;font-size:13.5px;font-weight:400;color:#9BA6CF}
.dept-front .hint{margin-top:22px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#9DB8FF;
  display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(0,160,255,.3);background:rgba(0,160,255,.06);animation:hintpulse 2.4s ease-in-out infinite}
.dept-front .hint svg{width:13px;height:13px;fill:none;stroke:#00A0FF;stroke-width:2;stroke-linecap:round;animation:spin 5s linear infinite}
@keyframes hintpulse{0%,100%{box-shadow:0 0 0 0 rgba(0,160,255,.28)}55%{box-shadow:0 0 0 9px rgba(0,160,255,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.dept-back{transform:rotateY(180deg);color:#fff;overflow:hidden}
.dept-back::before{content:"";position:absolute;inset:0;background:rgba(1,9,46,.5)}
.dept-back>*{position:relative}
.dept-back h4{font-size:16px;letter-spacing:.03em;margin-bottom:14px}
.dept-back p{font-size:13.5px;font-weight:400;line-height:1.6;color:#F0F4FF}
.bg-sig{background:url('../img/gradients/gradient-signal.webp') center/cover}
.bg-int{background:url('../img/gradients/gradient-intelligence.webp') center/cover}
.bg-vel{background:url('../img/gradients/gradient-velocity.webp') center/cover}
.bg-deep{background:url('../img/gradients/gradient-deep-blue.webp') center/cover}


/* ===== Growth Engine scroll stage ===== */
.departments{padding:0!important}
/* The Engine section paints ABOVE Philosophy so it can slide in over it (philoExit() in the
   engine script holds Philosophy's content in place for that viewport of scroll and then
   pushes it away). The 1px navy shadow above its top edge closes the hairline seam: two navy
   boxes meeting on a fractional pixel row each cover it partially, and the WHITE body bled
   through the anti-aliasing between them. */
/* no z-index of its own: the sticky stage must sit ABOVE the Powered by INNO section (z 3)
   so that section can be seen through the mark's empty square, while the section still paints
   over this section's navy ground. The stage is transparent; the navy during the pin comes
   from the panels in the engine script. */
.departments{position:relative;box-shadow:0 -1px 0 0 var(--navy)}
/* .philo-in is deliberately NOT positioned: philoExit() measures the platforms row against the
   section via offsetTop, and a positioned wrapper would become the offsetParent and shift that
   measurement by the section's top padding. Philosophy's overflow:hidden clips whatever the
   transform pushes past its bottom edge — exactly where the Engine's navy takes over.
   It IS promoted to its own layer up front: philoExit() starts writing a transform the moment
   the Engine's top edge enters the viewport, and creating that layer mid-swipe rasterised the
   whole section (37 tiles) in the middle of the gesture — the checkerboarded frames measured
   on the live page, 2026-09-27. With the layer already there, the swipe is a compositor move. */
.philo-in{will-change:transform}
#eng-pin{position:relative}
#eng-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;z-index:5;background:transparent}
#eng-stage>.wrap{display:flex;flex-direction:column;height:100%;width:100%;padding-top:86px;padding-bottom:8vh;position:relative;z-index:1}
.eng-rig{position:absolute;inset:0;pointer-events:none;will-change:transform}
.eng-rig-b{z-index:0}.eng-rig-f{z-index:4}
.eng-panel{position:absolute;background:var(--navy)}
.eng-vignette{position:absolute;z-index:3;pointer-events:none;box-shadow:inset 0 0 26px 8px rgba(0,4,28,.85)}
#eng-stage .engine-title{margin:0;position:relative;z-index:6;text-shadow:0 2px 30px rgba(1,9,46,.85)}
/* the shadow must not reach the gradient words: with background-clip:text the glyph fill is
   transparent, so a text-shadow paints on top of the gradient inside the letters and muddied it
   to a dusty teal next to "Demand Both." (Ezra, 2026-09-14) */
#eng-stage .engine-title .grad-moment{text-shadow:none}
#eng-stage .dept-grid{margin-top:auto;margin-bottom:auto}
/* The glow used to be this gradient under a 70px blur filter. A blur is re-run by the GPU on
   every frame the layer's opacity moves, and on the phone that layer crossing the fold was the
   one checkerboarded frame the will-change on .philo-in did not remove (measured 2026-09-27).
   The same soft edge is now drawn by the gradient itself, spread over a box scaled up by the
   blur's reach, so there is no filter at all. */
.eng-glow{position:absolute;z-index:1;pointer-events:none}
.eng-glow::before{content:"";position:absolute;inset:-16%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,160,255,.5) 0%,rgba(0,160,255,.34) 22%,rgba(0,246,255,.14) 42%,rgba(0,246,255,.05) 56%,transparent 68%)}
.eng-ring{position:absolute;z-index:2;border-radius:50%;border:1.5px solid rgba(0,246,255,.8);opacity:0;pointer-events:none}
.eng-outline{position:absolute;z-index:1;left:0;top:0;opacity:0;filter:invert(1);pointer-events:none;max-width:none}
.eng-pc{position:absolute;left:0;top:0;z-index:4;transform-origin:center;pointer-events:none;max-width:none;
  will-change:transform,opacity;filter:drop-shadow(0 4px 10px rgba(1,4,24,.55)) drop-shadow(0 12px 30px rgba(0,160,255,.18))}
body.no-scrub #eng-pin{height:auto!important}
body.no-scrub #eng-stage{position:static;height:auto;overflow:visible}
body.no-scrub #eng-stage>.wrap{height:auto;padding-bottom:110px}
.dept-desc,.dept-plus{display:none!important}

/* ============ Growth Engine card interaction (desktop) ============ */
.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}
@media(min-width:721px){
  /* --- shared: kill the 12 infinite loops and the unintended hover reveal --- */
  .dept-grid.armed .dept-inner,body.no-scrub .dept-inner{animation:none}
  .dept:hover .dept-inner{transform:none}
  @media(hover:hover){
    .dept:hover .dept-inner{transform:rotateY(180deg)}
  }
  /* the chevron is the only signifier: a real button, no pill, no border, no pulse */
  .dept-front .dept-toggle{margin-top:20px;width:34px;height:34px;padding:0;border:0;cursor:pointer;
    background:transparent;display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;transition:transform .4s cubic-bezier(.33,0,.15,1),background .25s}
  .dept-front .dept-toggle svg{width:19px;height:19px;fill:none;stroke:#7FC4FF;stroke-width:2.1;
    stroke-linecap:round;stroke-linejoin:round;animation:none}
  .dept-front .dept-toggle:hover{background:rgba(0,160,255,.12)}
  .dept-front .dept-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}


  /* the 3D flip, with the four FLIP pills replaced by a single bare chevron */
  .dept.flipped .dept-inner{transform:rotateY(180deg)}
  .dept.flipped .dept-toggle{transform:rotate(90deg)}
  /* the back face was clipping its last line (scrollHeight 404 vs clientHeight 390) */
  .dept-face{padding:30px 22px 26px}
  /* .dept-face is a centred flex column, so a heading shrinks to its text width and sits
     centred no matter what text-align says. Stretch the back face's children instead. */
  .dept-back{align-items:stretch;text-align:left}
  .dept-back p{font-size:13px;line-height:1.55;text-align:left}
  .dept-back h4{font-size:18px;margin-bottom:12px;text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .dept-inner,.dept-front .dept-toggle,.dept-front .dept-toggle svg{animation:none!important;transition:none!important}
}
.dept-row{display:contents}
.dept-front h3 .tsub{display:none!important}
@media(max-width:719px){#eng-stage>.wrap{padding-top:92px;padding-bottom:3vh}
/* every other section title on a phone is 34px; this one measured 25.7px. 8.7vw reaches
   34px at 390 and the padding drops to 20px so the line still has room not to wrap. */
#eng-stage .engine-title{font-size:clamp(22px,7.6vw,30px);white-space:nowrap}}   /* capitals at weight 700 need the smaller size to hold one line on a 390px phone */

/* ================= SCALED BY INNO — statement + live numbers + brand wall ================= */
.stats-panel{position:relative;max-width:1000px;margin:64px auto 0;padding:46px 44px 42px;border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.stats-panel::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:46%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.13) 46%,rgba(0,246,255,.10) 54%,transparent 100%);
  transform:translate3d(-140%,0,0);will-change:transform;animation:shine 7s cubic-bezier(.45,0,.2,1) infinite}
@keyframes shine{0%{transform:translate3d(-140%,0,0)}26%{transform:translate3d(330%,0,0)}100%{transform:translate3d(330%,0,0)}}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 20px}
.stat{text-align:center}
.stat .sv{font-size:clamp(38px,4.4vw,62px);font-weight:600;letter-spacing:-.02em;line-height:1;
  background-image:linear-gradient(100deg,#0232FF,#00A0FF 55%,#00F6FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--velocity)}
.stat .sl{margin-top:13px;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--d-gray)}
.stat-live{margin-top:40px;padding-top:36px;border-top:1px solid rgba(255,255,255,.10);text-align:center}
.stat-live .sv{font-size:clamp(46px,5.4vw,76px);font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;
  background-image:linear-gradient(100deg,#0232FF,#00A0FF 55%,#00F6FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--velocity)}
.stat-live .sl{margin-top:13px;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--d-gray)}

/* ================= SCALED BY INNO (light gray zone) ================= */
/* z-index so it rises OVER the pinned engine stage during the reveal (3, because the engine
   section itself is now at 2 to ride over Philosophy). No will-change: nothing here is
   transformed any more — the lift is a negative margin in normal flow. */
/* ---- One ground from "We partner" to the testimonials ----
   Ezra (2026-09-11): the navy gives way exactly where the We partner sentence begins and keeps
   deepening, through the whole Creative section, into the blue the light testimonials sit on:
   one two-colour ramp, no return to navy in between. The two sections paint slices of the same
   virtual gradient. The stops are pixel offsets, negative on the Creative because it starts
   further down the ramp, measured and written by rampGround(); the values here are only the
   no-JS fallback. The soft texture is one image stretched over both sections the same way. */
/* The engine script gives .scaled-wrap a negative top margin of (1 + zoom) viewports and a height
   of the section plus the zoom stretch, so the sticky section is pinned to the top of the frame
   for exactly the ride into the mark's square and is back in normal flow at release — the
   compositor holds it, not a per-frame JavaScript counter-translate, which lagged a frame
   behind the scroll and jittered (Ezra, 2026-09-14). The wrapper must never become a stacking
   context, so the section's own z-index keeps working. */
.scaled-wrap{display:block}
.scaled{will-change:transform}   /* one compositing path before, during and after the ride — no switch, no colour jump */
.scaled{position:sticky;top:0;z-index:3;color:#fff;padding:120px 0 110px;overflow:hidden;
  --r0:66%;--r1:78%;--r2:90%;--r3:100%;--tex-y:0px;--tex-h:100%}
.creative{--r0:-190%;--r1:-85%;--r2:20%;--r3:100%;--tex-y:0px;--tex-h:100%}
.scaled,.creative{background:linear-gradient(180deg,var(--navy) var(--r0),#021A6E var(--r1),#0232FF var(--r2),#0084F2 var(--r3))}
/* plain alpha, no blend mode: while the section rides in its own compositing layer, Safari blends
   a screen-mode texture against that layer's black backdrop and paints a light haze over the
   whole section that vanishes at release as a colour jump (Ezra's video, 2026-09-14) */
.scaled::before,.creative::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.11;
  background:url('../img/gradients/gradient-scale.webp') center var(--tex-y)/100% var(--tex-h) no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent var(--r0),#000 var(--r2));mask-image:linear-gradient(180deg,transparent var(--r0),#000 var(--r2))}
.scaled .wrap{position:relative;z-index:1}
.scaled h2{text-align:center;margin-bottom:18px}
.sc-lead{margin-top:30px}
.sc-partners{margin-top:70px;margin-bottom:64px}
.logo-rows{display:grid;gap:38px}
.lrow{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lrow-track{display:flex;gap:64px;width:max-content;animation:mq 42s linear infinite;animation-play-state:paused;will-change:transform}
.lrow-track.run{animation-play-state:running}
.lrow:nth-child(2) .lrow-track{animation-direction:reverse;animation-duration:50s}
.lrow img{height:66px;width:auto;filter:brightness(0) invert(1);opacity:.92;transition:.3s;filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,160,255,.25))}
.lrow img:hover{opacity:1;transform:scale(1.05)}

/* ================= CREATIVE — The P&L Studio =================
   One title, two tabs, one carousel at a time. Both carousels are full-bleed: the first tile
   sits on the content's left edge and the strip runs to the right edge of the screen, so the
   cut-off tile is the swipe affordance — no padding, no hint text. Tiles are height-locked
   per rail so 9:16, 1:1 and 4:5 sit side by side; films are 16:9 in their own rail. A click
   opens the piece in a popup. Loops are muted <video> with preload=none, run by the scheduler. */
.creative{position:relative;color:#fff;padding:97px 0 120px;overflow:hidden;
  --gutter:max(32px,calc((100vw - 1180px) / 2 + 32px));
  /* ground and texture: the shared ramp rules next to .scaled above. The 1px tuck under the
     Powered by INNO section stops a sub-pixel hairline of body white showing at the seam. */
  margin-top:-1px}
.creative>*{position:relative;z-index:1}
.cw-top{display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:26px}
.cw-title{text-align:left;margin:0}
/* the lead under the title: the site's standing paragraph treatment (fill reveal, sizes, em
   measure), flush with the title rather than centred; the tabs get a little more air below it */
.cw-top .cw-sub{margin:0;max-width:33em}   /* two classes: outranks the phone-size .fill-p margins as well */
.cw-sub .hl{white-space:nowrap}   /* the payoff after the colon stays whole: no orphaned "line." on desktop */
.cw-top .cw-tabs{margin-top:10px}
/* Tabs as a segmented control: the white ground is one pill that slides to the chosen tab
   (NN/g "Tabs, Used Right": at least two selection cues — here fill + colour, and the motion
   itself shows the relation). The unselected tab keeps its colours but invites a click: it
   lifts on hover and, until the tabs are first used, a soft sheen crosses it once every ~5s.
   NN/g "Animation for Attention": peripheral motion pulls the eye, so keep it brief (~0.9s),
   infrequent, only while the section is on screen, and stop it after the first interaction. */
.cw-tabs{position:relative;display:flex;gap:8px;isolation:isolate}
.cw-tab-pill{position:absolute;left:0;top:0;height:100%;width:var(--w,0px);transform:translate3d(var(--x,0px),0,0);border-radius:999px;background:#fff;z-index:2;pointer-events:none;overflow:hidden;
  transition:transform .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1)}   /* width is the pill's own box only; nothing else lays out */
/* inside the pill, a navy copy of every label laid out exactly like the tabs and counter-moved,
   so the pill reveals the dark label as it slides over it — the labels themselves never change
   colour, so nothing is ever white-on-white or navy-on-blue mid-flight */
.cw-tab-pill-inner{position:absolute;left:0;top:0;display:flex;gap:8px;color:var(--navy);white-space:nowrap;transform:translate3d(calc(-1 * var(--x,0px)),0,0);transition:transform .42s cubic-bezier(.22,1,.36,1)}
.cw-tab,.cw-tab-ghost{font:inherit;font-size:14px;font-weight:600;letter-spacing:.01em;padding:10px 20px;border-radius:999px;border:1px solid transparent;box-sizing:border-box;display:inline-block;line-height:normal}
.cw-tab{position:relative;z-index:1;overflow:hidden;cursor:pointer;
  color:#C6CFEF;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);
  transition:background .2s,color .3s,border-color .2s,transform .25s cubic-bezier(.25,.1,.25,1),box-shadow .25s}
.cw-tab:hover{color:#fff;border-color:rgba(255,255,255,.34);transform:translate3d(0,-1px,0);box-shadow:0 8px 22px rgba(0,160,255,.22)}
.cw-tab:active{transform:translate3d(0,0,0) scale(.97);transition-duration:.08s}
.cw-tab::after{content:"";position:absolute;inset:-2px;pointer-events:none;opacity:0;transform:translate3d(-120%,0,0);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%)}
.creative.in-view .cw-tabs:not(.used) .cw-tab[aria-selected="false"]::after{animation:cwSheen 5.2s cubic-bezier(.4,0,.2,1) 1.6s infinite}
@keyframes cwSheen{0%{transform:translate3d(-120%,0,0);opacity:0}3%{opacity:1}17%{transform:translate3d(120%,0,0);opacity:1}18%,100%{transform:translate3d(120%,0,0);opacity:0}}
.cw-tab[aria-selected="true"]{background:#fff;color:var(--navy);border-color:#fff;cursor:default;transform:none;box-shadow:none}   /* no-JS look */
.cw-tabs.ready .cw-tab[aria-selected="true"]{background:transparent;border-color:transparent;color:#C6CFEF}   /* once placed, the pill carries the white and the navy label */
.cw-tab:focus-visible{outline:3px solid var(--velocity);outline-offset:3px}
.cw-panel[hidden]{display:none}
.cw-rail{position:relative;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 22px var(--gutter);scroll-padding-left:var(--gutter);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;user-select:none;-webkit-user-select:none}
.cw-rail::-webkit-scrollbar{display:none}
.cw-rail::after{content:"";flex:0 0 calc(var(--gutter) - 20px)}   /* lets the last tile snap to the content edge */
.cw-rail.dragging{cursor:grabbing}
.cw-rail-films{--rail-h:380px}.cw-rail-social{--rail-h:469px}
.cw-rail .cw{flex:0 0 auto;height:var(--rail-h);aspect-ratio:var(--ar);scroll-snap-align:start}
.cw{position:relative;border-radius:20px;overflow:hidden;background:#0A1650;transition:transform .45s cubic-bezier(.25,.1,.25,1),box-shadow .45s}
.cw:hover{transform:translate3d(0,-3px,0);box-shadow:0 22px 60px rgba(0,120,255,.18)}
.cw-open{all:unset;display:block;width:100%;height:100%;cursor:inherit;position:relative;color:#fff;text-align:left;font:inherit;box-sizing:border-box}
.cw-open:focus-visible{outline:3px solid var(--velocity);outline-offset:-3px;border-radius:20px}
.cw-media{position:absolute;inset:0;background:#0A1650}
.cw-media img,.cw-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cw-media img{-webkit-user-drag:none}
.cw-media video{opacity:0;transition:opacity .4s}
.cw.playing .cw-media video{opacity:1}
.cw-badge{position:absolute;left:14px;top:14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;
  background:rgba(1,9,46,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff}
.cw-play{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;background:rgba(1,9,46,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center}
.cw-play::after{content:"";border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;margin-left:3px}
body.cw-still .cw-play,.cw.needs-tap .cw-play{display:flex}
.cw-meta{position:absolute;left:0;right:0;bottom:0;padding:60px 16px 16px;background:linear-gradient(180deg,rgba(1,9,46,0),rgba(1,9,46,.82));pointer-events:none}
.cw-client{display:block;font-weight:700;font-size:15px;line-height:1.2}
.cw-line{display:-webkit-box;font-size:12.5px;color:rgba(255,255,255,.8);margin-top:5px;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.cw-disc{display:block;font-size:13px;color:#C6CFEF;margin-top:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---- the popup: player sized by aspect inside the viewport, meta beneath ---- */
.cw-modal{position:fixed;inset:0;z-index:85;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden;transition:visibility 0s .4s}
.cw-modal.on{visibility:visible;transition:visibility 0s}
.cw-modal-back{position:absolute;inset:0;background:rgba(1,5,24,.8);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);opacity:0;transition:opacity .35s}
.cw-modal.on .cw-modal-back{opacity:1}
.cw-modal-panel{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:92vw;opacity:0;transform:translate3d(0,16px,0) scale(.97);transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.cw-modal.on .cw-modal-panel{opacity:1;transform:none}
.cw-modal-player{border-radius:20px;overflow:hidden;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.cw-modal-player video{display:block;width:100%;height:100%;background:#000}
.cw-modal-meta{text-align:center;color:#fff;max-width:64ch}
.cw-modal-meta .cw-client{font-size:20px}
.cw-modal-meta .cw-line{display:block;-webkit-line-clamp:unset;font-size:14.5px;color:#C6CFEF;margin-top:8px}
.cw-modal-x{position:absolute;top:-54px;right:0;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cw-modal-x:hover{background:rgba(255,255,255,.2)}
/* previous / next inside the popup — the testimonials' arrow buttons, so the two galleries
   read as one system (Baymard: arrows in addition to swipe and keys, never instead) */
.cw-modal-nav{position:absolute;left:0;right:0;top:0;height:var(--ph,100%);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.cw-modal-nav[hidden]{display:none}
.cw-modal-arrow{pointer-events:auto;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(1,9,46,.14);background:#fff;color:var(--ink);
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 2px;transition:border-color .25s,color .25s,background .25s;
  transform:translate3d(-64px,0,0)}
.cw-modal-arrow.next{transform:translate3d(64px,0,0)}
.cw-modal-arrow:hover{border-color:var(--blue);color:var(--blue)}
.cw-modal-arrow:focus-visible{outline:3px solid var(--velocity);outline-offset:3px}
.cw-modal-player video{transition:opacity .28s}
.cw-modal-player.swap video{opacity:0}
.cw-count{display:block;font-size:12.5px;letter-spacing:.06em;color:rgba(198,207,239,.72);margin-top:10px;font-variant-numeric:tabular-nums}
/* a fixed pill at the bottom would sit over the popup's control row */
body.cw-expanded .dockbar{opacity:0!important;pointer-events:none;transform:translateX(-50%) translateY(150%)!important}
/* many tiles → smaller dots, so 22 still fit inside the pill on a phone */
.dock-dots.dense{gap:6px;padding:12px 14px}.dock-dots.dense button{width:6px;height:6px}.dock-dots.dense button.on{width:16px}
@media(max-width:720px){
  /* the studio fills a phone screen (Ezra, 2026-09-14): both rails swipe sideways. The social
     pieces grow to ~300px wide so one fills the screen with the next one peeking in; height
     follows the shape, so 9:16 and 1:1 sit side by side, the squares centred in the row.
     Films ran as a vertical boxed list for a while; Ezra (2026-09-27) asked for the same sideways
     swipe as Social, so a film tile spans the width between the gutters (about 84 percent of the
     screen) and the next film shows its edge past the gap. */
  .creative{padding:48px 0 88px}
  .cw-top{gap:18px;margin-bottom:18px}
  .cw-top .cw-tabs{margin-top:6px}
  .cw-tab,.cw-tab-ghost{font-size:13px;padding:9px 16px}
  .cw-rail{gap:14px;padding-bottom:16px}
  .cw-rail-films{--tile-w:min(420px,calc(100vw - var(--gutter)*2))}
  .cw-rail-films .cw{height:auto;width:var(--tile-w)}   /* aspect-ratio stays var(--ar), 16/9 for a film */
  .cw-rail-social{--tile-w:min(300px,calc(100vw - var(--gutter)*2 - 24px));align-items:center}   /* sizeSocialTiles() refines --tile-w to what fits above the dock */
  .cw-rail-social .cw{height:auto;width:var(--tile-w)}
  .cw-rail::after{flex-basis:calc(var(--gutter) - 14px)}
  .cw-modal{padding:14px}.cw-modal-x{top:-50px}
  .cw-modal-nav{position:static;height:auto;order:3;justify-content:center;gap:14px;margin-top:2px}
  .cw-modal-arrow,.cw-modal-arrow.next{transform:none;width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){.cw-media video{transition:none}.cw{transition:none}.cw:hover{transform:none}.cw-modal-panel,.cw-modal-back{transition:none}
  .cw-tab::after{animation:none!important}.cw-tab-pill{transition:none}.cw-tab{transition:none}.cw-modal-player video{transition:none}}

/* ================= TESTIMONIALS (white cards on gray) ================= */
.testimonials{background:var(--bg-gray);padding:60px 0 100px;position:relative;overflow:hidden}
.testimonials::after{content:"";position:absolute;left:-150px;bottom:-150px;width:430px;height:430px;
  background:url('../img/logos/inno-mark-electric-blue.webp') no-repeat center/contain;opacity:.04;pointer-events:none}
.testimonials h2{text-align:center;margin-bottom:64px}
.t-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative}
.t-card{background:#fff;border-radius:var(--r);padding:44px;transition:.35s}
.t-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(1,9,46,.08)}
.t-card p{font-size:15.5px;font-weight:400;line-height:1.75;color:#3A4166;margin-bottom:28px}
.t-card::before{content:"“";display:block;font-size:64px;font-weight:600;line-height:.6;margin-bottom:18px;
  background-image:var(--grad-light);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.t-who{display:flex;align-items:center;gap:14px}
.t-who img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.t-mono{width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:600;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,#0232FF,#00A0FF 60%,#00F6FF)}
.t-who .n{font-weight:600;font-size:16px}
.t-who .r{font-size:13.5px;font-weight:500;color:var(--gray)}

/* the same voice as the copyright beside it: size, weight and colour inherited, nothing added
   (Ezra, 2026-09-27) — the underline appears only under the pointer */
footer .f-legal{color:inherit;font:inherit;opacity:1;text-decoration:none}
footer .f-legal:hover{text-decoration:underline;text-underline-offset:2px}

/* ================= SCOPED RESET — third layer of the isolation =================
   A page builder that shares the WordPress install styles <button>, inputs and media globally,
   hung off a class it adds to the body element. The plugin strips that class and the stylesheets; this is
   the layer that holds if a new plugin finds a fourth way in. Scoped to our documents, and only
   for the controls a builder reaches for — never a blanket reset, which would fight our own rules.
   `:where()` keeps it at zero specificity so every real rule below still wins. */
:where(body.inno-landing, body.inno-page) :where(button, [type=button], [type=submit], [type=reset]){
  border:0;border-radius:0;background:none;padding:0;margin:0;font:inherit;color:inherit;
  letter-spacing:inherit;text-transform:none;box-shadow:none;line-height:inherit;appearance:none;-webkit-appearance:none;cursor:pointer}
:where(body.inno-landing, body.inno-page) :where(input, select, textarea){
  font:inherit;color:inherit;border-radius:0;box-shadow:none;margin:0}
:where(body.inno-landing, body.inno-page) :where(img, video, svg){border:0;box-shadow:none;max-width:100%}
:where(body.inno-landing, body.inno-page) :where(a){text-decoration:none;color:inherit}
:where(body.inno-landing, body.inno-page) :where(h1,h2,h3,h4,p,ul,ol,figure){margin:0;padding:0}

/* ================= COOKIE CONSENT =================
   The format is the one every Israeli site uses — one sentence and a link — but the object is
   ours: the mark IS the cookie, and it is being eaten while you read. The bites are cut out of
   the real logo file with an SVG mask rather than drawn, so the shape stays the brand's and the
   crumbs fall from where the bite actually happened. Accept and it takes one more bite on the
   way out. */
.ck{position:fixed;z-index:60;inset-inline-start:22px;bottom:calc(20px + env(safe-area-inset-bottom));
  width:min(390px,calc(100vw - 32px));
  background:rgba(255,255,255,.80);backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);
  border:1px solid rgba(1,9,46,.08);border-radius:20px;box-shadow:0 22px 64px rgba(1,9,46,.18);
  padding:16px 18px 14px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  transform:translateY(calc(100% + 48px));opacity:0;pointer-events:none;
  transition:transform .62s cubic-bezier(.16,1,.3,1),opacity .34s ease}
.ck.show{transform:none;opacity:1;pointer-events:auto}
.ck.gone{transform:translateY(calc(100% + 48px)) scale(.97);opacity:0;pointer-events:none}
/* the decision is the first thing asked, so the dock waits its turn */
body.ck-on .dockbar{opacity:0!important;pointer-events:none;transform:translateX(-50%) translateY(150%)!important}

.ck-cookie{width:58px;height:58px;flex:0 0 auto;overflow:visible}
.ck-cookie .bite{fill:#000}                 /* black in a mask = the piece that is gone */
.ck-cookie .crumb{fill:var(--blue);opacity:0}
/* Each bite has its own depth. Shallow notches read as a rendering fault rather than as a
   mouthful (Ezra, 2026-09-25: "כרגע זה נראה כמו טעות"), so b1 and b2 overlap into one scalloped
   chunk down the leading edge and b3 takes a second mouthful out of the bottom on the way out.
   The bites themselves are taken by the consent script (it writes the circles' r attribute), not
   by a CSS animation: they used to start with the slide-in, so the first mouthful was gone before
   the card had even settled and nobody saw it happen (Ezra, 2026-09-27). Now the card arrives
   whole, sits for a beat, and is bitten in front of you. Only the crumbs stay in CSS, timed to
   fall from each bite. */
.ck.show .ck-cookie .k1{animation:ckCrumb .9s ease-out 1.12s forwards}
.ck.show .ck-cookie .k2{animation:ckCrumb 1s ease-out 1.22s forwards}
.ck.show .ck-cookie .k3{animation:ckCrumb .85s ease-out 1.9s forwards}
@keyframes ckCrumb{0%{opacity:0;transform:translate(0,0)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(3px,26px)}}

.ck-txt{font-family:var(--font);font-size:14px;line-height:1.45;color:var(--ink);margin:0 0 10px}
.ck-txt a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.ck-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ck-act .btn{font-size:13.5px;padding:9px 18px}
.ck-no{background:none;border:1px solid rgba(1,9,46,.16);border-radius:999px;padding:8px 15px;
  font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--gray);cursor:pointer}
.ck-no:hover{border-color:rgba(1,9,46,.3);color:var(--ink)}
.ck-no:focus-visible,.ck .btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:720px){
  .ck{inset-inline:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom));padding:14px 15px 12px;gap:12px}
  .ck-cookie{width:50px;height:50px}
  .ck-txt{font-size:13.5px}
  .ck-act .btn,.ck-no{flex:1 1 auto;text-align:center;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .ck{transition:opacity .2s}
  .ck.show,.ck.gone{transform:none}
  .ck .crumb{animation:none!important}
}
/* Hebrew reads the card from the other side, so the bites move to the other edge and keep facing
   the words. The mark itself is never mirrored — that would reverse the pinwheel, and the
   pinwheel is the brand; only the holes move. (cx as a CSS property, so one rule does it.) */
[dir=rtl] .ck{direction:rtl}
/* Hebrew headings that hold one line (Ezra, 2026-09-27) */
[dir=rtl] .team-copy h2{white-space:nowrap;font-size:clamp(26px,3.6vw,52px)}
[dir=rtl] .case-coming h3{white-space:nowrap}
/* blog.css says [dir=rtl] p{text-align:right} for every Hebrew paragraph; the card's subtitle sits
   between a centred title and a centred button, so it stays centred (Ezra, 2026-09-27) */
[dir=rtl] .case-coming p{text-align:center}
@media(max-width:720px){
  [dir=rtl] .team-copy h2{font-size:clamp(24px,8vw,34px)}
  [dir=rtl] .case-coming h3{font-size:clamp(17px,5.2vw,24px)}   /* one line inside the card at 375px too */
  [dir=rtl] .cta h2{font-size:clamp(34px,10.5vw,44px)}   /* "כאן צומחים. / באמת." can afford it */
}
[dir=rtl] .ck-cookie .b1{cx:22px}
[dir=rtl] .ck-cookie .b2{cx:13px}
[dir=rtl] .ck-cookie .b3{cx:54px}
[dir=rtl] .ck-cookie .k1{cx:32px}
[dir=rtl] .ck-cookie .k2{cx:19px}
[dir=rtl] .ck-cookie .k3{cx:25px}

/* ================= BOTTOM DOCK BARS (sticky CTA / carousel dots) ================= */
.dockbar{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:45;
  transform:translateX(-50%) translateY(150%);opacity:0;transition:transform .45s cubic-bezier(.3,.1,.2,1),opacity .45s;
  display:flex;align-items:center;gap:16px;
  background:rgba(8,17,58,.66);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;box-shadow:0 14px 44px rgba(1,9,46,.35)}
.dockbar.show{transform:translateX(-50%) translateY(0);opacity:1}
.dockbar.on-light{background:rgba(255,255,255,.8);border-color:rgba(1,9,46,.08);box-shadow:0 14px 44px rgba(1,9,46,.16)}
#dock-cta.on-light .txt{color:var(--ink)}
.dock-dots.on-light button{background:rgba(1,9,46,.22)}
.dock-dots.on-light button.on{background:var(--ink)}
#dock-cta{padding:8px 8px 8px 22px}
/* The pill is centred at the bottom on every breakpoint. It used to park in the desktop
   right gutter to stay clear of centred copy; the brief asks for centred, and the segment
   choreography below keeps it off the sections where it would collide. */
#dock-cta .txt{color:#fff;font-size:14px;font-weight:500;white-space:nowrap}
#dock-cta .btn{font-size:14px;padding:10px 22px}
.dock-dots{padding:12px 18px;gap:10px}
.dock-dots button{width:9px;height:9px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.38);transition:.3s}
.dock-dots button.on{width:24px;background:#fff}
/* The Creative rails hold up to 22 pieces: a row of 22 dots reads as noise. Their bar shows a
   window of five slots that slides to keep the active dot centred, the edge dots shrinking when
   more lie beyond them (the iOS page-control convention), plus previous/next arrows on pointer
   devices — Baymard: arrows in addition to swipe, never instead (2026-09-14). */
.dock-dots .dk-arr{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;
  font-size:18px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;padding:0 0 2px;transition:background .2s,opacity .2s}
.dock-dots .dk-arr:hover{background:rgba(255,255,255,.18)}
.dock-dots .dk-arr:disabled{opacity:.3;pointer-events:none}
@media(min-width:721px){.dock-dots .dk-arr{display:flex}}
.dock-dots.on-light .dk-arr{border-color:rgba(1,9,46,.14);background:#fff;color:var(--ink)}
.dock-dots .dk-win{overflow:hidden;height:14px;display:flex;align-items:center}
.dock-dots .dk-track{display:flex;transition:transform .32s cubic-bezier(.25,.1,.25,1);will-change:transform}
.dock-dots .dk-track button{width:20px;flex:0 0 20px;height:14px;border-radius:0;background:none;position:relative}
.dock-dots .dk-track button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.38);
  transform:translate(-50%,-50%) scale(var(--ds,1));transition:width .3s,background .3s,transform .3s}
.dock-dots .dk-track button.on{width:20px;background:none}
.dock-dots .dk-track button.on::before{width:16px;background:#fff}
.dock-dots.on-light .dk-track button::before{background:rgba(1,9,46,.22)}
.dock-dots.on-light .dk-track button.on::before{background:var(--ink)}

/* ================= TESTIMONIALS CAROUSEL (Apple gallery style) ================= */
.t-carousel{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px max(8px,calc(50% - 300px)) 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.t-carousel::-webkit-scrollbar{display:none}
.t-carousel .t-card{flex:0 0 min(600px,86%);scroll-snap-align:center;cursor:pointer;position:relative}
.t-quote{display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;transition:.3s}
.t-card.open .t-quote{display:block;-webkit-line-clamp:unset}
.t-more{position:absolute;right:22px;bottom:22px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(2,50,255,.08);color:var(--blue);font-size:20px;font-weight:500;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .3s,background .3s}
.t-card.open .t-more{transform:rotate(45deg);background:rgba(2,50,255,.14)}
.t-card.closing .t-more{transform:none;background:rgba(2,50,255,.08)}

/* ================= CASE STUDIES (white, Apple feature rows) ================= */
.cases{background:#fff;padding:100px 0 120px}
.cases>.wrap>h2{text-align:center;margin-bottom:56px}
.case{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;padding:50px 0}
.case+.case{border-top:1px solid rgba(1,9,46,.06)}
/* the flipped row swaps the COLUMN WIDTHS too, not just the order: sending the media to
   the right without this left it in the .9fr column at 473px while the other two rows sat
   at 579px, so the three media boxes could never be the same size. Behind min-width because
   .case:nth-child(odd) out-specifies the single-column phone rule and would survive it. */
@media(min-width:721px){.case:nth-child(odd){grid-template-columns:.9fr 1.1fr}}
.case:nth-child(odd) .case-img{order:2}
/* One box for every case medium, metric grid or product shot alike. The height comes out
   of the width through --case-ar instead of a fixed pixel min-height: the old 280px card
   floor stayed put while the column collapsed, so between 721px and 1080px the cards drifted
   from 0.94 to 0.53 and the panel stood 200px taller than the copy next to it. */
.case-img{--case-ar:1.334;aspect-ratio:var(--case-ar);
  border-radius:var(--r);overflow:hidden;background:var(--navy);position:relative}
.case-img img{width:100%;transition:transform .7s cubic-bezier(.25,.1,.25,1)}
.case:hover .case-img img{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.case-img img{transition:none}.case:hover .case-img img{transform:none}}
/* a case inserted at runtime by the More Case Studies loader carries a bare <img>; without
   this it would be letterboxed or clipped by the ratio box depending on its own aspect */
.case-img:not(.case-stats):not(.case-shot)>img{height:100%;object-fit:cover;object-position:center}
.case-copy{max-width:440px}

/* ---- case-study metric grid: the stats-grid reference, built in CSS rather than as an
   image so it stays crisp, editable and translatable. 2x2 electric-blue cards on a deeper
   blue ground; icon pinned top-left, label and value seated at the bottom. ---- */
.case-stats{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;padding:14px;
  background:#0F26E0}
.cs-card{background:#0A2BF8;border-radius:24px;padding:clamp(14px,1.6vw,24px);min-height:0;
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.25,.1,.25,1)}
.case:hover .cs-card{transform:translateY(-3px)}
.case:hover .cs-card:nth-child(2){transition-delay:.04s}
.case:hover .cs-card:nth-child(3){transition-delay:.08s}
.case:hover .cs-card:nth-child(4){transition-delay:.12s}
/* fluid so the icon, label and value always clear the card at 768px too, where the card
   is only 111px tall — fixed 38/15.5/44 overflowed it */
/* flex:0 0 auto is load-bearing: the icon is a flex item, so when "Total Spend Managed"
   wrapped to two lines the default flex-shrink made the SVG absorb the deficit and it
   rendered 26x18.5 next to its 26x26 siblings — a squashed ellipse, not a smaller icon. */
.cs-card svg{flex:0 0 auto;width:clamp(26px,2.6vw,38px);height:clamp(26px,2.6vw,38px);
  fill:none;stroke:#fff;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
/* floor raised from 11.5 to 12.5: 1.1vw only reaches 11.5px at 1045px, so the whole
   901-1045 band sat pinned at a label smaller than the same label on a phone */
.cs-l{font-size:clamp(12.5px,1.1vw,15.5px);font-weight:400;line-height:1.25;color:rgba(255,255,255,.92)}
.cs-v{font-size:clamp(22px,3vw,44px);font-weight:700;line-height:1;letter-spacing:-.02em;color:#fff;margin-top:4px}
/* no glare here on purpose: the hero chips and the Powered-by panel already carry the
   glass language, and a third sweep on the same page reads as noise. */
@media(prefers-reduced-motion:reduce){.cs-card{transition:none}}

/* ---- case 2: the ecommerce mockup was sitting in a navy box that fought it. Now it rests
   on a light platform with its own shadow, so the screenshot reads as a product shot. ---- */
.case-shot{display:flex;align-items:flex-end;padding:0 14px;
  background:linear-gradient(165deg,#F2F5FC,#E4EAF7 60%,#D8E1F4)}
/* 527px wide before, 551px now, and seated on the bottom edge of a box that is exactly the
   metric panel's box — so the three case rows share one silhouette */
/* the artwork is a PNG with a fully transparent background (alpha 0 at every edge), so a
   border-radius and a box-shadow drew a rectangle that isn't in the picture — it read as a
   second grey panel sitting on the platform. The mockup floats on the platform instead. */
.case-shot img{width:100%;height:auto;display:block;transform-origin:bottom center}
.case h3{font-size:clamp(24px,2.5vw,32px);line-height:1.14;margin-bottom:16px}
.case p{font-size:17px;font-weight:500;line-height:1.55;color:var(--gray);margin-bottom:24px}
.case p b{font-weight:600;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tags span{font-size:12.5px;font-weight:500;padding:8px 15px;border-radius:999px;color:var(--ink);background:var(--bg-gray)}

/* ================= FAQ ================= */
.faq{background:var(--bg-gray);padding:120px 0 130px}
.faq h2{text-align:center;margin-bottom:60px}
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq-item{background:#fff;border-radius:20px;overflow:hidden;transition:box-shadow .35s}
.faq-item.open{box-shadow:0 16px 44px rgba(1,9,46,.07)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 28px;font-family:var(--font);font-size:18px;font-weight:600;color:var(--ink)}
.faq-q::after{content:"+";flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:500;color:var(--blue);background:rgba(2,50,255,.07);transition:transform .35s cubic-bezier(.33,0,.15,1)}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.33,0,.15,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-in{overflow:hidden;min-height:0}
.faq-a p{padding:0 28px 26px;font-size:15.5px;font-weight:400;line-height:1.7;color:#3A4166;max-width:700px;
  opacity:0;transform:translate3d(0,-6px,0);transition:opacity .3s,transform .45s cubic-bezier(.33,0,.15,1)}
.faq-item.open .faq-a p{opacity:1;transform:none;transition:opacity .35s .08s,transform .45s cubic-bezier(.33,0,.15,1)}
.faq-a p b{font-weight:600;color:var(--ink)}

/* ================= CTA ================= */
.cta{position:relative;color:#fff;text-align:center;padding:150px 0;overflow:hidden;
  background:url('../img/gradients/gradient-hero-blue.webp') center/cover}
.cta::before{content:"";position:absolute;inset:0;background:url('../img/logos/inno-mark-white.webp') no-repeat right -60px center/36% auto;opacity:.08}
.cta h2{font-size:clamp(44px,6vw,76px);letter-spacing:.005em;margin-bottom:40px;position:relative}
.cta-form{margin:0 auto;position:relative;border:1px solid rgba(255,255,255,.12);background:var(--navy);
  box-shadow:0 30px 80px rgba(1,9,46,.35);scroll-margin-bottom:40px;scroll-margin-top:96px}
.cta-form input{border-color:transparent}
.cta-form input:focus{border-color:var(--velocity)}

/* ---- annual ad budget: three required brackets instead of a slider or a number field
   (Ezra, 2026-09-14: annual, required, under half a million / half a million to three / three
   and up). Nothing is pre-selected on purpose — a default reads as an answer the visitor never
   gave; `required` on the group makes the browser ask for one before it submits. ---- */
.budget{grid-column:span 2;padding:6px 8px 2px;text-align:left}
.budget-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:14px}
.budget-lb{font-size:14px;font-weight:500;color:#B9C2E4}
.budget-lb i{font-style:normal;font-size:12.5px;color:#7C87B8}
.cur-switch{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.07);flex:0 0 auto}
.cur-switch button{font-family:var(--font);font-size:13px;font-weight:600;line-height:1;
  width:30px;height:26px;border:0;border-radius:999px;background:transparent;color:#8E99C8;cursor:pointer;
  transition:color .2s,background .2s}
.cur-switch button:hover{color:#fff}
.cur-switch button[aria-pressed="true"]{background:rgba(255,255,255,.14);color:#fff}
.budget-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bopt{position:relative;display:block;cursor:pointer}
/* the input covers the whole card so the entire card is the hit area, and the visible
   state lives on the sibling span — no repainting of a native control per browser */
.lead-form .bopt input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;
  border-radius:14px;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;background:none;box-shadow:none}
.lead-form .bopt input:focus{border:0;box-shadow:none}
/* the ring is an inset shadow, not a border: a real border paints under the gradient
   (background-clip is border-box) and its transparent-on-selected state left a ragged
   halo in the rounded corners. An inset ring also keeps the box geometry identical
   between states, so nothing shifts by 1.5px when a bracket is picked. */
.bo-v{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 6px;
  border-radius:14px;border:0;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.15);
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:#D7DEF7;text-align:center;white-space:nowrap;
  transition:transform .22s cubic-bezier(.25,.1,.25,1),box-shadow .22s,background-color .22s,color .22s}
.bopt:hover .bo-v{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34);color:#fff;transform:translate3d(0,-2px,0)}
.bopt input:checked+.bo-v{color:#fff;background-color:transparent;
  background-image:linear-gradient(120deg,#0232FF,#00A0FF);box-shadow:0 8px 22px rgba(0,120,255,.35)}
.bopt input:focus-visible+.bo-v{box-shadow:inset 0 0 0 1.5px var(--velocity),0 0 0 3px rgba(0,160,255,.28)}
@media(prefers-reduced-motion:reduce){.bo-v{transition:none}.bopt:hover .bo-v{transform:none}}

/* ---- case-study modal ---- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;
  visibility:hidden;transition:visibility 0s .45s}
.modal.on{visibility:visible;transition:visibility 0s}
.modal-back{position:absolute;inset:0;background:rgba(1,5,24,.62);backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);opacity:0;transition:opacity .35s}
.modal.on .modal-back{opacity:1}
.modal-panel{position:relative;width:min(860px,100%);max-height:min(88vh,900px);overflow:auto;background:#fff;border-radius:var(--r);
  box-shadow:0 40px 120px rgba(1,9,46,.45);opacity:0;transform:translate3d(0,18px,0) scale(.965);
  transition:opacity .38s,transform .5s cubic-bezier(.22,1,.36,1)}
.modal.on .modal-panel{opacity:1;transform:none}
.modal-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;z-index:2;
  background:rgba(255,255,255,.88);color:var(--ink);font-size:21px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(1,9,46,.18);transition:transform .3s,background .3s}
.modal-x:hover{background:#fff;transform:rotate(90deg)}
.modal-media img{width:100%;display:block}
.modal-body{padding:34px 38px 38px}
.modal-body h3{font-size:clamp(22px,2.4vw,30px);line-height:1.15;margin-bottom:12px}
.modal-body p{font-size:16px;line-height:1.65;font-weight:500;color:var(--gray)}
.modal-body p b{font-weight:600;color:var(--ink)}
.modal-body .tags{margin:22px 0 0}
.modal-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
body.modal-open{overflow:hidden}
button.link{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font)}

/* ---- more case studies ---- */
.more-cases{display:flex;justify-content:center;margin-top:30px}
#more-cases{min-width:230px;position:relative;font-weight:600}
#more-cases.loading{color:transparent;pointer-events:none}
#more-cases.loading::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  border:2.5px solid rgba(2,50,255,.22);border-top-color:var(--blue);animation:spin .7s linear infinite}
.case-coming{margin-top:34px;border-radius:var(--r);padding:60px 40px;text-align:center;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#021A6E,#0232FF 55%,#0084F2)}
.case-coming h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px}
.case-coming p{color:#C6CFEF;font-weight:500;margin-bottom:28px}

/* ================= FOOTER ================= */
footer{padding:80px 0 36px}
footer .grow-together{font-size:clamp(24px,2.5vw,32px);letter-spacing:0;line-height:.95;text-align:center;margin-bottom:54px;text-wrap:balance;max-width:26em;margin-inline:auto}
footer .grow-together .grad{font-size:inherit;font-weight:inherit}
.f-cols{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:40px;padding-bottom:10px}
.f-brand{max-width:330px}
.f-brand p{margin:22px 0 30px;font-size:14px;font-weight:400;line-height:1.65;color:#8B94BC}
.f-col{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.f-col .eyebrow{margin-bottom:5px;color:#7C87B8}
.f-col a{font-size:14.5px;font-weight:400;color:#C6CFEF;transition:.2s}
.f-col a:hover{color:var(--cyan)}
footer .sig{display:inline-flex;align-items:center;gap:13px;height:46px}
footer .sig img{height:100%;width:auto}
footer .f-brand .sig span{font-family:var(--font-h);font-weight:700;font-size:34px;line-height:1;color:#fff;letter-spacing:0;text-transform:uppercase}   /* the wordmark in the heading face (Ezra, 2026-09-15) */
.socials{display:flex;gap:12px}
.socials a{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.16);transition:.25s}
.socials a:hover{background:var(--blue);border-color:transparent;transform:translateY(-3px)}
.socials svg{width:18px;height:18px;fill:#fff}
footer .base{display:flex;justify-content:space-between;align-items:center;padding-top:30px;border-top:1px solid rgba(255,255,255,.09);font-size:13px;font-weight:400;color:#8B94BC}

/* ================= RESPONSIVE ================= */
@media(max-width:1080px){
  .h-nav{display:none}
  .dept-grid{grid-template-columns:1fr 1fr}
  .hero:not(.hero-v):not(.hero-x) .wrap{grid-template-columns:1fr;gap:44px}
  .hero-art{order:-1}.mark-wrap{width:min(66%,320px)}
  .t-grid{grid-template-columns:1fr}
  .scroll-cue{display:none}
}
@media(max-width:720px){
  .hero{padding:92px 0 72px;min-height:calc(100vh - 104px);min-height:calc(100dvh - 104px)}
  .strip{height:104px}
  .hero>.wrap{position:static}
  .scroll-cue{display:flex!important;position:absolute;left:50%;transform:translateX(-50%);
    bottom:12px;top:auto;font-size:10px;letter-spacing:.3em;gap:7px;z-index:3}
  .scroll-cue .line{height:30px}
  /* mobile hero: no colorful mark; construction outline as background layer;
     stat chips sit between the kicker and the form (variant A, UX-tested) */
  .hero-outline{right:-34%;top:-2%;width:120%;opacity:.055}
  .hero:not(.hero-v):not(.hero-x) .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .hero:not(.hero-v):not(.hero-x) .wrap>div{display:contents}

  .mark-wrap{display:none}
  .hero h1{grid-column:1/-1;order:1}
  .hero .sub{grid-column:1/-1;order:2}
  .hero .kicker{grid-column:1/-1;order:3;margin:14px 0 4px}
  /* Identical glass and glare to desktop — only the placement and the padding change,
     since the card is ~110px wide here. Everything visual (background, blur, border,
     shadow, and the white sweep) is inherited rather than redeclared. */
  /* inset:auto is essential — the desktop rules position these three absolutely
     (.chip2{bottom:16%} and friends), and those offsets come back to life the moment
     the chip is position:relative, throwing the row out of alignment */
  .chip{position:relative;inset:auto;z-index:1;order:4;padding:11px 9px 12px;text-align:center;
    animation:chipFloat 7s ease-in-out infinite}
  .chip2{animation-delay:.85s}
  .chip3{animation-delay:1.7s}
  /* Desktop glass works because the chips sit over the coloured mark. There is nothing
     behind them on mobile, so the blur has nothing to refract and a white glare lands
     invisible on a white page. This lays a soft, NEUTRAL shadow bed under the row — enough
     tonal variation for the glass and the sweep to read, with no colour cast. The chips
     themselves stay identical to desktop, and hanging it off an existing row rather than
     adding an element keeps the grid exactly as it was. */
  .hero .kicker{position:relative}
  .hero .kicker::after{content:"";position:absolute;left:-3%;right:-3%;top:calc(100% + 6px);
    height:100px;z-index:0;pointer-events:none;border-radius:44px;
    background:radial-gradient(ellipse 60% 66% at 50% 52%,rgba(1,9,46,.075),rgba(1,9,46,.032) 56%,transparent 79%);
    filter:blur(16px)}
  /* reserve two label lines in every chip so the three numbers share one baseline; YOY breaks
     above GROWTH so the third label is two lines like its neighbours (Ezra, 2026-09-15) */
  .br-m{display:inline}
  .chip .l{font-size:8.5px;letter-spacing:.03em;line-height:1.5;min-height:3em;
    display:flex;align-items:flex-end;justify-content:center}
  .chip .v{font-size:20px}
  .hero-cta{grid-column:1/-1;order:5;margin-top:6px;flex-direction:column;align-items:stretch;gap:14px;text-align:center}
  .hero-cta .link{justify-content:center}
  .cta .lead-form{text-align:left}
  .case{grid-template-columns:1fr;gap:22px;padding:40px 0}
  /* Title above the image on a phone: the reader gets the claim before the evidence, and
     the metric panel stops opening the row cold. display:contents dissolves .case-copy so
     its children become grid items of .case and can be ordered around the media block. */
  .case-copy{display:contents}
  .case-copy h3{order:1;margin-bottom:0}
  .case .case-img,.case:nth-child(odd) .case-img{order:2}
  .case-copy p{order:3;margin-bottom:0}
  .case-copy .tags{order:4;margin-bottom:0}
  .case-copy .link{order:5}
  /* the approved phone proportion, now expressed as the same ratio knob: 326x336 with
     150px rows, exactly what it measured before */
  .case-stats{--case-ar:.97;gap:12px;padding:12px}
  /* fluid, capped at the approved 390px values: at 320 the label wrapped, the icon was
     crushed to 28x16.7 on three of four cards and "$536K" ran 15px past the card edge */
  .cs-card{padding:clamp(12px,4.11vw,16px);border-radius:18px}
  .cs-card svg{width:clamp(23px,7.2vw,28px);height:clamp(23px,7.2vw,28px)}
  .cs-l{font-size:clamp(11px,3.21vw,12.5px)}
  .cs-v{font-size:clamp(23px,7.7vw,30px)}
  /* the shot keeps its own ratio on a phone: at .97 the platform would carry 146px of empty
     gradient above a 190px mockup, which the side-by-side desktop row does not suffer */
  .case-shot{--case-ar:1.25;padding:0 12px}
  .case-copy{max-width:none}
  /* The title is taken out of flow so its clearance from the floating header is a free
     parameter: the grid then centres in the FULL stage height (= exactly where the mark
     starts) instead of in whatever is left under the title. */
  #eng-stage>.wrap{padding-top:0;padding-bottom:0}
  #eng-stage .engine-title{position:absolute;left:0;right:0;top:96px;padding:0 20px;z-index:6}
  #eng-stage .dept-grid{margin-top:auto;margin-bottom:auto}
  .dept-grid{grid-template-columns:1fr;gap:10px}
  .dept{min-height:0;position:relative;border-radius:20px;background:rgba(255,255,255,.05);cursor:pointer;overflow:hidden;perspective:none}
  .dept-inner{min-height:0;position:relative;z-index:1;transform:none!important;transform-style:flat;animation:none!important}
  .dept-face{position:static;backface-visibility:visible;-webkit-backface-visibility:visible}
  .dept-front{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;background:transparent;text-align:left}
  /* One inherited token for the row height so the plus stays centred on it in every tier.
     100px is the largest that still clears the tightening threshold at 390x844 — 104 tipped
     it into eng-tight, which then shrank the rows to 86 and the title to 30px. */
  .dept{--row-h:100px}
  .dept-row{display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 46px 12px 14px;min-height:var(--row-h)}
  .dept:hover .dept-front{background:transparent}
  .shape{width:60px;height:60px;flex:0 0 60px;margin:0}
  .shape.h img{width:58px}
  .shape.v img{height:58px}
  .dept-front h3{font-size:16px;text-align:left;position:relative;flex:1}
  .dept-front h3 span{transition:opacity .3s}
  .dept-front h3 .tsub{display:block!important;position:absolute;left:0;right:0;top:0;opacity:0}
  .dept.open .tmain{opacity:0}
  .dept.open .tsub{opacity:1}
  .dept-front .hint,.dept-front .dept-toggle{display:none}   /* mobile uses .dept-plus */
  .dept-back{display:none}
  .dept-desc{display:grid!important;grid-template-rows:0fr;padding:0 16px;transition:grid-template-rows .5s cubic-bezier(.33,0,.15,1)}
  .dept-desc .dd-in{overflow:hidden;min-height:0}
  .dept-desc p{padding:2px 0 15px;opacity:0;transform:translate3d(0,-6px,0);transition:opacity .3s,transform .45s cubic-bezier(.33,0,.15,1)}
  .dept.open .dept-desc{grid-template-rows:1fr}
  .dept.open .dept-desc p{opacity:1;transform:none;transition:opacity .35s .08s,transform .45s cubic-bezier(.33,0,.15,1)}
  .dept-desc p{font-size:12.5px;line-height:1.6;color:#FFFFFF;font-weight:400}
  .dept-plus{display:block!important;position:absolute;right:13px;top:calc((var(--row-h) - 27px) / 2);z-index:2;width:27px;height:27px;border-radius:50%;
    background:rgba(0,160,255,.13);border:1px solid rgba(0,160,255,.4);box-shadow:0 0 10px rgba(0,246,255,.2);transition:transform .3s}
  /* The pulse used to animate the button's own box-shadow, which is a main-thread repaint of
     the sticky stage on every frame, four buttons at once, all through the philosophy scroll
     (measured 2026-09-27). Now the ring is a pseudo-element that only scales and fades, which
     the compositor does alone; the plus itself is drawn by the other pseudo with two gradients. */
  .dept-plus::before{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 3px rgba(0,160,255,.35);opacity:0;
    animation:plusglow 2.4s ease-in-out infinite;will-change:transform,opacity}
  .dept-plus::after{content:"";position:absolute;inset:0;
    background:linear-gradient(#8FD8FF,#8FD8FF) center/11px 1.6px no-repeat,linear-gradient(#8FD8FF,#8FD8FF) center/1.6px 11px no-repeat}
  .dept.open .dept-plus{transform:rotate(45deg)}
  @keyframes plusglow{0%{transform:scale(1);opacity:.9}55%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
  .dept.open{background-size:cover;background-position:center}
  .dept:nth-child(1).open{background-image:linear-gradient(rgba(1,9,46,.42),rgba(1,9,46,.42)),url('../img/gradients/gradient-deep-blue.webp')}
  .dept:nth-child(2).open{background-image:linear-gradient(rgba(1,9,46,.42),rgba(1,9,46,.42)),url('../img/gradients/gradient-signal.webp')}
  .dept:nth-child(3).open{background-image:linear-gradient(rgba(1,9,46,.42),rgba(1,9,46,.42)),url('../img/gradients/gradient-velocity.webp')}
  .dept:nth-child(4).open{background-image:linear-gradient(rgba(1,9,46,.42),rgba(1,9,46,.42)),url('../img/gradients/gradient-intelligence.webp')}

  .lead-form{grid-template-columns:1fr;padding:20px}
  .lead-form input:nth-child(5),.lead-form .btn,.budget{grid-column:span 1}
  .budget-opts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}   /* three equal brackets on one row on a phone */
  /* drop "Average" and tighten the switch so the label and the pills still share one
     row at 390px: 166px of room for a 152px label. */
  /* On a phone the label and the switch stop competing for one row: shrinking the type
     to squeeze them together bought 8px and cost a 24px tap target. Stacked instead, the
     label reads at full size and each currency keeps a 46px target. */
  .budget-top{flex-direction:column;align-items:flex-start;gap:10px}
  .budget-lb{font-size:13px}
  .budget-lb i{font-size:.92em}
  .cur-switch button{width:46px;height:32px;font-size:13px}
  .bo-v{min-height:50px;font-size:12.5px;padding:10px 4px;letter-spacing:-.015em}
  .modal-body{padding:26px 22px 28px}
  .philo-head{margin-bottom:52px}
  /* 19s ran at 1.47 logos/sec — 2.5x desktop's reading pace and genuinely hard to track
     on a 390px screen. 30s lands at ~0.93/sec: still livelier than desktop, but calm. */
  /* 30s measured 0.93 logos/sec against desktop's 0.58; 40s landed at 0.70 and still read as
     a race on the phone (Ezra, 2026-09-14) — 84s with the bigger 54px logos is ~58px/s, a third
     slower on screen and half the logos per second */
  .marquee{gap:28px;animation-duration:84s}.marquee img{height:54px}
  .lrow-track{gap:26px}.lrow img{height:58px}
  .platforms{margin-top:64px}
  .platforms-row{gap:40px}.platforms-row img{height:34px}
  .philosophy{padding:80px 0 72px}
  /* At a ~326px measure the authored mid-sentence breaks strand single words, so they are
     suppressed here — the space before each one in the markup is what keeps "margin.It's"
     from happening. The break before the gradient phrase is deliberately KEPT, and .hl is
     nowrap so the payoff never splits across two lines and cuts the gradient in half. */
  .fill-p{font-size:clamp(18px,5.7vw,22px);line-height:1.4;letter-spacing:-.006em;
    max-width:none;margin-inline:0;margin-bottom:30px}
  .fill .br-soft{display:none}
  .fill-p .hl{white-space:nowrap}   /* leads only: their phrases are three words; body phrases are sentences and must wrap */
  .departments{padding:36px 0 60px}
  /* top: this section is only ever entered through the engine reveal, so its top padding is
     nothing but the gap between the receding cards and the title — 84 read as dead space on a
     phone. 44 sits in the range the other mobile sections use (testimonials 40, cases 90).
     bottom: room under the logo rows so the dock pill is not cramped. */
  .scaled{padding:92px 0 48px}   /* the title clears the fixed header when the ride lands the section at the top */
  .testimonials{padding:40px 0 90px}
  .t-card{padding:30px}
  .cases{padding:90px 0}
  /* the button wrapped to two lines inside 40px side padding; tighten the panel and let
     the label hold one line */
  .case-coming{padding:44px 20px}
  .case-coming .btn{white-space:nowrap;font-size:15px;padding:14px 26px}
  .stats-panel{margin-top:44px;padding:30px 18px 26px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:24px 12px}
  .stat .sv{font-size:34px}
  .stat .sl{font-size:10px;letter-spacing:.08em}
  .stat-live{margin-top:26px;padding-top:24px}
  .stat-live .sv{font-size:42px}
  .stat-live .sl{font-size:10px;letter-spacing:.08em}
  .sc-partners{margin-top:52px;margin-bottom:52px}
  .faq{padding:90px 0}
  .t-carousel .t-card{flex:0 0 88%}
  /* anchored to the left and 112px short of the right edge, so the site's accessibility widget
     (bottom-right, both languages) never sits on it (Ezra, 2026-09-27) */
  #dock-cta{left:14px;transform:translateY(150%);width:calc(100% - 112px);justify-content:space-between;padding:7px 7px 7px 14px;gap:8px}
  #dock-cta.show{transform:none}
  [dir=rtl] #dock-cta{left:14px;right:auto}
  #dock-cta .txt{font-size:12.5px}
  #dock-cta .btn{font-size:13px;padding:9px 18px}
  .faq-q{font-size:16px;padding:20px 22px}
  .faq-a p{padding:0 22px 22px}
  .cta{padding:100px 0}
  .f-cols{grid-template-columns:1fr 1fr;gap:34px 24px}
  .f-brand{grid-column:1/-1;max-width:none}
  /* phone footer: brand and Talk to us centred; only the two link columns, Navigate and
     Solutions, sit flush left (Ezra, 2026-09-15) */
  .f-brand .socials{justify-content:center}
  .f-brand{text-align:center}
  .f-col{align-items:flex-start}
  .f-col a{text-align:left}
  footer .sig{height:40px}
  /* Talk to us: centred label, the number on its own line, the two actions side by side under it */
  .f-col-contact{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px 22px}
  .f-col-contact .eyebrow{flex:0 0 100%;text-align:center;margin-bottom:0}
  .f-col-contact a{text-align:center}
  /* the number is the primary line; the two actions sit side by side under it */
  .f-col-contact a:first-of-type{flex:0 0 100%}
  /* "Stop Compromising." has to hold one line */
  .cta h2 span{display:block}
  .cta h2{font-size:clamp(27px,8.1vw,34px)}
  footer .base{flex-direction:column;gap:20px;text-align:center}
  footer .sig{height:44px}footer .f-brand .sig span{font-size:32px}
}
/* The single-column layout runs all the way up to 720px, but .97 was chosen for a 326px
   panel. At 656px it produced 310x320 cards holding 110px of content, so the wide end of
   the phone range takes the desktop ratio and the three media boxes agree there too. */
@media(min-width:521px) and (max-width:720px){
  .case-stats{--case-ar:1.334}
  .case-shot{--case-ar:1.334}
}
/* The case row gets its own breakpoint. Two columns need about 900px: at 721 the media
   column was still only 326px, so the cards came out 142x101, the label wrapped and the
   icon was squeezed. Stacked, the row has the full width to work with. */
@media(min-width:721px) and (max-width:900px){
  .case,.case:nth-child(odd){grid-template-columns:1fr;gap:22px;padding:40px 0}
  /* stacked here too, so the title leads the row exactly as it does on a phone */
  .case-copy{display:contents}
  .case-copy h3{order:1;margin-bottom:0}
  .case .case-img,.case:nth-child(odd) .case-img{order:2}
  .case-copy p{order:3;margin-bottom:0}
  .case-copy .tags{order:4;margin-bottom:0}
  .case-copy .link{order:5}
  .case-stats{gap:12px;padding:12px}
  .cs-card{padding:16px;border-radius:18px}
  .cs-card svg{width:28px;height:28px}
  .cs-l{font-size:12.5px}
  .cs-v{font-size:30px}
}
/* Full-bleed media is right on a phone, but a 836px-wide 2x2 of metrics is mostly empty
   ground — cap it once the row is stacked and the viewport is not a phone. */
@media(min-width:521px) and (max-width:900px){
  /* width:100% + justify-self, not margin-inline:auto — auto inline margins on a grid item
     override stretch and force shrink-to-fit, which collapsed the box to its 376px
     max-content width instead of the 520px cap */
  .case-img{width:100%;max-width:520px;justify-self:center}
}

/* When the tallest open department would not fit centred above the dock, the engine sets
   body.eng-tight and we reclaim the space from the title clearance, the row height and the
   description leading. Driven by measurement rather than a height breakpoint, because the
   threshold lands at ~844px — right between common phones. */
@media(max-width:720px){
  body.eng-tight #eng-stage .engine-title{top:92px;font-size:clamp(22px,7.7vw,30px)}
  /* sized in vh so one tier covers everything from a 780-tall Android to a 667 iPhone SE;
     CSS vh is the large viewport on iOS, so these do not move when the toolbar collapses */
  body.eng-tight .dept-grid{gap:clamp(6px,1.1vh,8px)}
  /* 11.5vh gave 77px at 667, where the open stack then overran the dock by 2px; 10.4vh
     lands at 69 there and still reaches the 86px cap on a taller phone */
  body.eng-tight .dept{--row-h:clamp(56px,10.4vh,86px)}
  body.eng-tight .dept-row{padding:8px 42px 8px 12px}
  body.eng-tight .shape{width:clamp(42px,7vh,50px);height:clamp(42px,7vh,50px);flex:0 0 clamp(42px,7vh,50px)}
  body.eng-tight .shape.h img{width:clamp(40px,6.7vh,48px)}
  body.eng-tight .shape.v img{height:clamp(40px,6.7vh,48px)}
  body.eng-tight .dept-front h3{font-size:clamp(13px,2vh,14px)}
  body.eng-tight .dept-desc{padding:0 13px}
  body.eng-tight .dept-desc p{font-size:clamp(10.5px,1.6vh,11.5px);line-height:1.45;
    padding:2px 0 clamp(7px,1.4vh,11px)}
  body.eng-tight .dept-plus{width:24px;height:24px;top:calc((var(--row-h) - 24px) / 2)}
}

/* ---- One axis per section (Ezra, 2026-09-14). The copy column is 33 lead-ems wide and
   centred; eyebrow, title and paragraphs all start on its left edge. Proximity: 14 eyebrow→title,
   40 title→copy, 28 between paragraphs, 96 before the next band. The first paragraph is the
   thesis (lead, word-fill); the second is the explanation (body 18) — and it fills too:
   every INNO paragraph wears the grey→white reveal (Ezra, 2026-09-14). ---- */
:root{--lead:clamp(21px,1.85vw,26px);--col:calc(33 * var(--lead))}
.axis{max-width:var(--col);margin-inline:auto;text-align:left}
.axis .eyebrow{display:block;margin-bottom:14px}
.axis h2,.axis .t-section{margin:0;text-align:left}
.p-body{font-size:clamp(18px,1.39vw,20px);line-height:1.6;font-weight:400;max-width:var(--col);margin:28px auto 0;text-align:left;
  /* 20px on a 1440 screen runs ~75 characters across the 858px column, so the body fills the same
     width as the lead above it instead of stopping short and leaving the right of the column empty
     (Ezra, 2026-09-14). The cap is measured against the block's REAL width — min(column, 100%) —
     because on a phone the column is wider than the screen and a cap taken from --col alone ate
     54px of the right edge on every line. */
  padding-right:max(0px,calc(min(var(--col),100%) - 75ch))}
.dark .p-body,.scaled .p-body{color:rgba(255,255,255,.86);--floor:.42}   /* .42 x .86 = the lead's .36 resting white */
.philo-head{margin-bottom:40px;padding-top:0}
.philosophy .copy .fill-p{margin-bottom:0}.philosophy .copy .fill-p+.p-body{margin-top:28px}
.philosophy .platforms{margin-top:96px}
.scaled h2,.scaled h2.axis{margin:0;text-align:left;max-width:var(--col);margin-inline:auto}
.sc-lead{margin-top:40px}
.stats-panel{margin-top:56px}
.sc-partners{margin-top:64px;margin-bottom:40px}
.cases-head{margin-bottom:72px}
.cases-head .p-body{color:#3A4166;margin-top:24px;--floor:.62}   /* ink at 62% on the paper still clears 3:1 while it waits */
.faq h2{max-width:820px;margin:0 auto 40px;text-align:left}
/* =====================================================================================
   TYPE SYSTEM PROTOTYPE — Owners Narrow / Archivo / JetBrains Mono (2026-09-14)
   Everything type-related that differs from the Poppins build lives in this block.
   Headings: Owners Narrow Bold (700), uppercase, tracking 0 and line-height .86–.88 — set
   tight, the way the reference (tinuiti.com) sets the same face — at the approved sizes of the
   Poppins build: the weight and the setting changed, the scale did not.
   Body: Archivo 400, UI/labels 500–600, line-height 1.55 (large x-height).
   Numbers: JetBrains Mono 700, tabular, slightly tight; metric labels Mono 500 caps, wide.
   ===================================================================================== */
body{font-family:var(--font);font-weight:400}
h1,h2,h3,h4,.ticker-track{font-family:var(--font-h);font-weight:700;letter-spacing:0;line-height:.88}   /* Owners Narrow Bold (700) — Ezra's pick after seeing 900 and 800 (2026-09-14); set tight like the reference */
.t-section{font-size:clamp(36px,4.2vw,56px);letter-spacing:0;line-height:.9}
.hero:not(.hero-v):not(.hero-x) h1{font-weight:800;font-size:clamp(48px,6.6vw,96px);letter-spacing:-.005em;line-height:.86}   /* the one heading at ExtraBold (Ezra, 2026-09-14) */
.engine-title{font-size:clamp(36px,4.2vw,56px);letter-spacing:0}   /* H2, like every section title */
.cta h2{font-size:clamp(48px,6.6vw,96px);letter-spacing:-.005em;line-height:.86}   /* Display, like the hero: the page opens and closes at the same size */
.cta h2 span{display:block}   /* the narrow face fits "DEMAND" on the first line and orphans "BOTH." — keep the two sentences on their own lines */
.case h3{font-size:clamp(24px,2.5vw,32px);line-height:.95}
.dept-front h3{font-size:22px;line-height:1;letter-spacing:.01em}
.dept-back h4{font-size:16px;letter-spacing:.01em}
.ticker-track{font-size:clamp(28px,3.6vw,48px);letter-spacing:0}
/* the hero subtitle and every paragraph: Archivo breathes at 1.55 */
p,.fill-p,.t-card p,.dept-back p,.faq-a,.case p{font-family:var(--font)}
.fill-p{font-size:clamp(21px,1.85vw,26px);line-height:1.45;letter-spacing:-.005em;font-weight:500}   /* Lead: Archivo sits taller than Poppins, 26 lands where 32 did */
.hero .sub{font-family:var(--b,var(--font));font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.01em}   /* Subtitle, one step under Display */
.case p,.t-card p,.faq-a p,.faq-a,.cw-modal-meta .cw-line{font-size:16px;line-height:1.6;font-weight:400}   /* Body: one size */
.case p b,.t-card p b,.faq-a b{font-weight:600}
.dept-back p,.t-who .r,.case .tags span,.case span.tag,.ft-legal,.f-col span,.cw-line,footer p{font-size:13.5px;line-height:1.45}   /* Small */
.dept-back p{font-weight:400}
.t-card p{line-height:1.6}
/* UI: nav, buttons, tabs, form, chips — Archivo 500/600 */
.h-nav a,.btn,.cw-tab,.cw-tab-ghost,.lead-form input,.cur-switch button,.bo-v,button.link,.faq-q,.mnav a{font-family:var(--font)}
.btn,.btn.btn-lg,#dock-cta .btn,.lead-form .btn,.hero .btn,.header .btn,.link,button.link,.hero .link{font-weight:600;letter-spacing:.005em;font-size:15px}   /* UI: one size */
.hero .kicker{font-size:16px}
footer p,footer .f-brand p{font-size:16px;line-height:1.55}footer a,footer .f-col a{font-size:15px;font-weight:500}footer span:not(.eyebrow){font-size:13.5px}
.h-nav a{font-weight:500;font-size:15px}
#dock-cta .txt{font-size:15px}
.cw-tab,.cw-tab-ghost{font-size:15px}
.faq-q{font-size:17px;font-weight:600}
.lead-form input{font-size:15px}
.cw-client{font-weight:600}
.hero .kicker b{font-weight:600}
/* numbers: the hero chips, the Powered by INNO stats, the case metrics, the budget brackets */
.chip .v,.stat .sv,.stat-live .sv,.cs-v,.cw-count{font-family:var(--font-n);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.chip .v{font-size:24px}                                        /* M */
.stat .sv,.cs-v{font-size:clamp(34px,3vw,44px);letter-spacing:-.03em}   /* L */
.stat-live .sv{font-size:clamp(48px,5.3vw,76px);letter-spacing:-.04em}  /* XL: the live counter */
.bo-v{font-family:var(--font);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}   /* the brackets are labels with words, and the mono has no ₪ */
/* metric labels and eyebrows: Mono 500, small caps, wide — the instrument-panel voice */
.chip .l,.stat .sl,.stat-live .sl,.cs-l,.eyebrow,.scroll-cue,.cw-badge,.dept-front .hint,.budget-lb{font-family:var(--font-n);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:12px}   /* Label: one size, everywhere */
.chip .l{font-size:12px}
.cs-l{font-size:12px;letter-spacing:.12em}
/* mono in the popup counter and the testimonial roles stays proportional — not data */
.t-who .r{font-family:var(--font)}
@media(max-width:720px){
  #eng-stage .engine-title{font-size:clamp(22px,7.6vw,30px)}
  .cta h2{font-size:clamp(27px,8.1vw,34px)}   /* the phone size from the approved build; the desktop rule above would otherwise win */
  .dept-front h3{font-size:16px}
  .fill-p{font-size:clamp(18px,5vw,21px);line-height:1.42}
  .hero .sub{font-size:clamp(22px,6.2vw,26px)}
  .chip .l,.stat .sl,.stat-live .sl,.cs-l,.eyebrow,.scroll-cue,.cw-badge,.dept-front .hint,.budget-lb{font-size:11px;letter-spacing:.1em}
  .chip .v{font-size:22px}
  .stat .sv,.cs-v{font-size:clamp(30px,8.5vw,36px)}
  .stat-live .sv{font-size:clamp(38px,11vw,46px)}
  .btn,#dock-cta .btn,.lead-form .btn,.hero .btn{font-size:14px}
  #dock-cta .txt{font-size:13px}
  .cw-tab,.cw-tab-ghost{font-size:14px}
  .bo-v{font-size:12.5px}
}
/* ============ TEAM — the humans behind the numbers (approved 2026-09-15) ============
   Two columns like the hero: copy on the left axis, a collage on the right. The collage is
   flat — eight faces of equal weight, no logo — placed like the reference: an offset patchwork of
   photo and gradient tiles, a soft lilac disc behind, and one continuous "blueprint" scribble
   (straight runs, quarter-circle corners, one loop — the geometry of the pattern tiles) that
   draws itself as the section arrives. Photos are luminosity-blended onto brand gradients so
   every face carries the palette, the way the reference's faces carry its green and purple. */
.team{padding:120px 0 128px;position:relative;overflow:hidden}
.team .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(40px,5.5vw,88px);align-items:center;position:relative;z-index:1}
.team-copy .eyebrow{display:block;margin-bottom:14px}
.team-copy h2{margin:0;text-align:left}
.team-copy .p-body{margin:28px 0 0;max-width:none;padding-right:0}
@media(min-width:1024px){.team-copy .hl{white-space:nowrap}}   /* the closing phrase holds one line on desktop instead of leaving "We" behind */
/* the collage box: everything inside is placed in % of a 100 x 105 field */
.team-copy,.team-collage{min-width:0}
.team-collage{position:relative;aspect-ratio:100/105;width:100%;max-width:min(600px,100%);margin-inline:auto}
.team-collage>*{position:absolute}
.tt{left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);border-radius:16px;overflow:hidden;
  background:var(--tg,linear-gradient(135deg,#0232FF,#00A0FF));isolation:isolate;z-index:3}
.tt img{position:absolute;left:-5%;bottom:-3%;width:110%;height:106%;object-fit:cover;object-position:center top;
  filter:grayscale(1) contrast(1.06) brightness(.96);mix-blend-mode:luminosity;transition:transform .6s cubic-bezier(.25,.1,.25,1)}
.tt:hover img{transform:scale(1.04)}
/* gradient blocks carry a fine halftone, the reference's grain in our language */
.tg{left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);border-radius:16px;z-index:2;
  background:radial-gradient(circle,rgba(255,255,255,.22) .8px,transparent 1.4px) 0 0/7px 7px,var(--tg)}
.blob{left:24%;top:16%;width:78%;height:78%;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 50% 50%,rgba(222,157,255,.5),rgba(2,50,255,.3) 46%,rgba(1,9,46,0) 72%)}
/* the scribble lives on two layers: the whole line runs BEHIND the tiles (it dives under a photo
   and reappears in the next gutter, like the reference), and two segments are repeated IN FRONT
   with a navy halo — the loop over Philip's shoulder and the descent past Rotem — so it weaves */
.scribble{inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.scribble.back{z-index:1}.scribble.front{z-index:4}
.scribble path{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* widths are viewBox units (1 = 1% of the collage), so the line keeps its weight at every size */
.scribble .under{stroke:#01092E;stroke-width:3.8;opacity:.92}
.scribble .over{stroke:url(#sg);stroke-width:2}
.scribble.back .over{filter:drop-shadow(0 0 4px rgba(0,246,255,.35))}
/* the line draws itself, then the tiles settle — transform/opacity on tiles, dash on the line */
.team-collage .tt,.team-collage .tg{opacity:0;transform:translateY(16px) scale(.97);transition:opacity .7s cubic-bezier(.25,.1,.25,1) calc(var(--d,0)*60ms),transform .7s cubic-bezier(.25,.1,.25,1) calc(var(--d,0)*60ms)}
.team-collage.in .tt,.team-collage.in .tg{opacity:1;transform:none}
.scribble.back path{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.9s cubic-bezier(.4,0,.2,1) calc(.35s + var(--wait,0s))}
.team-collage.in .scribble.back path{stroke-dashoffset:0}
.scribble.front path{opacity:0;transition:opacity .35s ease 2s}
.team-collage.in .scribble.front path{opacity:1}
@media(prefers-reduced-motion:reduce){.scribble.back path{stroke-dashoffset:0;transition:none}.scribble.front path{opacity:1;transition:none}.team-collage .tt,.team-collage .tg{opacity:1;transform:none;transition:none}}
@media(max-width:1023px){.team .wrap{grid-template-columns:minmax(0,1fr);gap:56px}.team-collage{max-width:min(560px,100%)}}
@media(max-width:720px){.team{padding:88px 0 96px}.tt,.tg{border-radius:11px}}


/* =====================================================================================
   GROWTH ENGINE — SOLUTIONS ROLLER (approved 2026-09-15)
   Each department carries its offering as one slow line of chips under the title: the verb
   (We manage / develop / create / produce) leads a masked viewport whose track is duplicated
   once and shifted by exactly one measured period (see the engine's measureRollers), so the
   loop never jumps. Fades on both ends, pause on hover, static + finger-scrollable when the
   visitor prefers reduced motion. On phones the roller rides into the open panel, before the
   paragraph, and the rows give up 10px so 390x844 stays in the normal tier.
   ===================================================================================== */
.dept-sol{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;min-width:0}
.ds-verb{flex:none;font:500 9.5px/1 var(--font-n);letter-spacing:.12em;text-transform:uppercase;color:#7FC4FF}
.ds-tags{list-style:none;margin:0;padding:0;flex:1;min-width:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 86%,transparent)}
.ds-track{display:flex;gap:6px;width:max-content;padding:1px 0;will-change:transform}
.ds-track.run{animation:dsroll var(--dur,30s) linear infinite}
@keyframes dsroll{to{transform:translate3d(var(--shift,-50%),0,0)}}
.dept-sol:hover .ds-track{animation-play-state:paused}
.ds-tags li{font:500 10.5px/1 var(--font);color:#D6DDF5;padding:6px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);white-space:nowrap;letter-spacing:.005em}
@media(prefers-reduced-motion:reduce){.ds-track{animation:none!important}.ds-tags{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}
/* desktop: every title takes two lines by design (a desktop-only break), so the four rollers and
   chevrons share one height; the rollers start a quarter-turn apart so they never move in lockstep */
.br-d{display:none}
@media(min-width:721px){
  .br-d{display:inline}
  .dept-desc .dept-sol{display:none}
  .shape{height:136px;width:136px;margin-bottom:26px}
  .shape.h img{width:134px}.shape.v img{height:134px}
  .dept-front h3{min-height:2.4em}
  .dept-front .dept-sol{margin-top:16px}
  .dept-front .dept-toggle{margin-top:14px}
  .dept:nth-child(2) .ds-track.run{animation-delay:calc(var(--dur,30s) * -.25)}
  .dept:nth-child(3) .ds-track.run{animation-delay:calc(var(--dur,30s) * -.5)}
  .dept:nth-child(4) .ds-track.run{animation-delay:calc(var(--dur,30s) * -.75)}
}
@media(max-width:720px){
  .dept{--row-h:90px}
  .dept-row .dept-sol{display:none}
  .dept-desc .dept-sol{padding:0 0 10px;opacity:0;transform:translate3d(0,-6px,0);transition:opacity .3s,transform .45s cubic-bezier(.33,0,.15,1)}
  .dept.open .dept-desc .dept-sol{opacity:1;transform:none;transition:opacity .35s .08s,transform .45s cubic-bezier(.33,0,.15,1)}
  .dept-desc p{padding-top:0}
  body.eng-tight .dept-desc .dept-sol{padding-bottom:7px;gap:8px}
  body.eng-tight .ds-tags li{font-size:10px;padding:5px 8px}
}

/* ============================================================
   The reticle. A precision point plus a ring that trails it,
   with four ticks for the four departments. The whole thing
   re-colours itself from whatever it is standing on, so it
   survives the dark/light section boundaries without a flash.
   ============================================================ */
:root{
  --ic-dot:var(--blue); --ic-ring:rgba(1,9,46,.30); --ic-tick:rgba(1,9,46,.42);
  --ic-size:34px; --ic-arrow:#01092E;
}
html.ic-on,html.ic-on *{cursor:none}
html.ic-on input,html.ic-on textarea,html.ic-on select{cursor:auto}
.ic-dot,.ic-ring{position:fixed;top:0;left:0;pointer-events:none;border-radius:50%;
  will-change:transform;opacity:0;transition:opacity .25s}
html.ic-live .ic-dot,html.ic-live .ic-ring{opacity:1}
.ic-dot{z-index:100001;width:5px;height:5px;background:var(--ic-dot);
  transform:translate3d(var(--dx,-100px),var(--dy,-100px),0) translate(-50%,-50%);
  transition:opacity .25s,background .3s ease,transform .18s cubic-bezier(.34,1.56,.64,1)}
.ic-ring{z-index:100000;width:var(--ic-size);height:var(--ic-size);
  border:1.5px solid var(--ic-ring);
  transform:translate3d(var(--rx,-100px),var(--ry,-100px),0) translate(-50%,-50%) rotate(var(--rot,0deg)) scale(var(--sc,1));
  transition:opacity .25s,width .34s cubic-bezier(.34,1.56,.64,1),height .34s cubic-bezier(.34,1.56,.64,1),
             border-color .3s ease,background .3s ease,transform .34s cubic-bezier(.34,1.56,.64,1)}
/* four ticks, one per department, sitting just outside the ring */
.ic-ring::before{content:'';position:absolute;inset:-6px;opacity:1;transition:opacity .25s ease;
  background:
    linear-gradient(var(--ic-tick),var(--ic-tick)) 50% 0/1.5px 4px no-repeat,
    linear-gradient(var(--ic-tick),var(--ic-tick)) 50% 100%/1.5px 4px no-repeat,
    linear-gradient(var(--ic-tick),var(--ic-tick)) 0 50%/4px 1.5px no-repeat,
    linear-gradient(var(--ic-tick),var(--ic-tick)) 100% 50%/4px 1.5px no-repeat}
/* the arrow that appears once the ring has closed on something clickable */
.ic-ring::after{content:'';position:absolute;inset:0;opacity:0;transform:scale(.4);
  transition:opacity .2s ease .06s,transform .28s cubic-bezier(.34,1.56,.64,1) .06s;
  background:center/18px 18px no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301092E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M8.5 7H17v8.5'/></svg>")}

/* on a dark section the point takes the cyan end of the gradient, which is
   the only one of our blues that holds up against the navy */
.ic-dot.on-dark{--ic-dot:var(--cyan)}
.ic-ring.on-dark{--ic-ring:rgba(255,255,255,.34);--ic-tick:rgba(255,255,255,.48)}

/* closing on something clickable: the loop shuts and rotates onto its ticks. The fill is
   the thinnest glass (Ezra's pick, 2026-09-20): on light the blur, not the tint, is what
   reads as glass, so it is kept low; on navy a tint can only darken, so the lens lifts
   its backdrop a little instead. */
.ic-ring.is-hot{width:62px;height:62px;--rot:45deg;
  background:linear-gradient(100deg,rgba(2,50,255,.07),rgba(0,207,255,.07));
  backdrop-filter:blur(6px) saturate(1.3);-webkit-backdrop-filter:blur(6px) saturate(1.3);
  border-color:rgba(1,9,46,.10)}
.ic-ring.on-dark.is-hot{
  background:linear-gradient(100deg,rgba(0,246,255,.05),rgba(150,200,255,.03));
  backdrop-filter:blur(5px) saturate(1.4) brightness(1.8);
  -webkit-backdrop-filter:blur(5px) saturate(1.4) brightness(1.8);
  border-color:rgba(255,255,255,.24)}
.ic-ring.on-dark.is-hot::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M8.5 7H17v8.5'/></svg>")}
/* on a control the glass goes fully clear, so the thing about to be pressed stays legible;
   the ring alone carries the state */
.ic-ring.is-hot.is-clear{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(1,9,46,.45)}
.ic-ring.on-dark.is-hot.is-clear{border-color:rgba(255,255,255,.55)}
/* a draggable rail shows the chevrons even between tiles */
.ic-ring.is-drag:not(.is-hot){width:62px;height:62px;--rot:45deg;border-color:rgba(1,9,46,.45)}
.ic-ring.on-dark.is-drag:not(.is-hot){border-color:rgba(255,255,255,.55)}
.ic-ring.is-drag:not(.is-hot)::before{opacity:0}
.ic-ring.is-drag:not(.is-hot)::after{opacity:1}
.ic-ring.is-hot::before{opacity:0}
.ic-ring.is-hot::after{opacity:1;transform:scale(1) rotate(-45deg)}
.ic-dot.is-hot{--sc:0;transform:translate3d(var(--dx,-100px),var(--dy,-100px),0) translate(-50%,-50%) scale(0)}
/* dragging the creative rail */
.ic-ring.is-drag::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301092E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6 3 12l6 6M15 6l6 6-6 6'/></svg>");transform:scale(1) rotate(-45deg)}
/* crossing a section edge: one short pulse, so the handover reads as designed */
@keyframes ic-cross{0%{--sc:1}38%{--sc:1.28}100%{--sc:1}}
.ic-ring.is-cross{animation:ic-cross .46s cubic-bezier(.34,1.56,.64,1)}
@property --sc{syntax:'<number>';inherits:false;initial-value:1}

@media(prefers-reduced-motion:reduce){
  .ic-dot,.ic-ring{transition:opacity .25s,background .3s,border-color .3s}
  .ic-ring.is-cross{animation:none}
}
@media(hover:none),(pointer:coarse){.ic-dot,.ic-ring{display:none}}




/* ================= JOURNAL — the three latest articles =================
   Sits between the team and the FAQ: authority before objections. White, so the
   run reads navy team, white journal, grey FAQ. */
.journal{background:#fff;padding:100px 0 110px}
.journal-head{margin-bottom:46px}
.journal-head .axis{margin-inline:0}
.j-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.j-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(1,9,46,.09);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.3,.1,.2,1),box-shadow .35s,border-color .35s}
@media(hover:hover){.j-card:hover{transform:translateY(-4px);box-shadow:0 26px 64px rgba(1,9,46,.10);border-color:rgba(1,9,46,.14)}}
.j-shot{aspect-ratio:16/10;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0A1F6B,#0232FF 55%,#00A0FF)}
.j-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.3,.1,.2,1)}
@media(hover:hover){.j-card:hover .j-shot img{transform:scale(1.04)}}
.j-shot .mark{position:absolute;right:16px;bottom:14px;width:36px;height:auto;opacity:.92;object-fit:contain;aspect-ratio:auto}
.j-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.j-kicker{font-family:var(--font-n);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--velocity)}
.j-card h3{font-family:var(--font);font-size:20px;line-height:1.28;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--ink)}
.j-card p{font-size:15px;line-height:1.55;color:var(--gray);margin:0}
.j-meta{font-family:var(--font-n);font-size:11.5px;letter-spacing:.06em;color:var(--gray);margin-top:auto;padding-top:6px}
.journal-more{display:flex;justify-content:center;margin-top:44px}
@media(max-width:1000px){.j-grid{grid-template-columns:repeat(2,1fr)}.j-card:nth-child(3){display:none}}
@media(max-width:640px){
  .journal{padding:76px 0 84px}
  .journal-head{margin-bottom:32px}
  .j-grid{grid-template-columns:1fr;gap:18px}
  .j-card:nth-child(3){display:flex}
}
@media(prefers-reduced-motion:reduce){.j-card,.j-shot img{transition:none}.j-card:hover{transform:none}.j-card:hover .j-shot img{transform:none}}

/* ---- Hebrew hero: the sketch belongs on the other side, and the headline holds one line ---- */
[dir=rtl] .hero-outline{right:auto;left:-6%;transform:scaleX(-1)}
[dir=rtl] .t-hero{white-space:nowrap}
@media(max-width:900px){[dir=rtl] .t-hero{white-space:normal}}

/* the team collage is one image now: the blob, the scribble, the tile grid and the eight
   cut-outs are baked into it. That also removes a whole class of RTL work — an image is
   never mirrored, so no face can ever come out reversed. */
.team-collage{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden}
.team-shot{width:100%;height:100%;object-fit:cover;display:block}

/* ================= HERO VARIANTS =================
   Two answers to one measured finding: in every reference hero that lands, the headline is
   the brightest object in the frame; in ours it was the darkest. Both put the claim on navy.
   Shown with ?hero=slab or ?hero=instrument; without the parameter nothing changes.
   ================================================= */
/* .hero carries its own display, which beats the UA rule for [hidden] — without this the
   original hero stays on screen and the variant simply appends below it */
section.hero[hidden]{display:none!important}
/* the variant carries the client rail inside itself, so the separate grey strip — the very
   white band the research faulted — is removed rather than left stacked under the header */
body.hv-on>.strip{display:none}
.hero-v{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-v .wrap{position:relative;z-index:2}
.hero-v .hv-eyebrow{display:block;font-family:var(--font-n);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}
.hero-v .hv-lede{font-size:clamp(17px,1.45vw,24px);line-height:1.5;color:rgba(255,255,255,.82);
  max-width:34ch;margin:26px 0 0;--floor:.42}
.hero-v .hv-cta{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-v .btn-lg{min-height:52px}
/* the rail lives INSIDE the hero on navy, so the first screen is never interrupted by a
   white band the way the separate grey strip interrupts it today */
.hero-v .hv-rail{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;gap:22px}
.hero-v .hv-rail-l{font-family:var(--font-n);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.42);white-space:nowrap}
.hero-v .hv-logos{flex:1;display:flex;align-items:center;gap:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
[dir=rtl] .hero-v .hv-logos{-webkit-mask-image:linear-gradient(270deg,#000 78%,transparent);mask-image:linear-gradient(270deg,#000 78%,transparent)}
.hero-v .hv-logos img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.46;flex:none}
/* a figure is a figure in both languages: the digits, the $ and the + keep their own order */
.hero-v .hv-n .v,.hero-v .hv-live .v{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .hero-v .hv-n .v,[dir=rtl] .hero-v .hv-live .v{text-align:right}
/* the sweep of the gradient follows the reading direction, like every other one on the page */
[dir=rtl] .hero-v .grad{background-image:linear-gradient(260deg,#00F6FF,#00A0FF 65%,#4D8DFF)}
[dir=rtl] .hero-v .grad-full{background-image:linear-gradient(260deg,#0232FF,#00A0FF 60%,#00F6FF)}
[dir=rtl] .hero-v .hv-lede{max-width:32ch}

/* ---- A · THE SLAB ----
   The type is sized from its own string against the measure, not from a clamp: each line
   fills ~96% of the column at every width, so there is no floor that can win and no cliff.
   The em-widths are the measured advance of each string in owners-narrow 800 at -.005em. */
.hero-slab{padding:112px 0 44px}
.hero-slab .wrap{--slab:min(calc(100vw - 48px),880px)}
.hv-slab{margin:0;font-family:var(--font-h);font-weight:800;line-height:.80;letter-spacing:-.005em;
  text-transform:uppercase;display:flex;flex-direction:column}
.hv-slab .sl1{font-size:calc(var(--slab) * .96 / 3.487)}   /* "DEMAND" = 3.487em */
.hv-slab .sl2{font-size:calc(var(--slab) * .96 / 2.433)}   /* "BOTH."  = 2.433em */
.hv-nums{margin-top:32px;display:flex;gap:44px}
.hv-n{display:flex;flex-direction:column;gap:4px}
.hv-n .v{font-family:var(--font-n);font-weight:700;font-size:clamp(28px,3vw,46px);line-height:1;
  color:#fff;letter-spacing:-.01em}
.hv-n .l{font-family:var(--font-n);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.52)}
@media(min-width:901px){
  .hero-slab{padding:150px 0 54px;min-height:100svh;display:flex;align-items:center}
  .hero-slab .wrap{width:100%}
  .hv-slab{margin-bottom:10px}
  /* the lede breaks after the claim, not in the middle of the answer to it */
  .hero-slab .hv-lede{max-width:46ch}
  .hv-foot{display:flex;align-items:center;gap:56px;flex-wrap:wrap;margin-top:34px}
  .hv-foot .hv-nums{margin-top:0}
  .hv-foot .hv-cta{margin-top:0}
}

/* ---- B · THE INSTRUMENT ---- */
/* .hero is a flex box, so B's rail would sit BESIDE the copy instead of under it */
.hero-inst{padding:96px 0 34px;display:flex;flex-direction:column;justify-content:center}
.hero-inst .wrap{display:grid;gap:28px}
.hv-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.hv-pill{font-family:var(--font-n);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.62);transition:background .45s,color .45s,border-color .45s}
.hv-pill.is-on{background:var(--cyan);border-color:var(--cyan);color:var(--navy);font-weight:700}
.hv-head{margin:0;font-family:var(--font-h);font-weight:800;line-height:.86;letter-spacing:-.01em;
  text-transform:uppercase;font-size:clamp(46px,15.6vw,96px);display:flex;flex-direction:column}
@media(min-width:901px){.hv-head{font-size:clamp(70px,6.2vw,96px)}}
.hv-live{margin-top:26px}
.hv-live .v{display:block;font-family:var(--font-n);font-weight:700;line-height:1;
  font-size:clamp(34px,8.6vw,62px);letter-spacing:-.02em;direction:ltr;unicode-bidi:isolate}
.hv-live .l{display:block;margin-top:6px;font-family:var(--font-n);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hv-rider{font-family:var(--font-n);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
/* the retention line rides beside the button on a laptop and under it on a phone — beside it
   the Hebrew string is short enough to sit there and the English one is not, and the two
   languages may not lay out differently */
@media(max-width:900px){.hero-inst .hv-cta{flex-direction:column;align-items:flex-start;gap:14px}}
/* the mark is a desktop object. On a phone it read as weight rather than as brand — Ezra's
   call — so it comes out and the claim takes the room it was holding */
.hv-mark{display:none}
@media(min-width:901px){.hv-mark{display:flex;justify-content:center}}
.hv-mark img{width:min(40vw,300px);height:auto;display:block}
/* B's rail sits outside .wrap so it can run wider than the copy — it still has to keep
   the page gutter, or on a phone the logos run into the bezel */
.hero-inst .hv-rail{width:min(1180px,calc(100% - 64px));margin-inline:auto}
@media(min-width:901px){
  .hero-inst{padding:130px 0 44px;min-height:100svh}
  .hero-inst .wrap{grid-template-columns:1.62fr 1fr;align-items:center;gap:60px}
  .hero-inst .hv-lede{max-width:40ch}
  .hv-mark img{width:min(30vw,400px)}
  .hero-inst .hv-rail{width:min(1180px,calc(100% - 96px));margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){.hv-pill{transition:none}}

/* ---- C · THE CANCEL ----
   One sentence, three nouns, and the third one struck out. The hero is a single object: a claim
   with one word cancelled by one stroke of cyan. No eyebrow, no lede, no mark, no chip, no
   ticker, no second link. Seventeen words in English, sixteen in Hebrew.
   The panel that produced this scored five concepts and refuted all of them; what survived three
   adversarial reads was the act, not the composition, so the composition here is theirs only
   where it was not faulted. */
.hero-cancel{padding:110px 0 40px}
.hero-cancel .wrap{--m:min(calc(100vw - 64px),920px)}
.hc-claim{margin:0;font-family:var(--font-h);font-weight:800;line-height:.82;letter-spacing:-.005em;
  text-transform:uppercase;display:flex;flex-direction:column}
.hc-claim>span{display:block}
/* the cancelled line is the smallest and dimmest thing in the claim on purpose: it is the
   instruction being deleted, not the argument being made */
.hc-kill{position:relative;display:inline-block;align-self:flex-start;
  color:rgba(255,255,255,.62);margin-top:.14em;transition:color .74s ease .62s}
/* the act takes effect: once the stroke has landed the word recedes another step */
.hero-cancel.is-struck .hc-kill{color:rgba(255,255,255,.46)}
.hc-kill s{text-decoration:none}
/* the stroke. One job, one colour, solid: it enters from the reading edge and dies just past the
   word, so it can never be mistaken for a section rule the way a full-bleed gradient line is. */
/* --ky is written in px by the script from the font's own metrics: the half-leading, the
   primary face's ascent and the measured ink band of this exact string. A percentage of the
   line box cannot find the middle of the letters, and Liebling's band is not Owners Narrow's. */
.hc-kill::after{content:'';position:absolute;inset-inline-start:-.14em;inset-inline-end:-.72em;
  top:var(--ky,52%);height:.085em;background:var(--cyan);border-radius:.05em;
  transform:scaleX(0);transform-origin:left;
  transition:transform .74s cubic-bezier(.22,.7,.3,1) .5s}
[dir=rtl] .hc-kill::after{transform-origin:right}
.hero-cancel.is-struck .hc-kill::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.hc-kill::after{transition:none;transform:scaleX(1)}}

.hero-cancel .hv-nums{margin-top:46px}
/* the rail sits BEFORE the ask: after it the logos are a divider, before it they are the reason
   to act. The platform names ride where the "trusted by" label used to, so the credential costs
   a line that was already there rather than a block of its own. */
.hero-cancel .hc-rail{flex-direction:column;align-items:flex-start;gap:13px;margin-top:44px}
.hc-plat{font-family:var(--font-n);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.44);white-space:nowrap}
.hero-cancel .hv-logos{width:100%;gap:30px;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
[dir=rtl] .hero-cancel .hv-logos{-webkit-mask-image:linear-gradient(270deg,#000 92%,transparent);mask-image:linear-gradient(270deg,#000 92%,transparent)}
.hero-cancel .hv-logos img{height:32px;opacity:.72}
.hero-cancel .hv-cta{margin-top:34px}
@media(min-width:901px){
  .hero-cancel{padding:146px 0 40px}
  .hero-cancel .hv-nums{margin-top:52px;gap:60px}
  .hero-cancel .hc-claim{max-width:100%}
  .hero-cancel .hc-rail{margin-top:44px;flex-direction:row;align-items:center;gap:26px}
  .hero-cancel .hv-logos{width:auto;flex:1}
  .hero-cancel .hv-cta{margin-top:34px}
}

/* ================= HEROES D · E · F =================
   Built on the second research pass (redesign/hero-research/RESEARCH.md), which overturned four
   of the first pass's rules. The three isolate one variable each:
     D  paper ground, the brand object CROPPED by the frame
     E  paper ground, the first screen drawn as a ruled statement of account
     F  navy done the way every dark hero that works does it: a graded field with a real axis,
        one lit object, and the proof at full opacity
   Shared across all three, because the research settled them:
     - one letter height for the whole claim, two weights, emphasis anchored to a word
     - the claim rags at ~0.88 of the measure; it is never optically justified
     - no gradient inside any letterform, in either language
     - every proof mark at 100% colour and 100% opacity
     - no Latin in the Hebrew display line
     - Hebrew labels are never letterspaced
   ===================================================== */
.hero-x{position:relative;overflow:hidden;--paper:#F7F6F3;--rule:rgba(1,9,46,.16)}
.hero-x .wrap{position:relative;z-index:2;width:100%}
.hero-x.paper{background:var(--paper);color:var(--ink)}
.hx-rub{display:block;font-family:var(--font-n);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.62;
  unicode-bidi:plaintext}
.hx-claim{margin:0;font-family:var(--font-h);text-transform:uppercase;line-height:.86;
  letter-spacing:-.005em;display:flex;flex-direction:column}
.hx-claim>span{display:block}
.hx-q{font-weight:600;opacity:.72}          /* the industry's sentence, quoted and reported */
.hx-a{font-weight:800}                       /* the refusal, and the only weight change on screen */
/* the standing paragraph sizes, the ones every other paragraph on the site uses */
.hx-read{font-family:var(--font);font-weight:500;max-width:46ch;--floor:.42;
  font-size:clamp(21px,1.85vw,26px);line-height:1.45;letter-spacing:-.005em}
@media(max-width:900px){.hx-read{font-size:clamp(18px,5vw,21px);line-height:1.42}}
.hx-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hx-cta .btn-lg{min-height:52px}
/* proof: nothing on the first screen carries an opacity below 1 */
.hx-proof{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hx-proof-l{font-family:var(--font-n);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);opacity:.55;white-space:nowrap}
.hx-badges{display:flex;align-items:center;gap:22px;flex-wrap:wrap;row-gap:12px;min-width:0}
.hx-badges img{height:26px;width:auto;display:block}
/* the partner files are white artwork drawn for a dark ground, so on paper they are inked
   rather than knocked back — full-colour originals would be better and are worth asking for */
.hero-x.paper .hx-badges img{filter:brightness(0);opacity:.78}
.hero-x.dark .hx-proof-l{color:#fff;opacity:.6}
.hero-x.dark .hx-badges img{filter:brightness(0) invert(1);opacity:.85}
/* Hebrew is never letterspaced: it has no capitals and no ascender skyline to hold a word
   together, so tracking breaks the word instead of opening it */
[dir=rtl] .hx-rub,[dir=rtl] .hx-proof-l,[dir=rtl] .hx-fl,[dir=rtl] .hx-cell-l{letter-spacing:0}
/* plaintext keeps the Latin rubric in its own order, but it also takes the alignment with
   it, so the line has to be sent back to the reading edge by hand */
[dir=rtl] .hx-rub{text-align:right}
/* the mono labels here are Latin in both languages and keep their tracking */
[dir=rtl] .hx-proof-l{letter-spacing:.16em}
.hx-claim .hx-lat{font-family:var(--font-h)}

/* ---- D · PAPER AND BLADE ---- */
.hero-paper{padding:120px 0 40px;min-height:calc(100dvh - 104px);display:flex;align-items:center}
.hero-paper .wrap>*+*{margin-top:26px}
.hero-paper .hx-claim{margin-top:18px}
.hx-art{position:absolute;inset:0;pointer-events:none;z-index:1}
/* the arc: a circle whose centre is off-canvas, so it enters one frame edge and leaves another
   and the crown is never seen. Drawn, not composed from a PNG — the department modules are flat
   colour swatches with no geometry in them. */
.hx-arc{position:absolute;border-radius:50%;
  background:radial-gradient(120% 120% at 18% 12%,#00DDFE 0%,#0A7BFF 38%,#0232FF 72%,#0A1F8C 100%)}
/* The window re-ranks between breakpoints rather than rescaling. On a phone it is a card in
   the reading column, above the ask, so the evidence is read before the button. On a laptop it
   is an aperture cut through the object, at the far end of the ask's own band. */
.hx-win{position:relative;overflow:hidden;background:var(--navy);color:#fff;
  border-radius:2px}
.hero-x.dark .hx-win{background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(2px)}
.hx-figs{width:100%;height:400%;display:flex;flex-direction:column;
  transition:transform .5s linear;will-change:transform}
.hx-fig{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.hx-fv{font-family:var(--font-n);font-weight:700;line-height:1;color:#fff;
  direction:ltr;unicode-bidi:isolate}
.hx-fl{font-family:var(--font-n);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;opacity:.66;text-align:center}
@media(prefers-reduced-motion:reduce){.hx-figs{transition:none}}
/* placement of the art. The circle's centre is off-canvas on both breakpoints, so the phone
   shows a smaller piece of a BIGGER arc rather than a scaled copy of the laptop one. */
.hx-win{width:100%;max-width:260px;height:132px}
.hx-fv{font-size:32px}
.hero-paper .hx-arc{width:300%;aspect-ratio:1;inset-inline-start:30%;top:82%}
/* on a phone the arc sweeps through the band between the ask and the client rail, so that
   band is composition rather than the place where the page ran out */
.hero-room .hx-glow,.hero-room .hx-rim{width:240%;aspect-ratio:1;inset-inline-start:20%;top:56%}
@media(min-width:901px){
  .hero-paper{padding:150px 0 48px}
  .hero-room{padding:132px 0 168px}
  .hero-paper .wrap>*,.hero-room .wrap>*{max-width:58%}
  .hero-paper .wrap>.hx-art,.hero-room .wrap>.hx-art{max-width:none}
  /* centre off-canvas below and to the trailing side: the arc enters the top edge and leaves
     the bottom, and the crown is never seen */
  .hero-paper .hx-arc{width:170%;inset-inline-start:58%;top:-30%}
  .hero-room .hx-glow,.hero-room .hx-rim{width:120%;inset-inline-start:56%;top:-24%}
  .hx-win{position:absolute;max-width:none;width:284px;height:284px;
    inset-inline-start:78%;top:34%;z-index:3}
  .hero-room .hx-win{inset-inline-start:70%;top:30%}
  .hx-fv{font-size:50px}
}

/* ---- E · THE STATEMENT ---- a ruled ledger, which is the document this buyer lives in ---- */
.hero-ledger{padding:104px 0 36px;min-height:calc(100dvh - 104px);display:flex;align-items:center}
.hx-grid{display:grid;border:1px solid var(--rule);grid-template-columns:1fr;
  background:var(--paper)}
.hx-cell{padding:22px 22px 24px;border-bottom:1px solid var(--rule);min-width:0}
.hx-cell:last-child{border-bottom:0}
.hx-cell-l{display:block;font-family:var(--font-n);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.5;margin-bottom:10px}
.hx-cell.is-ink{background:var(--navy);color:#fff;border-color:var(--navy)}
.hx-cell.is-ink .hx-cell-l{color:#fff;opacity:.6}
.hx-nums{display:grid;grid-template-columns:1fr 1fr}
.hx-nums .hx-cell{border-bottom:1px solid var(--rule);border-inline-end:1px solid var(--rule)}
.hx-nums .hx-cell:nth-child(2n){border-inline-end:0}
.hx-nv{font-family:var(--font-n);font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1;
  direction:ltr;unicode-bidi:isolate;display:block}
[dir=rtl] .hx-nv{text-align:right}
/* the ink cell inverts everything inside it, including the partner artwork */
.hx-cell.is-ink .hx-proof-l{color:#fff;opacity:.62}
.hero-x.paper .hx-cell.is-ink .hx-badges img{filter:brightness(0) invert(1);opacity:.9}
@media(min-width:901px){
  .hx-grid{grid-template-columns:1.62fr 1fr;grid-template-rows:auto auto auto}
  .hx-g-claim{grid-column:1;grid-row:1;border-inline-end:1px solid var(--rule)}
  .hx-g-read{grid-column:1;grid-row:2;border-inline-end:1px solid var(--rule)}
  .hx-g-nums{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:1fr 1fr;
    grid-auto-rows:1fr;border-bottom:1px solid var(--rule)}
  .hx-g-nums .hx-cell:nth-last-child(-n+2){border-bottom:0}
  .hx-g-act{grid-column:1 / -1;grid-row:3;border-bottom:0;display:flex;align-items:center;
    justify-content:space-between;gap:34px}
  .hx-cell{padding:30px 32px 34px}
}

/* ---- F · THE LIT ROOM ----
   Light, at Ezra's call. The composition is unchanged: a field with a real axis rather than a
   flat fill, one lit object whose rim is the sharpest edge on the screen, the claim in one flat
   ink, and the proof running at full colour. Only the values are inverted. The navy original is
   still on ?hero=roomdark. */
/* always exactly one screen, on every device, with no dependence on the viewport's height:
   svh is the stable unit, so the hero cannot resize when the browser chrome hides */
.hero-room{padding:100px 0 118px;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center}
.hero-room.paper{color:var(--ink);
  /* the ground carries an axis on paper too: the six-point test reads four different values.
     The wash is kept close to the arc and tinted toward cyan rather than violet, or the paper
     goes mauve and stops reading as paper. */
  background:
    radial-gradient(58% 52% at 88% 6%,rgba(0,190,255,.17) 0%,rgba(0,190,255,0) 72%),
    linear-gradient(172deg,#FCFBF8 0%,#F8F7F2 62%,#F4F3ED 100%)}
.hero-room.dark{color:#fff;
  background:
    radial-gradient(78% 62% at 76% 14%,#1B3AA0 0%,rgba(27,58,160,0) 62%),
    radial-gradient(64% 54% at 8% 96%,#0B1C63 0%,rgba(11,28,99,0) 60%),
    linear-gradient(168deg,#061043 0%,#01092E 62%,#01092E 100%)}
.hero-room .wrap>*+*{margin-top:26px}
.hero-room .hx-claim{margin-top:18px}
.hero-room.dark .hx-claim{color:#fff}
.hero-room.dark .hx-rub{color:#fff;opacity:.66}
.hero-room.dark .hx-read{color:rgba(255,255,255,.84)}
/* the lit object: on paper the wash is a tint and the rim carries the brand ramp; on navy the
   wash is the light source and the rim is cyan */
.hx-glow{position:absolute;border-radius:50%;filter:blur(2px)}
.hero-room.dark .hx-glow{
  background:radial-gradient(closest-side,rgba(0,246,255,.92) 0%,rgba(0,160,255,.55) 42%,rgba(2,50,255,.12) 72%,rgba(2,50,255,0) 100%)}
.hero-room.paper .hx-glow{
  background:radial-gradient(closest-side,rgba(0,207,255,.30) 0%,rgba(2,50,255,.16) 46%,rgba(2,50,255,.04) 74%,rgba(2,50,255,0) 100%)}
/* the rim is gone at Ezra's call; the wash alone carries the light */
.hx-rim{display:none}

/* The three metrics, and the glass exactly as it was built for the original hero: the same
   fill, the same 22px blur and 1.7 saturate, the same border, the same shadow and the same
   seven-second sweep. Only the placement is declared here — everything visual is inherited. */
.hx-foot{display:flex;flex-direction:column;gap:26px}
.hx-chips{position:relative;display:flex;gap:14px;flex-wrap:nowrap}
@media(min-width:901px){
  .hero-room .hx-foot{flex-direction:row;align-items:center;justify-content:space-between;gap:56px}
  .hero-room .hx-foot .hx-cta{margin-top:0;flex:none}
  .hero-room .hx-foot .hx-chips{flex:0 1 620px;margin-top:0}
  .hero-room .wrap>*{max-width:none}
}
.hero-room .hx-chips .chip{position:relative;inset:auto;flex:1 1 0;min-width:0;
  padding:13px 14px 15px;text-align:start}
.hero-room .hx-chips .chip .l{font-size:10px;letter-spacing:.05em;line-height:1.3}
.hero-room .hx-chips .chip .v{font-size:clamp(21px,2.2vw,28px);line-height:1}
[dir=rtl] .hero-room .chip .l{letter-spacing:0}
/* glass needs something behind it to refract. The original hero solves this on a phone with a
   soft neutral bed under the row, and the same bed is what makes the row read here. */
.hx-chips::before{content:"";position:absolute;left:-3%;right:-3%;top:-8px;bottom:-14px;z-index:0;
  pointer-events:none;border-radius:40px;
  background:radial-gradient(ellipse 64% 72% at 50% 52%,rgba(1,9,46,.075),rgba(1,9,46,.03) 56%,transparent 80%);
  filter:blur(18px)}
.hero-room.dark .hx-chips::before{
  background:radial-gradient(ellipse 62% 70% at 50% 52%,rgba(255,255,255,.10),rgba(255,255,255,.04) 56%,transparent 80%)}
.hero-room.dark .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);
  box-shadow:0 12px 36px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.hero-room.dark .chip .l{color:rgba(255,255,255,.7)}

/* the department tags from the instrument. Focus is carried by the same glass the metric cards
   are made of, not by a cyan fill: one material says "this is the live one" across the whole
   screen, and a second saturated colour on paper was the thing competing with the claim. */
.hero-x .hv-pills{margin-bottom:0}
.hero-x.paper .hv-pill{border-color:rgba(1,9,46,.16);color:rgba(1,9,46,.58);
  position:relative;overflow:hidden;transition:color .45s,border-color .45s,box-shadow .45s,background .45s}
.hero-x.paper .hv-pill.is-on{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.72);color:var(--ink);font-weight:700;
  box-shadow:0 12px 36px rgba(1,9,46,.12),inset 0 1px 0 rgba(255,255,255,.95)}
/* the same seven-second sweep the cards run, so the focus reads as the same material */
.hero-x.paper .hv-pill.is-on::after{content:"";position:absolute;top:-45%;bottom:-45%;left:0;
  width:46%;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.9) 50%,transparent 100%);
  transform:translate3d(-170%,0,0);
  animation:sheenSweep 7s cubic-bezier(.45,0,.2,1) infinite}
@media(prefers-reduced-motion:reduce){.hero-x.paper .hv-pill.is-on::after{display:none}}

/* the payoff phrase in the reading line: bold ink. The brand ramp on this light ground was
   being swallowed by the paper rather than lifting off it. */
.hero-room2 .hx-read .hl{font-weight:700;color:var(--ink);-webkit-text-fill-color:var(--ink)}
/* The reading line is not a fill reveal any more and its payoff is bold in both languages
   (Ezra, 2026-09-27: "לא צריכה להתמלא בגלילה, והסוף שלה צריך להיות בבולד"). */
/* The reveal paints gradient phrases TWICE and cross-fades: a grey base that fades out under a
   gradient copy that fades in. room2's payoff is not a gradient, it is solid ink — and the ink
   override left BOTH copies opaque at the same time. Two identical glyphs stacked with a
   sub-pixel offset thicken every stroke and blur the joins, which is why the phrase read as a
   different, heavier face rather than as the same font in bold (Ezra, 2026-09-25: "כאילו זה לא
   אותו פונט"). With no gradient to cross-fade to, the phrase needs no second copy at all: it
   reveals the way every other word on the line does, on opacity alone. */
.hero-room2 .hx-read .hl .w{color:var(--ink);-webkit-text-fill-color:var(--ink);
  opacity:clamp(var(--floor,.36),calc((var(--p,1) * (var(--n,1) + 6) - var(--i,0)) / 5),1)}
.hero-room2 .hx-read .hl .w::after,
[dir=rtl] .hero-room2 .hx-read .hl .w::after{content:none}

/* V2 · the mark, with the glass around it exactly as the original hero places it */
.hero-room2 .hx-stage{position:relative;z-index:2;display:grid;gap:26px;align-items:center}
/* the column's own rhythm: .wrap's rule cannot reach children two levels down */
.hero-room2 .hx-col>*+*{margin-top:26px}
.hero-room2 .hx-col .hx-claim{margin-top:18px}
/* the original hero pulls its art above the copy below 1080; here the claim leads and the
   mark follows it, which is the order the research asks for */
.hero-room2 .hero-art{position:relative;display:flex;justify-content:center;margin-inline:auto;
  width:min(64vw,268px);order:0}
.hero-room2 .hero-art .mark-wrap{width:100%;display:block}
/* the original hero deletes the mark below 720 and puts nothing in its place, which the
   research named as the single largest cause of a weak phone hero. V2 keeps it. */
.hero-room2 .hero-art .chip{position:absolute;flex:none;width:auto;padding:11px 14px 13px}
.hero-room2 .hero-art .chip1{top:2%;inset-inline-end:-6%;inset-inline-start:auto}
.hero-room2 .hero-art .chip2{bottom:14%;inset-inline-start:-8%;inset-inline-end:auto}
.hero-room2 .hero-art .chip3{bottom:-8%;inset-inline-end:8%;inset-inline-start:auto}
.hero-room2 .hero-art .chip .l{font-size:9.5px;letter-spacing:.05em;line-height:1.3}
.hero-room2 .hero-art .chip .v{font-size:19px;line-height:1}
/* Below 901 this hero becomes the original's own mobile composition: no mark, the three glass
   cards three-across with two-line labels on one baseline, and the ask stacked full width and
   centred. Everything visual is the original's; only the parts around it are new. */
@media(max-width:900px){
  /* the evidence is read before the ask: cards, then buttons */
  /* align-items:center comes from the two-column rule and shrink-wraps every block on a
     phone, which is what was holding the button to half the measure */
  .hero-room2 .hx-stage{display:flex;flex-direction:column;gap:24px;align-items:stretch}
  .hero-room2 .hx-col{display:contents}
  .hero-room2 .hx-col>*+*{margin-top:0}
  .hero-room2 .hx-col .hx-claim{margin-top:0}
  .hero-room2 .hx-rub{order:0}
  .hero-room2 .hv-pills{order:1}
  /* two rows, each as wide as the claim under them: the pills share the row instead of
     huddling at the start (Ezra, 2026-09-27) */
  .hero-room2 .hv-pill{flex:1 1 calc(50% - 4px);display:inline-flex;justify-content:center;text-align:center}
  .hero-room2 .hx-claim{order:2}
  .hero-room2 .hx-read{order:3}
  .hero-room2 .hero-art{order:4}
  .hero-room2 .hx-cta{order:5;margin-top:0}
  .hero-room2 .hero-art{width:100%;margin-inline:0;position:relative;
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .hero-room2 .hero-art .mark-wrap{display:none}
  .hero-room2 .hero-art .chip{position:relative;inset:auto;width:auto;z-index:1;
    padding:11px 9px 12px;text-align:center;animation:chipFloat 7s ease-in-out infinite}
  .hero-room2 .hero-art .chip2{animation-delay:.85s}
  .hero-room2 .hero-art .chip3{animation-delay:1.7s}
  .hero-room2 .hero-art .chip .l{font-size:8.5px;letter-spacing:.03em;line-height:1.5;
    min-height:3em;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
  .hero-room2 .hero-art .chip .v{font-size:20px}
  /* the original's own neutral bed, so the glass has something to refract on a plain page */
  .hero-room2 .hero-art::before{content:"";position:absolute;left:-3%;right:-3%;top:-8px;bottom:-12px;
    z-index:0;pointer-events:none;border-radius:40px;
    background:radial-gradient(ellipse 60% 66% at 50% 52%,rgba(1,9,46,.075),rgba(1,9,46,.032) 56%,transparent 79%);
    filter:blur(16px)}
  .hero-room2 .hx-cta{flex-direction:column;align-items:stretch;gap:14px;text-align:center}
  .hero-room2 .hx-cta .btn{width:100%}
  .hero-room2 .hx-cta .link{justify-content:center}
  /* every label is two lines on a phone, always: the row then reads as one object whatever
     the words are, and the three figures share a baseline without depending on which label
     happens to wrap. Each card carries its own break; the reserved height keeps the numbers
     level even if a label is ever shortened. */
  .hero-room .br-m,.hero-room2 .br-m{display:inline}
}
@media(min-width:901px){
  .hero-room2 .hx-stage{grid-template-columns:1.12fr .88fr;gap:56px}
  .hero-room2 .hero-art{width:min(34vw,420px)}
  .hero-room2 .hero-art .chip .l{font-size:10.5px}
  .hero-room2 .hero-art .chip .v{font-size:23px}
  .hero-room2 .wrap>*{max-width:none}
}

/* the clients, running. Same track mechanism as the strip below, so the roster can never differ */
.hx-clients{position:absolute;inset-inline:0;bottom:0;z-index:2;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hx-mq{gap:54px;padding:22px 0 26px}
.hx-mq img{height:58px;width:auto;opacity:1;filter:none}
.hero-room.dark .hx-mq img{filter:brightness(0) invert(1);opacity:.9}
@media(max-width:900px){.hx-mq{gap:34px;padding:16px 0 20px}.hx-mq img{height:42px}}


/* ================= HEBREW TYPE =================
   The system the plugin ships, brought into the prototype, which never had it: every Hebrew
   glyph in the new heroes was falling back to Arial Narrow and Archivo.
   The mechanism is the stack order. The Latin faces carry no Hebrew and Liebling carries a
   full ASCII set, so naming the Latin face FIRST and Liebling LAST splits the two scripts by
   itself, with no markup and no per-run class. Reversing the order silently breaks it:
   Liebling would swallow the English. */
[dir=rtl]{
  --font-h:'owners-narrow','liebling','inno-he-gap',"Heebo",system-ui,sans-serif;
  --font:'Archivo','liebling','inno-he-gap',"Heebo",system-ui,sans-serif;
  --font-n:'JetBrains Mono','Cousine','inno-he-gap',ui-monospace,monospace;
}
/* Liebling has no italic in the kit, so Chrome would slant it mechanically */
[dir=rtl]{font-synthesis-style:none}
/* the two glyphs Liebling is missing: sheqel and gershayim */
@font-face{font-family:'inno-he-gap';
  src:local("Arial Hebrew"),local("Arial"),local("Segoe UI"),local("Noto Sans Hebrew");
  unicode-range:U+05F4,U+20AA}
/* JetBrains Mono's cap-height is .730 and Cousine's is .659, an 11% gap that reads as the
   English running a size larger than the Hebrew beside it. Normalising both to Liebling's own
   cap-height closes it; Chrome applies the adjustment per face in the stack. */
[dir=rtl] .hx-rub,[dir=rtl] .hx-proof-l,[dir=rtl] .hx-fl,[dir=rtl] .hx-cell-l,
[dir=rtl] .hv-pill,[dir=rtl] .chip .l,[dir=rtl] .hv-rail-l,[dir=rtl] .hc-plat,
[dir=rtl] .eyebrow,[dir=rtl] .cs-l,[dir=rtl] .stat .sl,[dir=rtl] .budget-lb,
[dir=rtl] .j-kicker{font-size-adjust:cap-height 0.69}
/* Hebrew is never letterspaced: no capitals, no ascender skyline, so tracking breaks the word
   instead of opening it. The label classes that were still tracked are named here. */
[dir=rtl] .chip .l,[dir=rtl] .hv-pill,[dir=rtl] .hx-fl,[dir=rtl] .hx-cell-l{letter-spacing:0}
/* a figure is a figure in both scripts: the numerals keep the Latin face and their own order */
[dir=rtl] .chip .v,[dir=rtl] .hx-nv,[dir=rtl] .hx-fv{direction:ltr;unicode-bidi:isolate;text-align:right}
/* weight, leading and transform are NOT redeclared. They are part of the design, not of the
   language, and the English page is the reference — an earlier build forced 900 and a looser
   leading on every Hebrew heading and the two versions stopped agreeing wherever they share
   a line. */


/* the header language switch: two letters in the same ghost button the phone and WhatsApp use,
   because the row already carries three round controls and a burger at 390 and a word would
   push it onto a second line */
.lang-sw{font-family:var(--font-n);font-size:12px;font-weight:600;letter-spacing:.04em;
  text-decoration:none;line-height:1}
.lang-sw span{display:block;transform:translateY(.5px)}
[dir=rtl] .lang-sw{letter-spacing:0}
/* a switch that lands on the other language's home rather than on this page's counterpart says
   so quietly, so the header never promises a translation that does not exist */
.lang-sw.is-home{opacity:.72}

/* ---- WordPress additions: the lead form's honeypot and status line ---- */
/* clipped rather than parked at -9999px: under RTL that offset counted as scrollable
   content and gave the form, its wrap and the whole CTA section ~10,000px of phantom
   horizontal scroll area */
.lead-form .hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;opacity:0;pointer-events:none}
.lead-form .lead-msg{grid-column:span 2;margin:0;font-size:14px;color:#C6CFEF;text-align:center;min-height:1.2em}
.lead-form .lead-msg:empty{display:none}
.lead-form.sent .btn{opacity:.5}
@media(max-width:720px){.lead-form .lead-msg{grid-column:span 1}}
/* logged-in editors: the fixed header sits under the WordPress admin bar */
.admin-bar #hd{top:32px}
@media(max-width:782px){.admin-bar #hd{top:46px}}