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

@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: "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", sans-serif;
  --font-glegoo: "Glegoo", 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;
  --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: 1678px;
  --tl-text-h: 18px;
  --tl-line-a: 350px;
  --tl-line-b: 355px;
  --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;
  --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-card: 400ms;
  --dur-hover: 300ms;
  --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: 68px;
  --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;
  --cs-tk-card-w: 488px; --cs-tk-card-h: 308px;
  --cs-tk-wide-h: 349px;
  --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: 560px;
  --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: 598px;
  --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-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 */
  /* 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;
  }
}
@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;
  }
}

/* === 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: 1678; --n-tl-line-a: 350; --n-tl-line-b: 355;
  --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) + 24px);
  --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 */
}