/* =========================================================
   JOSH FLURE: PORTFOLIO · style.css
   Built from BUILD-PLAN.md
   ========================================================= */

@layer reset, tokens, base, layout, components, sections, utilities, motion;

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ol, ul { list-style: none; }
  [hidden] { display: none !important; }
}

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    --carbon:   #0B0B0C;
    --asphalt:  #151517;
    --graphite: #26272A;
    --gunmetal: #4A4C51;
    --steel:    #8C8F95;
    --fog:      #D6D7D9;
    --paper:    #F3F2EF;
    --white:    #FFFFFF;
    --red:      #9E1B22;
    --red-hot:  #C4262E;
    --red-deep: #6E1117;
    --red-label: #E3363E; /* brighter red for small case-study labels, so thin mono text reads on dark panels */

    --f-display: "Archivo", "Arial Black", system-ui, sans-serif;
    --f-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --fs-mega: clamp(3rem, 11vw, 16rem);
    --fs-hero: clamp(2.2rem, 10.3vw, 15rem);
    --fs-d1: clamp(2.5rem, 7.5vw, 8.5rem);
    --fs-d2: clamp(1.75rem, 4.2vw, 4.75rem);
    --fs-h3: clamp(1.375rem, 2.4vw, 2.5rem);
    --fs-body-l: clamp(1.125rem, 1.3vw, 1.375rem);
    --fs-body: 1rem;
    --fs-label: 0.75rem;

    --gutter: clamp(16px, 4vw, 64px);
    --section-y: clamp(96px, 16vh, 192px);
    --skew: -12deg;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);

    --z-grain: 90; --z-nav: 60; --z-menu: 55; --z-overlay: 70; --z-cursor: 100; --z-pre: 110;

    /* theme-driven (set per section) */
    --bg: var(--paper);
    --fg: var(--carbon);
    --muted: var(--gunmetal);
    --line: var(--fog);
  }
}

