/* Intercept website, Option C card system, V4 (Andrew's review of V3, Oct 27, 2026). Built from V3's stylesheet.
   Loads after 09-web-design-system/tokens.css and components.css. Every value is a token; V3-only values sit in the block below.
   No gradient text anywhere. No accent bars, no colored left borders, no shadows except those baked into the glass renders and the journey images. */
:root{
--v3-nav-h:72px;
--v3-pin-top:calc(var(--v3-nav-h) + var(--sp-2));
--v3-panel-pad:clamp(24px,4.4vw,64px);
--v3-fs-hero:clamp(40px,4.4vw,64px);
--v3-mat:#EAEBF3;              /* the capabilities deck's sample-work mat (sampled from the deck media), so deck images sit seamlessly */
--v3-marquee-dur:70s;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--v3-nav-h) + var(--sp-5))}

/* review strip */
.rv{background:var(--panel);font-size:var(--fs-ui);line-height:1.4}
.rv .container{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-5);padding-block:var(--sp-2)}
.draft{display:inline-block;font:var(--fw-semibold) var(--fs-ui)/1 var(--font-body);padding:5px 10px;border-radius:var(--r-pill);border:var(--bw-hair) dashed currentColor;vertical-align:middle;margin-left:var(--sp-2);white-space:nowrap;letter-spacing:0;color:var(--text)}

/* nav (unchanged from V2) */
.nav{border-bottom:var(--bw-hair) solid transparent;transition:border-color var(--dur-base) var(--ease-out)}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav__links{align-items:center}
.mm-btn{font:var(--fw-medium) var(--fs-ui)/1 var(--font-body);color:inherit;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2);padding-block:var(--sp-3)}
.chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.has-mm{position:relative}
.mm{display:none;position:absolute;top:calc(100% + var(--sp-3));left:calc(-1 * var(--sp-5));width:600px;padding:var(--sp-3);border-radius:var(--r-l);z-index:var(--z-overlay);background:var(--bg-raised);border:var(--bw-hair) solid var(--line)}
.has-mm.open .mm,.has-mm:hover .mm,.has-mm:focus-within .mm{display:block}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1)}
.nav__links .mm-item{display:block;padding:var(--sp-4);border-radius:var(--r-m);text-decoration:none;font:inherit}.mm-item:hover{background:var(--panel)}
.mm-item b{display:block;font:var(--fw-bold) var(--fs-h4)/1.2 var(--font-display);margin-bottom:var(--sp-1)}.mm-item span{font-size:var(--fs-ui);line-height:1.45}
.mm-foot{font-size:var(--fs-ui);padding:var(--sp-3) var(--sp-4) var(--sp-1)}
@media (max-width:1023px){
  body.menu-open .nav__links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:var(--page-margin);right:var(--page-margin);top:calc(100% + var(--sp-2));background:var(--bg-raised);border:var(--bw-hair) solid var(--line);border-radius:var(--r-l);padding:var(--sp-3) var(--sp-5)}
  body.menu-open .nav__links a,body.menu-open .mm-btn{font-size:var(--fs-body);padding-block:var(--sp-3)}
  .mm{position:static;width:auto;display:block;border:0;padding:0}.mm-grid{grid-template-columns:1fr}
}

.v2-panel{background:var(--bg-raised);border-radius:var(--r-xl);padding:var(--v3-panel-pad)}
.v2-sec{padding-top:var(--section-y)}

