/* Cristian Pineda — portfolio · shared styles
   Extracted from index.html. Tokens, nav, hero, work grid, case-study
   components (.cs-*), before/after slider, footer bar, password gate. */

    /* ============================================================
       DESIGN TOKENS
    ============================================================ */
    :root {
      --bg:           #FFFFFF;
      --bg-alt:       #F5F5F7;
      --bg-dark:      #0A0A0A;
      --text:         #1D1D1F;
      --text-sub:     #6E6E73;
      --text-inv:     #F5F5F7;
      --border:       rgba(0,0,0,0.08);
      --accent:       #228B22;
      --accent-glow:  rgba(99,102,241,0.12);
      --line:         rgba(0,0,0,0.13);   /* hero dashboard outlines */

      /* Hero element families (see assets/js/home.js) */
      --f-pd:  #228B22;   /* Product design         */
      --f-ai:  #5B5BD6;   /* Agentic AI design      */
      --f-sc:  #D97706;   /* Design systems in code */
      --f-rs:  #0891B2;   /* UX research            */
      --f-sd:  #BE123C;   /* Service design         */
      --f-ux:  #7E22CE;   /* Laws of UX             */

      --serif:        'Cormorant Garamond', Georgia, serif;
      --flex:         'Google Sans Flex', sans-serif;
      --sans:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

      --r-sm:   10px;
      --r-md:   18px;
      --r-lg:   28px;
      --r-xl:   40px;

      --shadow-md: 0 8px 40px rgba(0,0,0,0.10);
      --shadow-lg: 0 24px 64px rgba(0,0,0,0.14);
      --shadow-xl: 0 40px 120px rgba(0,0,0,0.18);

      --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    /* ============================================================
       PRESENTATION HEADER
    ============================================================ */
    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      padding: 18px 48px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
    }
    #nav.scrolled {
      background: rgba(255,255,255,0.82);
      backdrop-filter: blur(24px) saturate(1.8);
      -webkit-backdrop-filter: blur(24px) saturate(1.8);
      box-shadow: 0 1px 0 var(--border);
    }

    /* Brand logo on the left */
    .nav-brand { display: flex; align-items: center; text-decoration: none; }
    .nav-logo-img {
      height: 20px;
      width: auto;
      display: block;
      /* Keep it crisp at small sizes */
      image-rendering: -webkit-optimize-contrast;
    }

    /* Title wordmark on the right */
    .nav-wordmark {
      font-family: 'Google Sans Flex', sans-serif;
      font-variation-settings: 'wght' 500, 'opsz' 12;
      font-size: 13px;
      letter-spacing: 0.1px;
      color: var(--text-sub);
      white-space: nowrap;
    }

    /* ============================================================
       HERO — "The elements of the work"
       One-viewport dashboard: title band / case-study chips (left)
       / periodic table + family filters (centre) / inspector (right).
       Markup lives in index.html, data + behaviour in assets/js/home.js.
       Source prototype: _archive/prototypes/hero-periodic-table.html
    ============================================================ */
    #hero {
      height: 100vh; min-height: 640px;
      padding: 70px 48px 24px;   /* 48px = nav padding, so the frame's edges meet the logo and wordmark */
      position: relative; overflow: hidden;
    }
    /* Button reset, zero-specificity so the .el / .fam / .tab rules below still win */
    :where(#hero) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

    /* ── Ambient orbs (drift keyframes are shared with the gate) ── */
    .orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
    .orb-1 {
      width: 700px; height: 700px; top: -160px; right: -120px;
      background: radial-gradient(circle at center, rgba(91,91,214,0.09) 0%, transparent 65%);
      animation: drift1 14s ease-in-out infinite;
    }
    .orb-2 {
      width: 600px; height: 600px; bottom: -100px; left: -120px;
      background: radial-gradient(circle at center, rgba(217,119,6,0.07) 0%, transparent 65%);
      animation: drift2 18s ease-in-out infinite;
    }
    @keyframes drift1 {
      0%,100% { transform: translate(0,0) scale(1); }
      33%      { transform: translate(-24px, 40px) scale(1.05); }
      66%      { transform: translate(20px, -24px) scale(0.97); }
    }
    @keyframes drift2 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%      { transform: translate(40px, -32px) scale(1.08); }
    }

    /* ── The dashboard frame: 1px gaps over a line-coloured background = clean dividers ── */
    .dash {
      position: relative; z-index: 1;
      height: 100%;
      display: grid;
      grid-template-columns: clamp(236px, 17%, 300px) minmax(0, 1fr) clamp(330px, 23%, 400px);
      grid-template-rows: auto auto minmax(0, 1fr);
      grid-template-areas: "head head head" "tabs tabs tabs" "left center right";
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03);
      opacity: 0; transform: translateY(10px);
      animation: fadeUp 0.7s var(--ease) 0.1s forwards;
      /* the columns glide between views on the same curve as the band and the panels' contents (--glide) */
      transition: grid-template-columns var(--glide);
    }
    .dash { --glide: 0.45s cubic-bezier(0.2, 0.7, 0.15, 1); }
    .panel {
      background: rgba(255,255,255,0.82);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      min-height: 0; min-width: 0;
    }
    .panel-label {
      font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
      color: var(--text-sub);
    }

    /* ── Title band ── */
    .dash-head {
      grid-area: head;
      display: flex; align-items: center; gap: 36px;
      padding: 18px 26px;
      height: var(--band-h); overflow: hidden;
      transition: height var(--glide), padding var(--glide);
    }
    /* The title block has a fixed width on All elements so the divider after it sits in one place; the floor
       is set by the eyebrow, which must not wrap. (It once also set the case view's left column; that has its
       own width now, --case-col below, since the folded band has no divider to line up with.) */
    .dash { --title-col: clamp(340px, 24vw, 370px); }
    /* The case view's left column: the slide list, formula and family chips. Narrowed on 2026-09-21 from
       --title-col + 61px (≈431px) so the deck gets the room; long slide labels and the chips wrap. */
    .dash { --case-col: clamp(280px, 18.5vw, 316px); }
    /* The deck's sheet is the centre panel minus its padding, capped at --sheet-max on very wide screens. */
    .dash { --sheet-max: 1440px; }
    /* The band has a set height per view so it can animate between them: on All elements two title lines
       (eyebrow = 12px line + 8px margin) plus 36px padding; on a case tab it folds to one line, near the tab row. */
    .dash { --band-h: calc(56px + 2.04 * clamp(24px, 2vw, 30px)); }
    body[data-view="case"] .dash { --band-h: 48px; }
    .head-title {
      flex: 0 0 var(--title-col);
      display: flex; flex-direction: column; justify-content: center;
    }
    .hero-eyebrow {
      font-size: 10px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
      color: var(--accent); margin-bottom: 8px;
    }
    .hero-h1 {
      font-family: 'Google Sans Flex', sans-serif;
      font-variation-settings: 'wght' 700, 'opsz' 48;
      font-size: clamp(24px, 2vw, 30px);   /* sized so "The elements of the work." stays one line in the narrower title block */
      letter-spacing: -1px; line-height: 1.02;
      color: var(--text);
    }
    .hero-h1 .thin { font-variation-settings: 'wght' 300, 'opsz' 48; color: var(--text-sub); }
    /* On a case-study tab the band folds to one line: badge and years in the eyebrow, a rule, the title.
       The description is not up here; the deck puts it on the cover slide under the meta line (loadDeck in
       home.js), so the cover is the one large thing on screen. */
    body[data-view="case"] .dash-head { padding-top: 0; padding-bottom: 0; }
    body[data-view="case"] .head-title { flex: 0 1 auto; min-width: 0; flex-direction: row; align-items: center; gap: 16px; }
    body[data-view="case"] .hero-eyebrow { margin-bottom: 0; white-space: nowrap; }
    body[data-view="case"] .hero-h1 {
      min-width: 0;
      font-variation-settings: 'wght' 600, 'opsz' 20;
      font-size: 16px; letter-spacing: -0.3px; line-height: 1.2;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    body[data-view="case"] .hero-h1::before {
      content: ''; display: inline-block; width: 1px; height: 14px; margin-right: 16px; vertical-align: -2px;
      background: var(--line);
    }
    body[data-view="case"] .hero-sub { display: none; }
    .hero-eyebrow .c-soon { margin-left: 8px; vertical-align: 1px; }
    .hero-sub {
      flex: 1 1 auto;
      font-family: 'Google Sans Flex', sans-serif;
      font-variation-settings: 'wght' 400, 'opsz' 18;
      font-size: 13.5px; line-height: 1.45;
      color: var(--text-sub);
      max-width: 60ch;
      padding-left: 36px; border-left: 1px solid var(--line);
    }
    .table-status {
      flex: 0 0 auto; margin-left: auto;
      display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
      font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
      color: var(--text-sub); font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .table-status .live { display: inline-flex; align-items: center; gap: 8px; }
    .table-status .live::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
      box-shadow: 0 0 0 3px rgba(34,139,34,0.18);
      animation: pulseDot 1.2s ease-in-out infinite;
    }
    .table-status.done .live::before { animation: none; }
    @keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

    /* ── Left: context for the centre — families for the table, the compound's swatches for a case ── */
    .dash-left {
      grid-area: left;
      padding: 18px;
      display: flex; flex-direction: column; gap: 10px;
      overflow: hidden auto;   /* clipped sideways while its column glides */
    }
    .left-note { margin-top: auto; font-size: 11px; line-height: 1.45; color: var(--text-sub); }
    .c-soon { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-sub); padding: 2px 6px; border-radius: 999px; background: var(--bg-alt); white-space: nowrap; }

    /* families (elements view) — click one to focus the table on it */
    .fam-list { display: flex; flex-direction: column; gap: 8px; }
    .fam {
      --fc: var(--text-sub);
      display: flex; flex-direction: column; gap: 5px;
      width: 100%; padding: 11px 12px;
      border: 1px solid var(--border); border-radius: 12px; background: #fff;
      text-align: left;
      opacity: 0; transform: translateX(-8px);
    }
    .left-on .fam {
      opacity: 1; transform: none;
      transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
    }
    .left-on .fam:hover { transform: translateX(2px); box-shadow: var(--shadow-md); border-color: rgba(0,0,0,0.18); }
    /* after the entrance (body.settled), family hover follows the cursor too */
    .left-on.settled .fam { transition: transform 0.14s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.12s var(--ease-out), background 0.12s var(--ease-out), opacity 0.3s var(--ease); }
    .fam[aria-pressed="true"] { background: color-mix(in srgb, var(--fc) 9%, #fff); border-color: color-mix(in srgb, var(--fc) 50%, transparent); }
    .fam[data-f="pd"] { --fc: var(--f-pd); } .fam[data-f="ai"] { --fc: var(--f-ai); } .fam[data-f="sc"] { --fc: var(--f-sc); } .fam[data-f="rs"] { --fc: var(--f-rs); } .fam[data-f="sd"] { --fc: var(--f-sd); } .fam[data-f="ux"] { --fc: var(--f-ux); }
    .fam .f-top { display: flex; align-items: center; gap: 8px; }
    .fam .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc) 18%, transparent); flex: 0 0 auto; }
    .fam .f-name { font-size: 12.5px; font-weight: 600; letter-spacing: -0.1px; color: var(--text); }
    .fam .cnt { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-sub); font-variant-numeric: tabular-nums; }
    .fam .f-tag { font-size: 11px; line-height: 1.35; color: var(--text-sub); }

    /* ── Centre: the table on its dotted canvas, filters beneath ── */
    .dash-center {
      grid-area: center;
      display: grid; grid-template-rows: minmax(0, 1fr) auto;
      gap: 1px; background: var(--line);
      min-height: 0; min-width: 0;
    }
    .table-panel {
      transition: padding var(--glide);
      padding: 20px;
      display: flex; align-items: center; justify-content: center;
      min-height: 0;
      background-color: #FAFAFA;
      background-image: radial-gradient(rgba(0,0,0,0.12) 1px, transparent 1.4px);
      background-size: 22px 22px;
      background-position: 11px 11px;
      backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .ptable {
      display: grid;
      grid-template-columns: repeat(var(--cols, 10), var(--tile, 72px));   /* --cols is set by home.js from the data */
      grid-auto-rows: calc(var(--tile, 72px) * 1.06);
      gap: var(--gap, 8px);
    }
    .el {
      --fc: var(--text-sub);
      grid-column: var(--c); grid-row: var(--r);
      position: relative;
      border-radius: calc(var(--tile, 72px) * 0.14);
      border: 1px solid color-mix(in srgb, var(--fc) 26%, transparent);
      background: color-mix(in srgb, var(--fc) 7%, #fff);
      padding: calc(var(--tile, 72px) * 0.09) calc(var(--tile, 72px) * 0.1) calc(var(--tile, 72px) * 0.1);
      display: flex; flex-direction: column; justify-content: space-between;
      text-align: left; cursor: default; outline: none;
      opacity: 0;
      /* fly-in: each tile starts somewhere off in the frame (--fx/--fy/--fr set by home.js) */
      transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--fr, 0deg)) scale(0.6);
      transition: opacity 0.45s var(--ease), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
                  background 0.25s var(--ease), border-color 0.25s var(--ease),
                  box-shadow 0.25s var(--ease), filter 0.3s var(--ease);
    }
    .el.on { opacity: 1; transform: none; animation: landFlash 0.7s ease-out 0.85s 1; cursor: pointer; }
    .el[data-f="pd"] { --fc: var(--f-pd); }
    .el[data-f="ai"] { --fc: var(--f-ai); }
    .el[data-f="sc"] { --fc: var(--f-sc); }
    .el[data-f="rs"] { --fc: var(--f-rs); }
    .el[data-f="sd"] { --fc: var(--f-sd); }
    .el[data-f="ux"] { --fc: var(--f-ux); }
    .el-num { font-size: calc(var(--tile, 72px) * 0.115); font-weight: 700; color: var(--fc); letter-spacing: 0.2px; font-variant-numeric: tabular-nums; }
    .el-sym {
      font-family: 'Google Sans Flex', sans-serif;
      font-variation-settings: 'wght' 700, 'opsz' 48;
      font-size: calc(var(--tile, 72px) * 0.32);
      letter-spacing: calc(var(--tile, 72px) * -0.012); line-height: 1; color: var(--text);
      margin: 1px 0 2px;
    }
    .el-name {
      font-size: calc(var(--tile, 72px) * 0.13); font-weight: 500; color: var(--text-sub);
      letter-spacing: -0.15px; line-height: 1.12;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      hyphens: auto; -webkit-hyphens: auto;
    }
    .el.on:hover, .el.on:focus-visible, .el.on.active {
      transform: translateY(-3px) scale(1.03); animation: none;
      background: color-mix(in srgb, var(--fc) 15%, #fff);
      border-color: color-mix(in srgb, var(--fc) 55%, transparent);
      box-shadow: 0 10px 30px color-mix(in srgb, var(--fc) 18%, transparent);
      z-index: 2;
    }
    /* Once a tile has landed (home.js adds .settled a second after .on) its transitions shorten, so the hover lift
       follows the cursor instead of easing in on the fly-in curve: fast in, a touch slower out. */
    .el.on.settled {
      will-change: transform;
      transition-property: transform, background, border-color, box-shadow, opacity, filter;
      transition-duration: 0.18s, 0.15s, 0.15s, 0.2s, 0.25s, 0.25s;
      transition-timing-function: var(--ease-out);
    }
    .el.on.settled:hover, .el.on.settled:focus-visible { transition-duration: 0.06s, 0s, 0s, 0.1s, 0.25s, 0.25s; }   /* colour snaps, the lift takes a few frames */
    /* The hover starts at the edge of the gap, not at the tile's border: an invisible hit area reaches halfway to each
       neighbour, so moving from one tile to the next never crosses dead space. */
    #ptable .el::after { content: ''; position: absolute; inset: calc(var(--gap, 8px) / -2); }
    /* Filtering: dim everything not highlighted */
    .ptable.filtering .el.on:not(.hi) { opacity: 0.16; filter: saturate(0); transform: scale(0.96); animation: none; pointer-events: none; cursor: default; }
    .ptable.filtering .el.on.hi { box-shadow: 0 10px 30px color-mix(in srgb, var(--fc) 16%, transparent); }
    @keyframes landFlash {
      0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fc) 55%, transparent); }
      100% { box-shadow: 0 0 0 12px transparent; }
    }

    .foot-panel {
      padding: 12px 20px;
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
    }
    .foot-hint { font-size: 11px; color: var(--text-sub); white-space: nowrap; }
    .foot-hint kbd { font-family: inherit; font-size: 10px; font-weight: 600; padding: 1px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-alt); }

    /* ── Right: inspector ── */
    .dash-right {
      grid-area: right;
      padding: 18px 20px;
      display: flex; flex-direction: column; gap: 14px;
      overflow: hidden auto;   /* clipped sideways while its column glides; still scrolls on a short screen */
      transition: padding var(--glide), opacity 0.25s var(--ease), background-color var(--glide);
    }
    /* While the columns glide, the panels' contents keep their settled width (home.js measures --left-inner,
       --left-case-inner and --right-inner once each view has settled), so text does not re-wrap mid-motion. */
    .dash-right > * { width: var(--right-inner, auto); }
    .fam-list, .left-note { width: var(--left-inner, auto); }
    .outline { width: var(--left-case-inner, auto); }
    /* family brief — top of the right panel in the elements view */
    .fam-brief { --fc: var(--text-sub); display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
    .fam-brief[data-f="pd"] { --fc: var(--f-pd); } .fam-brief[data-f="ai"] { --fc: var(--f-ai); } .fam-brief[data-f="sc"] { --fc: var(--f-sc); } .fam-brief[data-f="rs"] { --fc: var(--f-rs); } .fam-brief[data-f="sd"] { --fc: var(--f-sd); } .fam-brief[data-f="ux"] { --fc: var(--f-ux); }
    .fb-kicker { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--fc); }
    .fb-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc) 18%, transparent); }
    .fb-kicker .muted { color: var(--text-sub); font-weight: 600; letter-spacing: 1px; }
    .fb-title { font-family: var(--flex); font-variation-settings: 'wght' 700, 'opsz' 24; font-size: 17px; letter-spacing: -0.4px; line-height: 1.15; color: var(--text); }
    .fb-text { font-size: 12.5px; line-height: 1.5; color: var(--text-sub); }
    .inspector {
      --fc: var(--text-sub);
      display: flex; flex-direction: column; gap: 10px;
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    }
    .inspector.on { opacity: 1; transform: translateY(0); }
    .inspector[data-f="pd"] { --fc: var(--f-pd); }
    .inspector[data-f="ai"] { --fc: var(--f-ai); }
    .inspector[data-f="sc"] { --fc: var(--f-sc); }
    .inspector[data-f="rs"] { --fc: var(--f-rs); }
    .inspector[data-f="sd"] { --fc: var(--f-sd); }
    .inspector[data-f="ux"] { --fc: var(--f-ux); }
    .insp-tile {
      width: 88px; height: 92px; border-radius: 13px;
      border: 1px solid color-mix(in srgb, var(--fc) 30%, transparent);
      background: color-mix(in srgb, var(--fc) 9%, #fff);
      padding: 8px 10px;
      display: flex; flex-direction: column; justify-content: space-between;
      transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
    }
    .insp-tile .el-num { font-size: 10px; }
    .insp-tile .el-sym { font-size: 30px; letter-spacing: -1px; }
    .insp-tile .el-name { font-size: 9.5px; }
    .insp-head { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--fc); margin-top: 4px; }
    .insp-head .sep { width: 1px; height: 10px; background: var(--line); }
    .insp-head .muted { color: var(--text-sub); }
    .insp-name {
      font-family: 'Google Sans Flex', sans-serif; font-variation-settings: 'wght' 700, 'opsz' 36;
      font-size: 24px; letter-spacing: -0.8px; line-height: 1.05; color: var(--text);
    }
    .insp-desc { font-size: 13.5px; line-height: 1.5; color: var(--text-sub); }
    .insp-seen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
    .insp-seen .lbl { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-sub); margin-right: 4px; }
    .insp-seen .tag { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text); }
    .insp-seen .tag.soon { background: transparent; border-style: dashed; color: var(--text-sub); }
    .insp-seen .none { font-size: 12px; color: var(--text-sub); }
    .inspector.empty .insp-tile .el-sym { color: var(--text-sub); opacity: 0.5; }

    /* ── Tabs row: All elements + one tab per case study (rendered by home.js) ── */
    .dash-tabs {
      grid-area: tabs;
      display: flex; align-items: center; gap: 4px;
      padding: 8px 18px;
      overflow-x: auto;
    }
    .dash-tabs .panel-label { margin-right: 10px; }
    .tab {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 14px; border-radius: 10px;
      font-size: 12.5px; font-weight: 600; letter-spacing: -0.1px; color: var(--text-sub);
      white-space: nowrap;
      transition: background 0.2s var(--ease), color 0.2s var(--ease);
    }
    .tab .t-num { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--text-sub); opacity: 0.7; font-variant-numeric: tabular-nums; }
    .tab .t-soon { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-sub); padding: 2px 6px; border-radius: 999px; background: var(--bg-alt); }
    .tab:hover { background: var(--bg-alt); color: var(--text); }
    .tab[aria-selected="true"] { background: var(--text); color: #fff; }
    .tab[aria-selected="true"] .t-num { color: rgba(255,255,255,0.6); }
    .tab[aria-selected="true"] .t-soon { background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.8); }

    /* ── View switching ──
       body[data-view]  elements | case      → which panels show
       attribute + class = (0,2,0), so these beat the panels' own display rules */
    body[data-view="elements"] .view-case { display: none; }
    body[data-view="case"] .view-elements { display: none; }
    /* View change (a tab, Esc, the deck rolling on): the panels' contents slide in along the tab row. home.js sets
       --swap-x on the body (positive = the new tab is to the right, so content arrives from the right). The panels
       are staggered a little (centre, then left, then right), and the right panel's contents wait until its
       column has mostly grown back, so the text is not wiped in behind a moving edge. */
    .swap { animation: swapX var(--glide) both; }
    @keyframes swapX { from { opacity: 0; transform: translateX(var(--swap-x, 0px)); } to { opacity: 1; transform: none; } }
    /* the old view leaves first: a short ease-in the other way, then the panels change and the new one glides in */
    .leave { animation: swapOut 0.16s cubic-bezier(0.4, 0, 1, 1) both; }
    @keyframes swapOut { to { opacity: 0; transform: translateX(calc(var(--swap-x, 0px) * -0.5)); } }
    .dash-center :is(.swap, .enter) { animation-delay: 0.05s; }
    .dash-left .swap { animation-delay: 0.1s; }
    .dash-right .swap { animation-delay: 0.22s; }
    /* the family brief changing under a hover keeps its small vertical settle */
    .swap-y { animation: swapY 0.3s var(--ease) both; }
    @keyframes swapY { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    /* ── Case view: the slide list left, the deck centre. The right column stays in the grid at 0 width (three
       tracks in both views, so the columns can glide); its padding goes with it and a -1px margin paints over
       the divider the empty track would leave. ── */
    body[data-view="case"] .dash { grid-template-columns: var(--case-col) minmax(0, 1fr) 0px; }
    body[data-view="case"] .dash-right { padding: 0; margin-left: -1px; opacity: 0; background-color: #FAFAFA; }   /* fades with its column; the 1px sliver matches the canvas beside it */

    /* the deck's sheet sits 16px inside the centre panel */
    body[data-view="case"] .table-panel { padding: 16px; }

    /* ── Tooltips: any [data-tip] shows its text above on hover / focus ── */
    [data-tip] { position: relative; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
      padding: 5px 9px; border-radius: 7px;
      background: var(--text); color: #fff;
      font-size: 11px; font-weight: 500; letter-spacing: 0; white-space: nowrap; text-transform: none;
      opacity: 0; pointer-events: none; z-index: 5;
      transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
    }
    [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* labels that already say what they do only get a tooltip once the rail hides their text */
    body:not(.rail) .toc button:not(.cover)[data-tip]::after, body:not(.rail) .outline-actions .act[data-tip]::after { display: none; }
    /* the cover row sits at the top of a scrolling panel, so its tooltip drops below the icon instead */
    body:not(.rail) .toc button.cover[data-tip]::after { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); transform: translateY(-4px); }
    body:not(.rail) .toc button.cover[data-tip]:hover::after, body:not(.rail) .toc button.cover[data-tip]:focus-visible::after { transform: translateY(0); }
    /* the cover row: its book icon fills in on hover */
    .toc button.cover svg { transition: fill 0.15s var(--ease), color 0.15s var(--ease); }
    .toc button.cover:hover svg, .toc button.cover:focus-visible svg { fill: currentColor; color: var(--text); }

    /* ── Rail: the left panel collapsed to numbers and icon buttons ── */
    body[data-view="case"].rail .dash { grid-template-columns: 72px minmax(0, 1fr) 0px; }
    /* each panel is its own stacking context (backdrop-filter), so the rail must sit above the centre panels for its tooltips to show */
    body.rail .dash-left { padding: 14px 12px; overflow: visible; z-index: 3; }
    body.rail .case-built, body.rail .case-fams, body.rail .outline > .panel-label,
    body.rail .toc button span:not(.n), body.rail .act > span { display: none; }
    body.rail .outline { gap: 8px; width: auto; }   /* not the settled full width (--left-case-inner): the rail is 72px */
    body.rail .toc { gap: 4px; }
    body.rail .toc button { justify-content: center; padding: 8px 0; }
    body.rail .toc button .n { flex: none; }
    body.rail .toc button.cover { padding-bottom: 10px; }
    body.rail .toc button.cover .n { display: none; }
    body.rail .toc button.cover svg { margin: 0; width: 16px; height: 16px; }
    body.rail .outline-actions { gap: 6px; }
    body.rail .act { justify-content: center; padding: 11px 0; }
    body.rail .act svg { width: 15px; height: 15px; }
    /* tooltips sit to the right of the rail instead of above */
    body.rail .dash-left [data-tip]::after { left: calc(100% + 10px); bottom: auto; top: 50%; transform: translateY(-50%) translateX(-4px); }
    body.rail .dash-left [data-tip]:hover::after, body.rail .dash-left [data-tip]:focus-visible::after { transform: translateY(-50%) translateX(0); }
    /* what the case was built from: the divider, then its formula, then the family chips */
    .case-built { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
    .case-built + .case-fams { margin-top: 0; padding-top: 0; border-top: 0; }
    .formula { display: flex; flex-wrap: wrap; gap: 3px; align-items: baseline; }
    .formula span { font-family: var(--flex); font-variation-settings: 'wght' 700, 'opsz' 14; font-size: 11.5px; letter-spacing: -0.2px; color: var(--fc); }
    .formula span[data-f="pd"] { --fc: var(--f-pd); } .formula span[data-f="ai"] { --fc: var(--f-ai); } .formula span[data-f="sc"] { --fc: var(--f-sc); } .formula span[data-f="rs"] { --fc: var(--f-rs); } .formula span[data-f="sd"] { --fc: var(--f-sd); } .formula span[data-f="ux"] { --fc: var(--f-ux); }
    .formula i { font-style: normal; color: rgba(0,0,0,0.22); font-size: 10px; }

    /* ── Case view · the deck: the real case-study page inside the centre panel, one slide at a time.
       The sheet fills the centre panel's inner box (capped at --sheet-max). A slide taller than the sheet
       scrolls inside it. Forward: the current slide turns away like a page and the next lies under it.
       Back: the earlier slide turns back over the current one. ── */
    .reader {
      position: relative; width: 100%; height: 100%; max-width: var(--sheet-max); margin: 0 auto;
      background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,0.10);
    }
    .reader.enter { animation: sheetIn 0.55s cubic-bezier(0.2, 0.7, 0.15, 1) both; }   /* the sheet arrives along the tab row too, a little further than the panels */
    @keyframes sheetIn { from { opacity: 0; transform: translateX(calc(var(--swap-x, 0px) * 1.5)) scale(0.99); } to { opacity: 1; transform: none; } }
    .deck-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    .deck { position: absolute; inset: 0; }
    .slide {
      position: absolute; inset: 0; display: none;
      overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
      background: #fff; transform-origin: left center; backface-visibility: hidden;
    }
    .slide.current { display: block; }
    .slide.under { z-index: 1; }
    .slide.turn { z-index: 2; pointer-events: none; animation: pageTurn 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
    .slide.turn-back { z-index: 2; animation: pageTurnBack 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    @keyframes pageTurn     { from { transform: perspective(1800px) rotateY(0deg); opacity: 1; } to { transform: perspective(1800px) rotateY(-82deg); opacity: 0; } }
    @keyframes pageTurnBack { from { transform: perspective(1800px) rotateY(-82deg); opacity: 0; } to { transform: perspective(1800px) rotateY(0deg); opacity: 1; } }
    /* tame the full-page case-study components inside the sheet; the content inside a slide is centred
       and capped so lines stay readable on wide screens */
    .reader .container { max-width: 1200px; padding: 0 56px; }
    .reader .cs-header { padding: 56px 0 48px; }
    .reader .cs-title { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -1.6px; }
    .reader .cs-sub { font-size: 13px; }
    /* the case description, which the title band no longer carries: on the cover under the meta line */
    .reader .cs-lede { margin-top: 22px; max-width: 60ch; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.72); }
    .reader .cs-watermark { font-size: 200px; right: 3%; letter-spacing: -5px; }
    .reader .cs-kpi-strip { padding-top: 36px; }
    .reader .cs-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 44px; }
    .reader .cs-kpi-card { padding: 22px 20px; }
    .reader .cs-kpi-stat { font-size: clamp(24px, 2.3vw, 32px); letter-spacing: -1px; }
    .reader .cs-kpi-label { font-size: 12px; }
    .reader .cs-body { padding: 36px 0 40px; }
    .reader .reveal { opacity: 1; transform: none; }     /* the page's scroll-reveal is bypassed inside the deck */
    .reader .cs-section-label:first-child { margin-top: 0; }   /* a slide starts at its label */
    /* full-bleed media reads fine on the scrolling page, but at near-full sheet width a 16:9 block alone
       can exceed the slide height; cap it in the deck only so a chapter with one media block still reads
       as a single slide instead of needing to scroll */
    .reader .cs-video-block { margin-bottom: 16px; }
    .reader .cs-figure, .reader .cs-figure-grid, .reader .cs-embed-wrap { margin-bottom: 16px; }   /* media stays full width; the page's gaps are trimmed a little */
    /* a chapter with two text blocks (a card plus a callout) can tip past the sheet on the page's own
       generous padding; trim it slightly in the deck only */
    .reader .cs-card, .reader .cs-callout { padding: 32px 34px; margin-bottom: 18px; }
    .reader .cs-grid, .reader .cs-grid-3 { margin-bottom: 16px; }
    /* a case with no page yet: a one-slide deck with its KPIs and its formula as tiles */
    .slide-soon .cs-section-label { margin-top: 0; }
    .slide-soon .cm-formula { display: grid; grid-template-columns: repeat(auto-fill, 64px); gap: 8px; padding-bottom: 56px; }
    .slide-soon .cm-formula .el { opacity: 1; transform: none; --tile: 64px; cursor: default; animation: none; }

    .outline { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
    .toc { display: flex; flex-direction: column; gap: 2px; overflow: auto; flex: 1 1 auto; min-height: 0; }
    /* the families this compound draws on, with how many of its elements come from each */
    .case-fams { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
    .case-fam {
      --fc: var(--text-sub);
      display: inline-flex; align-items: center; gap: 7px;
      padding: 6px 10px 6px 9px; border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--fc) 30%, transparent);
      background: color-mix(in srgb, var(--fc) 8%, #fff);
      font-size: 11.5px; font-weight: 600; letter-spacing: -0.1px; color: var(--text);
    }
    .case-fam .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc) 18%, transparent); }
    .case-fam .cnt { font-weight: 500; color: var(--text-sub); font-variant-numeric: tabular-nums; }
    .case-fam[data-f="pd"] { --fc: var(--f-pd); } .case-fam[data-f="ai"] { --fc: var(--f-ai); } .case-fam[data-f="sc"] { --fc: var(--f-sc); } .case-fam[data-f="rs"] { --fc: var(--f-rs); } .case-fam[data-f="sd"] { --fc: var(--f-sd); } .case-fam[data-f="ux"] { --fc: var(--f-ux); }
    .toc button {
      display: flex; align-items: baseline; gap: 10px;
      padding: 7px 10px; border-radius: 9px; text-align: left;
      font-size: 12.5px; font-weight: 500; color: var(--text-sub); line-height: 1.3;
      transition: background 0.2s var(--ease), color 0.2s var(--ease);
    }
    .toc button .n { font-size: 10px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; opacity: 0.6; flex: 0 0 18px; }
    .toc button:hover { background: var(--bg-alt); color: var(--text); }
    .toc button.active { background: color-mix(in srgb, var(--accent) 9%, #fff); color: var(--text); font-weight: 600; }
    .toc button.active .n { color: var(--accent); opacity: 1; }
    .toc button.cover { color: var(--text); font-weight: 600; margin-bottom: 4px; padding-bottom: 9px; border-bottom: 1px solid var(--line); border-radius: 9px 9px 0 0; }
    .toc button.cover svg { width: 13px; height: 13px; margin-left: auto; color: var(--text-sub); }
    .outline-actions { display: flex; flex-direction: column; gap: 6px; }
    .outline-actions .act {
      display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff;
      font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none;
      transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
    }
    .outline-actions .act:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
    .outline-actions .act.primary { background: var(--text); color: #fff; border-color: var(--text); }
    .outline-actions .act svg { width: 13px; height: 13px; flex: 0 0 auto; }
    .outline-actions .act .sub { font-weight: 500; color: var(--text-sub); font-size: 11px; }
    .outline-actions .act.primary .sub { color: rgba(255,255,255,0.65); }

    .progress { display: flex; align-items: center; gap: 14px; width: 100%; }
    .progress .bar { flex: 1; height: 4px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
    .progress .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 0.15s linear; }
    .progress .pct { font-size: 11px; font-weight: 600; color: var(--text-sub); font-variant-numeric: tabular-nums; }
    /* the slide buttons: labelled, and Next is the dark primary so it reads as the way forward */
    .progress .pnav {
      display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
      height: 30px; padding: 0 12px; border-radius: 9px;
      border: 1px solid var(--border); background: #fff; color: var(--text);
      font-size: 12px; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap;
      transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease);
    }
    .progress .pnav:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
    .progress .pnav.primary { background: var(--text); color: #fff; border-color: var(--text); padding-left: 14px; }
    .progress .pnav:disabled { opacity: 0.35; pointer-events: none; }
    .progress .pnav svg { width: 14px; height: 14px; flex: 0 0 auto; }
    @media (max-width: 640px) { .progress .pnav span { display: none; } .progress .pnav { padding: 0 8px; } }
    .progress .cur { font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }

    /* The filter strip must stay one row: drop the hint before the chips would wrap */
    @media (max-width: 1600px) { .foot-hint { display: none; } }

    /* Below 1181px the dashboard unstacks: title, table, filters, chips, inspector */
    @media (max-width: 1180px) {
      #hero { height: auto; min-height: 100vh; padding: 84px 24px 40px; }
      .dash { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "tabs" "center" "left" "right"; height: auto; }
      body[data-view="case"] .dash { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tabs" "center" "left"; }
      body[data-view="case"] .dash-right { display: none; }
      .dash, .dash-head, .dash-right, .table-panel { transition: none; }   /* stacked: no columns to glide */
      body[data-view="case"] .table-panel { height: 78vh; }
      .reader .container { padding: 0 20px; }
      .reader .cs-watermark { display: none; }
      .dash-head { flex-wrap: wrap; gap: 14px; height: auto; transition: none; }
      .hero-sub { padding-left: 0; border-left: 0; max-width: none; }
      /* the folded band stacks again: eyebrow over a wrapping title */
      body[data-view="case"] .dash-head { padding: 14px 18px; }
      body[data-view="case"] .head-title { flex-direction: column; align-items: flex-start; gap: 6px; }
      body[data-view="case"] .hero-h1 { white-space: normal; font-size: 20px; letter-spacing: -0.5px; }
      body[data-view="case"] .hero-h1::before { display: none; }
      .table-status { margin-left: 0; width: 100%; flex-direction: row; justify-content: space-between; }
      .table-panel { overflow-x: auto; justify-content: flex-start; }
      .ptable { --tile: 56px; --gap: 6px; }
      .fam-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
      .left-note { display: none; }
    }
    @media (max-width: 640px) {
      #hero { padding: 76px 12px 32px; }
      .dash { border-radius: 16px; }
      .dash-head, .dash-left, .dash-right, .table-panel, .foot-panel { padding: 14px; }
      .foot-hint { display: none; }
    }

    /* ============================================================
       SHARED ANIMATION UTILITIES
    ============================================================ */
    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      to { opacity: 1; }
    }

    /* Scroll-triggered reveal */
    .reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
    }
    .reveal.show { opacity: 1; transform: translateY(0); }
    .delay-1 { transition-delay: 0.10s; }
    .delay-2 { transition-delay: 0.20s; }
    .delay-3 { transition-delay: 0.30s; }
    .delay-4 { transition-delay: 0.45s; }

    /* ============================================================
       CONTAINER UTILITY
    ============================================================ */
    .container {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 48px;
    }

    /* ============================================================
       SECTION LABELS / HEADINGS
    ============================================================ */
    .section-eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }
    .section-heading {
      font-size: clamp(32px, 5vw, 54px);
      font-weight: 800;
      letter-spacing: -1.6px;
      line-height: 1.04;
      color: var(--text);
    }

    /* ============================================================
       WORK SECTION
    ============================================================ */
    #work {
      padding: 130px 0 80px;
    }
    /* Wider container just for the work section */
    #work .container {
      max-width: 1320px;
    }
    .work-header {
      margin-bottom: 72px;
    }

    /* Project card */
    .project-card {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 60px;
      align-items: stretch;      /* both columns share the same height */
      padding: 72px 0;
      border-top: 1px solid var(--border);
    }
    .project-card:last-child {
      border-bottom: 1px solid var(--border);
    }
    /* Reverse layout for alternating rhythm */
    .project-card.flip {
      grid-template-columns: 1fr 1.1fr;
    }
    .project-card.flip .project-video  { order: 2; }
    .project-card.flip .project-info   { order: 1; }

    /* Video — height driven by the sibling info column, not aspect-ratio */
    .project-video {
      position: relative;
      border-radius: var(--r-lg);
      overflow: hidden;
      min-height: 380px;         /* safety floor so it never collapses */
      background: var(--bg-alt);
      box-shadow: var(--shadow-xl);
      transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
    }
    .project-video:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow: 0 48px 120px rgba(0,0,0,0.18);
    }
    .project-video video,
    .project-video img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Static stills (e.g. Operative) get a slow drift so they don't sit
       dead next to the looping video cards. */
    .project-video img.project-still {
      object-position: 50% 45%;
      animation: project-still-drift 24s ease-in-out infinite alternate;
      will-change: transform;
    }
    @keyframes project-still-drift {
      from { transform: scale(1); }
      to   { transform: scale(1.08); }
    }
    @media (prefers-reduced-motion: reduce) {
      .project-video img.project-still { animation: none; }
    }

    /* Video placeholder (for Milkie) */
    .vid-placeholder {
      width: 100%; height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: linear-gradient(135deg, #F5F5F7 0%, #EBEBF0 100%);
      padding: 40px;
    }
    .vid-ph-icon {
      width: 52px; height: 52px;
      background: var(--accent-glow);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .vid-placeholder p {
      font-size: 13px; font-weight: 500;
      color: var(--text-sub);
    }

    /* Project info */
    .project-info { padding: 8px 0; }

    .project-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px;
    }
    .company-badge {
      display: inline-flex;
      align-items: center;
      padding: 6px 16px;
      background: var(--bg-alt);
      border: 1px solid var(--border);
      border-radius: 100px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.2px;
      color: var(--text);
    }
    .project-year {
      font-size: 13px;
      color: var(--text-sub);
    }

    .project-title {
      font-size: clamp(22px, 2.8vw, 30px);
      font-weight: 700;
      letter-spacing: -0.8px;
      line-height: 1.2;
      color: var(--text);
      margin-bottom: 16px;
    }
    .project-desc {
      font-size: 15px;
      line-height: 1.65;
      color: var(--text-sub);
      margin-bottom: 32px;
    }

    /* Impact grid */
    .impact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .impact-card {
      padding: 20px 22px;
      background: var(--bg-alt);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      transition: border-color 0.3s, transform 0.3s var(--ease);
    }
    .impact-card:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
    }
    .impact-card.span-2 { grid-column: 1 / -1; }
    .impact-stat {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.6px;
      color: var(--text);
      margin-bottom: 4px;
    }
    .impact-label {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-sub);
      line-height: 1.5;
    }

    /* ============================================================
       CASE STUDY SECTION
    ============================================================ */
    #case-study {
      margin-top: 120px;
    }

    /* Dark header band */
    .cs-header {
      background: var(--bg-dark);
      padding: 120px 0 100px;
      position: relative;
      overflow: hidden;
    }
    .cs-header .section-eyebrow { color: #228B22; }
    .cs-title {
      font-size: clamp(40px, 7vw, 80px);
      font-weight: 900;
      letter-spacing: -2.5px;
      line-height: 0.95;
      color: #FFFFFF;
      margin-bottom: 20px;
    }
    .cs-sub {
      font-size: 16px;
      color: rgba(255,255,255,0.36);
      font-weight: 400;
    }
    /* Giant watermark letters */
    .cs-watermark {
      position: absolute;
      right: 6%;
      top: 50%;
      transform: translateY(-50%);
      font-size: 28vw;
      font-weight: 900;
      letter-spacing: -8px;
      pointer-events: none;
      user-select: none;
      font-family: var(--sans);
      line-height: 1;
      background: linear-gradient(135deg, #0a0a0a 0%, #FF0802 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 0.9;
    }

    /* KPI strip — sits between dark header and case study body */
    .cs-kpi-strip {
      padding: 72px 0 0;
      background: var(--bg);
    }
    .cs-kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 64px;
    }
    .cs-kpi-card {
      padding: 32px 28px;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      background: var(--bg);
      transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
      position: relative;
      overflow: hidden;
    }
    .cs-kpi-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #FF0600, #AF2476);
      opacity: 0.7;
      border-radius: var(--r-lg) var(--r-lg) 0 0;
    }
    .cs-kpi-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
    }
    .cs-kpi-stat {
      font-family: 'Google Sans Flex', sans-serif;
      font-variation-settings: 'wght' 800, 'opsz' 48;
      font-size: clamp(28px, 3.2vw, 42px);
      letter-spacing: -1.5px;
      line-height: 1.2;
      padding-bottom: 2px;
      margin-bottom: 6px;
      background: linear-gradient(135deg, #FF0600 0%, #AF2476 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .cs-kpi-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.1px;
      margin-bottom: 6px;
    }
    .cs-kpi-sub {
      font-size: 12px;
      color: var(--text-sub);
      line-height: 1.5;
    }

    /* Highlight video placeholder */
    .cs-video-ph {
      border-radius: var(--r-xl);
      overflow: hidden;
      background: var(--bg-alt);
      border: 1px solid var(--border);
      aspect-ratio: 16 / 9;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 72px;
      transition: border-color 0.3s;
      position: relative;
    }
    .cs-video-ph video {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .cs-video-ph:hover { border-color: rgba(175,36,118,0.3); }
    .cs-video-ph-icon {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255,6,0,0.1), rgba(175,36,118,0.1));
      display: flex; align-items: center; justify-content: center;
    }
    .cs-video-ph p {
      font-size: 14px; font-weight: 500; color: var(--text-sub);
    }

    /* Body of case study */
    .cs-body {
      padding: 0 0 64px;
    }

    /* ── Before / After comparison slider ── */
    .ba-slider {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 16px;
      cursor: ew-resize;
      user-select: none;
      -webkit-user-select: none;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-xl);
      margin-bottom: 80px;
    }
    .ba-img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      pointer-events: none;
    }
    .ba-after-img { z-index: 0; }
    .ba-before-img {
      z-index: 1;
      clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
    }
    .ba-handle {
      position: absolute;
      top: 0; bottom: 0;
      left: var(--split, 50%);
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: none;
    }
    .ba-line {
      width: 2px;
      height: 100%;
      background: rgba(255,255,255,0.92);
      box-shadow: 0 0 8px rgba(0,0,0,0.28);
    }
    .ba-grip {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px; height: 40px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 14px rgba(0,0,0,0.22);
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: all;
      cursor: ew-resize;
    }
    /* Label zones — each clips to its own image region so labels slide under the handle */
    .ba-label-zone {
      position: absolute;
      top: 0; bottom: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 3;
    }
    .ba-label-zone-before {
      left: 0;
      width: var(--split, 50%);
    }
    .ba-label-zone-after {
      right: 0;
      width: calc(100% - var(--split, 50%));
    }
    .ba-label {
      position: absolute;
      top: 20px;
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: #fff;
      background: rgba(0,0,0,0.42);
      padding: 5px 12px;
      border-radius: 20px;
      pointer-events: none;
      backdrop-filter: blur(4px);
      white-space: nowrap;
    }
    .ba-label-before { left: 20px; }
    .ba-label-after  { right: 20px; }

    /* Constrained iframe embed — matches video card treatment */
    .cs-embed-wrap {
      width: 100%;
      aspect-ratio: 16 / 9;
      margin-bottom: 80px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-xl);
      border: 1px solid var(--border);
      position: relative;
    }
    .cs-kpi-strip .cs-embed-wrap { margin-bottom: 0; }   /* on the cover it sits where the slider did, flush to the body */

    /* A label on a media block saying what it is: a prototype the visitor can use, or a still they can't.
       Bottom-right, so it clears the prototype's own header; it ignores the pointer so the prototype stays live. */
    .cs-figure, .cs-video-block { position: relative; }
    .cs-media-badge {
      position: absolute; right: 14px; bottom: 14px; z-index: 2;
      display: inline-flex; align-items: center; gap: 7px;
      padding: 6px 11px; border-radius: 100px;
      font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
      color: #fff; background: rgba(29,29,31,0.80); backdrop-filter: blur(6px);
      pointer-events: none; white-space: nowrap;
    }
    .cs-media-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
    .cs-media-badge.still { color: var(--text); background: rgba(255,255,255,0.88); border: 1px solid var(--border); }
    .cs-media-badge.still::before { background: var(--text-sub); }
    /* iframe is rendered at native 1920×1080, then scaled to fit */
    .cs-embed-frame {
      position: absolute;
      top: 0; left: 0;
      width: 1920px;
      height: 1080px;
      border: none;
      transform-origin: top left;
    }

    /* Baseline "before" metrics */
    .cs-baseline-row {
      display: flex;
      gap: 12px;
      flex-wrap: nowrap;
      margin-top: 24px;
    }
    .cs-baseline-chip {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 16px 20px;
      background: rgba(255,59,48,0.05);
      border: 1px solid rgba(255,59,48,0.15);
      border-radius: var(--r-md);
    }
    /* a chip reporting a move in the right direction — outcomes, where the red baseline chips are the before */
    .cs-baseline-chip.up {
      background: color-mix(in srgb, var(--accent) 6%, #fff);
      border-color: color-mix(in srgb, var(--accent) 24%, #fff);
    }
    .cs-baseline-chip.up .cs-baseline-stat { color: var(--accent); }
    .cs-baseline-stat {
      font-family: 'Google Sans Flex', sans-serif;
      font-variation-settings: 'wght' 700, 'opsz' 32;
      font-size: 20px;
      letter-spacing: -0.5px;
      color: #FF3B30;
      line-height: 1;
    }
    .cs-baseline-label {
      font-size: 11px;
      color: var(--text-sub);
      margin-top: 5px;
    }

    /* Process steps — 4-up horizontal */
    .cs-process-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 80px;
    }
    .cs-process-step {
      padding: 28px 24px;
      background: var(--bg-alt);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
    }
    .cs-step-num {
      font-family: 'Google Sans Flex', sans-serif;
      font-variation-settings: 'wght' 800, 'opsz' 48;
      font-size: 32px;
      letter-spacing: -1px;
      color: rgba(0,0,0,0.08);
      line-height: 1;
      margin-bottom: 14px;
    }
    .cs-step-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
      letter-spacing: -0.1px;
    }
    .cs-step-desc {
      font-size: 12.5px;
      line-height: 1.6;
      color: var(--text-sub);
    }
    .cs-step-desc strong { color: var(--text); font-weight: 600; }

    /* Two-column layout: stacked cards left, reference image right */
    .cs-data-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: start;
    }
    .cs-data-cards {
      display: flex;
      flex-direction: column;
    }
    .cs-data-img-wrap {
      position: sticky;
      top: 100px;
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-xl);
    }
    .cs-data-img {
      width: 100%;
      height: auto;
      display: block;
    }
    @media (max-width: 860px) {
      .cs-data-grid { grid-template-columns: 1fr; }
      .cs-data-img-wrap { position: static; }
    }

    /* Callout highlight block */
    .cs-callout {
      padding: 44px;
      border-radius: var(--r-xl);
      background: var(--bg);
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
      margin-bottom: 24px;
      transition: box-shadow 0.4s var(--ease);
    }
    .cs-callout:hover { box-shadow: var(--shadow-md); }
    .cs-callout::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #FF0600, #AF2476);
    }
    .cs-callout-eye {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      background: linear-gradient(135deg, #FF0600, #AF2476);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 16px;
    }
    .cs-callout-title {
      font-size: clamp(18px, 2vw, 24px);
      font-weight: 700;
      letter-spacing: -0.5px;
      color: var(--text);
      margin-bottom: 16px;
      line-height: 1.25;
    }
    .cs-callout-text {
      font-size: 15px;
      line-height: 1.75;
      color: var(--text-sub);
    }
    .cs-callout-text strong { color: var(--text); font-weight: 600; }

    /* Section divider label within case study */
    .cs-section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--text-sub);
      margin-top: 72px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .cs-section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* Labeled video block */
    .cs-video-block {
      margin-bottom: 80px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-xl);
    }
    .cs-video-block video {
      display: block;
      width: 100%;
      height: auto;
    }

    /* Chip tags row */
    .cs-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 64px;
    }
    .cs-tag {
      padding: 7px 16px;
      background: var(--bg-alt);
      border: 1px solid var(--border);
      border-radius: 100px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-sub);
    }

    /* Two-col cards */
    .cs-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 32px;
    }
    .cs-card {
      padding: 44px;
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      background: var(--bg);
      transition: box-shadow 0.4s var(--ease);
    }
    .cs-card:hover { box-shadow: var(--shadow-md); }
    .cs-card-full { width: 100%; }
    .cs-card-eye {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
    }
    .cs-card-title {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.5px;
      line-height: 1.25;
      color: var(--text);
      margin-bottom: 16px;
    }
    .cs-card-text {
      font-size: 15px;
      line-height: 1.72;
      color: var(--text-sub);
    }
    .cs-card-text strong {
      color: var(--text);
      font-weight: 600;
    }

    /* Asset placeholder */
    .asset-ph {
      border: 2px dashed var(--border);
      border-radius: var(--r-xl);
      padding: 72px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 12px;
      background: var(--bg-alt);
      margin-bottom: 24px;
      transition: border-color 0.3s, background 0.3s;
    }
    .asset-ph:hover {
      border-color: rgba(99,102,241,0.3);
      background: rgba(99,102,241,0.03);
    }
    .asset-ph-icon {
      width: 52px; height: 52px;
      background: var(--accent-glow);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 4px;
    }
    .asset-ph-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
    }
    .asset-ph-desc {
      font-size: 13px;
      color: rgba(110,110,115,0.7);
      max-width: 320px;
    }

    .asset-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    /* ============================================================
       FOOTER — one bar, the same height as the nav: the nav's 18px
       vertical padding around a 20px line. Tagline left, email right,
       identical on every page. On the home page it sits right under
       the fold, below the one-viewport hero. (Replaced the full-screen
       closing poster on 2026-09-21.)
    ============================================================ */
    #closing {
      display: flex; align-items: center; justify-content: space-between; gap: 24px;
      padding: 17px 48px 18px;   /* 17 + the 1px border = the nav's 18, so both bars measure the same */
      background: var(--bg-alt);
      border-top: 1px solid var(--border);
    }
    .closing-headline {
      font-family: 'Google Sans Flex', sans-serif;
      font-variation-settings: 'wght' 700, 'opsz' 20;
      font-size: 15px; letter-spacing: -0.3px; line-height: 20px;
      color: var(--text); white-space: nowrap;
    }
    .closing-cta {
      font-family: 'Google Sans Flex', sans-serif;
      font-variation-settings: 'wght' 500, 'opsz' 12;
      font-size: 13px; letter-spacing: 0.1px; line-height: 20px;
      color: var(--text-sub); white-space: nowrap;
      text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--border);
      transition: color 0.3s, text-decoration-color 0.3s;
    }
    .closing-cta:hover { color: var(--text); text-decoration-color: var(--text-sub); }

