/* Tokens — every value from Figma nHckoOcHlCoBi96aiPI7DO (see design/notes/homepage-audit.md). */

/* v4.3 (owner 2026-10-14): size-matched fallbacks (from the fonts' own metrics, tools: fontTools widths of a sample line), so text set
   before the web fonts arrive takes the same space and nothing reflows when they swap in */
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 103.07%; ascent-override: 92.17%; descent-override: 24.26%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF; }   /* Latin only: glyphs the web subset lacks (e.g. U+2212) still fall through as before */
@font-face { font-family: "Glegoo Fallback"; src: local("Georgia"); size-adjust: 115.35%; ascent-override: 109.84%; descent-override: 45.60%; line-gap-override: 0%; unicode-range: U+0020-007E, U+00A0-00FF; }
@font-face { font-family: "Figtree"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/Figtree-Light.b512b0c2.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Figtree-Regular-v2.632dd309.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Figtree-Medium.4df7f537.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Figtree-SemiBold.e1e24bf5.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: italic; font-display: swap; src: url("../fonts/Figtree-SemiBoldItalic.7103c24a.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: italic; font-display: swap; src: url("../fonts/Figtree-BoldItalic.3e2856fb.woff2") format("woff2"); }
@font-face { font-family: "Glegoo"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Glegoo-Regular.600a080a.woff2") format("woff2"); }
@font-face { font-family: "Glegoo"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Glegoo-Bold.2e91b0a7.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Figtree-Bold.526dc24f.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/Figtree-Italic.2be364a6.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 800; font-style: italic; font-display: swap; src: url("../fonts/Figtree-ExtraBoldItalic.48800bcd.woff2") format("woff2"); }   /* Yellow Stamp hero headline (2026-10-10) */
@font-face { font-family: "Figtree"; font-weight: 900; font-style: italic; font-display: swap; src: url("../fonts/Figtree-BlackItalic.5639e5e9.woff2") format("woff2"); }   /* Playground panel titles (2026-10-11) */
@font-face { font-family: "PP Editorial Old"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/PPEditorialOld-Regular.055ea9dc.woff2") format("woff2"); }
@font-face { font-family: "PP Editorial Old"; font-weight: 800; font-style: italic; font-display: swap; src: url("../fonts/PPEditorialOld-UltraboldItalic.e115d433.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Inter-Regular.664ff4b8.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Inter-Medium.35e4f517.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Inter-SemiBold.e9434386.woff2") format("woff2"); }
@font-face { font-family: "PP Editorial Old"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/PPEditorialOld-Italic.2b74782d.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/NotoSansArabic-Regular.e45b5932.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/NotoSansArabic-Bold.b2f49bb6.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Inter-Bold.74aef1c1.woff2") format("woff2"); }
@font-face { font-family: "Neue Montreal"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/NeueMontreal-Regular.5629b5d9.woff2") format("woff2"); }   /* Pangram Pangram free personal-use files (owner's decision) */
@font-face { font-family: "Neue Montreal"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/NeueMontreal-Bold.58d2b282.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Roboto-Bold.d18dc847.woff2") format("woff2"); }   /* MTA pain-point notes */

:root {
  /* === COLOURS === */
  --c-bg: #080809;
  --c-white: #FFFFFF;
  --c-grey-e6e9f3: #E6E9F3;
  --c-grey-e2e2e3: #E2E2E3;
  --c-grey-dddeea: #DDDEEA;
  --c-grey-fafbff: #FAFBFF;
  --c-grey-bcbcbc: #BCBCBC;
  --c-grey-afafaf: #AFAFAF;
  --c-grey-8e8e8e: #8E8E8E;
  --c-grey-737373: #737373;
  --c-grey-787878: #787878;     /* #737373 text lifted to 4.5:1 on #080809 (owner-approved, B3) */
  --c-grey-5c5c5c: #5C5C5C;
  --c-grey-4b4c4d: #4B4C4D;
  --c-grey-464646: #464646;
  --c-grey-2c2c2d: #2C2C2D;
  --c-grey-272729: #272729;
  --c-grey-232324: #232324;
  --c-grey-1e1e1e: #1E1E1E;
  --c-grey-1b1b1c: #1B1B1C;
  --c-grey-1a1a1b: #1A1A1B;
  --c-grey-19191a: #19191A;
  --c-blue: #128CF7;
  --c-verdance-bg: #350B24;
  --c-verdance-fg: #C35697;
  --c-verdance-fg-on-card: #C65D9B;   /* #C35697 lifted to 4.5:1 on the #1A1A1A cards, text only (owner-approved, B4) */
  --c-black-50: rgba(0, 0, 0, 0.5);
  --c-black-70: rgba(0, 0, 0, 0.7);
  --c-shade-80: rgba(27, 27, 27, 0.8);   /* #1B1B1B @80% */
  --c-shade-20: rgba(27, 27, 27, 0.2);   /* #1B1B1B @20% */
  --c-shade-solid: #1B1B1B;

  /* Gradients (converted from Figma gradient transforms) */
  --g-title-bar: radial-gradient(682.3px 24.6px at 625px 23.7px, rgba(65, 62, 100, 0) 0%, rgba(17, 17, 17, 0.2) 100%),
                 linear-gradient(91.9deg, rgba(4, 4, 4, 0.1) -6.9%, rgba(0, 0, 0, 0) 116%);
  --g-article-bar: radial-gradient(349.3px 21.8px at 320px 21.1px, rgba(65, 62, 100, 0) 0%, rgba(17, 17, 17, 0.2) 100%),
                   linear-gradient(93.4deg, rgba(4, 4, 4, 0.1) -6.9%, rgba(0, 0, 0, 0) 116%);
  --g-article-bar-hover: radial-gradient(349.3px 21.8px at 320px 21.1px, rgba(65, 62, 100, 0) 0%, rgba(22, 22, 22, 0.2) 100%),
                         linear-gradient(93.4deg, rgba(4, 4, 4, 0.1) -6.9%, rgba(0, 0, 0, 0) 116%);
  --g-social: linear-gradient(141.2deg, var(--c-grey-5c5c5c) -68.2%, var(--c-grey-19191a) 125.6%);
  /* Not in Figma: social hover = each stop one grey step lighter (approved decision) */
  --g-social-hover: linear-gradient(141.2deg, var(--c-grey-737373) -68.2%, var(--c-grey-232324) 125.6%);


  /* === TYPOGRAPHY === */
  --font-figtree: "Figtree", "Figtree Fallback", sans-serif;   /* v4.3: a size-matched local fallback while the web font loads */
  --font-glegoo: "Glegoo", "Glegoo Fallback", serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fs-8: 8px;
  --fs-10: 10px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-24: 24px;
  --fs-82: 82px;
  --fs-138: 138px;
  --lh-auto: normal;          /* Figma "Auto" */
  --lh-hero: 135.8%;
  --lh-review: 150%;
  --lh-scroll: 201.8%;
  --ls-0: 0;
  --ls-scroll: 0.18em;        /* 18% */
  --ls-reviews: -0.03em;      /* -3% */
  --hero-para-gap: 11px;      /* Figma paragraph spacing */

  /* === SPACING === */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-5: 5px;
  --sp-6: 6px;
  --sp-7: 7px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-37: 37px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-57: 57px;
  --sp-70: 70px;
  --sp-78: 78px;
  --sp-80: 80px;
  --sp-160: 160px;

  /* === RADII === */
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;
  --r-media: 16px;                    /* default corner for content images, mockups, video frames */

  /* === BORDERS === */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-1-2: 1.2px;

  /* === LAYOUT (1440 design) === */
  --page-w: 1440px;
  --page-margin: 40px;
  --content-w: 1360px;
  --hero-h: 1024px;
  --nav-h: 85px;
  --title-block-h: 203px;
  --logo-size: 40px;
  --logo-art-size: 42px;
  --logo-art-offset: -1px;
  /* Brand (owner 2026-10-10): laser yellow, only for the "UR." dot, favicon dot, nav current-page dot, focus ring,
     selection (+ link arrows / hover later). Text on yellow is always --c-on-brand. Never body text or large areas,
     never inside case studies (they keep their own palettes). Sources: design/brand/ */
  --c-brand: #FFF000;
  --c-on-brand: #080809;
  --logo-mark-w: calc(var(--logo-art-size) * 140.11 / 65.78);   /* ur-mark.svg at the old logo's height (viewBox 140.11 x 65.78) */
  --focus-offset: 3px;
  /* Yellow Stamp hero (homepage, owner 2026-10-10; reference design/hero/hero-yellow-stamp-v20.html) */
  --c-brand-paper: #F2F0EC;           /* the seal / "UR." white (as ur-mark.svg) */
  --nav-seal: 72px;                   /* nav logo = the full UR. seal (reference: 72 px desktop / 56 px phone) */
  --nav-seal-phone: 56px;
  /* Brand sweep (homepage + About + 404, owner 2026-10-10; reference design/brand/brand-sweep-v4.html, Branded) */
  --bs-star-fs: 0.7em;                 /* section-tag separator ✦ */
  --bs-fill-w: 2px;                    /* timeline fill */
  --bs-ring: 2px;                      /* current year icon ring */
  --bs-underline: 2px;
  --bs-dur-line: 0.3s;                 /* underline draw-in */
  --bs-dur-pill: 0.25s;
  --bs-pill-pad: 14px 18px;
  --bs-pill-fs: 14px;
  --bs-q-w: 38px;                      /* review quote mark (svg 42 x 28) */
  --bs-q-h: 25px;
  --bs-avatar-ring: 0 0 0 2px var(--c-bg), 0 0 0 3px var(--c-brand);
  --bs-foot-pad: clamp(56px, 8vw, 110px) var(--page-margin) 34px;
  --bs-kicker-fs: 12px;
  --bs-kicker-ls: 0.2em;
  --bs-social: 52px;
  --bs-social-icon: 22px;
  --bs-foot-gap: clamp(60px, 9vw, 120px);
  --bs-foot-line: rgba(8, 8, 9, 0.25);
  --bs-foot-fs: 13px;
  /* footer seal (owner 2026-10-10): fully visible, right edge on the content edge; size = min(424, area above the
     divider - 64, the width left after the heading's minimum + 48 px gap). cqw = the footer content width (.fb-top) */
  --bs-seal-max: 424px;
  --bs-seal-head-gap: 48px;            /* heading right edge -> seal left edge, at least */
  --bs-title-min: 55cqw;               /* the heading keeps at least this width; the seal shrinks first */
  --bs-seal-fit: min(var(--bs-seal-max), calc(100cqw - var(--bs-title-min) - var(--bs-seal-head-gap)));
  --bs-seal-phone: 160px;              /* phone: below the heading, full opacity */
  --bs-foot-top: clamp(56px, 8vw, 110px);   /* footer top padding (now on the upper area) */
  --bs-seal-gap: 32px;
  --ab-photo-ring: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-brand);   /* About photo: 3 px page gap + 2 px yellow */
  --ab-now-halo: 0 0 0 4px rgba(255, 240, 0, 0.18);
  --ab-dot-on-w: 22px;                 /* carousel: active dot = yellow pill 22 x 8 */
  --ab-dot-on-h: 8px;                 /* seal: at least this far from the divider (and the footer top) */
  /* Task B (owner 2026-10-10): Figma Community stat icons */
  --c-heart: #FF3B4A;
  /* case-study frame brand (owner 2026-10-10) */
  --cs-seal: 50px;                    /* the small white UR. seal in the top bar */
  --cs-progress-h: 3px;               /* reading-progress line */
  --z-progress: 11;                   /* above the top bar (--z-nav 10) */
  --bs-title-fs: clamp(40px, min(5.2vw, calc(var(--page-w) * 0.052)), 88px);   /* closing heading: fluid; stops growing with the 1440 content width (3 lines on desktop) */
  --bs-title-lh: 0.98;
  --bs-title-max: calc(100cqw - var(--bs-seal-fit) - var(--bs-seal-head-gap));   /* never closer than 48 px to the seal */
  --bs-go-ring: rgba(255, 255, 255, 0.4);
  --fw-extrabold: 800;
  --z-hero-seal: 15;                  /* white seal: above the nav, under the yellow */
  --z-hero: 20;                       /* yellow layer */
  --yh-copy-gap: clamp(26px, 4.2vh, 44px);
  --yh-copy-gap-phone: clamp(18px, 3vh, 32px);
  --yh-tags-gap: 14px 26px;
  --yh-tags-gap-phone: 12px 18px;
  --yh-role-fs: clamp(14px, 1.1vw, 17px);
  --yh-role-fs-phone: 13px;
  --yh-role-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55);
  --yh-dot-ring: 0 0 0 3px rgba(255, 240, 0, 0.18);
  --yh-skills-fs: clamp(11px, 0.85vw, 13px);
  --yh-skills-fs-phone: 10.5px;
  --yh-skills-ls: 0.16em;
  --yh-skills-ls-phone: 0.12em;
  --yh-skills-cgap: 14px;              /* space either side of a ✦ (and of the Design → Code arrow) */
  --yh-skills-cgap-phone: 10px;
  --yh-skills-gap: 10px var(--yh-skills-cgap);
  --yh-skills-gap-phone: 6px var(--yh-skills-cgap-phone);
  --yh-hl-fs: clamp(44px, min(6.4vw, 11vh), 128px);   /* start value; the script fits one size to the free space */
  --yh-hl-fs-phone: clamp(38px, 11vw, 60px);
  --yh-hl-lh: 0.94;
  --yh-hl-ls: -0.035em;
  --yh-word-gap: 0.13em;
  --yh-overhang: 0.12em;               /* italic d / f / l / t never cut */
  --yh-skip-fs: 13px;
  --yh-skip-line: rgba(0, 0, 0, 0.35);
  --yh-cue-fs: 12px;
  --yh-cue-ls: 0.18em;
  --yh-bottom: 26px;                  /* skip link / cue from the bottom */
  --yh-copy-bottom-phone: 84px;
  --yh-menu-line: rgba(0, 0, 0, 0.25);
  --nav-w-1: 39px;
  --nav-w-2: 72px;
  --nav-w-3: 61px;
  --nav-w-4: 59px;

  --hero-text-x: 80px;
  --hero-text-y: 205px;
  --hero-text-w: 1280px;
  --cue-x: 702px;
  --cue-y: 944px;
  --cue-w: 37px;
  --cue-label-h: 16px;
  --icon-24: 24px;
  --icon-40: 40px;
  --icon-48: 48px;

  --tl-col-w: 51px;
  --tl-col-h: 2273px;                 /* Figma 1322:20835 with five entries (2026-10-08) */
  --tl-text-h: 18px;
  --tl-line-a: 366px;                 /* lengths that put each entry at Figma's top (0 / 546 / 1080 / 1608 / 2136): */
  --tl-line-c: 362px;                 /* Figma lines 366 / 361 / 355 / 355 between 84 / 77 px entries; the site's year */
  --tl-line-d: 356px;                 /* entries are 76 tall, so 1 px longer from the second on */
  --tl-line-b: 356px;
  --op-review: 0.5;
  --cs-card-w: 1250px;
  --cs-img-h: 402px;
  --cs-img-w-wide: 1252px;
  --cs-bar-h: 45px;

  --art-card-w: 672px;
  --art-card-h: 469px;
  --art-img-h: 593px;
  --art-img-y: -124px;
  --art-img-hover-w: 759.36px;
  --art-img-hover-h: 670.09px;
  --art-img-hover-x: -43.68px;
  --art-img-hover-y: -162.55px;
  --art-bar-h: 64px;
  --art-text-w: 594px;

  --pg-col-1: 434px;
  --pg-col-2: 378px;
  --pg-col-3: 516px;
  --pg-offset-x: 12px;

  --rv-w-s: 328px;
  /* Reviews marquee (owner 2026-10-11; prototype design/prototypes/reviews-motion.html, option C) */
  /* case study motion (owner 2026-10-11) */
  --cm-rise: 16px; --cm-dur: 0.5s; --cm-step: 80ms;
  --rv-mq-w: 430px; --rv-mq-w-phone: 300px;
  --rv-mq-gap: 20px;                  /* between cards and between the two rows */
  --rv-mq-r: 22px;
  --rv-mq-pad: 24px; --rv-mq-pad-phone: 22px;
  --rv-mq-fs: 17px; --rv-mq-fs-phone: 16px;
  --rv-mq-lh: 1.45;
  --rv-mq-dur-1: 101s; --rv-mq-dur-phone: 105s;   /* one row of 7 to the left: the same speed as the old row 1 (31 px/s desktop, 21 px/s phones) */
  --rv-mq-av: 52px; --rv-mq-face-inset: 6px;
  --rv-mq-lift: 6px;
  --rv-mq-line: var(--c-grey-232324); --rv-mq-line-hover: var(--c-grey-464646);
  --rv-mq-text: var(--c-grey-e2e2e3);
  --rv-mq-fade: 10%;                  /* edge fade, each side */
  --rv-mq-slow: 0.15;                 /* hover: the row eases to 15 % speed (js) */
  --rv-mq-ease-ms: 400;
  --rv-w-l: 672px;
  --rv-h: 275px;
  --rv-text-h: 171px;

  --footer-social-y: 283px;
  --top-btn-x: 1352px;
  --top-btn-y: 35px;

  /* === MOTION (Figma prototype) === */
  --ease-out: cubic-bezier(0, 0, 0.58, 1);   /* Figma EASE_OUT */
  --dur-cue: 300ms;
  --dur-poster-fade: 150ms;
  --c-vload: rgba(255, 255, 255, 0.6);   /* video loading ring (owner 2026-10-09): 60% white */
  --dur-vload-spin: 900ms;           /* video poster layer fades out after the first frame (owner 2026-10-09) */
  --dur-card: 400ms;
  --dur-hover: 300ms;
  --dur-btn: 200ms;                   /* button hover (owner 2026-10-10) */
  /* secondary button (Figma 3215:40572, owner 2026-10-10): brand yellow 20 % fill, 1 px brand border, white text */
  --c-brand-20: rgba(255, 240, 0, 0.20);
  /* Playground v3 (owner 2026-10-11; prototype design/playground-assets, reference playground-embed.html). Existing
     colours only: the overlays are the page colour (#080809 = --c-bg) at an opacity */
  --fw-black: 900;
  --pg-tile: var(--c-bg);              /* card tile */
  --pg-tile-hover: var(--c-btn-bg);    /* hover: one step up */
  --pg-line: var(--c-grey-232324);     /* 1 px hairlines: grid, panel borders, fact box */
  --pg-fg: var(--c-brand-paper);
  --pg-muted: var(--c-grey-8e8e8e);
  --pg-pill-line: var(--c-grey-464646);
  --pg-pill-text: var(--c-grey-bcbcbc);
  --pg-panel: var(--c-btn-bg);
  --pg-fade: rgba(8, 8, 9, 0.85);      /* = --c-bg at 85 % (top / bottom edge of the wall) */
  --pg-veil: rgba(8, 8, 9, 0.6);       /* = --c-bg at 60 % (behind the side panel) */
  --pg-label-fs: 12px;                 /* Glegoo labels (the site's label face) */
  --pg-label-ls: 0.14em;
  --pg-panel-w: 680px;
  --pg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);   /* panel slide, cursor (prototype) */
  --pg-dur-panel: 0.5s;
  --pg-cur: 14px; --pg-cur-view: 84px; --pg-cur-drag: 60px;
  --pg-travel: 300svh;                /* Playground: page scroll through the sticky wall (moves the camera 1:1) */
  /* Work section motion (owner 2026-10-11; reference work-flux-final.html): timeline current, Flux covers, Read disc */
  --wf-dur: 500ms;                    /* active / dim transitions */
  --wf-logo-scale: 1.18;
  --wf-ring: 0 0 0 3px var(--c-bg), 0 0 0 4.5px var(--c-brand), 0 0 30px color-mix(in srgb, var(--c-brand) 35%, transparent);
  --wf-glow: 0 0 8px var(--c-brand);  /* timeline fill */
  --wf-dim: brightness(0.6) saturate(0.75);   /* covers other than the active one (shader: uDim) */
  --wf-cap-dim: var(--c-grey-4b4c4d); /* captions other than the active one */
  --wf-cur: 90px;                     /* Read disc */
  /* homepage "My Explorations." (owner 2026-10-13, card H1) */
  --g-ex-cover: linear-gradient(90deg, #C1F11D 0%, #C9F23F 38%, #EEF8C2 72%, #FFFEE9 100%);
  --c-ex-sub: #2C3A00;
  --ex-hover-zoom: 1.04;              /* the Work covers' hover zoom (work-flux: 4 %) */
  --wf-when-room: 5px;                /* phones: room around the logo above each card for the active ring (3 + 1.5 px) */
  --wf-when-ring: 0 0 0 3px var(--c-bg), 0 0 0 4.5px var(--c-brand);
  --wf-when-gap: 12px;                /* logo slot to its year / label, every state */
  --wf-calm-dim: brightness(0.8);     /* phones: covers other than the active one */
  --wf-calm-dur: 400ms;
  --wf-calm-scale: 0.98;              /* phones: inactive covers; the active one is 1 */
  /* My Articles editorial index (owner 2026-10-11; reference my-articles-index.html) */
  --ax-fs: clamp(30px, 4.4vw, 68px);  /* title size before fit() (js/articles-index.js shrinks both titles together) */
  --ax-line: var(--c-grey-1b1b1c);    /* row rules = the section sub-label rule */
  --ax-muted: var(--c-grey-8e8e8e);   /* details */
  --ax-dim: var(--c-grey-464646);     /* the other title while one row is hovered */
  --ax-col-gap: 48px;
  --ax-pad-t: 44px; --ax-pad-b: 40px; --ax-pad-phone: 32px;
  --ax-slide: 18px;                   /* hovered title moves right */
  --ax-cur-w: clamp(260px, 24vw, 360px);   /* cursor photo, 4:3 */
  --ax-shadow: 0 40px 80px -30px var(--c-black);
  /* Exit pill (owner 2026-10-11, fix 3), desktop and phone alike: 48 px tall, 20 px left / 8 px right padding, 32 px
     buttons inset 8 px top / bottom / right, 6 px apart, 14 px from "Exit" (16 px / 600), 16 px arrows (stroke 2.25 / 24) */
  --pg-exit-h: 48px;
  --pg-exit-pad-l: 20px;
  --pg-exit-pad-r: 8px;
  --pg-exit-btn: 32px;                /* round ↑ / ↓ buttons; an invisible 44 px tap area around each */
  --pg-exit-gap: 6px;
  --pg-exit-label-gap: 14px;
  --pg-exit-icon: 16px;
  --pg-phone-bezel: var(--c-bg);       /* phone frame: dark bezel, 1 px --pg-line, 6 px around the screen */
  --pg-phone-pad: 6px; --pg-phone-r-out: 28px; --pg-phone-r: 22px;
  --pg-phone-pad-phone: 5px; --pg-phone-r-out-phone: 24px; --pg-phone-r-phone: 19px;   /* phones: scaled with the frame width (171 / 195 px) */
  --pg-title-fs: clamp(34px, 5vw, 52px);
  --pg-next-fs: 28px;
  --z-pg-cur: 9;                      /* custom cursor: under the nav (--z-nav 10) */
  --z-pg-veil: 30;                    /* side panel + veil: over the nav */
  --z-pg-panel: 31;
  /* shared button size (owner 2026-10-10): the secondary buttons AND the yellow end-of-case-study "Next Project" */
  --btn-h: 44px;                      /* from 768 up; phone: padding-based, 36 */
  --btn-fs: 16px;
  --btn-pad-x: 20px;
  --btn-fs-phone: 12px;
  --btn-pad-phone: 8px 16px;
  --dur-social: 200ms;                        /* approved, not in Figma */

  --z-nav: 10;

  /* === CASE STUDY (Verdance 2583:176416) === */
  --c-black: #000000;
  --c-meta-bg: #1B1C1F;
  --c-label-pink: #E152A7;
  --c-btn-bg: #121212;
  --c-btn-border: #2B2B2B;
  --c-btn-bg-hover: #333333;          /* Button hover 2646:140901 */
  --c-btn-border-hover: #575A5E;
  --c-live-green: #60C333;
  --c-pill-bg: rgba(55, 55, 55, 0.2); /* #373737 @20% */
  --c-moodboard: #490429;
  --shadow-btn: 0 4px 4px rgba(0, 0, 0, 0.25);
  /* Side nav glass, Figma 2583:181196 / 2583:178624 (same paints). Geometry from each gradientTransform,
     in % so it fits any nav size. Fills (top first): radial black 0 -> 0.4 at layer opacity 20%
     (= 0.08); linear #040404 @10% -> #000 @0%. Stroke 1px inside: radial #101216 @0% -> #000 @10%.
     The linear angle depends on the box ratio (Figma gradients live in normalised node space):
     118x234 -> 141.23deg, 110x210 -> 142.29deg; stop positions -6.79% / 111.33% for both. */
  --g-side-nav-angle: 141.23deg;
  --g-side-nav-angle-editor: 142.29deg;
  --g-side-nav-angle-mta: 136.47deg;   /* 110x258 */
  --g-side-nav-linear-stops: rgba(4, 4, 4, 0.1) -6.79%, rgba(0, 0, 0, 0) 111.33%;
  --g-side-nav-radial: radial-gradient(54.57% 54.57% at 50% 52.69%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 100%);
  --g-side-nav-border: radial-gradient(50% 50% at 50% 50%, rgba(16, 18, 22, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
  --glass-blur: 4px;                  /* Figma GLASS r4, approximated */

  --font-pp: "PP Editorial Old", serif;
  --font-inter: "Inter", sans-serif;
  --font-roboto: "Roboto", sans-serif;
  --fw-ultrabold: 800;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-18: 18px;
  --fs-32: 32px;
  --lh-20: 20px;
  --lh-32: 32px;
  --lh-40: 40px;
  --lh-150-8: 150.8%;

  --sp-60: 60px;
  --sp-100: 100px;
  --sp-170: 170px;
  --r-32: 32px;
  --icon-16: 16px;
  --icon-32: 32px;
  --dot-6: 6px;

  --cs-nav-h: var(--nav-h);           /* case-study header: 85 px like the homepage nav, phone too (owner 2026-10-10; was 68) */
  --cs-title-gap: 64px;               /* header bottom -> first line of the case study (label or title), >= 1190 */
  --cs-next-h: var(--btn-h);          /* header "Next Project" button */
  --cs-title-w: 860px;
  --cs-title-lh: 98px;               /* Figma Auto for Figtree 82 renders 98 px per line */
  --cs-label-x: 582px;
  --cs-label-y: 126px;
  --cs-label-w: 275px;
  --cs-hero-video-h: 810px;
  --cs-meta-w: 952px;
  --cs-content-w: 1436px;
  --cs-text-w: 920px;
  --cs-wide-w: 1140px;
  --cs-why-img-h: 530px;
  --cs-moodboard-h: 924.43px;
  --cs-board-w: 1142px;
  --cs-board-h: 705px;
  --cs-fontboard-h: 722px;
  --cs-video-wide-h: 730px;
  --ar-video-wide: 1140 / 730;        /* Figma box ratios, so height:auto never uses the file's 16:9 */
  --ar-video-hero: 1440 / 810;
  --ar-video-full: 1440 / 810;
  --ar-video-arrival: 1440 / 804;
  --cs-sidenav-x: 40px;
  --cs-sidenav-y: 742px;
  --cs-sidenav-w: 118px;
  --cs-sidenav-h: 234px;
  --cs-sidenav-item-w: 94px;
  --cs-pill-w: 342px;
  --cs-pill-bottom: 8px;
  --cs-visit-w: 120px;
  /* "Why I built this" callouts, relative to the 920 image block */
  --cs-note-1-x: -236px;  --cs-note-1-y: 155px;  --cs-note-1-w: 220px;
  --cs-note-2-x: 942px;   --cs-note-2-y: 326px;  --cs-note-2-w: 194px;
  --cs-note-3-x: 966px;   --cs-note-3-y: 87px;   --cs-note-3-w: 169px;
  --cs-arrow-1-x: -109px; --cs-arrow-1-y: 264.78px;
  --cs-arrow-2-x: 552.49px; --cs-arrow-2-y: 329.61px;
  --cs-arrow-3-x: 741.91px; --cs-arrow-3-y: 121.28px;

  /* Chunk B (sections 11–13) */
  --cs-video-full-h: 810px;
  --cs-video-arrival-h: 804px;
  --cs-tour-h: 781px;
  --fs-150: 150px;
  --lh-pp-150: 225px;                 /* PP Editorial Old Auto = 1.5 x size */
  /* CROP videos: scale/offset matched to Figma thumbnails (Figma does not expose the crop) */
  --cs-tour-vw: 1448px;  --cs-tour-vh: 857px;  --cs-tour-vx: -2px;  --cs-tour-vy: -52px;
  --cs-phone-col-w: 409px;
  --cs-phone-frame-h: 705px;
  --cs-phone-img-w: 393px;
  --cs-phone-img-h: 644px;
  --cs-phone-img-y: 30.5px;
  --cs-phone-screen-w: 283px;
  --cs-phone-screen-h: 613px;
  --cs-phone-screen-x: 63px;
  --cs-phone-screen-y-a: 45px;        /* left ("Android" label) */
  --cs-phone-screen-y-b: 47px;        /* right ("iPhone" label) */
  --r-28: 28px;
  /* Phone screens: Figma stretches each recording to the screen width (non-uniform), fitted to its 1x render */
  --cs-and-vw: 283px; --cs-and-vh: 634px; --cs-and-vx: 0px; --cs-and-vy: 2px;
  --cs-iph-vw: 284px; --cs-iph-vh: 614px; --cs-iph-vx: 0px; --cs-iph-vy: 0px;
  /* Chunk C (sections 14–21) */
  --font-arabic: "Noto Sans Arabic", sans-serif;
  --c-card: #1A1A1A;
  --c-card-2: #1A1A1B;
  --c-strike: #A5A7AC;
  --c-caption-grey: #8A8A8A;
  --c-chart-line: #333333;
  --c-bar-before: #37383E;
  --c-table-grey-line: #5E5E60;
  --c-cream: #F3F0E9;
  --c-ink-333239: #333239;
  --c-cream-text: #F4F1EA;
  --c-tag-mid: #CAC0C4;
  --c-badge-hover: rgba(195, 86, 151, 0.15);  /* #C35697 @15% */
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-50: 50px;
  --fs-54: 54px;
  --fs-64: 64px;
  --fs-140: 140px;
  --lh-160: 160%;
  --lh-pp-14: 32px;
  --lh-pp-16: 24px;
  --lh-pp-20: 30px;
  --lh-pp-40: 60px;
  --lh-pp-48: 72px;
  --lh-pp-54: 81px;
  --lh-pp-64: 96px;
  --lh-pp-140: 210px;
  --lh-arabic: 58px;
  --sp-3: 3px;
  --sp-32: 32px;
  --sp-104: 104px;
  --sp-140: 140px;
  --r-10: 10.12px;
  --r-35: 35px;
  --cs-wide-card-w: 1008px;
  --cs-head-w: 860px;
  --cs-gate-w: 599px;
  --cs-gate-h: 330px;
  --cs-gates-gap: 15px;
  --cs-gate-img-h: 519px;
  --cs-bug-h: 843.57px;
  --cs-air-h: 817.43px;
  --cs-shot-x: 343px; --cs-shot-y: 117.57px; --cs-shot-w: 230px; --cs-shot-h: 499px;
  --cs-leaf-x: 442.48px; --cs-leaf-y: 554.44px; --cs-leaf-w: 279.8px; --cs-leaf-h: 262.64px;
  --cs-bug-arrow-x: 185.44px; --cs-bug-arrow-y: 454.28px;
  --cs-bug-note-x: 13px; --cs-bug-note-y: 393.57px; --cs-bug-note-w: 297px;
  --cs-bug-cap-x: 244px; --cs-bug-cap-y: 830.57px; --cs-bug-cap-w: 432px;
  --cs-table-h: 382px;
  --cs-table-left-w: 386px;
  --cs-table-right-w: 622px;
  --cs-table-head-x: 23px; --cs-table-head-y: 31.55px; --cs-table-head-w: 960px;
  --cs-table-col1-w: 336px; --cs-table-col2-w: 544px;
  --cs-table-line-y: 82.05px; --cs-table-line-w: 962px; --cs-table-line-x: 3px; --cs-table-grey-w: 363px;
  --cs-table-left-x: 41px; --cs-table-left-y: 106.55px;
  --cs-table-right-x: 417px; --cs-table-right-y: 106.41px;
  --cs-stat-w: 320px;
  --cs-stat-h: 237px;
  --cs-stat-note-x: 24px; --cs-stat-note-y: 168.15px;
  --cs-stat-arrow-1-x: 75.62px; --cs-stat-arrow-1-y: 83.11px;
  --cs-stat-arrow-2-x: 48.65px; --cs-stat-arrow-2-y: 104.5px;
  --cs-scale-h: 390px;
  --cs-scale-text-w: 878px;
  --cs-scale-w: 900px;
  --cs-scale-bar-h: 26px;
  --cs-scale-col-1: 376px; --cs-scale-col-2: 225px; --cs-scale-col-3: 57px;
  --cs-scale-mark-x: 287.95px; --cs-scale-mark-y: -91px;
  --cs-scale-mark-text-x: 319px; --cs-scale-mark-text-y: -90px;
  /* takeaway / learning cards, every case study (owner 2026-10-12, Figma 3146:203440): one shared spec */
  --tk-w: 560px; --tk-r: var(--r-16); --tk-pad: var(--sp-24); --tk-gap: var(--sp-12);
  --tk-col-gap: var(--sp-32); --tk-row-gap: var(--sp-40);
  --tk-title-fs: var(--fs-24); --tk-body-fs: var(--fs-20); --tk-body-lh: var(--lh-160);
  --cs-tk-card-w: var(--tk-w); --cs-tk-card-h: auto;
  --cs-tk-wide-h: auto;
  --cs-tk-col-w: 420.1px;
  --cs-tk-thumb-w: 155px; --cs-tk-thumb-h: 73px; --cs-tk-thumb-col: 169.3px;
  --cs-next-card-w: 504px;
  --cs-next-en-x: 75px; --cs-next-en-y: 160.15px; --cs-next-en-w: 352px;
  --cs-next-ar-x: 95px; --cs-next-ar-y: 170.15px; --cs-next-ar-w: 313px;
  --cs-next-col-en: 420px; --cs-next-col-ar: 448px; --cs-next-col-ar-x: 512px;
  --cs-next-line-w: 965px;
  --cs-footer-h: 783px;
  --cs-footer-draw-y: 296.7px; --cs-footer-draw-w: 1439px; --cs-footer-draw-h: 486px;
  --cs-footer-title-x: 252px; --cs-footer-title-y: 0.15px; --cs-footer-title-w: 936px;
  --cs-footer-tag-x: 197px; --cs-footer-tag-y: 210.35px; --cs-footer-tag-w: 1045px;
  --cs-badge-x: 644px; --cs-badge-y: 342.15px; --cs-badge: 150px;
  --cs-badge-ring: 175px; --cs-badge-ring-x: -13px; --cs-badge-ring-y: -12px;
  --cs-mock-w: 860px; --cs-mock-h: 488px;
  --cs-social-h: 128px;
  /* Editor Experience 1322:32944 */
  --sp-148: 148px;
  --c-goal-bg: #161616;
  --c-goal-border: #2A2A2C;
  --c-feature: #7D7EFF;
  --c-arrow-off: #A2A2A2;
  --ed-sidenav-y: 790px;
  --ed-sidenav-w: 110px;
  --ed-sidenav-h: 210px;
  --ed-sidenav-item-w: 86px;
  --ed-hero-h: 665px;
  --ed-goal-w: 908px;
  --ed-goal-spacer: 12px;
  --ed-emoji: 40px;
  --ed-cards-w: 1280px;
  --ed-card-w: 560px;
  --ed-card-h: 600px;
  --ed-card-top-h: 387px;
  --ed-card-pad-y: 24px;
  --ed-slide-w: 1160px;
  --ed-slide-img-h: 818px;
  --ed-arrow: 40px;
  --ed-arrow-scale: 1.68;             /* hover: 20x14 -> 33.6x23.52 (1322:38002 / 38005) */
  --ed-arrow-next-origin: -3.53px 20px;
  --ed-arrow-prev-origin: 32.06px 20px;
  --dur-arrow: 300ms;
  --dur-dot-cycle: 1.6s;
  --dur-pill: 250ms;                  /* sticky pill show/hide */
  --dur-slide: 250ms;                 /* carousel crossfade */
  /* Editor half 2 (Figma 1322:34850 - 1322:34936) */
  --bw-4: 4px;
  --c-journey-border: #1D1E1E;        /* Component 135 stroke */
  --c-photo-border: #5F5F62;          /* Component 134 stroke, outside */
  --c-tk-icon: #E3D33F;               /* takeaway icons */
  --ed-impact-pad-top: 28px;
  --ed-impact-line-h: 105px;
  --ed-impact-text-w: 796px;
  --ed-photo-w: 746px; --ed-photo-h: 736px;
  --ed-photo-me-x: 177px; --ed-photo-me-y: 237px;
  --ed-tk-w: var(--tk-w);
  --ed-future-w: 802px;
  /* MTA case study (Figma 1322:35380) */
  --mta-sidenav-h: 258px;

  /* === TEAM WORKSPACE (Figma 2235:166662) === */
  --g-side-nav-angle-tw: 139.25deg;   /* 110x234 */
  --c-tw-label: #DFE4F1;
  --c-tw-step: #62C9FF;
  --c-tw-card: #161616;
  --c-tw-col: #29292D;
  --c-tw-rule: #626176;
  --c-tw-dash: #4A4A54;
  --c-tw-chip: rgba(67, 68, 75, 0.4);
  --c-tw-chip-text: #FDFDFF;
  --c-tw-p1-stroke: #65302D;
  --c-tw-p2-stroke: #C1A9A7;
  --sh-tw-card: 0 0 14px 6px rgba(61, 64, 66, 0.4);
  --sh-tw-photo-in: inset 12px 12px 12px rgba(36, 37, 40, 0.25);
  --sh-tw-photo-out: 4px 4px 4px rgba(87, 88, 92, 0.25);
  --g-tw-photo: linear-gradient(180deg, rgba(0, 0, 0, 0) 60.9%, #000000 100%);
  --fs-36: 36px;
  --lh-130-tw: 130%;
  --lh-18: 18px;
  --sp-9: 9px;
  --sp-10: 10px;
  --sp-11: 11px;
  --sp-17: 17px;
  --sp-33: 33px;
  --sp-36: 36px;
  --r-2: 2px;
  --r-17: 17.01px;
  --r-30: 30px;
  --r-40: 40px;
  --tw-hero-stroke: 6px;
  --tw-hero-r: 14px;          /* r8 + 6px outside stroke */
  --tw-hero-w: 1352px;        /* 1340 + 2x6 stroke */
  --tw-text-w: 920px;
  --tw-matrix-w: 1078px;
  --tw-persona-w: 1126px;
  --tw-matrix-h: 878px;
  --tw-persona-h: 769px;
  --tw-col-w: 158px;
  --tw-col-hl-x: 158px;
  --tw-col-hl-y: 63px;
  --tw-col-hl-w: 175px;
  --tw-col-hl-h: 767px;
  --tw-cell-h: 44px;
  --tw-head-h: 74px;
  --tw-cap-gap: 18px;         /* removed persona caption: its line keeps the arrows where Figma has them */
  --tw-photo-w: 399px;
  --tw-photo-h: 721px;
  --tw-photo-stroke: 4px;
  --tw-name-x: 24px;
  --tw-name-y: 588px;
  --tw-chip-icon: 16px;
  --tw-flow-w: 1440px;
  --tw-flow-ar: 1440 / 1224;  /* Figma layout slot (rotated frame's bounds); the render is 1399 tall and overlaps the next section by 115px */
  --tw-comp-cols: 207px 161px 351px 1fr;        /* row cells start at 0 / 207 / 368 / 719 */
  --tw-comp-cols-head: 203px 167px 344px 1fr;   /* header starts at 0 / 203 / 370 / 714 */
  --tw-wires-w: 1201px;
  --tw-wire-w: 20.21%;        /* 242.72 / 1201 */
  --tw-rule-h: 22px;
  /* Team Workspace second half */
  --font-nm: "Neue Montreal", sans-serif;
  --tw-board: 1436;               /* handover boards: Figma px stage; items use --x/--y/--w/--h/--fs in Figma px */
  --c-tw-board-line: #787996;
  --c-tw-grid-line: #212232;
  --c-tw-3-2: #393A3D;
  --c-tw-comp-card: #252529;
  --c-tw-comp-stroke: #3D3D3D;
  --c-tw-outcome: #EEF7FF;
  --lh-tw-140: 140%;
  --lh-tw-120: 120%;
  --lh-tw-125: 125%;
  --lh-tw-100: 100%;
  --ls-tw-14: 0.58333em;   /* Figma 14px at 24px (em so it scales with the board) */
  --lh-28: 28px;
  --r-tw-collage: 5.42px;
  --tw-collage-ar: 1436 / 3472;
  --tw-c3-ar: 1434 / 1004;
  --tw-c3-w: 1434px;
  --tw-c3: 1434;
  --fs-16-n: 16;     /* unitless Figma px, for stage-scaled sizes */
  --fs-18-n: 18;
  --fs-20-n: 20;
  --icon-24-n: 24;
  --n-8: 8;
  --n-28: 28;
  --tw-tk-w: var(--tk-w);
  --tw-impact-gap: 44px;
  --tw-impact-pad: 4px;
  --tw-line-1: 135px;
  --tw-line-2: 140px;
  --tw-line-3: 142px;
  --tw-dot: 6px;
  --tw-dot-n: 6;            /* carousel 3 dots, Figma px on the 1434 stage */
  --tw-dot-gap-n: 6;
  --c-tw-dot-past: #616268;
  --c-tw-dot-now: #007DBF;
  --dur-c3: 800ms;          /* Figma: Smart Animate, 800 ms, Ease in and out */
  --ease-c3: cubic-bezier(0.42, 0, 0.58, 1);
  --z-viewer: 1000;
  /* === ABOUT ME (Figma 1322:32805) === */
  --c-ab-card: #171717;
  --c-ab-dot: #C7C7C7;
  --c-ab-white-20: rgba(255, 255, 255, 0.2);
  --r-ab-photo: 56px;
  --ab-photo-w: 151px;
  --ab-photo-h: 201px;
  --ab-tile: 46px;
  --ab-certs-h: 342px;         /* Figma fixed height */
  --icon-20: 20px;
  --sp-20: 20px;
  --ab-social: 32px;
  --ab-resume-w: 114px;
  --ab-car-w: 442px;
  --ab-car-ar: 442 / 519;
  --ab-car-gap: 32px;          /* slide step 474 = 442 + 32 */
  --ab-dots-x: 28.96%;         /* 128 / 442 (Figma places the pill 17 px left of centre) */
  --ab-dots-y: 94.8%;          /* 492 / 519 */
  --ab-dot: 8px;
  --ab-dots-w: 152px;          /* 9 dots x 8 + 8 gaps x 8 + 2 x 8 padding */
  --ab-toggle: 16px;           /* pause/play button: same height as the dot pill */
  --ab-toggle-clear: 12px;     /* pause/play tap area -> last dot tap area, at least (owner 2026-10-10) */
  --ab-toggle-icon: 8px;
  --ab-gap-98: 98px;
  --ab-gap-100: 100px;
  --lh-190: 190%;
  --ab-title-ratio: 9;         /* "THAT’S IT THANKS!" is ~9x its font size wide */
  --g-ab-dots: linear-gradient(90deg, var(--c-ab-white-20) 0%, var(--c-ab-white-20) 100%), linear-gradient(177.56deg, var(--g-side-nav-linear-stops));
  --dur-ab-car: 1250ms;        /* Figma Smart Animate 1.25 s, easing "Slow" (spring m1 k80 c20, no overshoot) */
  --ease-ab-car: linear(0, 0.105, 0.291, 0.468, 0.611, 0.72, 0.8, 0.858, 0.9, 0.929, 0.95, 0.965, 0.976, 0.983, 0.989, 0.993, 0.995, 0.997, 0.998, 0.999, 1);
  --tw-viewer-bar-h: 68px;     /* same height as the site nav bar */
  --dur-viewer: 200ms;
  --lh-170: 170%;
  --lh-130: 130%;
  --lh-150: 150%;
  --c-persona-text: #FDFDFF;
  --c-tag-bg: #2A2A2E;
  --c-annot-arrow: #AFB2B6;           /* hand-drawn annotation arrows */
  --c-note-1: #75110A; --c-note-2: #464005; --c-note-3: #0A317D; --c-note-4: #470F69;   /* pain-point note strokes */
  --sh-note: 4px 4px 14px rgba(54, 71, 113, 0.1);
  --mta-note-w: 203px; --mta-note-h: 270px;
  --mta-persona-w: 300px;
  --mta-avatar: 40px;
  --mta-persona-gap: 15.18px;         /* Figma "User Profile Panel" item spacing */
  --mta-needs-gap: 19px;              /* persona needs: wrap, space-between */
  --mta-note-list-gap: 16px;          /* Figma list spacing */
  --mta-bullet-indent: 18px;          /* Figma list indent: text starts 18px in */
  --mta-bullet-x: 6px;                /* bullet glyph left edge */
  --mta-ev-w: 1160; --mta-ev-h: 882;  /* Editor-view stage (unitless: Figma px, scaled with cqw) */
  --mta-lv-w: 1360; --mta-lv-h: 970;  /* Learner-view stage */
  --mta-comps-gap: 17.34px;           /* competitor rows (Figma 1322:36150 item spacing) */
  --mta-comp-w: 572px;
  --mta-comp-ar-a: 572 / 337;         /* CROP images 1322:36152/36153 */
  --mta-comp-ar-b: 571.5 / 347;       /* FILL images 1322:36155/36156 */
  /* MTA half 2 */
  --mta-wire-gap: 8px;                /* wireframe images (1322:36163/36167) */
  --mta-wire-row-gap: 10px;
  --mta-wire-ar-a: 381.3 / 336;
  --mta-wire-ar-b: 576 / 252;
  --mta-shot-w: 376px;
  --mta-shot-ar-a: 376 / 191;         /* iteration screenshots */
  --mta-shot-ar-b: 560 / 390;         /* pros/cons screenshots */
  --c-pro: #00B448; --c-con: #FF1111; --c-gain: #13D526; --c-cloud-blue: #5553FF;
  --mta-survey-cols: 144px 212px 120px; --mta-survey-col-gap: 82px;
  --fs-48: 48px; --fs-72: 72px; --fs-112: 112px; --fs-120: 120px;
  --mta-cloud-h: 616px;
  --mta-impact-pad-top: 32px; --mta-impact-line-a: 103px;
  --mta-next-stroke: 3.85px;          /* next-project mockup: 3.85px OUTSIDE stroke baked into the image */
  --mta-next-r: 8.99px;               /* 5.14 radius + 3.85 stroke */
  --pill-rise: 12px;              /* 0.5s hold + 0.3s change, each way */
}

/* =====================================================================
   RESPONSIVE (design/notes/responsive-plan.md)
   Breakpoints — media queries cannot read custom properties, so every file uses these literals:
     tablet + phone  @media (max-width: 1189.98px)   768–1189 and below
     phone           @media (max-width: 767.98px)    < 768
   At >= 1190 every token below equals its 1440 value (nothing changes).
   ===================================================================== */
:root {
  --tap: 44px;                          /* minimum tap target (tablet + phone) */
  /* type scale: >= 1190 values; tablet / phone override below */
  --fs-r-display: var(--fs-138);        /* homepage section titles, footer titles */
  --fs-r-hero: var(--fs-82);            /* homepage hero, case-study H1 */
  --fs-r-next: var(--fs-50);            /* next-project title */
  --fs-r-h2: var(--fs-32);
  --fs-r-body-24: var(--fs-24);
  --fs-r-body-20: var(--fs-20);
  --fs-r-body-16: var(--fs-16);
  --fs-r-min: var(--fs-14);             /* labels / captions / body never below this on tablet + phone */
  --fs-r-mh-quote: var(--fs-56);        /* large pull lines: 56 at 1440 (MindHYVE quotes, inDrive headings); 40 tablet, 32 phone below */
  /* phone nav (menu button + panel) */
  --nav-menu-gap: var(--sp-8);
  --nav-panel-row-h: 64px;
  --fs-nav-panel: var(--fs-28);
  --nav-ext-mid: 0.3625;               /* panel ↗: visual centre of the Figtree label = half its ascent (0.725em) above the baseline */
  --dur-menu: 200ms;
  --menu-rise: 8px;
  --hit-pad: 2px;                       /* (44 - 40) / 2: 40 px arrows get a 44 px hit area */
  --hit-pad-visit: 6px;                 /* (44 - 32) / 2: "Visit site" (32 tall) gets a 44 px hit area */
  --swipe-min: 40px;                    /* touch swipe distance */
}
@media (max-width: 1189.98px) {
  :root {
    --page-margin: var(--sp-32);
    --fs-r-display: clamp(56px, 8.074vw, 96px);   /* 96 at 1189, scales down */
    --fs-r-hero: 56px;
    --fs-r-next: 40px;
    --fs-r-h2: 28px;
    --fs-r-body-24: 20px;
    --fs-r-body-20: 18px;
    --fs-r-mh-quote: 40px;          /* MindHYVE pull lines (56 at 1440) */
  }
}
@media (max-width: 767.98px) {
  :root {
    --page-margin: var(--sp-16);
    --fs-r-display: clamp(40px, 14.36vw, 56px);   /* 56 at 390, never below 40 */
    --fs-r-hero: 36px;
    --fs-r-next: 28px;
    --fs-r-h2: 24px;
    --fs-r-body-24: 18px;
    --fs-r-body-20: 16px;
    --fs-r-mh-quote: 32px;
  }
}

/* === HOMEPAGE responsive (build 2) — Figma 1440 numbers as plain numbers, so layouts can scale from them === */
:root {
  --n-content: 1360;            /* 1440 - 2 x 40 */
  --n-hero-w: 1280; --n-82: 82; --n-138: 138;
  --n-list: 1252;               /* case-study list column */
  --n-tl-col-h: 2273; --n-tl-line-a: 366; --n-tl-line-b: 356; --n-tl-line-c: 362; --n-tl-line-d: 356;
  --cs-img-ar: 1250 / 402;
  --n-cs-img: 1250;
  --n-art-w: 672; --n-art-h: 469; --n-art-img-y: -124; --n-art-img-h: 593;
  --n-art-hover-x: -43.68; --n-art-hover-y: -162.55; --n-art-hover-w: 759.36; --n-art-hover-h: 670.09;
  --art-card-ar: 672 / 469;
  --n-pg-row: 1328;             /* 1360 - 2 x 16 */
  --n-pg-1: 434; --n-pg-2: 378; --n-pg-3: 516; --n-pg-offset: 12;
  --n-rv-s: 328; --n-rv-l: 672;
  /* tablet / phone */
  --hm-hero-top: calc(var(--nav-h) + 96px);         /* tablet: text starts 96 below the nav */
  --hm-hero-top-phone: calc(var(--nav-h) + 40px);
  --hm-hero-bottom: 96px;                            /* space below the text: tablet */
  --hm-hero-bottom-phone: 64px;                      /* phone */
  --hm-cue-h: calc(var(--cue-label-h) + var(--icon-24));   /* scroll cue: label + icon */
  --hm-sec-pad: 120px;  --hm-sec-pad-phone: 96px;
  --hm-sec-gap: 56px;   --hm-sec-gap-phone: 40px;
  --hm-cards-gap-phone: 40px;
  --hm-when-logo: 24px;
}

/* === ABOUT responsive (build 3) === */
:root {
  --ab-top-tablet: calc(var(--nav-h) + 48px);   /* space between the nav and the intro */
  --ab-top-phone: calc(var(--nav-h) + 24px);
  --ab-bento-gap-tablet: 56px;                    /* intro -> bento */
  --ab-bento-gap-phone: 40px;
  --ab-card-pad-phone: 20px;
  --ab-intro-gap-phone: 24px;
}

/* === VERDANCE responsive (build 4) — Figma 1440 numbers for scaling === */
:root {
  --lh-pp-r: 1.5;                 /* PP Editorial Old "Auto" = 1.5 x size */
  --lh-r-title: 1.195;            /* case-study H1: 98 / 82 */
  --lh-r-body: 1.667;             /* body 24 / 40 */
  --lh-r-h2: 1.25;                /* section titles once they wrap (Figma 32/32 is one line) */
  --cs-top-tablet: calc(var(--cs-nav-h) + 40px);
  --cs-top-phone: calc(var(--cs-nav-h) + 40px);   /* header -> first line 40 on phone (owner 2026-10-10; was 24) */
  --cs-gap-tablet: 72px;  --cs-gap-phone: 56px;   /* between page blocks (Figma 100) */
  --cs-card-pad-phone: 20px;
  /* boards that scale as one piece (zoom) */
  --why-w: 1372px;  --why-dx: 236px;  /* callouts reach 236 px left of the 920 image and 216 px right */
  --bug-w: 920px;
  --phone-col-w: 409px;               /* one phone mock-up column */
  --phones-gap: 40px;
  --phone-share: 0.75;                /* phone: each mock-up ~75% of the column */
  /* desktop tour crop: video 1448 x 857 at -2, -52 in a 1440 x 781 frame */
  --n-tour-w: 1440; --n-tour-h: 781; --n-tour-vw: 1448; --n-tour-vh: 857; --n-tour-vx: -2; --n-tour-vy: -52;
  --tour-ar: 1440 / 781;
  /* Google scale: 900 wide */
  --n-scale: 900; --n-scale-c1: 376; --n-scale-c2: 225; --n-scale-mark: 287.95; --n-scale-mark-text: 319;
  --scale-gap-r: 120px;
  --scale-mark-text-dx: 31.05px;      /* 319 - 287.95 */
  --scale-mark-text-gap: 11px;        /* Figma: text (79 tall) at -90 ends 11 above the bar */
  /* closing frame */
  --n-footer-title-w: 936;            /* "VERDANCE" at 140 px */
  --cs-footer-pad: 56px;
  --n-bi-en-w: 352;                   /* "Where the view is" at 48 px */
  --cs-bi-pad: 96px;                 /* card top: room for the language label (31 + 40) + 24 */
}
:root {
  --n-140: 140; --n-48: 48;
  --lh-arabic-r: 1.208;           /* 58 / 48 */
  --table-cols: minmax(0, 386fr) minmax(0, 622fr);   /* Figma 386 / 622 panels */
  --table-cell-pad: 12px 20px;
}

/* === Viewer bar + Verdance phone table (fix pass) === */
:root {
  --viewer-bar-pad: 16px;        /* below 1190: buttons 16 px from the right edge */
  --table-card-gap: 12px;        /* phone: gap between comparison cards */
  --ls-card-label: 0.08em;       /* "TYPICAL SITE" / "VERDANCE" labels */
}

/* === EDITOR responsive (build 5) === */
:root {
  --ed-photo-ar: 746 / 736;
  --ed-photo-me-xp: 23.727%;      /* 177 / 746 */
  --ed-photo-me-yp: 32.201%;      /* 237 / 736 */
  --ed-impact-row-gap: 80px;      /* Figma gap between results */
  --ed-impact-line-top: 92px;     /* 28 (emoji offset) + 40 (emoji) + 24 */
  --ed-impact-line-end: -4px;     /* line stops 24 above the next emoji (28 - 24) */
}

/* === MTA responsive (build 6) === */
:root {
  --mta-impact-line-top: 96px;    /* 32 (emoji offset) + 40 + 24 */
  --mta-impact-line-end: -8px;    /* 32 - 24 */
  /* word cloud: Figma card 860 x 616, words below y 96 */
  --n-cloud-w: 860; --n-cloud-h: 616; --n-cloud-lh: 1.508;
  --n-cloud-top: 40;              /* words area starts here (Figma 96, minus 56 headroom for the tilted "Powerful" when the intro wraps longer) */
  --hscroll-fade: 32px;           /* edge fade on sideways-scrolling tables */
}

/* === Heading + card spacing (owner rule; overrides Figma at every width) === */
:root {
  --gap-heading: 24px;          /* main centred section heading -> next element */
  --gap-heading-text: 0px;      /* any other heading -> its paragraph: line height only */
  --card-gap: 24px;             /* stacked cards: one gap per list (tablet) */
}
@media (max-width: 767.98px) { :root { --card-gap: 16px; } }
:root {
  --ed-impact-item-gap: 80px;     /* Editor / MTA results, >= 1190 (Figma) */
  --tw-impact-line-top: 64px;     /* TW: emoji (40) + 24 */
  --tw-impact-line-top-pad: 72px; /* TW row 2: emoji in a 4 px pad box (48) + 24 */
  --tw-impact-line-end-pad: 20px; /* TW: line stops 24 above an emoji that sits 4 px into its row */
}

/* === TEAM WORKSPACE responsive (build 7) === */
:root {
  --tw-hl-above: 13px;            /* Feature Matrix column highlight: starts 13 above the table, ends 10 below */
  --tw-hl-below: 10px;
  --tw-matrix-col-gap: 16.4px;    /* (1030 - 6 x 158) / 5: Figma's space-between, kept when the table scrolls */
  --tw-comp-min: 1030px;          /* competitor table: Figma content width, kept when it scrolls */
  --tw-persona-stack: 900px;      /* persona photo + text side by side only from here up */
  --tw-name-yp: 81.553%;          /* persona name block: 588 / 721 of the photo */
}

/* === Phone / tablet fixes (sticky table column, personas, carousel 3) === */
:root {
  --sticky-cover: 12px;                       /* the sticky first column's background bleeds into the row/column gaps */
  --sticky-cover-comp: 20px;                  /* Competitor rows are 40 apart: 20 up + 20 down */
  --c-sticky-line: var(--c-journey-border);   /* 1 px divider on the sticky column's right edge while scrolled (owner: #1D1E1E) */
  --mta-survey-col-gap-phone: var(--sp-24);   /* MTA survey on phone: columns sized to content */
  /* phone tables (owner 2026-10-04) */
  --mta-survey-fs-phone: var(--fs-16);        /* labels + values: largest whole size that fits at 390 (fit = 16.4) */
  --mta-survey-h-fs-phone: var(--fs-24);      /* Before / After: 1.5 x the values, as at 1440 (48 / 32) */
  --mta-survey-gain-fs-phone: var(--fs-14);   /* gain: site minimum (strict ratio would be 8) */
  --tw-comp-col1-phone: 120px;                /* Competitor column: header "Competitor" 107 + room; names 53-82 */
  --tw-comp-min-phone: 943px;                 /* 1030 - (207 - 120) */
  --tw-comp-logo-phone: 32px;
  --tw-matrix-col1-phone: 140px;              /* widest unbreakable label word "Weekly/Monthly" = 138 at 18 px */
  --tw-photo-max-tablet: 360px;               /* TW persona photo cap below 1190 */
  --tw-photo-max-phone: 280px;                /* TW persona photo cap below 768 */
}

/* === MINDHYVE DESIGN SYSTEM (Figma 2815:142486; hero per HERO-SPEC.md + prototype.html, owner decisions 2026-10-08) === */
:root {
  --c-mh-gold: #FDA400;                 /* label 2815:144665 = Arthur primary */
  --c-mh-arthur: #FDA400;
  --c-mh-justine: #0389B7;
  --c-mh-chiron: #7FA0BF;
  --c-mh-on-primary: #141417;           /* chip text on every brand primary (owner: near-black, not white) */
  /* Hero = the ORIGINAL look (owner 2026-10-08, reference design/figma/mindhyve/hero-reference/hero-original-2x.webp,
     = prototype.html / HERO-SPEC.md geometry). Stage 1192 x 700.3, controls row below it, outside the stage. */
  --c-mh-stage: #121214;                /* reference ~#131215 (spec #121214) */
  --c-mh-line: #26262A;                 /* stage, label pill and control borders */
  --c-mh-chip: #151518;
  --c-mh-muted: #8E8E93;
  --c-mh-fg: #F2F2F3;
  --c-mh-tag-bg: rgba(18, 18, 20, 0.85);
  --c-mh-screen-line: #2B2B30;          /* desktop screen edge */
  --c-mh-bezel: #1C1C20;                /* phone rim */
  --c-mh-bezel-ring: #34343A;
  --c-mh-dark-edge: rgba(255, 255, 255, 0.14);   /* dark mode only: outline so dark screens read on the dark stage */
  --c-mh-dark-shadow: rgba(0, 0, 0, 0.5);
  --mh-dark-shadow: 0 12px 32px var(--c-mh-dark-shadow);
  --fs-56: 56px;
  --r-20: 20px;
  --r-26: 26px;
  --r-pill: 999px;
  --sp-14: 14px;
  --bw-6: 6px;
  --mh-label-y: 126px;
  --mh-hero-w: 1192px;
  --mh-stage-ar: 16 / 9.4;
  --mh-desk-x: 5%;                      /* 59.6 */
  --mh-desk-y: 7%;                      /* 49.0 */
  --mh-desk-w: 74%;                     /* 882.1 x 551.3 */
  --mh-desk-ar: 2200 / 1375;
  --mh-phone-right: 6%;                 /* phone 238.4 x 422.6 at x 882.1, y 319.7: */
  --mh-phone-bottom: -6%;               /* bleeds 42 px off the stage bottom, as the reference */
  --mh-phone-w: 20%;
  --mh-phone-ar: 660 / 1170;
  --mh-tag-x: 5%;                       /* label pill 221.6 x 37 at (59.6, 628.3) */
  --mh-tag-y: 5%;
  --mh-tag-h: 37px;
  --n-mh-stage-h: 0.5875;               /* stage height / width (9.4 / 16), for the tablet stage */
  --mh-tag-room-tablet: 24px;           /* tablet (768-1189): extra stage height so the label clears the desktop rim */
  --mh-tag-min-w: 221.6px;              /* reference width with the Arthur label; longer labels grow */
  --mh-seg-pad: 4px;
  --mh-brand-btn-w: 77.6px;             /* reference controls: brand group 248.4, chips 77.6, 3.8 apart */
  --mh-brand-btn-gap: 3.8px;
  --mh-mode-light-w: 70px;              /* mode group 140.4: Light chip 70, Dark 62.4 */
  --mh-mode-dark-w: 62.4px;
  --mh-dot: 8px;
  --mh-dot-nudge: 1px;                  /* prototype: vertical-align 1px */
  --mh-btn-h: 40px;
  --mh-pp-icon-w: 12px;                 /* pause: two 4 x 14 bars, 4 apart, r1 (owner 2026-10-08) */
  --mh-pp-icon-h: 14px;                 /* play: rounded triangle 12 x 14 */
  --mh-pp-play-shift: 1.5px;            /* play nudged right for optical centring */
  --mh-pp: 48px;                        /* pause button = 48 (Figma 2835:147545) */
  --n-mh-phone-share: 0.8;              /* hero phone layout (< 768): phone (with rim) = 80% of the column, max 320 */
  --mh-phone-only-max: 320px;
  --c-mh-seg-idle-phone: rgba(242, 242, 243, 0.7);   /* hero phone layout: inactive segment text (#F2F2F3 at 70%) */
  --mh-quote-w: 932px;                  /* S2 pull quote 2827:147426 (12 px wider than the column, as Figma) */
  --mh-sidenav-h: 282px;
  --g-side-nav-angle-mh: 135.93deg;     /* 118x282, same paint as 2583:178624 */
  --dur-mh-step: 2800ms;                /* autoplay: one state */
  --dur-mh-fade: 600ms;                 /* mode change: cross-fade */
  --dur-mh-wipe: 750ms;                 /* brand change: left-to-right wipe */
  --dur-mh-accent: 600ms;               /* chip / dot colour change */
  --ease-mh-wipe: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-mh-fade: ease-in-out;
}

/* === MINDHYVE chunk 2a (S3–S10, Figma 2815:142486) === */
:root {
  --c-mh-orange: #FF912C;               /* callout arrows, "Brands" chip, "Chosen" pill, meaning chips */
  --c-mh-orange-10: rgba(255, 145, 44, 0.10);
  --c-mh-coral: #FF7461;                /* "Left to chance" title + dashed chips */
  --c-mh-panel: #151518;                /* comparison panels, mini cards */
  --c-mh-chip-bg: #1C1D1F;
  --c-mh-chip-line: #5E5E5E;
  --c-mh-card-line: #3A3A3C;            /* research cards */
  --c-mh-chosen-text: #111827;
  --c-mh-mini-line: #4B4C4F;            /* S10 mini cards + atoms */
  --c-mh-mini-rule: #4F5052;
  --c-mh-template: #E89700;
  --c-mh-template-bg: rgba(232, 151, 0, 0.05);
  --c-mh-bar-mid: #626672;
  --fs-mh-quote: var(--fs-56);
  /* annotated dashboards: callout labels Bold 14, 124 wide; arrows stroke */
  --mh-callout-w: 124px;
  --mh-mk: 24px;
  --dur-mh-slide: 2500ms;               /* < 1190 S11-S13 slideshows: one slide every 2.5 s */
  --dur-mh-slide-fade: 400ms;           /* their cross-fade */
  --mh-slide-dot: 6px;                  /* their progress dots */                        /* < 1190: numbered markers on the S3/S4 dashboards and their list */
  --mh-arrow-s3: 1.574px;
  --mh-arrow-s4: 2.171px;
  /* comparison panels (Figma component placed at 0.83655 scale: values below are the scaled ones) */
  --mh-cmp-w: 1104px;
  --mh-cmp-gap: 40px;
  --mh-panel-w: 532px;
  --mh-panel-h: 555px;
  --mh-panel-pad: 40.15px;
  --mh-panel-r: 13.38px;
  --mh-panel-bw: 0.837px;
  --mh-panel-inner-w: 450px;
  --mh-panel-gap: 33.46px;
  --mh-panel-head-gap: 6.69px;
  --mh-panel-group-gap: 13.38px;
  --fs-mh-panel-title: 26.77px;
  --lh-mh-panel-title: 33.46px;
  --fs-mh-panel-sub: 15.06px;
  --fs-mh-panel-group: 20.08px;
  --mh-chip-h: 35.67px;
  --mh-chip-pad: 17.57px;               /* 16.73 + the 0.837 stroke (Figma: strokes included in layout) */
  --mh-chip-r: 26.77px;
  --fs-mh-chip: 15.06px;
  --lh-mh-chip: 33.46px;
  --mh-dash-bw: 0.837px;                /* dashed chip stroke (Figma 2873:148162: 0.837 inside, dash 4.183 / gap 4.183) */
  /* research cards (S9) */
  --mh-rcards-w: 1048px;
  --mh-rcards-pad: 30px;
  --mh-rcard-w: 244px;
  --mh-rcard-h: 237px;
  --mh-rcard-chosen-bw: 1.5px;
  --mh-rcard-pad: 25px;                 /* 24 + 1 stroke (strokes included in layout) */
  --mh-rcard-pad-chosen: 25.5px;
  --mh-rcard-body-h: 150px;             /* fixed in Figma: the pill sits below it */
  --mh-pill-r: 32px;
  --mh-pill-pad: 10px;
  --mh-pill-h: 36px;
  /* S10 mini cards (Figma component placed at 0.5904 scale) */
  --mh-minis-w: 1227.6px;
  --mh-mini-w: 393.2px;
  --mh-mini-h: 295.2px;
  --mh-mini-r: 4.72px;
  --mh-mini-bw: 0.59px;
  --mh-mini-gap: 45px;
  --mh-mini-text-gap: 4.72px;
  --fs-mh-mini-chip: 10.63px;           /* chip texts inside the S10 diagrams (owner: may stay under 12) */
  --lh-mh-mini-title: 23.62px;
  --mh-mini-in-w: 352px;
  --mh-mini-in-x: 20.6px;
  --mh-mini-text-narrow: 285.15px;      /* card 2 text frame */
  --mh-brand-gap: 15px;
  --mh-tile-pad: 17.12px 61.4px 25.98px 14.76px;
  --mh-bar-h: 4.72px;
  --mh-bar-r: 9.45px;
  --mh-vm-gap: 8.86px;
  --mh-vm-col-gap: 7.08px;
  --mh-vm-chip-h: 23.62px;
  --mh-vm-chip-r: 15.8px;
  --mh-vm-chip-pad: 9.88px;
  --mh-vm-value-w: 91.53px;
  --mh-vm-meaning-w: 112.8px;
  --mh-vm-chip-gap: 3.54px;
  --mh-vm-chip-bw: 0.494px;
  --mh-vm-dot: 7.09px;
  --lh-mh-vm-chip: 19.76px;
  --mh-vm-arrow-w: 47.23px;             /* arrow frame 2886:168935 */
  --mh-vm-arrow-x: 4.72px;
  --mh-vm-arrow-y: 1.94px;              /* line at 10.63 from the top; the SVG's line sits 8.69 into it */
  --mh-vm-rule-gap: 23.62px;
  --mh-vm-desc-gap: 9.45px;
  --mh-brand-chip-r: 15.48px;
  --mh-brand-chip-pad: 9.67px;
  --mh-brand-chip-bw: 0.484px;
  --fs-mh-brand-chip: 10.41px;
  --lh-mh-brand-chip: 19.34px;
  --mh-brand-dot: 32.37px;
  --mh-brand-label-gap: 6.94px;
  --mh-curve-w: 0.578px;
  --mh-brands-w: 250.9px;
  --mh-brands-h: 135.06px;
  --mh-brand-chip-x: 8.09px;
  --mh-brand-chip-h: 23.11px;
  --mh-brand-chip-w: 110.42px;          /* fixed in Figma 2886:168951 */
  --mh-brand-row-y: 81.87px;
  --mh-bar-short: 75.97%;               /* 35.4 of 46.6 */
  --mh-diagram-w: 1099px;
  --mh-diagram-r: 8px;
}

/* === MINDHYVE chunk 2b: S11 architecture diagram (native port of Interactive/variable-flow-interactive-v3.html,
   Figma 2916:194533). Geometry in the source's 1228 x 640 units: --u = 1/1228 of the stage width. === */
:root {
  --c-mh-flow-card: #151518;            /* source --card */
  --c-mh-flow-line: #2A2A2E;            /* source --line (stage border) */
  --c-mh-flow-glass: #141417;           /* glass base under the brand pills and layer cards */
  --c-mh-flow-glass-top: rgba(255, 255, 255, 0.08);
  --c-mh-flow-glass-bottom: rgba(255, 255, 255, 0.02);
  --c-mh-flow-edge: rgba(255, 255, 255, 0.14);
  --c-mh-flow-edge-sel: rgba(255, 255, 255, 0.42);
  --c-mh-flow-dot-ring: rgba(255, 255, 255, 0.35);
  --c-mh-flow-pill-bg: rgba(255, 255, 255, 0.04);
  --c-mh-flow-pill-line: rgba(255, 255, 255, 0.16);
  --c-mh-flow-pill-line-hover: rgba(255, 255, 255, 0.40);
  --c-mh-flow-pill-off: #5A5A60;
  --c-mh-flow-badge-line: rgba(253, 164, 0, 0.75);
  --c-mh-flow-badge-line-dim: color-mix(in srgb, var(--c-mh-gold) 22.5%, var(--c-mh-flow-card));   /* = the old 0.3 opacity look, opaque */
  --c-mh-flow-badge-num-dim: color-mix(in srgb, var(--c-mh-gold) 30%, var(--c-mh-flow-card));
  --c-mh-flow-shadow: rgba(0, 0, 0, 0.6);
  --c-mh-flow-hub-0: #2A2A30;           /* hub fill gradient */
  --c-mh-flow-hub-1: #101012;
  --c-mh-arthur-light: #FFC24D;         /* right-ribbon gradient start per brand */
  --c-mh-justine-light: #5BC8EC;
  --c-mh-chiron-light: #BCD1E2;
  --mh-flow-w: 1228px;
  --mh-flow-ar: 1228 / 640;
  --mh-flow-bw: 1.5px;
  --mh-flow-r: 20px;
  --mh-flow-focus: 2px;
  --mh-flow-caption-gap: 12px;          /* diagram -> caption (Figma 2916:194545) */
  --mh-s11-gap: 40px;                   /* S11 frame gap (Figma 2815:142760 / 2916:194546) */
  --fs-mh-flow-lbl: 11.5;   --ls-mh-flow-lbl: 0.14em;
  --fs-mh-flow-hubk: 11;    --ls-mh-flow-hubk: 0.16em;
  --fs-mh-flow-hubn: 66;
  --fs-mh-flow-14: 14;
  --fs-mh-flow-brand: 20;
  --fs-mh-flow-sub: 12.5;
  --fs-mh-flow-card: 17;
  --fs-mh-flow-h4: 10.5;
  --fs-mh-flow-p: 13;
  --fs-mh-flow-ctl: 12;     --ls-mh-flow-ctl: 0.04em;
  --fs-mh-flow-badge: 13;   --ls-mh-flow-badge: 0.02em;
  --lh-mh-flow-hub: 1.3;
  --lh-mh-flow-p: 1.4;
  --lh-mh-flow-brand: 1.1;
  --dur-mh-flow-auto: 4500ms;           /* auto-play: one layer; also the idle time before it resumes */
  --dur-mh-flow-dim: 350ms;
  --dur-mh-flow-ring: 300ms;
  --dur-mh-flow-ui: 250ms;
  --dur-mh-flow-card: 380ms;
  --dur-mh-flow-body-delay: 80ms;
  --ease-mh-flow-card: cubic-bezier(0.2, 0.8, 0.2, 1);
  --op-mh-flow-left: 0.95;
  --op-mh-flow-left-dim: 0.28;
  --op-mh-flow-right-dim: 0.16;
  --op-mh-flow-card-dim: 0.35;
  /* geometry, unitless, in source units (x --u) */
  --g-mh-pad: 40;         /* brand pills / auto pill left, top labels left */
  --g-mh-lbl-top: 28;     --g-mh-gold-top: 30;  --g-mh-gold-bottom: 606;  --g-mh-rail-x: 1200;  --g-mh-cards-x: 972;
  --g-mh-hub-x: 514;      --g-mh-hub-y: 220;    --g-mh-hub-size: 200;
  --g-mh-hub-n-top: 4;    --g-mh-hub-n-bottom: 6;
  --g-mh-note-x: 314;     --g-mh-note-w: 600;   --g-mh-note-y: 438;   --g-mh-note-gap: 4;
  --g-mh-brand-w: 224;    --g-mh-brand-h: 68;   --g-mh-brand-r: 18;   --g-mh-brand-gap: 14;  --g-mh-brand-pad: 18;
  --g-mh-dot: 28;         --g-mh-sub-h: 20;     --g-mh-sub-gap: 3;
  --g-mh-card-w: 200;     --g-mh-card-h: 60;    --g-mh-card-r: 16;    --g-mh-card-pad: 20;   --g-mh-card-pad-b: 14;
  --g-mh-card-on-x: 832;  --g-mh-card-on-w: 340; --g-mh-card-on-h: 238; --g-mh-card-shadow: 34;
  --g-mh-body-shift: -4;  --g-mh-h4-gap: 3;     --g-mh-p-gap: 10;     --g-mh-em-gap: 2;
  --g-mh-badge: 34;       --g-mh-badge-bw: 2;   --g-mh-prog-h: 3;
  --g-mh-ctl-y: 590;      --g-mh-ctl-h: 30;     --g-mh-ctl-gap: 8;    --g-mh-ctl-pad: 14;    --g-mh-ctl-dot: 8;
  --mh-flow-dot-ring-w: 1.5px;
}

/* === MINDHYVE chunk 3a (S12–S15, Figma 2926:194556 … 2815:147305) === */
:root {
  --mh-media-w: 1228px;                 /* wide media column (x 106) */
  --mh-video-r: 24px;                   /* Figma: the video frames carry their own radius 24 */
  --ar-mh-primitives: 1680 / 1200;      /* native file ratios (no crop): 1228 x 877 */
  --ar-mh-one-click: 1680 / 1200;
  --ar-mh-arthur-tour: 1680 / 1128;     /* 3b */
  --ar-mh-cursor: 1680 / 948;           /* 3b */
  --mh-quote-s14-w: 878px;              /* S14 pull line 2815:142796 */
}

/* === MINDHYVE S12 / S13 live boards (native ports of Interactive/foundations-board.html and button-600-wall.html).
   Each board is a fixed 1228 x 850 stage, scaled down below 1228 (as the sources). Values = the sources'. === */
:root {
  --mh-pt-w: 1228px;
  --mh-pt-h: 850px;
  --mh-pt-ar: 1228 / 850;
  --c-mh-pt-glow-arthur: rgba(253, 164, 0, 0.14);
  --c-mh-pt-glow-justine: rgba(3, 137, 183, 0.16);
  --c-mh-pt-glow-chiron: rgba(127, 160, 191, 0.16);
  --c-mh-pt-panel: #121215;
  --c-mh-pt-panel-top: rgba(255, 255, 255, 0.06);
  --c-mh-pt-panel-bottom: rgba(255, 255, 255, 0.015);
  --c-mh-pt-panel-line: rgba(255, 255, 255, 0.12);
  --c-mh-pt-row-line: rgba(255, 255, 255, 0.06);
  --c-mh-pt-seg-bg: rgba(255, 255, 255, 0.03);
  --c-mh-pt-on-line: rgba(255, 255, 255, 0.5);
  --c-mh-pt-blk: #19191B;
  --c-mh-pt-blk-line: rgba(255, 255, 255, 0.1);
  --c-mh-pt-readout: #0E0E10;
  --c-mh-pt-rad-fill: #2A1E05;
  --c-mh-pt-surf: #F1F4F8;
  --c-mh-pt-el-text: #434856;
  --fs-mh-pt-11: 11px;
  --fs-mh-pt-12-5: 12.5px;
  --fs-mh-pt-13: 13px;
  --fs-mh-pt-17: 17px;
  --fs-mh-pt-22: 22px;
  --fs-mh-pt-30: 30px;
  --fs-mh-pt-84: 84px;
  --fs-mh-pt-11-5: 11.5px;
  --ls-mh-pt-wide: 0.14em;
  --ls-mh-pt-ctl: 0.04em;
  --ls-mh-pt-badge: 0.02em;
  --ls-mh-pt-tight: -0.01em;
  --ls-mh-pt-big: -0.02em;
  --lh-mh-pt-11: 1.1;
  --lh-mh-pt-115: 1.15;
  --lh-mh-pt-13: 1.3;
  --lh-mh-pt-07: 0.7;                   /* the "600" box = the digits' cap height (source comment) */
  --mh-pt-big-n-h: 58.8px;
  --mh-pt-bw: 1.5px;
  --mh-pt-r: 20px;
  --mh-pt-r-panel: 18px;
  --mh-pt-r-sw: 9px;
  --mh-pt-r-sw-ring: 11px;
  --mh-pt-r-el: 14px;
  --mh-pt-hl-off: 3px;
  --dur-mh-pt-tour: 3600ms;             /* tour step (sources) */
  --dur-mh-pt-type: 380ms;
  --dur-mh-pt-fast: 150ms;
  --dur-mh-pt-ui: 200ms;
  --dur-mh-pt-tile: 250ms;
  --op-mh-pt-bar: 0.85;
  --op-mh-pt-dim: 0.1;                  /* filtered-out tiles (tiles only: no backing to see through) */
}

/* MindHYVE S12 / S13 boards: source px values without an existing token */
:root {
  --mh-pt-21px: 21px;
  --mh-pt-29px: 29px;
  --mh-pt-34px: 34px;
  --mh-pt-44px: 44px;
  --mh-pt-52px: 52px;
  --mh-pt-58px: 58px;
  --mh-pt-68px: 68px;
  --mh-pt-84px: 84px;
  --mh-pt-168px: 168px;
  --mh-pt-190px: 190px;
  --mh-pt-238px: 238px;
  --mh-pt-380px: 380px;
  --mh-pt-520px: 520px;
  --mh-pt-540px: 540px;
  --mh-pt-640px: 640px;
  --mh-pt-680px: 680px;
  --mh-pt-758px: 758px;
  --mh-pt-1180px: 1180px;
}
:root {
  --mh-pt-120px: 120px;
  --mh-pt-180px: 180px;
}

/* === MINDHYVE S18 audit story (native port of Interactive/audit-story-v3.html; Figma 3003:194596, 1228 x 560) === */
:root {
  --mh-as-h: 560px;
  --mh-as-ar: 1228 / 560;
  --c-mh-as-card: #101013;              /* source --card (stage) */
  --c-mh-as-panel: #17171B;             /* source --panel (tiles, card, "also" rows) */
  --c-mh-as-idle: #6E6E74;              /* steps / icons before they are reached */
  --c-mh-as-ring: #3A3A40;
  --c-mh-as-done: #CFCFD4;
  --c-mh-as-tile-done: #C9C9CF;
  --c-mh-as-before: #9A9AA0;
  --c-mh-as-after: #D2D2D7;
  --c-mh-as-tick: #26262B;
  --c-mh-as-won: rgba(253, 164, 0, 0.6);
  --c-mh-as-ic-line: rgba(253, 164, 0, 0.4);
  --fs-mh-as-15: 15px;
  --fs-mh-as-19: 19px;
  --fs-mh-as-58: 58px;
  --ls-mh-as-cap: -0.015em;
  --ls-mh-as-blk: 0.12em;
  --op-mh-as-dim: 0.5;                  /* source: the nine areas around Testing (tiles only; nothing passes behind them) */
  --dur-mh-as-fade: 500ms;
  --dur-mh-as-ui: 300ms;
  --dur-mh-as-in: 400ms;
  --dur-mh-as-after: 450ms;
  --dur-mh-as-arrow: 350ms;
  --dur-mh-as-head: 150ms;
  --dur-mh-as-tick: 120ms;
  --dur-mh-as-ck: 250ms;
  --ease-mh-as-ck: cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* MindHYVE S18 audit story: source px values without an existing token */
:root {
  --mh-pt-22px: 22px;
  --mh-pt-64px: 64px;
  --mh-pt-96px: 96px;
  --mh-pt-144px: 144px;
  --mh-pt-300px: 300px;
  --mh-pt-458px: 458px;
  --mh-pt-528px: 528px;
  --mh-pt-541px: 541px;
  --mh-pt-544px: 544px;
  --mh-pt-585px: 585px;
  --mh-pt-643px: 643px;
}

/* === MINDHYVE chunk 3c (S19 Outcome 2819:147367, S20 What I learned 2815:142815) === */
:root {
  /* before / after table 3045:198444 (988 x 752) */
  --mh-ba-w: 988px;
  --mh-ba-h: 752px;                     /* fixed in Figma: 23 px empty under the last row */
  --mh-ba-pad: 25px 34px;
  --c-mh-ba-before: #1D1D1F;            /* left half */
  --c-mh-ba-after: var(--c-mh-gold);            /* right half = Arthur primary (text on it: --c-mh-on-primary; Figma had #000 / #080809) */
  --c-mh-ba-label: #EEF7FF;             /* row labels */
  --c-mh-ba-line: #373942;
  --mh-ba-col: 440px;
  --mh-ba-gap: 40px;
  --mh-ba-head-gap: 17px;
  --mh-ba-rows-gap: 16px;
  --mh-ba-row-gap: 12px;
  /* outcome cards 3033:197689 (924 x 554) */
  --mh-oc-w: 924px;
  --mh-oc-card-w: 292px;
  --mh-oc-card-h: 263px;
  --mh-oc-pad: 17px;                    /* 16 + 1 stroke (strokes included in layout) */
  --mh-oc-row-gap: 28px;
  --fs-mh-oc-n: 48px;
  --c-mh-oc-label: var(--c-mh-orange);            /* card labels, the dashed "One design system" box */
  --c-mh-oc-light-2: #FFDC95;           /* variables bar: Theme */
  --c-mh-oc-track: #1E1E22;             /* component bars: track */
  --c-mh-oc-cell: #202023;              /* ONE FILE: dark-mode cells */
  --mh-oc-chip-w: 78px;
  --mh-oc-chip-h: 23.62px;
  --mh-oc-box-h: 26.99px;
  --mh-oc-dash-bw: 0.49px;              /* dashed box: inside stroke, dash 4 / gap 4 */
  --mh-oc-cell-w: 14px;
  --mh-oc-cell-w-dark: 26px;
  --mh-oc-cell-h: 10px;
  --mh-oc-grid-x: 58px;                 /* ONE FILE: cells start 58 from the left */
  --mh-oc-light-w: 74px;
  --mh-oc-dark-w: 110px;
  --mh-oc-bar-h: 14px;
  --mh-oc-dot: 6px;
  --mh-oc-name-w: 86px;
  --mh-oc-track-w: 124px;
  --mh-oc-num-w: 24px;
  --mh-oc-tick-w: 4px;
  --mh-oc-tick-h: 23px;
  --mh-oc-fig: 32px;
  --lh-mh-oc-chip: 19.76px;
  /* What I learned cards (3065:198669) */
  --mh-learn-w: 1152px;                 /* 2 x 560 + 32 */
  --mh-learn-card-w: var(--tk-w);
  --mh-learn-card-h: 221px;
  --lh-mh-learn: 160%;
}

/* ===== inDrive study, /explorations/indrive/ (owner 2026-10-12) =====
   The page's own visual layer, only used inside .cs-page--indrive (css/indrive.css). Everything else on the page
   (type, spacing, buttons, top bar, progress line, yellow full stops, takeaways, Next Project, footer) is the site's. */
:root {
  --c-idv-lime: #C1F11D;                 /* inDrive lime: the page accent */
  --c-idv-lime-14: rgba(193, 241, 29, 0.14);
  --c-idv-lime-22: rgba(193, 241, 29, 0.22);
  --c-idv-board: #FFFEE9;                /* cream evidence boards */
  --c-idv-board-legend: #FBFADF;         /* the legend strip under a board */
  --c-idv-board-good: #F6F5DE;           /* the "in-city" half of the Finding 02 board */
  --c-idv-board-line: #E8E6CF;           /* rules on cream */
  --c-idv-board-split: #E4E2C9;          /* the divider between board halves */
  --c-idv-ink: #0B0B0C;                  /* text on cream / lime */
  --c-idv-ink-muted: #4A4A40;
  --c-idv-red: #FF4D55;
  --c-idv-red-soft: #FF8A90;             /* red text on dark */
  --c-idv-red-14: rgba(255, 77, 85, 0.14);
  --c-idv-bad-bg: #FFE1E2; --c-idv-bad-fg: #B3121B;   /* "No trip distance" tag on cream */
  --c-idv-a: #3F6BFF; --c-idv-b: #16A34A;             /* route pins A / B (inDrive) */
  /* the playable offer (inDrive's own card) */
  --c-idv-phone: #1B1B1D; --c-idv-offer: #FFFFFF; --c-idv-offer-text: #111111; --c-idv-offer-muted: #666666;
  --c-idv-offer-chip: #F0F0EA; --c-idv-offer-chip-hl: #E7F9C8; --c-idv-offer-btn: #F2F2EC; --c-idv-offer-dash: #CCCCCC;
  --c-idv-lens-muted: #777777; --c-idv-lens-text: #555555;
  --shadow-idv-offer: 0 30px 80px rgba(0, 0, 0, 0.55);
  --shadow-idv-lens: 0 40px 80px -10px rgba(40, 50, 0, 0.35), 0 8px 20px rgba(40, 50, 0, 0.12);
  --shadow-idv-card: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  --shadow-idv-pin: 0 0 0 3px var(--c-idv-board), 0 4px 10px rgba(11, 11, 12, 0.25);
  --sp-28: 28px; --sp-64: 64px; --sp-120: 120px;   /* spacing steps used by the inDrive page */
  --idv-pin: 28px;                       /* callout pin */
  --idv-pin-gap: 14px;                   /* pin -> the edge of what it points to */
  --idv-num-stroke: 4px;                 /* outlined finding numerals: drawn under a background-coloured fill (paint-order), 2 px shows */
  --idv-mark-px: 0.26em;                 /* highlight bar: side padding (owner 2026-10-13) */
  --idv-mark-asc: 0.95em;               /* Figtree's ascent: the content box top sits round(0.95em) above the baseline */
  --idv-mark-gap-v: 0.11em;              /* equal lime above the tallest letter and below the lowest descender (round 6) */
  --idv-mark-top: 0.125em;               /* band top 0.11em above 0.715em (the middle of Figtree's letter tops: capitals 0.70, f 0.719, i/j dots 0.733): 0.95 - 0.825 */
  --idv-mark-h: 1.15em;                  /* band height: 0.11 + 0.715 + 0.215 descender + 0.11; the same box with or without descenders */
  --idv-mark-room: 0.3em;                /* round 9: the marker's paint area reaches past any band bottom (vertical padding never moves the line) */
  --idv-mark-pb: 0.08em;                 /* padding-bottom so the painted box reaches the band's bottom (0.325em below the baseline) */
  --idv-mark-gap: 7px;                   /* at least this much between stacked marker boxes: line-height = max(1.22, band + gap) */
  --idv-ic: 40px; --idv-ic-sm: 32px;     /* icon tiles */
  --idv-av: 40px; --idv-av-mini: 28px;   /* initials avatars */
  --idv-gcard-w: 400px;                  /* the game's offer card */
  --idv-game-w: 940px;                   /* card + panel */
  --idv-flip: 0.6s; --idv-flip-half: 0.3s;
  --idv-timer-h: 6px;
  --idv-step-gap: 40px;                  /* maths step cards: the arrow lives in the gap */
  --idv-anno-w: 290px;                   /* Finding 03 annotation cards */
  --idv-anno-phone: 340px;
  --idv-anno-pin: 24px;
  --idv-mini-dur: 70s;                   /* the comment marquee: one set per 70 s (slower than Reviews) */
  --c-idv-line-ink: rgba(11, 11, 12, 0.12);   /* hairlines on cream */
  --c-idv-ink-08: rgba(11, 11, 12, 0.08);     /* the empty answer slot */
  --shadow-idv-lime-card: 0 16px 32px -16px rgba(40, 50, 0, 0.45);
  --idv-anno-phone-t: 280px;             /* Finding 03 screen, tablet */
  /* round 8 (owner 2026-10-13) */
  /* round 9 (owner 2026-10-13): every phone is one real proportion (9 x 19.5) and one size per section; boards breathe */
  --ph-ar: 9 / 19.5;                     /* the phone screen */
  --ph-blend: 48px;                      /* a screenshot shorter than the screen blends into its own bottom colour */
  /* round 14 (owner 2026-10-13) */
  --idv-cmpb-w: min(236px, calc((var(--idv-avail) - 186px) / 2.169 + 18px), calc((100vw - 2 * var(--page-margin) - 589px) / 3));   /* the grouped comparison board: three phones, one width (236 at 1440 x 900) */
  --idv-cmpb-zone: 190px;
  --idv-cmpb-title-fs: 17px; --idv-cmpb-tag-h: 28px; --idv-cmpb-dot: 8px;   /* v4.3 C: the city board heads */
  --c-idv-cmpb-tag-line: rgb(11 11 12 / 0.2); --c-idv-cmpb-bad: #E5484D; --c-idv-cmpb-good: #2E9E44;                /* the label zone outside each group */
  --idv-rematch-pad: 12px;               /* the lime frame to the cards, all four sides */
  /* round 13 (owner 2026-10-13): the approved screen layout (design/prototypes/indrive/screen-test-r13.html, section 1) */
  --idv-ph-w13: min(268px, calc((var(--idv-avail) - 112px - 18px) / 2.169 + 18px), calc((0.56 * (100vw - 2 * var(--page-margin) - 72px) - 56px - 112px) / 2));   /* every phone: 268 at 1440 x 900; the window height (rule A) and the 1 vs 5 pair in a 56 % board can make it smaller */
  --c-idv-phone-edge: #2A2A2C; --shadow-idv-phone13: 0 28px 50px rgba(11, 11, 12, 0.22);
  --idv-row-text: 44fr; --idv-row-board: 56fr; --idv-row-gap: 72px; --idv-row-text-max: 520px;
  --idv-row-h: 40px; --idv-row-h-lh: 1.12; --idv-row-body: 19px; --idv-row-body-lh: 1.6;
  --idv-board13-pad: 56px; --idv-board13-padl: 72px; --idv-board13-r: 24px; --idv-pair13-gap: 56px; --idv-lbl-fs: 16px;
  /* round 12 (owner 2026-10-13): sizes from the window (rule A). available = 100vh - 85 nav - 80; one phone width for the page,
     set by the tallest screenshot (2.163): 299 px at a 900 px window, 253 at 800 */
  --idv-avail: calc(100vh - var(--cs-nav-h) - 80px);
  --idv-board-top: 64px; --idv-board-bot: 48px;   /* a board: its chip row on top, padding under the phone */
  --idv-note-zone: 230px;                /* the label zone beside a phone: the arrow's outside part, 8 px, the label */
  --idv-legend-side-w: 220px;            /* a legend beside the phone (never under it) */
  --idv-pair-gap3: calc((var(--idv-ph-w) - 20px) * 0.61);   /* between the 1 vs 5 phones: room for "Same fare" and its arrows */
  --idv-f1-board-w: calc(2 * var(--idv-ph-w) + var(--idv-pair-gap3) + 2 * var(--idv-board-pad));   /* the pinned board: the pair is its widest screen */
  /* round 11 (owner 2026-10-13, final): phone widths, bezel included (round 12 replaces them below) */
  --idv-ph-w2: clamp(220px, calc(50px + 18.75vw), 320px);   /* two-phone boards: 320 at 1440, 290 at 1280 */
  --idv-cover-ph-w: clamp(200px, calc(10px + 18.75vw), 280px);   /* the hero cover's three phones: 280 at 1440 */
  --idv-ph-w: clamp(200px, calc((var(--idv-avail) - 132px) / 2.163 + 20px), 420px);   /* round 12: every phone (replaces the line above) */
  --idv-pair-gap2: 64px;                 /* between the two phones of a pair */
  --idv-lift: -4px;                      /* hover: the page's card lift (.idv-q) */
  --idv-board-pad: 48px;                 /* round 12: phone to board side and bottom (rule A) */
  --idv-note-clear: 32px;                /* clear space around a callout */
  --idv-text-col: min(520px, 34%);       /* the text column next to a board (never wider than 560) */
  --idv-map-w: calc(var(--idv-ph-w2) - 20px);   /* the in-city map (an image, not a phone): as wide as a pair phone's screen, 300 at 1440 */                    /* the in-city map in Finding 02 */
  --idv-text-max: 560px;                 /* the widest a text column next to a board may be */
  --idv-note-fs: 16px;                   /* callout text */
  --idv-section-gap: 100px;              /* Verdance's section rhythm (computed: 100 px between its blocks) */
  --idv-cmp-gap: 240px;                  /* between the two city-to-city phones: pin 1, the map's callout and its clear space */
  --idv-lens-note-h: 104px;              /* room under the Rate Check line for its callout */
  --ph-b: 10px; --ph-r: 44px;            /* the phone frame: bezel, outer radius (screen radius = 34) */
  --c-white-90: rgba(255, 255, 255, 0.9); --c-white-70: rgba(255, 255, 255, 0.7);   /* restored (round 8): lost in round 7 when a token line was deleted */
  --c-idv-ink-40: rgba(11, 11, 11, 0.4); --c-idv-ink-90: rgba(11, 11, 11, 0.9);   /* round 10: the in-screen arrow's shadow and label pill (#0B0B0B) */
  --c-white-12: rgba(255, 255, 255, 0.12); --c-idv-ink-15: rgba(11, 11, 12, 0.15);
  --shadow-idv-phone: 0 24px 48px -24px rgba(40, 50, 0, 0.35);
  --shadow-idv-phone-hover: 0 32px 56px -24px rgba(40, 50, 0, 0.45);   /* round 11: the lifted phone */
  --ph-arrow-head: 7px;                  /* the callout arrow's head sits this far below its box top */
  --idv-callout-w: 120px;                /* room beside the "Choose a driver" phone for the callout text */
  --idv-badge-fs: 14px; --sp-18: 18px;
  --idv-draw: 600ms; --idv-swap: 220ms;  /* the arrows draw in once; Play again / New rides cross-fade */
  --idv-noodle-down: 64px; --idv-noodle-down-m: 22px;
  /* rounds 4 + 5 (owner 2026-10-12) */
  --idv-tile-num: 72px; --idv-tile-label: 18px; --lh-130-n: 1.3;   /* stat tiles: number, two-line label area */
  --idv-vs: 56px;                        /* the "vs" circle */
  --c-white-75: rgba(255, 255, 255, 0.75); --c-white-35: rgba(255, 255, 255, 0.35); --c-white-40: rgba(255, 255, 255, 0.4); --c-white-85: rgba(255, 255, 255, 0.85); --c-white-80: rgba(255, 255, 255, 0.8); --c-white-08: rgba(255, 255, 255, 0.08);
  --idv-seg-bw: 1.5px;                   /* the segmented switch's outline (round 7) */
  --c-idv-red-70: rgba(255, 77, 85, 0.7); --idv-strike-w: 1.5px;   /* "Why this one" 01: the strike line */
  --idv-rbar-w: 180px;
  --idv-bars-k: 72px; --idv-bars-k-p: 56px; --idv-bars-v: 40px; --idv-bars-read: 148px;   /* mean vs median columns */                   /* stress-test table: the rate bar */
  --idv-statement-w: 1000px;             /* centred closing statements */
  --idv-band-w: 1100px;                  /* the decision band heading */
  --idv-live-w: 2.5px; --idv-live-dur: 3s; --c-idv-live: #7FA800;   /* the Rate Check line's live border */
  --idv-endlogo-h: 32px;
  /* the passenger chip's dashed outline: 2 px lime (#C1F11D = --c-idv-lime), 4 px dashes; a 4 px stroke on the edge, so 2 px shows inside the pill */
  --idv-chip-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='16' ry='16' fill='none' stroke='%23C1F11D' stroke-width='4' stroke-dasharray='4 4'/%3E%3C/svg%3E");
  --idv-kind-h: 22px;
  --idv-tally-row: 36px; --idv-rematch-w: 1120px; --idv-gcard-w-rate: 460px;   /* round 6: compact panel rows; the rematch heading on one line, a wider summary card */
  --c-idv-good-on-cream: #3F5A00;       /* "good call" / good-ride results on the cream reveal (lime would vanish on cream) */                    /* ride kind tag */
  --c-idv-kind-below: #E6E5D6; --c-idv-kind-below-fg: #3A3A33;   /* "Below his usual rate": muted neutral */
  /* round 3 (owner 2026-10-12) */
  --idv-hero-w: 900px;                   /* centred hero column */
  --idv-logo-h: 28px;                    /* inDrive logo height (hero, cover corner) */
  --idv-chip-h: 32px; --idv-chip-ls: 0.08em; --idv-dash: 4px;   /* evidence chips: one size; the passenger chip's 4 px dash */
  --idv-chipcol: 300px;                  /* the chip column in "The field" */
  --idv-fade-h: 64px;                    /* cut screens fade into the board over the last 64 px */
  --idv-tile-h: 200px;                   /* lime stat tiles */
  --idv-pat-k: 180px;                    /* the pattern: finding label column */
  --idv-badge-h: 40px;                   /* "The solution" badge (>= 40) */
  --idv-flip-w: 320px;                   /* the Today / Proposed / Focus stage */
  --idv-why-n: 140px; --idv-why-vis: 320px;   /* "Why this one" list: numeral and visual columns */
  --idv-krow-k: 260px; --idv-krow-k-wide: 220px;   /* editorial rows: label column */
  --fs-96: 96px; --r-36: 36px; --sp-56: 56px;
  --idv-chipcol-t: 260px; --idv-tile-h-t: 160px; --idv-tile-h-p: 132px; --idv-why-n-t: 96px; --idv-pat-k-t: 140px; --idv-logo-h-p: 20px;
  --idv-shot-lg: 360px; --idv-pair-h: min(calc(var(--idv-scrolly-h) - 240px), 540px); --idv-pair-gap: 96px;
  --shadow-idv-before: 0 20px 40px -20px rgba(40, 50, 0, 0.35);
  --idv-scrolly-h: var(--idv-avail);
}

/* ===== inDrive R16 (owner 2026-10-13): tablet and phone values. Desktop (>= 1190) uses none of these, except the 1280 lens card. ===== */
:root {
  --idv-lens-w-desk: 640px;          /* the lens card at 1190 to 1439: the 1440 width, so the label and arrow sit as at 1440 */
  --idv-plist-gap: 16px;             /* the numbered list: 16 under the phone, 12 between rows */
  --idv-plist-row: 12px;
  --idv-plist-pin: 20px;
  --idv-pin-phone: 24px;             /* pins on phones (28 above 768) */
  --idv-plist-res: 74px;             /* 1000 to 1189: room kept under every phone for a list of up to two rows (rule A) */
  --idv-ph-tab: 260px;               /* 768 to 999: a single phone */
  --idv-ph-tab2: 220px;              /* 768 to 999: each phone of a pair */
  --idv-board-pad-phone: 20px;       /* < 768: boards (radius 16, the site's --r-16) */
  --idv-pair-gap-phone: 12px;
  --idv-ph-min-phone: 240px;         /* < 768: a single phone is 78 % of the board's inner width, 240 to 280 */
  --idv-ph-max-phone: 280px;
  --idv-ph-share-phone: 0.78;
  --idv-bezel-k: 0.0336;             /* the phone frame scales with its width: 9 px bezel and 44 px corner at 268 */
  --idv-corner-k: 0.164;
  --idv-hint-gap: 12px;
  --idv-under-gap: 12px;             /* the lens label under the pill */
}
/* homepage inDrive card, phone composition (R16): the Work cards keep 1250 x 402 on phones, so the cover's text is set for that size */
:root { --ex-hl-min-phone: 22px; --ex-logo-min-phone: 12px; --n-ex-ar: 0.3216; }   /* --n-ex-ar: the Work cover ratio, 402 / 1250 */

/* ===== inDrive R17 (owner 2026-10-13): hero A1, the G3 pixel grid, Next Project words ===== */
:root {
  --idv-a1-ref-w: 1220;                 /* hero A1 reference stage (design/prototypes/indrive/hero-A1.html): 1220 x 740 */
  --idv-a1-ratio: 1220 / 740;
  --idv-a1-r: 24px; --idv-a1-r-phone: 16px;
  --idv-a1-h-tab: 44px; --idv-a1-h-phone: 36px;
  --c-g3-line: rgba(242, 240, 236, 0.14);   /* G3 (design/prototypes/indrive/numbers-grid.html, version 3) on the dark page */
  --c-g3-field: rgba(242, 240, 236, 0.10);
  --c-g3-fg: #F2F0EC;
  --c-g3-hover: rgba(193, 241, 29, 0.05);
  --c-g3-line-light: rgba(11, 11, 12, 0.14); --c-g3-field-light: rgba(11, 11, 12, 0.08); --c-g3-fg-light: rgba(11, 11, 12, 0.7);
  --g3-px: 7px; --g3-field: 12px; --g3-field-off: 6px; --g3-breathe: 3.2s;
  --g3-num: 72px; --g3-label: 19px; --g3-gap: 18px; --g3-pad: 36px 32px 32px; --g3-min-h: 168px;
  --g3-num-tab: 56px; --g3-label-tab: 17px; --g3-pad-tab: 24px; --g3-min-tab: 136px;
  --g3-num-phone: 48px; --g3-label-phone: 16px; --g3-pad-phone: 20px; --g3-min-h-phone: 128px;
  --cs-tag-in: 16px;                    /* the CASE STUDY pill on the Next Project image */
}

/* ===== inDrive R18 (owner 2026-10-13): one spacing rhythm below 1000 (tablet values; phone values below 768) ===== */
:root {
  --idv-r-eyebrow: 14px; --idv-r-head: 24px; --idv-r-para: 16px; --idv-r-btns: 32px; --idv-r-visual: 40px; --idv-r-cap: 16px; --idv-r-block: 64px; --idv-r-sec: 120px;
  --idv-r-tabs: 20px;            /* tabs and the thing they control */
  --idv-step-row: 16px;          /* phone maths steps: 16 above and below each hairline */
  --idv-step-sub: 15px;          /* phone maths steps: the sub-line */
  --idv-pat-card-gap: 12px; --idv-pat-max-tab: 640px;
  --idv-bars-row-gap: 14px; --idv-bars-try-top: 24px; --idv-bars-try-bot: 12px; --idv-bars-h-phone: 10px;
}
@media (max-width: 767.98px) {
  :root { --idv-r-eyebrow: 12px; --idv-r-head: 20px; --idv-r-btns: 28px; --idv-r-visual: 32px; --idv-r-block: 48px; --idv-r-sec: 96px; }
}

/* ===== inDrive R19 (owner 2026-10-13): phone ledgers and the hero badges ===== */
:root { --idv-a1-badge-phone: 44px; --idv-tally-pad: 14px; --idv-tally-line: 6px; --idv-tally-tag-gap: 6px; /* + the word space = 10 px between "Ride 1" and its tag */ }

/* ===== v4.2 (owner 2026-10-14) ===== */
:root { --idv-tally-pad-d: 10px; }   /* desktop ledger rows: 10 above and below (fits the game in one 1280 x 800 window); 14 below 1000 */
@media (max-width: 999.98px) { :root { --idv-tally-pad-d: var(--idv-tally-pad); } }

/* v4.3: short desktop windows, the rematch panel and summary card */
:root { --idv-short-sec: 12px; }
/* v4.5 (owner 2026-10-14): the quiet label, replacing the spaced-capital labels site-wide (components.css .lbl-q list) */
:root { --lbl-q-fw: 500; --lbl-q-fw-c: 600; --lbl-q-fs: 14px; --lbl-q-lh: 1.4; --lbl-q-cs-shift: 9.4px;   /* cs-shift: the old 24 px case-study label minus the new one (29 - 19.6), so the gap to the title stays */
        --c-idv-tag-line-dark: rgb(255 255 255 / 0.2); }
@media (max-width: 767.98px) { :root { --lbl-q-fs: 13px; } }
:root { --icon-12: 12px; }
/* v4.5.2: section eyebrows (components.css .eyebrow); cs-shift: the old 24 px case-study label (29) minus the eyebrow (16.9), so the gap
   to the title stays */
:root { --eyebrow-fw: 600; --eyebrow-fs: 13px; --eyebrow-lh: 1.3; --eyebrow-ls: 0.06em; --eyebrow-cs-shift: 12.1px; }
@media (max-width: 767.98px) { :root { --eyebrow-fs: 12px; } }