/* ---------- BASE ---------- */
@layer base {
  html { overflow-x: clip; scroll-behavior: auto; }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }

  body {
    overflow-x: clip;
    background: var(--carbon);
    color: var(--carbon);
    font-family: var(--f-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  [data-theme="light"]    { --bg: var(--paper);    --fg: var(--carbon); --muted: var(--gunmetal); --line: var(--fog); }
  [data-theme="dark"]     { --bg: var(--carbon);   --fg: var(--paper);  --muted: var(--steel);    --line: var(--graphite); }
  [data-theme="graphite"] { --bg: #18191B;         --fg: var(--paper);  --muted: var(--steel);    --line: var(--graphite); }
  main section[data-theme], .footer { background: var(--bg); color: var(--fg); position: relative; }

  ::selection { background: var(--red); color: var(--paper); }

  :focus-visible { outline: 2px solid var(--red-hot); outline-offset: 3px; }

  .skip-link {
    position: fixed; left: 16px; top: 16px; z-index: 200;
    background: var(--red); color: var(--paper); padding: 10px 16px;
    transform: translateY(-200%); transition: transform .3s var(--ease-out);
  }
  .skip-link:focus { transform: none; }
}

/* ---------- LAYOUT ---------- */
@layer layout {
  .wrap { width: 100%; padding-inline: var(--gutter); margin-inline: auto; max-width: 1760px; }
  .section { padding-block: var(--section-y); }
  .section__label { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(24px, 4vw, 48px); color: var(--muted); }
}

/* ---------- COMPONENTS ---------- */
@layer components {
  .display {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 850;
    font-variation-settings: "wdth" var(--wdth, 112);
    text-transform: uppercase;
    line-height: 0.86;
    letter-spacing: -0.02em;
  }
  .h-d1 { font-size: var(--fs-d1); }
  .h-d2 { font-size: var(--fs-d2); }
  .display .line { display: block; }
  .outline { color: transparent !important; -webkit-text-stroke: 1.5px currentColor; }
  .outline { -webkit-text-stroke-color: var(--fg); }

  .label {
    font-family: var(--f-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
  }
  .lead { font-size: var(--fs-body-l); line-height: 1.5; max-width: 62ch; }
  p { max-width: 62ch; }

  /* accent stripe: the logo's red parallelogram */
  .stripe {
    display: inline-block; width: 28px; height: 6px; flex: none;
    background: var(--red); transform: skewX(-40deg);
  }
  .stripe--pulse { animation: pulse 1.6s var(--ease-inout) infinite; transform-origin: left; }
  @keyframes pulse { 0%,100% { transform: skewX(-40deg) scaleX(.35); } 50% { transform: skewX(-40deg) scaleX(1); } }

  .dot { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--red-hot); margin-right: .45em; vertical-align: .12em; animation: blink 1.8s steps(1) infinite; }
  @keyframes blink { 50% { opacity: .25; } }

  /* buttons */
  .btn {
    --b-fg: var(--paper); --b-bg: transparent; --b-bd: currentColor;
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 28px; overflow: hidden; isolation: isolate;
    font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase;
    font-variation-settings: "wdth" 110; letter-spacing: 0.01em;
    color: var(--b-fg); background: var(--b-bg); border: 1.5px solid var(--b-bd);
    transform: skewX(var(--skew));
    transition: color .4s var(--ease-out), background-color .4s var(--ease-out), border-color .4s var(--ease-out);
  }
  .btn > span { display: inline-block; transform: skewX(12deg); position: relative; z-index: 1; }
  .btn::before { /* red sweep */
    content: ""; position: absolute; inset: -2px; z-index: 0;
    background: var(--sweep, var(--red)); transform: translateX(-102%);
    transition: transform .55s var(--ease-out);
  }
  .btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
  .btn--sm { min-height: 38px; padding: 0 16px; font-size: 0.8rem; }
  .btn--lg { min-height: clamp(60px, 7vw, 84px); padding: 0 clamp(24px, 3vw, 44px); font-size: clamp(1rem, 1.5vw, 1.35rem); }
  .btn--red { --b-bg: var(--red); --b-bd: var(--red); --sweep: var(--red-hot); }
  .btn--outline { --b-fg: var(--fg); }
  .btn--outline:hover, .btn--outline:focus-visible { --b-fg: var(--paper); border-color: var(--red); }

  /* chips */
  .chip {
    font-family: var(--f-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em;
    min-height: 40px; padding: 0 18px; border: 1px solid var(--line); transform: skewX(var(--skew));
    transition: background-color .3s, color .3s, border-color .3s;
  }
  .chip:hover, .chip:focus-visible { border-color: var(--red); outline: none; }
  .chip.is-active { background: var(--red); color: var(--paper); border-color: var(--red); }

  .tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .tags li { font-family: var(--f-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px; border: 1px solid var(--line); color: var(--muted); }

  /* marquee */
  .marquee { overflow: hidden; white-space: nowrap; }
  .marquee__track { display: inline-flex; will-change: transform; }
  .marquee__track > span { flex: none; }

  /* ---- fixed UI ---- */
  .progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: calc(var(--z-nav) + 1); pointer-events: none; }
  .progress span { display: block; height: 100%; background: var(--red-hot); transform-origin: left; transform: scaleX(0); }

  .nav {
    position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 18px var(--gutter);
    color: var(--nav-fg, var(--carbon));
    transition: color .4s var(--ease-out), transform .6s var(--ease-out);
  }
  .nav.is-hidden { transform: translateY(-110%); }
  .nav-backdrop {
    position: fixed; inset: 0 0 auto 0; height: 80px; z-index: calc(var(--z-nav) - 1); pointer-events: none;
    background: rgba(243, 242, 239, .78); border-bottom: 1px solid rgba(11, 11, 12, .06);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    opacity: 0; transform: translateY(-100%);
    transition: opacity .4s var(--ease-out), transform .6s var(--ease-out), background-color .4s var(--ease-out), border-color .4s var(--ease-out);
  }
  body[data-nav="dark"] .nav-backdrop { background: rgba(11, 11, 12, .72); border-bottom-color: rgba(243, 242, 239, .06); }
  body.is-scrolled:not([data-nav="hero"]) .nav-backdrop { opacity: 1; transform: none; }
  body.is-scrolled:not([data-nav="hero"]) .nav-backdrop.is-hidden { transform: translateY(-110%); }
  .nav:focus-within { transform: none; }
  body[data-nav="dark"] { --nav-fg: var(--paper); }
  body[data-nav="light"] { --nav-fg: var(--carbon); }
  /* hero: no blend on the nav (it would turn the red underline cyan). The links and the Résumé/Menu button
     each sample what is behind them (see brandFromHero) and switch between dark and light text. */
  body[data-nav="hero"] { --nav-fg: var(--carbon); }
  body[data-nav="hero"][data-hero-links="dark"] .nav__links { color: var(--paper); }
  body[data-nav="hero"][data-hero-cta="dark"] .nav__resume, body[data-nav="hero"][data-hero-cta="dark"] .nav__menu { --b-fg: var(--paper); color: var(--paper); }
  /* solid fill in the hero so the button stays legible when it straddles the corner wedge */
  body[data-nav="hero"] .nav__resume { --b-bg: var(--paper); }
  body[data-nav="hero"][data-hero-cta="dark"] .nav__resume { --b-bg: var(--carbon); }
  body[data-nav="hero"] .section-index { mix-blend-mode: difference; }
  body[data-nav="hero"] .progress { opacity: 0; }
  .nav__spacer { width: 94px; flex: none; }
  .brand {
    position: fixed; left: round(var(--gutter), 1px); top: 26px; z-index: calc(var(--z-nav) + 1);
    width: 94px; display: block; color: var(--brand-fg, var(--carbon));
    transition: color .35s var(--ease-out), transform .6s var(--ease-out);
  }
  .brand svg { width: 94px; height: 29px; }
  .brand.is-hidden { transform: translateY(-300%); }
  body[data-brand="dark"] { --brand-fg: var(--paper); }
  body[data-brand="light"] { --brand-fg: var(--carbon); }
  .nav__links { display: flex; gap: clamp(20px, 3vw, 44px); }
  .nav__links a { position: relative; font-family: var(--f-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; padding: 6px 0; }
  .nav__links a::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
    background: var(--red-hot); transform: skewX(-40deg) scaleX(0); transform-origin: left;
    transition: transform .45s var(--ease-out);
  }
  .nav__links a:hover::after, .nav__links a.is-active::after { transform: skewX(-40deg) scaleX(1); }
  .nav__resume { --b-fg: var(--nav-fg, var(--carbon)); color: var(--nav-fg); }
  .nav__resume:hover { --b-fg: var(--paper); }
  .nav__menu { display: none; font-family: var(--f-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; min-height: 44px; padding: 0 4px; }

  .section-index {
    position: fixed; left: var(--gutter); bottom: 20px; z-index: var(--z-nav);
    color: color-mix(in srgb, var(--index-fg, var(--carbon)) 75%, transparent); transition: color .4s; pointer-events: none;
  }
  /* frosted box behind just the label, slanted like the Résumé button */
  .section-index::before {
    content: ""; position: absolute; inset: -9px -16px; z-index: -1; transform: skewX(var(--skew));
    background: rgba(243, 242, 239, .78); border: 1px solid rgba(11, 11, 12, .08);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    opacity: 0; transition: opacity .4s var(--ease-out), background-color .4s var(--ease-out), border-color .4s var(--ease-out);
  }
  body[data-index-theme="dark"] .section-index::before { background: rgba(11, 11, 12, .72); border-color: rgba(243, 242, 239, .1); }
  body.is-scrolled:not([data-nav="hero"]) .section-index::before { opacity: 1; }
  body[data-index-theme="dark"] { --index-fg: var(--paper); }
  body[data-index-theme="light"] { --index-fg: var(--carbon); }
  body[data-nav="hero"] .section-index { color: #fff; } /* in the hero it inverts over the artwork instead */

  .menu {
    position: fixed; inset: 0; z-index: var(--z-menu); background: var(--carbon); color: var(--paper);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 110px var(--gutter) 32px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .menu__links { display: flex; flex-direction: column; gap: 6px; }
  .menu__links a { font-family: var(--f-display); font-style: italic; font-weight: 850; text-transform: uppercase; font-size: clamp(3rem, 15vw, 6rem); line-height: .95; font-variation-settings: "wdth" 110; display: flex; align-items: flex-start; gap: 10px; }
  .menu__links .label { color: var(--steel); font-style: normal; margin-top: .6em; font-weight: 400; }
  .menu__foot { display: flex; justify-content: space-between; font-family: var(--f-mono); text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; }
  .menu__foot a { min-height: 48px; display: inline-flex; align-items: center; }

  /* cursor */
  .cursor { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-cursor); display: none; }
  .has-cursor .cursor { display: block; }
  .cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; will-change: transform; }
  .cursor__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--red); }
  .cursor__ring {
    width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
    border: 1.5px solid var(--red);
    display: grid; place-items: center;
    transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background-color .35s, border-radius .35s;
  }
  .cursor__label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); opacity: 0; transition: opacity .2s; }
  .cursor.is-label .cursor__ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--red); }
  .cursor.is-label .cursor__label { opacity: 1; }
  /* buttons all fill red on hover, so over any button the cursor flips to paper so it stays visible */
  .cursor.is-red .cursor__ring { background: var(--paper); border-color: var(--paper); border-radius: 0; transform-origin: center; }
  .cursor.is-red .cursor__dot { background: var(--paper); }
  .cursor.is-red .cursor__label { color: var(--red); }
  .cursor.is-hidden { opacity: 0; }
  .has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

  /* grain */
  .grain {
    position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--z-grain);
    pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  }

  /* ---- preloader ---- */
  .preloader { position: fixed; inset: 0; z-index: var(--z-pre); display: grid; place-items: center; color: var(--paper); }
  .preloader__half { position: absolute; inset: 0; background: var(--carbon); }
  .preloader__half--a { clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%); }
  .preloader__half--b { clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); }
  .html-no-pre .preloader { display: none; }
  .preloader__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .preloader__mark { width: clamp(140px, 22vw, 260px); overflow: visible; }
  .pl-path { fill: var(--paper); fill-opacity: 0; stroke: var(--paper); stroke-width: 3; }
  .pl-stripe { fill: var(--red-hot); }
  .js .pl-stripe { opacity: 0; }
  .preloader__bar { width: clamp(140px, 22vw, 260px); height: 4px; background: var(--graphite); transform: skewX(-40deg); overflow: hidden; }
  .preloader__bar span { display: block; height: 100%; background: var(--red-hot); transform-origin: left; transform: scaleX(0); }
  .preloader__count { color: var(--steel); }

  /* ---- case study overlay ---- */
  .overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--paper); color: var(--carbon); --bg: var(--paper); --fg: var(--carbon); --muted: var(--gunmetal); --line: var(--fog); }
  .overlay__scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .overlay__close, .lightbox__close {
    position: fixed; top: 16px; right: var(--gutter); z-index: 2; width: 52px; height: 52px;
    font-size: 30px; line-height: 1; background: var(--carbon); color: var(--paper); transform: skewX(var(--skew));
    transition: background-color .3s;
  }
  .overlay__close:hover, .lightbox__close:hover { background: var(--red); }

  .lightbox { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(11,11,12,.96); color: var(--paper); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 80px var(--gutter) 40px; }
  .lightbox__fig { display: flex; flex-direction: column; gap: 14px; align-items: center; }
  .lightbox__art { width: min(100%, 1100px); aspect-ratio: 4 / 3; max-height: 72vh; }
  .lightbox__art.is-video { width: auto; aspect-ratio: auto; height: min(80vh, 1000px); max-height: none; }
  .lightbox__art.is-video video { display: block; height: 100%; width: auto; max-width: 100%; margin: 0 auto; border-radius: 14px; background: #F3F2F8; }
  .lightbox__art svg { width: 100%; height: 100%; }
  .lightbox__nav { width: 52px; height: 52px; border: 1px solid var(--gunmetal); font-size: 20px; transform: skewX(var(--skew)); }
  .lightbox__nav:hover { border-color: var(--red-hot); background: var(--red); }
}