/* ── Password gate ── */
    #gate {
      position: fixed; inset: 0; z-index: 9999;
      background: #0a0a0a;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      overflow: hidden;
    }
    /* Full-bleed background video */
    #gate-video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      pointer-events: none;
      z-index: 0;
    }
    /* Dark scrim over video */
    #gate-scrim {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.42);
      z-index: 1;
      pointer-events: none;
    }
    /* Ambient orbs on top of scrim */
    .gate-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 2;
    }
    .gate-orb-1 {
      width: 640px; height: 640px;
      background: radial-gradient(circle at center, rgba(34,139,34,0.13) 0%, transparent 65%);
      top: -180px; right: -100px;
      animation: drift1 14s ease-in-out infinite;
    }
    .gate-orb-2 {
      width: 560px; height: 560px;
      background: radial-gradient(circle at center, rgba(175,36,118,0.07) 0%, transparent 65%);
      bottom: -120px; left: -100px;
      animation: drift2 18s ease-in-out infinite;
    }
    .gate-inner {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }
    .gate-logo {
      height: 20px;
      width: auto;
      display: block;
      margin-bottom: 40px;
      filter: brightness(0) invert(1);
      opacity: 0.9;
    }
    .gate-heading {
      font-family: 'Google Sans Flex', sans-serif;
      font-variation-settings: 'wght' 700, 'opsz' 48;
      font-size: clamp(32px, 5vw, 52px);
      letter-spacing: -1.5px;
      line-height: 1.1;
      color: #ffffff;
      text-align: center;
      margin-bottom: 10px;
    }
    .gate-sub {
      font-size: 14px;
      color: rgba(255,255,255,0.55);
      margin-bottom: 40px;
      letter-spacing: 0.1px;
    }
    .gate-form {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 380px;
    }
    .gate-input {
      flex: 1;
      padding: 13px 18px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.08);
      color: #ffffff;
      font-size: 14px;
      font-family: 'Inter', -apple-system, sans-serif;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
      letter-spacing: 0.3px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .gate-input::placeholder { color: rgba(255,255,255,0.35); }
    .gate-input:focus {
      border-color: #228B22;
      box-shadow: 0 0 0 3px rgba(34,139,34,0.25);
      background: rgba(255,255,255,0.13);
    }
    .gate-btn {
      padding: 13px 22px;
      border-radius: 12px;
      border: none;
      background: #228B22;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Inter', -apple-system, sans-serif;
      cursor: pointer;
      letter-spacing: 0.1px;
      transition: opacity 0.2s, transform 0.2s;
      white-space: nowrap;
    }
    .gate-btn:hover { opacity: 0.88; transform: translateY(-1px); }
    .gate-btn:active { transform: translateY(0); }
    .gate-error {
      font-size: 12px;
      color: #FF6B6B;
      margin-top: 14px;
      opacity: 0;
      transition: opacity 0.3s;
      letter-spacing: 0.1px;
    }
    #gate-playpause {
      position: absolute;
      bottom: 24px;
      right: 24px;
      z-index: 4;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.25);
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s;
    }
    #gate-playpause:hover {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.4);
    }