/* ===== 1. Hero: Ink headline, the Reassemble glass loop playing large beside it ===== */
.v3-hero{margin-top:var(--sp-2)}
.v3-hero-card{background:var(--bg-raised);border-radius:var(--r-xl);display:grid;overflow:hidden}
.v3-hero-text{display:grid;gap:var(--sp-5);align-content:center;padding:var(--v3-panel-pad);padding-bottom:0;position:relative;z-index:1}
.v3-h1{font-size:var(--v3-fs-hero);color:var(--text);max-width:15ch}
/* the encode is feathered at its edges, so the video can run past its column without a seam on the white card */
.v4-vid{position:relative;aspect-ratio:880/848;margin-top:calc(-1 * var(--sp-5))}
.v4-vid__v,.v4-vid__still{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;display:block}
.v4-vid__still{opacity:0}
.v4-vid.is-still .v4-vid__still{opacity:1}.v4-vid.is-still .v4-vid__v{display:none}
html.rm .v4-vid__still{opacity:1}html.rm .v4-vid__v{display:none}
.v3-seq__cap{position:absolute;left:var(--sp-6);right:var(--sp-6);bottom:var(--sp-5);display:flex;justify-content:center;gap:var(--sp-4);align-items:baseline;opacity:0;transform:translateY(8px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.v4-vid.has-cap .v3-seq__cap{opacity:1;transform:none}
.v3-seq__cap .nm{font:var(--fw-bold) var(--fs-h4)/1.2 var(--font-display);letter-spacing:var(--ls-heading)}
.v3-seq__cap .ct{font:var(--fw-medium) var(--fs-ui)/1.2 var(--font-body);font-variant-numeric:tabular-nums}
@media (min-width:1024px){
  .v3-hero-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:max(620px,min(calc(100vh - var(--v3-pin-top) - var(--sp-4)),820px))}
  .v3-hero-text{padding:var(--v3-panel-pad);padding-right:0}
  .v4-vid{aspect-ratio:auto;height:100%;margin:0}
  .v4-vid__v,.v4-vid__still{left:-10%;top:-2%;width:118%;height:104%}
}
@media (max-width:1023px){.v3-seq__cap{bottom:var(--sp-4)}}

/* ===== 2. Stats: three tiles that fill the row ===== */
.stat-tiles.v3-stats{margin-top:var(--sp-4);grid-template-columns:repeat(3,minmax(0,1fr))}
.v3-stats .stat-tile{background:var(--bg-raised);align-content:start;min-height:0}
.v3-stats .stat__num{color:var(--text)}
.v3-stats .stat__label{max-width:none}
@media (min-width:1024px){.v3-stats .stat-tile{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--sp-5);padding:var(--sp-6) var(--sp-7)}.v3-stats .stat__label{max-width:14ch}}
@media (max-width:767px){.stat-tiles.v3-stats{grid-template-columns:1fr;gap:var(--sp-3)}.v3-stats .stat-tile{grid-template-columns:136px minmax(0,1fr);align-items:center;column-gap:var(--sp-3);padding:var(--sp-4) var(--sp-5)}}

/* ===== 4. Logo marquee: every client on the deck's logo strip, one Ink tone, matched optical size ===== */
.v3-logos{margin-top:var(--sp-4);background:var(--bg-raised);border-radius:var(--r-xl);padding:var(--sp-6) 0 var(--sp-7)}
.v3-logos>.eyebrow{display:block;padding-inline:var(--v3-panel-pad);margin-bottom:var(--sp-5)}
.marquee{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)}
.marquee__track{display:flex;width:max-content;animation:v3-marquee var(--v3-marquee-dur) linear infinite}
.marquee:hover .marquee__track,.marquee.paused .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.marquee__set li{flex:none;display:flex;align-items:center;justify-content:center;height:64px;padding-inline:clamp(28px,3.4vw,52px)}
.marquee__set img{display:block;max-width:none}
@keyframes v3-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:767px){.marquee__set li{padding-inline:24px}.marquee__set img{transform:scale(.82)}}
/* reduced motion: no movement; the full set wraps as a still, centered grid */
html.rm .marquee{-webkit-mask-image:none;mask-image:none;padding-inline:var(--v3-panel-pad)}
html.rm .marquee__track{width:auto;animation:none}
html.rm .marquee__set{flex-wrap:wrap;justify-content:center;row-gap:var(--sp-3)}
html.rm .marquee__set[aria-hidden]{display:none}
@media (max-width:767px){html.rm .marquee__set{display:grid;grid-template-columns:1fr 1fr;row-gap:var(--sp-2)}html.rm .marquee__set li{padding-inline:8px;min-width:0}html.rm .marquee__set img{max-width:100%!important;height:auto!important;transform:none}}

