/* Intercept website, Option C card system, V3 (Andrew's review of V2, Oct 27, 2026).
   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. */
: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-hero-scroll:260vh;        /* scroll length that scrubs the reassemble sequence on desktop */
--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, large scroll-scrubbed glass reassemble ===== */
.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}
.v3-h1{font-size:var(--v3-fs-hero);color:var(--text);max-width:15ch}
.v3-seq{position:relative;overflow:hidden;aspect-ratio:1/1;--seq-zoom:1.15}
/* the frames' soft floor shadow fades out before the card edge */
.v3-seq canvas,.v3-seq__poster{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%)}
.v3-seq__poster{object-fit:cover;transform:scale(var(--seq-zoom));opacity:1;transition:opacity var(--dur-base) var(--ease-out)}
.v3-seq.is-live .v3-seq__poster{opacity:0}
.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)}
.v3-seq.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){
  html.mo .v3-hero{height:var(--v3-hero-scroll);position:relative}
  html.mo .v3-hero-pin{position:sticky;top:var(--v3-pin-top)}
  .v3-hero-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:max(600px,min(calc(100vh - var(--v3-pin-top) - var(--sp-4)),820px))}
  .v3-hero-text{padding:var(--v3-panel-pad);padding-right:0}
  .v3-seq{aspect-ratio:auto;height:100%;--seq-zoom:.98}
}
@media (max-width:1023px){.v3-seq{margin-top:calc(-1 * var(--sp-5))}.v3-seq__cap{bottom:var(--sp-4)}}

/* ===== 2. Stats ===== */
.stat-tiles.v3-stats{margin-top:var(--sp-4)}
.v3-stats .stat-tile{background:var(--bg-raised);align-content:start;min-height:0}
.v3-stats .stat__num{color:var(--text)}
@media (max-width:767px){.stat-tiles.v3-stats{grid-template-columns:1fr 1fr;gap:var(--sp-3)}.v3-stats .stat-tile{padding:var(--sp-4)}.v3-stats .stat__label{max-width:none}}

/* ===== 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}}

/* ===== 5-6. Our work: folding cards, framed the way the deck frames sample work (on the mat, captioned) ===== */
.mat{margin:0;background:var(--v3-mat);border-radius:var(--r-m);overflow:hidden;display:block}
.mat img{display:block;width:100%;height:100%;object-fit:contain;padding:clamp(12px,5%,36px)}
.mat--thumb img{padding:6px}
.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-gallery{display:grid;gap:var(--sp-4)}
.mat--hero{aspect-ratio:16/9}
.mat--hero img{transition:opacity var(--dur-fast) var(--ease-out)}
.v3-gallery__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.v3-gallery__cap{font:var(--fw-medium) var(--fs-ui)/1.3 var(--font-body);min-width:0}
.v3-thumbs{display:flex;gap:var(--sp-2);flex:none}
.mat--thumb{width:72px;height:72px;padding:0;border:var(--bw-box) solid transparent;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.mat--thumb:hover{transform:translateY(-2px)}
.mat--thumb.on{border-color:var(--text)}
.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 .mat--card{aspect-ratio:16/10;margin-bottom:var(--sp-3);align-self:start}
.v3-work3 .mat--card img{transition:transform var(--dur-slow) var(--ease-out)}
.v3-work3 .work-card:hover .mat--card img{transform:scale(1.03)}
.v3-work3 .work-card__img{align-self:start;margin-bottom:var(--sp-3)}
.v3-work3 .work-card>:not(.mat):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}}
@media (max-width:767px){.v3-gallery__row{flex-direction:column;align-items:flex-start}.mat--thumb{width:64px;height:64px}}

/* ===== 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 3;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)}

/* ===== 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}}