/* ============================================================
   MULTI-PAGE ADDITIONS
============================================================ */

/* Case-study pages: header sits flush under the fixed nav */
.cs-page #case-study { margin-top: 0; }

/* Nav over a dark hero (case-study pages) — invert until scrolled */
.nav-dark #nav:not(.scrolled) .nav-logo-img { filter: invert(1); }
.nav-dark #nav:not(.scrolled) .nav-wordmark,
.nav-dark #nav:not(.scrolled) .nav-back { color: rgba(255,255,255,0.62); }
.nav-dark #nav:not(.scrolled) .nav-back:hover { color: #FFFFFF; }

.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-back {
  font-family: 'Google Sans Flex', sans-serif;
  font-variation-settings: 'wght' 500, 'opsz' 12;
  font-size: 13px;
  color: var(--text-sub);
  text-decoration: none;
  transition: color 0.3s;
  white-space: nowrap;
}
.nav-back:hover { color: var(--text); }

/* Work grid: cards link out to their case study */
.project-title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s var(--ease);
}
.project-card:hover .project-title a { background-size: 100% 2px; }
.project-video a { position: absolute; inset: 0; display: block; }
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--text);
  text-decoration: none;
  transition: gap 0.3s var(--ease), color 0.3s;
}
.project-link:hover { gap: 14px; color: var(--accent); }
.project-link svg { width: 16px; height: 16px; }