/* ===== 5-6. Our work: folding cards; each case is one journey visual (deck creative in device mockups on a Halo stage) ===== */
.journey{margin:0;border-radius:var(--r-l);overflow:hidden;background:var(--c-halo);aspect-ratio:16/10}
.journey img{display:block;width:100%;height:100%;object-fit:cover}
.v3-stack .campaign{position:sticky;top:var(--v3-pin-top);margin-bottom:var(--sp-4);border:var(--bw-hair) solid var(--line);align-items:center}
.v3-stack .campaign .t-body{max-width:34ch}
.v3-work3{gap:var(--sp-4)}
@media (min-width:1024px){.work-grid.v3-work3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.v3-work3 .work-card{grid-template-rows:subgrid;grid-row:span 4;row-gap:var(--sp-2);background:var(--bg-raised);border-radius:var(--r-l);padding:var(--sp-3) var(--sp-3) var(--sp-6)}
.v3-work3 .journey{margin-bottom:var(--sp-3);align-self:start;border-radius:var(--r-m)}
.v3-work3 .journey img{transition:transform var(--dur-slow) var(--ease-out)}
.v3-work3 .work-card:hover .journey img{transform:scale(1.03)}
.v3-work3 .work-card__img{align-self:start;margin-bottom:var(--sp-3)}
.v3-work3 .work-card>:not(.journey):not(.work-card__img){padding-inline:var(--sp-3)}
.v3-work3 .campaign__tag{align-self:end}
@media (min-width:1024px){.v3-stack .campaign{grid-template-columns:5fr 7fr;gap:var(--sp-8);padding:var(--sp-8)}}
@media (max-width:1023px){.v3-stack .campaign{position:relative;top:auto}}

/* ===== 8. Photo in the mark: the exact Intercept mark. The tip is too small to hold a photo, so it is the solid Flarepop piece;
   the middle and bottom slabs each frame their own part of the photo (her face, then the laptop and her hands). ===== */
.photo-mark__frame.v3-inmark{position:relative;overflow:visible}
.v3-inmark .slab{position:absolute;inset:0;overflow:hidden}
.v3-inmark .slab img{position:absolute;max-width:none;width:256%;height:auto;left:-96.7%;top:-14%;border-radius:0;clip-path:none}
.v3-inmark .slab--tip{background:var(--c-flarepop)}
html.mo .v3-inmark .slab{transition:transform var(--dur-reveal) var(--ease-out),opacity var(--dur-slow) var(--ease-out);transition-delay:var(--sd,0ms)}
html.mo .v3-inmark:not(.in) .slab{opacity:0}
html.mo .v3-inmark:not(.in) .slab:nth-child(1){transform:translate(60px,-60px)}
html.mo .v3-inmark:not(.in) .slab:nth-child(2){transform:translate(90px,0)}
html.mo .v3-inmark:not(.in) .slab:nth-child(3){transform:translate(-60px,60px)}
.v3-inmark .slab:nth-child(1){--sd:600ms}.v3-inmark .slab:nth-child(2){--sd:300ms}.v3-inmark .slab:nth-child(3){--sd:0ms}
.v3-pm{margin-top:var(--section-y)}

/* ===== 7. What we do: a grid of service cards, each with its own glass icon ===== */
.v3-svc-grid{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
@media (min-width:640px){.v3-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.v3-svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:640px){.v3-svc--wide{grid-column:1/-1}}
/* the new service closes the grid as one full-width card: icon left, copy right, on its own centerline */
@media (min-width:1024px){
  .v3-svc.v3-svc--wide{grid-row:auto;grid-template-rows:none;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"ic t t" "ic p b" "ic l b";column-gap:var(--sp-7);row-gap:var(--sp-3);align-items:start;padding:var(--sp-6) var(--sp-8)}
  .v3-svc--wide .v3-svc__ic{grid-area:ic;flex-direction:column;align-self:center;margin:0}
  .v3-svc--wide .v3-svc__ic img{width:200px;height:200px}
  .v3-svc--wide .t-h3{grid-area:t;display:flex;align-items:center;gap:var(--sp-4)}
  .v3-svc--wide .t-punch{grid-area:p}.v3-svc--wide .t-body{grid-area:b}.v3-svc--wide .card__more{grid-area:l;align-self:start}
}
/* five shared rows per card row (icon, title, punch, body, link), so every line sits level across a row and the cards stay equal height */
.v3-svc{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:var(--sp-3);background:var(--bg-raised);border-radius:var(--r-l);padding:var(--sp-5) var(--sp-5) var(--sp-6);text-decoration:none;color:inherit}
.v3-svc__ic{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin:calc(-1 * var(--sp-2)) 0 0 calc(-1 * var(--sp-3))}
.v3-svc__ic img{width:120px;height:120px;object-fit:contain;flex:none;transition:transform var(--dur-slow) var(--ease-out)}
.v3-svc:hover .v3-svc__ic img,.v3-svc:focus-visible .v3-svc__ic img{transform:translateY(-6px)}
.v3-svc__flag{display:inline-flex;align-items:center;letter-spacing:0;font-family:var(--font-body)}
.v3-svc--wide .t-h3{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-4);row-gap:var(--sp-1)}
.v3-svc .t-h3{align-self:start}
.v3-svc .t-punch{margin:0}
.v3-svc .t-body{max-width:none}
.v3-svc--wide .t-body,.v3-svc--wide .t-punch{max-width:44ch}
.v3-svc .card__more{justify-self:start;align-self:end;display:inline-flex;flex-wrap:wrap;white-space:normal;text-align:left;row-gap:0}
.v3-svc:hover .card__more{color:var(--accent)}

/* insights (kept from V2) */
.v3-work3 .work-card__img img{width:100%;height:auto}

/* FAQ (kept) */
.v2-faq{display:grid;gap:var(--sp-4);align-items:start}
@media (min-width:1024px){.v2-faq{grid-template-columns:4fr 8fr}.v2-faq .section-header{position:sticky;top:calc(var(--v3-nav-h) + var(--sp-5))}}
details.v2-q{background:var(--bg-raised);border-radius:var(--r-l);padding:0 var(--sp-6);margin-bottom:var(--sp-3)}
.v2-q summary{cursor:pointer;list-style:none;font:var(--fw-bold) var(--fs-h4)/1.3 var(--font-display);padding:var(--sp-5) var(--sp-7) var(--sp-5) 0;position:relative}
.v2-q summary::-webkit-details-marker{display:none}
.v2-q summary::after{content:"";position:absolute;right:4px;top:30px;width:12px;height:12px;border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:rotate(45deg);transition:transform var(--dur-base) var(--ease-out)}
.v2-q[open] summary::after{transform:rotate(225deg);top:36px}
.v2-q p{padding-bottom:var(--sp-6);max-width:var(--measure-body)}
@media (max-width:767px){details.v2-q{padding:0 var(--sp-5)}}

/* leadership (kept) */
.v2-team{display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.v2-team{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.v2-team{grid-template-columns:repeat(6,minmax(0,1fr))}}
.v2-team .card{grid-template-rows:subgrid;grid-row:span 4;gap:var(--sp-1);padding:var(--sp-2) var(--sp-2) var(--sp-5)}
.v2-team .work-card__img{aspect-ratio:4/5;margin-bottom:var(--sp-3)}
.v2-team .work-card__img img{height:100%;object-fit:cover}
.v2-team b{font:var(--fw-bold) var(--fs-ui)/1.25 var(--font-display);padding-inline:var(--sp-2)}
.v2-team span{font-size:var(--fs-ui);line-height:1.35;padding-inline:var(--sp-2)}
/* padding gives the 24px icon a 40px tap box; the negative bottom margin keeps its painted position (#349 item 13) */
.v4-li{justify-self:start;align-self:end;display:inline-flex;padding:8px;margin:0 0 -8px;color:var(--c-ink);border-radius:4px}
.v4-li svg{display:block;width:24px;height:24px}
.v4-li:hover{opacity:.7}.v4-li:focus-visible{outline:2px solid var(--c-ink);outline-offset:3px}

/* ===== 9. Intercept Labs band (the one dark surface): glass mosaic, not the triangle ===== */
.divider-band.v3-labs{margin-top:var(--section-y);border-radius:var(--r-xl)}
.v3-labs .divider-band__media img{width:100%;height:100%;object-fit:cover;object-position:40% 55%;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%)}
.v3-labs .t-h1{max-width:17ch}
.v3-labs .btn-row{margin-top:var(--sp-3)}
@media (min-width:768px){
  .divider-band.v3-labs{aspect-ratio:auto;min-height:560px}
  .v3-labs .divider-band__text{padding-block:var(--sp-10);padding-left:max(var(--page-margin),calc((100vw - var(--content-max)) / 2));padding-right:var(--sp-6);align-content:center;max-width:60%}
  .v3-labs .divider-band__media{inset:0 0 0 46%}
}
@media (max-width:767px){.v3-labs .divider-band__text{padding-bottom:var(--sp-5)}.v3-labs .divider-band__media{aspect-ratio:4/3;width:100%;margin-top:0}}

/* contact CTA: glass tessellation */
.cta.v3-cta{margin-top:var(--sp-4);background:var(--bg-raised)}
.v3-cta .cta__media{display:grid;place-items:center;aspect-ratio:auto;padding:0 var(--sp-6) var(--sp-6)}
.v3-cta .cta__media img{width:min(340px,70%);height:auto;object-fit:contain}
@media (min-width:1024px){.v3-cta .cta__media{padding:var(--sp-6)}}

/* footer (kept) */
.footer.v2-foot{padding-top:var(--sp-4)}
@media (min-width:1024px){.v2-foot .footer__cols{grid-template-columns:repeat(3,1fr)}}
.v2-foot .footer__wrap{background:var(--bg-raised);border-radius:var(--r-xl);padding:var(--v3-panel-pad)}
.v2-foot .footer__brand p{font-size:var(--fs-ui);line-height:1.5;margin-top:var(--sp-4);max-width:36ch}
.v2-foot .footer__brand b{display:block;font:var(--fw-bold) var(--fs-ui)/1.3 var(--font-body);margin-top:var(--sp-4)}
.v2-foot .footer__brand b+span{font-size:var(--fs-ui);line-height:1.5}

/* motion */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);z-index:calc(var(--z-nav) + 1);pointer-events:none}
html.mo .rv-el{opacity:0;transform:translateY(calc(var(--reveal-distance) * 2));transition:opacity var(--dur-slow) var(--ease-out) var(--d,0ms),transform var(--dur-reveal) var(--ease-out) var(--d,0ms)}
html.mo .rv-el.in{opacity:1;transform:none}
[data-speed]{will-change:transform}
html.rm .rv-el,html.rm .v3-inmark .slab{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html{scroll-behavior:auto}}