/* ---------- SECTIONS ---------- */
@layer sections {

  /* ===== HERO ===== */
  .s-hero { height: 100vh; height: 100svh; min-height: 560px; }
  .s-hero__stage { position: relative; height: 100%; overflow: hidden; isolation: isolate; background: var(--paper); }
  .s-hero__video, .s-hero__bands { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .band { fill: var(--carbon); }
  /* centered with flex, not a transform: a transform would make this a stacking context and stop
     the headline/subtitle from blending with the bands. Only those two invert; the kicker stays red. */
  .s-hero__content {
    position: absolute; left: var(--gutter); right: var(--gutter); top: 0; bottom: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding-bottom: 44px; pointer-events: none;
  }
  .s-hero__title, .s-hero__sub { mix-blend-mode: difference; color: #fff; }
  .s-hero__kicker { margin-bottom: clamp(16px, 2vw, 28px); color: var(--red); } /* same red as the logo stripes */
  .s-hero__title { font-size: var(--fs-hero); --wdth: 108; }
  .s-hero__sub { margin-top: clamp(20px, 2.4vw, 36px); max-width: 34ch; font-size: var(--fs-body-l); line-height: 1.45; }
  .s-hero__cue { position: absolute; right: var(--gutter); bottom: 22px; display: flex; align-items: center; gap: 12px; color: var(--carbon); }
  .s-hero__mark { transform-box: view-box; }

  /* ===== CAPABILITIES ===== */
  .s-cap { padding-block: clamp(64px, 10vh, 120px); overflow: hidden; }
  .marquee--big .marquee__track { font-size: clamp(3rem, 9vw, 9.5rem); --wdth: 118; }
  .marquee--big .marquee__track > span { padding-right: .45em; }
  .marquee--big .marquee__track > span::after { content: "/"; display: inline-block; margin-left: .45em; color: var(--red-hot); -webkit-text-stroke: 0; }
  .marquee--small { margin-top: clamp(16px, 2vw, 28px); color: var(--steel); }
  .marquee--small .marquee__track > span { padding-right: 2.5em; }
  .marquee--small .marquee__track > span::before { content: "·"; margin-right: 2.5em; color: var(--red-hot); }

  .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(56px, 8vw, 110px); }
  .fact { border-top: 1px solid var(--graphite); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
  .fact .label { color: var(--steel); }
  .fact strong { font-size: clamp(1.25rem, 2vw, 2.25rem); font-weight: 800; line-height: 1; }

  /* ===== APPROACH ===== */
  .s-approach__statement {
    font-family: var(--f-display); font-weight: 700; font-style: italic;
    font-variation-settings: "wdth" 100;
    font-size: clamp(1.9rem, 4.4vw, 5rem); line-height: 1.02; letter-spacing: -0.02em;
    max-width: 22ch;
  }
  .s-approach__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 8vw, 140px); margin-top: clamp(56px, 8vw, 120px); align-items: start; }
  .principles { display: grid; gap: 28px; }
  .principles li { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
  .principles .stripe { margin-top: .55em; grid-row: span 2; }
  .principles h3 { font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.15rem; font-variation-settings: "wdth" 110; letter-spacing: 0; }
  .principles p { color: var(--muted); }

  /* ===== DISCIPLINES ===== */
  .s-disc { overflow: hidden; }
  .s-disc__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 110px 60px; }
  .s-disc__head { margin-bottom: clamp(32px, 5vh, 60px); }
  .s-disc__track { display: flex; gap: clamp(16px, 2vw, 32px); padding-inline: var(--gutter); width: max-content; }
  .panel {
    position: relative; flex: none; width: min(78vw, 640px); height: min(56vh, 560px); min-height: 400px;
    background: var(--asphalt); overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 86% 100%, 0 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(24px, 3vw, 44px);
    transition: background-color .5s var(--ease-out);
  }
  .panel::before { content: ""; position: absolute; left: clamp(24px, 3vw, 44px); top: clamp(24px, 3vw, 44px); width: 46px; height: 8px; background: var(--red-hot); transform: skewX(-40deg); transform-origin: left; transition: transform .5s var(--ease-out); }
  .panel:hover::before { transform: skewX(-40deg) scaleX(2.4); }
  .panel:hover { background: #1c1c1f; }
  .panel__num { position: absolute; right: -0.04em; top: -0.12em; font-size: clamp(9rem, 20vw, 17rem); --wdth: 120; -webkit-text-stroke-color: var(--gunmetal); pointer-events: none; }
  .panel__body { position: relative; display: grid; gap: 18px; }
  .panel__body p { color: var(--steel); max-width: 44ch; }
  .panel h3 { max-width: 12ch; }

  /* ===== ABOUT ===== */
  .s-about__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
  .s-about__emblem { position: relative; aspect-ratio: 1; display: grid; place-items: center; perspective: 1200px; }
  .emblem { position: relative; width: 100%; transform-style: preserve-3d; will-change: transform; }
  .emblem__layer { width: 100%; height: auto; color: var(--carbon); overflow: visible; }
  .s-about__copy .h-d2 { font-size: clamp(1.75rem, 3.6vw, 4.25rem); --wdth: 104; }
  .s-about__text { display: grid; gap: 18px; margin-top: clamp(28px, 3vw, 44px); }
  .s-about__text p { font-size: var(--fs-body-l); line-height: 1.55; } /* both paragraphs share one size */
  .spec { margin-top: clamp(32px, 4vw, 56px); font-family: var(--f-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
  .spec > div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; }
  .spec dt { flex: none; color: var(--muted); }
  .spec dd { flex: none; text-align: right; }
  .spec > div::after { content: none; }
  .spec .leader { flex: 1; height: 1px; border-bottom: 1px dotted var(--steel); transform-origin: left; order: 1; align-self: center; }
  .spec dd { order: 2; }

  /* ===== PROCESS ===== */
  .s-process { overflow: hidden; }
  .s-process__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 110px 60px; }
  .s-process__track { position: relative; width: max(260vw, 2200px); padding-inline: var(--gutter); margin-top: clamp(24px, 4vh, 48px); }
  .s-process__line { position: absolute; left: 0; top: 0; width: 100%; height: 150px; overflow: visible; }
  .pline, .pline-bg { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .pline-bg { stroke: var(--gunmetal); stroke-dasharray: 4 6; }
  .pline { stroke: var(--red-hot); stroke-width: 3; }
  .s-process__marker { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--red-hot); transform: rotate(45deg); box-shadow: 0 0 0 6px rgba(196,38,46,.18); }
  .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-top: 190px; }
  .step { display: grid; gap: 14px; align-content: start; max-width: 380px; opacity: .35; transition: opacity .6s var(--ease-out); }
  .step.is-on { opacity: 1; }
  .step__num { font-size: clamp(3.5rem, 6vw, 6rem); color: transparent; -webkit-text-stroke: 1.5px var(--steel); }
  .step.is-on .step__num { -webkit-text-stroke-color: var(--red-hot); }
  .step h3 { font-size: var(--fs-h3); }
  .step p { color: var(--steel); }

  /* ===== WORK ===== */
  .s-work { overflow: hidden; }
  .s-work__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 100px 50px; }
  .s-work__head { margin-bottom: clamp(24px, 4vh, 48px); }
  .s-work__track { display: flex; gap: clamp(16px, 2.5vw, 40px); padding-inline: max(var(--gutter), calc((100vw - 1760px) / 2 + var(--gutter))); /* lines up with .wrap on extra-wide screens */ width: max-content; }
  .card { flex: none; width: min(70vw, 1100px); display: grid; gap: 18px; color: var(--paper); text-align: left; }
  .card__media {
    position: relative; aspect-ratio: 16 / 9; max-height: 58vh; overflow: hidden; background: var(--asphalt);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 100%, 0 100%);
    transition: clip-path .7s var(--ease-out);
  }
  .card:hover .card__media { clip-path: polygon(0 0, 100% 0, 100% 72%, 86% 100%, 0 100%); }
  .card__art { position: absolute; inset: -6% -6%; transition: transform .9s var(--ease-out); }
  .card__art svg { width: 100%; height: 100%; }
  .card:hover .card__art { transform: scale(1.04); }
  /* outlined card: the media box is red, the image sits 1.5px inside it with the same angled cut,
     so the red reads as a thin line that follows every edge, including the diagonal */
  .card__media--outlined { background: var(--gunmetal); transition: clip-path .7s var(--ease-out), background-color .4s var(--ease-out); }
  .card:hover .card__media--outlined, .card:focus-visible .card__media--outlined { background: var(--red-label); }
  .card__media--outlined .story { position: absolute; inset: 1.5px; overflow: hidden; background: #0b0b0c; clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 100%, 0 100%); transition: clip-path .7s var(--ease-out); }
  .card:hover .card__media--outlined .story { clip-path: polygon(0 0, 100% 0, 100% 72%, 86% 100%, 0 100%); }
  /* story card: machine fading into black, phone (recording cropped to its bezel) in front */
  .story__machine { position: absolute; left: -4%; top: 0; width: 70%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 42%; filter: brightness(.62) saturate(1.15); transition: transform 1s var(--ease-out), filter 1s var(--ease-out); }
  .card:hover .story__machine { filter: brightness(.72) saturate(1.2); }
  .story__fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 11, 12, 0) 26%, rgba(11, 11, 12, .85) 52%, #0b0b0c 64%); pointer-events: none; }
  .story__phone { position: absolute; right: 12%; top: 9%; height: 116%; aspect-ratio: 543 / 1126; overflow: hidden; border-radius: 16.6% / 8%; box-shadow: 0 0 0 1px #2c2c2e, 0 30px 70px rgba(0, 0, 0, .6); transition: transform 1s var(--ease-out); }
  .card:hover .story__phone { transform: translateY(-3%); }
  .story__phone img, .story__phone video { position: absolute; left: -16.39%; top: -6.84%; width: 132.6%; height: 113.68%; max-width: none; }
  .story__phone img { z-index: 1; transition: opacity .4s; }
  .story__phone.is-playing img { opacity: 0; }
  .card__meta { display: flex; justify-content: space-between; gap: 16px; color: var(--steel); }
  .card__title { font-size: var(--fs-d2); }
  .card__row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
  .card__row p { color: var(--steel); max-width: 48ch; }
  .card__cta { font-family: var(--f-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
  .card__cta .stripe { transition: width .4s var(--ease-out); }
  .card:hover .card__cta .stripe { width: 48px; }
  .badge { display: inline-block; padding: 3px 8px; border: 1px solid var(--red-hot); color: var(--red-hot); margin-left: 8px; }

  /* ===== ARCHIVE ===== */
  .filters { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(32px, 4vw, 56px) 0 clamp(24px, 3vw, 40px); }
  .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(160px, 17vw, 280px); grid-auto-flow: dense; gap: clamp(10px, 1.2vw, 18px); }
  /* fixed-size cut (36px tall × 32px wide) so the angle matches on square, wide and tall tiles */
  /* border: the tile itself is the border colour; the artwork + caption sit 1.5px inside it with a matching cut */
  .tile { position: relative; overflow: hidden; background: #b9bbbf; text-align: left; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 32px) 100%, 0 100%); transition: background-color .35s var(--ease-out); }
  .tile:hover, .tile:focus-visible { background: var(--red-label); outline: none; }
  .tile__inner { position: absolute; inset: 1.5px; overflow: hidden; background: var(--fog); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), calc(100% - 31.5px) 100%, 0 100%); }
  .tile--wide { grid-column: span 2; }
  .tile--tall { grid-row: span 2; }
  .tile--big { grid-column: span 2; grid-row: span 2; }
  .tile__art { position: absolute; inset: 0; transition: transform .8s var(--ease-out), filter .6s var(--ease-out); }
  /* black & white at rest, full colour on hover (only where hover exists, so touch screens stay in colour) */
  @media (hover: hover) {
    .tile__art { filter: grayscale(1); }
    .tile:hover .tile__art, .tile:focus-visible .tile__art { filter: grayscale(0); }
  }
  .tile__art svg { width: 100%; height: 100%; }
  .tile:hover .tile__art { transform: scale(1.04); }
  .tile__art img { width: 100%; height: 100%; object-fit: cover; }
  /* logos: show the whole mark, centered with breathing room (bottom padding clears the caption bar) */
  .tile__art--contain img { object-fit: contain; padding: 22px 9% 58px; }
  /* frosted bar so captions read on busy artwork; extra right padding keeps the category clear of the corner cut */
  .tile__cap {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 11px 44px 11px 12px; color: var(--paper);
    background: rgba(11, 11, 12, .55); border-top: 1px solid rgba(243, 242, 239, .08);
    -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  }
  .tile__cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tile.is-hidden { display: none; }

  /* ===== CONTACT ===== */
  .s-contact { min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-block: var(--section-y); }
  .s-contact__bands { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; }
  .cband { fill: var(--asphalt); }
  .s-contact__inner { position: relative; }
  .s-contact__title { font-size: var(--fs-mega); --wdth: 104; }
  .s-contact__title .line:last-child { color: var(--red-hot); }
  .s-contact__sub { margin-top: clamp(24px, 3vw, 44px); color: var(--steel); }
  .s-contact__ctas { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 28px); margin-top: clamp(32px, 4vw, 60px); }
  .s-contact__email { margin-top: 28px; color: var(--steel); }
  .s-contact__email a { color: var(--paper); border-bottom: 1px solid var(--red-hot); }

  /* ===== FOOTER ===== */
  .footer { overflow: hidden; padding-top: 48px; border-top: 1px solid var(--graphite); }
  .footer__row { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; font-size: .85rem; color: var(--steel); }
  .footer__row a { color: var(--paper); min-height: 44px; display: inline-flex; align-items: center; }
  .footer__row a:hover { color: var(--red-hot); }
  .footer__top { margin-left: auto; }
  .footer__word { font-size: clamp(4rem, 17.5vw, 24rem); --wdth: 125; white-space: nowrap; line-height: .8; margin-top: 32px; padding-left: var(--gutter); height: .62em; overflow: hidden; -webkit-text-stroke-color: var(--gunmetal); }

  /* ===== CASE STUDY ===== */
  .cs { padding: 110px var(--gutter) 120px; max-width: 1400px; margin: 0 auto; }
  .cs__hero { display: grid; gap: 22px; }
  .cs__title { font-size: var(--fs-d1); }
  .cs__cover { margin-top: 40px; aspect-ratio: 16 / 8; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 82%, 92% 100%, 0 100%); }
  .cs__cover svg { width: 100%; height: 100%; }
  /* header demo: recording + synced step list */
  .cs__demo { aspect-ratio: auto; overflow: visible; clip-path: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
  .demo__screen { position: relative; aspect-ratio: 4 / 5; max-height: 72vh; overflow: hidden; background: #1e1e1e; clip-path: polygon(0 0, 100% 0, 100% 86%, 90% 100%, 0 100%); }
  /* crop the recording to just the phone (bezel at x 89–632, y 77–1203 of 720×1280), so it floats on the dark panel */
  .demo__phone { position: absolute; top: 50%; left: 50%; height: 86%; aspect-ratio: 543 / 1126; transform: translate(-50%, -50%); overflow: hidden; border-radius: 16.6% / 8%; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
  .demo__phone video { position: absolute; left: -16.39%; top: -6.84%; width: 132.6%; height: 113.68%; max-width: none; }
  /* enlarge: covers the video (click anywhere), with a small pill in the corner as the visible cue */
  .demo__expand { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: flex-end; padding: 4%; cursor: zoom-in; }
  .demo__expand .label { padding: 7px 12px; border-radius: 999px; background: rgba(11, 11, 12, .72); color: var(--paper); transition: background-color .3s; }
  .demo__expand:hover .label, .demo__expand:focus-visible .label { background: var(--red); }
  .demo__expand--pill { inset: auto 4% auto auto; top: 4%; padding: 0; } /* reduced motion: video keeps its own controls */
  .demo__steps { display: grid; }
  .demo__step { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; width: 100%; padding: 16px 0 18px; text-align: left; border-top: 1px solid var(--fog); opacity: .45; transition: opacity .4s var(--ease-out); }
  .demo__step:hover, .demo__step:focus-visible, .demo__step.is-active { opacity: 1; }
  .demo__num { padding-top: 3px; color: var(--gunmetal); }
  .demo__text strong { display: block; font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 110; font-size: 1.05rem; line-height: 1.15; }
  .demo__text span { display: block; max-height: 0; overflow: hidden; color: var(--gunmetal); font-size: .95rem; line-height: 1.45; transition: max-height .5s var(--ease-out), margin .5s var(--ease-out); }
  .demo__step.is-active .demo__text span { max-height: 6em; margin-top: 6px; }
  .demo__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; }
  .demo__bar i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
  .cs__spec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
  .cs__spec div { border-top: 1px solid var(--fog); padding-top: 12px; display: grid; gap: 6px; }
  .cs__spec .label { color: var(--gunmetal); }
  .cs__chapter { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding-block: 64px; border-top: 1px solid var(--fog); margin-top: 64px; }
  .cs__chapter h3 { font-family: var(--f-display); font-style: italic; font-weight: 850; text-transform: uppercase; font-size: clamp(1.25rem, 1.9vw, 2rem); font-variation-settings: "wdth" 110; line-height: 1; } /* capped so long single words (CHALLENGE) fit the column */
  .cs__chapter .label { color: var(--red); display: block; margin-bottom: 10px; }
  .cs__body { display: grid; gap: 18px; }
  .cs__body p { color: var(--gunmetal); }
  .cs__ph { aspect-ratio: 16 / 9; background: repeating-linear-gradient(-50deg, var(--fog) 0 1px, transparent 1px 14px), #e9e8e4; display: grid; place-items: center; color: var(--gunmetal); }
  .cs__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .cs__strip .cs__ph { aspect-ratio: 4 / 3; }
  /* flow boards: shown whole on the Figma-canvas grey, click to enlarge */
  .cs__shot-wrap { display: grid; gap: 10px; }
  .cs__shot { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; background: #1e1e1e; overflow: hidden; cursor: zoom-in; }
  .cs__shot img { position: absolute; top: 6%; left: 6%; width: 88%; height: 88%; object-fit: contain; transition: transform .6s var(--ease-out); }
  .cs__shot:hover img, .cs__shot:focus-visible img { transform: scale(1.04); }
  /* same angled bottom-right cut as the other case-study panels (scaled to keep the ~48° angle on a 4:3 box) */
  .cs__shot { clip-path: polygon(0 0, 100% 0, 100% 82%, 88% 100%, 0 100%); }
  .cs__shot:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--red-hot); }
  .cs__shot-wrap .label { color: var(--red-label); }
  /* spotlight: one screen zoomed in on its top half, edges dissolving into a blurred copy */
  .cs__spot { position: relative; aspect-ratio: 16 / 9; margin-top: 8px; overflow: hidden; background: #1e1e1e; clip-path: polygon(0 0, 100% 0, 100% 82%, 92% 100%, 0 100%); }
  /* black phone surround + Dynamic Island, drawn in CSS. Sizes use cqw (percent of the phone width). */
  .spot__phone {
    position: absolute; left: 50%; top: 8%; width: 44%; aspect-ratio: 100 / 209.7; transform: translateX(-50%);
    container-type: inline-size; border-radius: 14% / 6.676%; /* = screen radius + 3% surround; cqw would resolve against the viewport here */ background: #0a0a0a;
    box-shadow: 0 0 0 1px #2c2c2e, 0 30px 70px rgba(0, 0, 0, .55);
  }
  .spot__glass { position: absolute; inset: 0; padding: 3cqw; }
  .spot__screen { position: relative; height: 100%; overflow: hidden; border-radius: 11cqw; container-type: inline-size; background: #000; }
  .spot__screen img { display: block; width: 100%; height: auto; }
  .spot__island { position: absolute; top: 2.6cqw; left: 50%; width: 31cqw; height: 9.2cqw; transform: translateX(-50%); border-radius: 9cqw; background: #000; }
  /* row of full phones on the dark panel */
  .cs__phones { position: relative; aspect-ratio: 16 / 9; margin-top: 8px; display: flex; justify-content: center; align-items: flex-start; gap: 5%; padding-top: 4.5%; background: #1e1e1e; clip-path: polygon(0 0, 100% 0, 100% 82%, 92% 100%, 0 100%); }
  .cs__phones-item { width: 22%; margin: 0; display: grid; justify-items: center; gap: 12px; }
  .spot__phone--inline { position: relative; left: auto; top: auto; width: 100%; transform: none; box-shadow: 0 0 0 1px #2c2c2e, 0 18px 40px rgba(0, 0, 0, .5); }
  .cs__phones-item .label { color: var(--red-label); text-align: center; }
  .cs__phones-item .spot__phone { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
  .cs__phones-item:hover .spot__phone { transform: scale(1.04); box-shadow: 0 0 0 1px #3a3a3c, 0 26px 50px rgba(0, 0, 0, .6); }
  .spot__note { position: absolute; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); pointer-events: none; }
  .spot__note--right { flex-direction: row-reverse; }
  .spot__note .label { color: var(--red-label); white-space: nowrap; }
  .spot__note i { flex: 1; height: 1px; background: var(--red-label); opacity: .85; }
  .spot__note b { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red-label); box-shadow: 0 0 0 4px rgba(227, 54, 62, .25); }
  /* fanned screen composition: center screen largest and in front, the rest arch away */
  .cs__fan { position: relative; aspect-ratio: 16 / 9; margin-top: 8px; overflow: hidden; background: var(--carbon); clip-path: polygon(0 0, 100% 0, 100% 82%, 92% 100%, 0 100%); }
  .cs__fan-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .cs__fan-bg path { fill: var(--asphalt); }
  .cs__fan-row { position: absolute; inset: 14% 0 6%; display: flex; justify-content: center; align-items: center; }
  .cs__fan img {
    position: relative; height: 100%; width: auto; margin: 0 -1.6%;
    z-index: calc(10 - var(--d));
    transform: translateY(calc(var(--d) * var(--d) * 2.5%)) scale(calc(1 - var(--d) * .09));
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .5)) brightness(calc(1 - var(--d) * .1));
    transition: transform .6s var(--ease-out), filter .6s var(--ease-out);
  }
  .cs__fan img:hover { z-index: 20; transform: translateY(-3%) scale(1.04); filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .55)) brightness(1); }
  .cs__fan figcaption.label { position: absolute; left: 3%; top: 5%; display: flex; align-items: center; gap: 10px; color: var(--red-label); }
  .cs__note { padding: 14px 18px; border-left: 4px solid var(--red); background: #eae9e5; font-size: .9rem; }
  .cs__next { margin-top: 64px; }
}

/* ---------- UTILITIES ---------- */
@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* split text scaffolding */
  .w { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding: 0.1em 0.14em 0.06em 0.02em; margin: -0.1em -0.14em -0.06em -0.02em; }
  .c { display: inline-block; will-change: transform; }
  [data-split="words"] .w { overflow: visible; }
}

/* ---------- RESPONSIVE ---------- */
@layer sections {
  @media (max-width: 1023px) {
    .nav__links { display: none; }
    .nav__menu { display: inline-flex; align-items: center; }
    .nav__resume { display: none; }
    .facts { grid-template-columns: repeat(3, 1fr); }
    .s-approach__grid, .s-about__grid { grid-template-columns: 1fr; }
    .s-about__emblem { max-width: 520px; width: 80%; margin-inline: auto; aspect-ratio: 16 / 10; }

    /* horizontal sections become vertical stacks */
    .s-disc__track, .s-work__track { flex-direction: column; width: 100%; }
    .panel { width: 100%; height: auto; min-height: 360px; }
    .card { width: 100%; }
    .s-process__track { width: 100%; }
    .s-process__line, .s-process__marker { display: none; }
    .steps { grid-template-columns: 1fr 1fr; padding-top: 0; row-gap: 48px; }
    .step { opacity: 1; }
    .bento { grid-template-columns: repeat(2, 1fr); }
    .cs__chapter { grid-template-columns: 1fr; gap: 20px; }
    .cs__spec { grid-template-columns: repeat(2, 1fr); }
    .section-index { display: none; }
  }
  @media (max-width: 599px) {
    .s-hero__content { padding-bottom: calc(20svh + 18px); }
    .s-hero__title { font-size: clamp(2rem, 10.4vw, 6rem); }
    .s-contact__title { font-size: clamp(2.6rem, 14vw, 5rem); }
    .s-hero__sub { font-size: 1rem; }
    .facts { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
    .fact:last-child { grid-column: 1 / -1; }
    .steps { grid-template-columns: 1fr; }
    .bento { grid-auto-rows: 44vw; }
    .tile--wide { grid-column: span 2; }
    .card__media { aspect-ratio: 4 / 3; }
    .s-contact__ctas .btn { width: 100%; }
    .footer__top { margin-left: 0; }
    .cs__strip { grid-template-columns: 1fr; }
    .cs__demo { grid-template-columns: 1fr; }
    .cs__spot { aspect-ratio: 4 / 3; }
    .spot__phone { width: 60%; top: 7%; }
    .spot__note { display: none; }
    .cs__phones { aspect-ratio: auto; gap: 3%; padding: 6% 3% 9%; }
    .cs__phones-item { width: 30%; gap: 8px; }
    .cs__phones-item .label { font-size: 9px; }
    .cs__fan { aspect-ratio: 4 / 3; }
    .cs__fan-row { inset: 24% 0 4%; }
    .cs__fan img { margin: 0 -4%; }
    .cs__fan figcaption { font-size: 10px; right: 3%; }
    .lightbox { grid-template-columns: 1fr; padding-top: 90px; }
    .lightbox__nav { display: none; }
    .grain { opacity: .035; }
  }
}

/* ---------- MOTION: initial states only when JS is running ---------- */
@layer motion {
  .js .js-fade, .js .js-reveal { opacity: 0; }
  .js [data-split="chars"] .c { transform: translateY(110%); }

  @media (prefers-reduced-motion: reduce) {
    .js .js-fade, .js .js-reveal { opacity: 1; }
    .js [data-split] .c { transform: none; }
    .stripe--pulse, .dot { animation: none; }
    .grain { display: none; }
    .preloader { display: none; }
    *, *::before, *::after { transition-duration: .01ms !important; }
  }
}