/* Next-case-study footer strip on case-study pages */
.cs-next {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 72px 0;
}
.cs-next-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.cs-next-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-bottom: 10px;
}
.cs-next-title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
  text-decoration: none;
  line-height: 1.15;
}
.cs-next-title:hover { color: var(--accent); }
@media (max-width: 720px) {
  /* On small screens keep the back link, drop the wordmark */
  .nav-wordmark { display: none; }
}

/* ============================================================
   CASE-STUDY CONTENT BLOCKS — Kaiser / Loopnubo / Milkie
   Extends the .cs-* system used by the Operative page.
============================================================ */

/* Role / Team / Timeline strip */
.cs-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 64px;
}
.cs-meta {
  padding: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.cs-meta-eye {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-bottom: 10px;
}
.cs-meta-val { font-size: 14px; line-height: 1.6; color: var(--text); font-weight: 500; }
.cs-meta-val span { display: block; color: var(--text-sub); font-size: 13px; font-weight: 400; }

/* Figures */
.cs-figure {
  margin: 0 0 24px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  box-shadow: var(--shadow-md);
}
.cs-figure img { display: block; width: 100%; height: auto; }
.cs-figure figcaption {
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-sub);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.cs-figure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
  align-items: start;
}
.cs-figure-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cs-figure-grid .cs-figure { margin: 0; }

/* Persona portraits — tall 344×650 cards */
.cs-persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.cs-persona-grid img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

/* Vimeo embed — 16:9 */
.cs-vimeo {
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-xl);
  margin-bottom: 24px;
}
.cs-vimeo-label {
  padding: 8px 14px;
  background: rgba(0,0,0,0.06);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-sub);
  background: var(--bg);
}
.cs-vimeo-frame { position: relative; aspect-ratio: 16 / 9; }
.cs-vimeo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Bulleted list inside cards */
.cs-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-sub);
}
.cs-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF0600, #AF2476);
}
.cs-list li strong { color: var(--text); font-weight: 600; }

/* Participant quotes */
.cs-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.cs-quote {
  margin: 0;
  padding: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.cs-quote cite {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-sub);
}

/* "How might we" statement — dark band */
.cs-hmw {
  padding: 56px 48px;
  border-radius: var(--r-xl);
  background: var(--bg-dark);
  color: #FFFFFF;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.cs-hmw::after {
  content: '';
  position: absolute;
  right: -10%; top: -40%;
  width: 50%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,6,0,0.35), transparent 70%);
  pointer-events: none;
}
.cs-hmw-eye {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #228B22;
  margin-bottom: 18px;
}
.cs-hmw p {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.3;
  max-width: 900px;
  position: relative;
}

/* Three-up cards */
.cs-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}
.cs-grid-3 .cs-card { padding: 32px; }
.cs-grid-3 .cs-card-title { font-size: 19px; }

/* Big gradient number inside a card */
.cs-stat-inline {
  font-family: 'Google Sans Flex', sans-serif;
  font-variation-settings: 'wght' 800, 'opsz' 48;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -1.5px;
  line-height: 1.15;
  padding-bottom: 2px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #FF0600 0%, #AF2476 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pill link (e.g. "Open Figma prototype") */
.cs-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 20px;
  border-radius: 100px;
  background: var(--text);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s var(--ease);
}
.cs-link-btn:hover { background: var(--accent); transform: translateY(-2px); }
.cs-link-btn svg { width: 14px; height: 14px; }

/* Stacked spacing helper for consecutive full-width cards */
.cs-stack > * + * { margin-top: 16px; }
.cs-stack { margin-bottom: 24px; }

@media (max-width: 860px) {
  .cs-meta-grid, .cs-quotes, .cs-grid-3, .cs-figure-grid.cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .cs-meta-grid, .cs-quotes, .cs-grid-3, .cs-figure-grid,
  .cs-figure-grid.cols-3, .cs-persona-grid { grid-template-columns: 1fr; }
  .cs-hmw { padding: 36px 24px; }
  .cs-grid { grid-template-columns: 1fr; }
}

/* Case-study hero: keep the title above the watermark letters, and give
   long two-line titles a slightly smaller ceiling so they clear it. */
.cs-header .container { position: relative; z-index: 1; }
.cs-title.long { font-size: clamp(36px, 5.8vw, 66px); letter-spacing: -2px; }

/* ============================================================
   RESPONSIVE — site-wide
   The original single-page build had no tablet/phone rules.
============================================================ */
@media (max-width: 960px) {
  .cs-kpi-grid       { grid-template-columns: 1fr 1fr; }
  .cs-process-steps  { grid-template-columns: 1fr 1fr; }
  .project-card,
  .project-card.flip { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .project-card.flip .project-video { order: 1; }
  .project-card.flip .project-info  { order: 2; }
  .project-video     { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  #nav               { padding: 14px 20px; }
  #closing           { padding: 13px 20px 14px; flex-wrap: wrap; row-gap: 4px; }   /* the two items no longer share a line on a phone */
  .closing-headline  { font-size: 14px; }
  .container         { padding: 0 20px; }
  #hero              { padding: 120px 20px 80px; }

  .cs-header         { padding: 110px 0 64px; }
  .cs-title          { font-size: clamp(34px, 11vw, 48px); letter-spacing: -1.5px; }
  .cs-title.long     { font-size: clamp(30px, 9.5vw, 42px); }
  .cs-watermark      { font-size: 44vw; right: -4%; opacity: 0.55; }

  .cs-kpi-grid       { grid-template-columns: 1fr; gap: 12px; margin-bottom: 40px; }
  .cs-kpi-card       { padding: 24px 22px; }
  .cs-process-steps  { grid-template-columns: 1fr; }
  .cs-card,
  .cs-callout        { padding: 28px 22px; }
  .cs-grid-3 .cs-card{ padding: 24px 20px; }
  .cs-baseline-row   { flex-wrap: wrap; }
  .cs-baseline-chip  { flex: 1 1 45%; }
  .cs-section-label  { margin-top: 48px; }
  .cs-next-inner     { flex-direction: column; align-items: flex-start; }

  .impact-grid       { grid-template-columns: 1fr; }
  .work-header       { margin-bottom: 40px; }
}