/* Hand-lettered display face used for small annotations (e.g. the
   "Designing at Zeta" note in the hero). Self-hosted from /asset. */
@font-face {
    font-family: 'Lazy Dog';
    src: url('https://cdn.jsdelivr.net/gh/Aaditxn13/Portfolio---2026@070103a24eed226e60226dc6c6e9841e851bc65a/asset/lazy_dog.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exposure Trial';
    src: url('https://cdn.jsdelivr.net/gh/Aaditxn13/Portfolio---2026@070103a24eed226e60226dc6c6e9841e851bc65a/asset/fonts/ExposureTrial-10.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Exposure Trial';
    src: url('https://cdn.jsdelivr.net/gh/Aaditxn13/Portfolio---2026@070103a24eed226e60226dc6c6e9841e851bc65a/asset/fonts/ExposureItalicTrial-10.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

:root {
    --bg-color: #fcfbf9;
    --bg-light: #fff;
    --bg-light2: #fbf9fa;
    --bg-night: #150F1E;
    --text-dark: #1a1a1a;
    --shadow-color: #c7c7c7;
    --shadow-transition: #e8e6e5a5;
    --text-primary: #1A1A1A;
    --text-muted: #666666;
    --accent-green: #98EEB7;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --transition-standard: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    --layout-gutter: clamp(24px, 8vw, 181px);
    --surface-padding: clamp(18px, 3vw, 40px);
    --surface-padding-bottom: clamp(18px, 2vw, 20px);

    /* Breakpoint contract:
       Desktop: 1281px and up (base styles)
       Laptop:  769px through 1280px
       Mobile:  768px and below
       Narrow-phone queries may still refine values inside the mobile tier. */

    /* Shared dot/ruler grid — one source of truth for page background + hero */
    --grid-unit: 30px;
    /* Hero zoom factor: render the entire hero (and its dot grid) at this
       multiple of the Figma 1440 reference size. Both the hero artboard
       AND the body dot grid multiply by this same scalar (via --grid-scale),
       so the corners / lines / decorative shapes / pixels always land on
       dot intersections regardless of zoom. Lower = smaller hero + denser
       dot pattern; higher = larger hero + sparser dots. */
    --hero-v2-zoom: 0.9;
    /* --grid-scale is a unitless number. Chrome (at least 132) does not reliably
       resolve `min(1, calc(100vw / 1440px))` (length÷length → number coerced
       inside a nested min) when substituted into downstream calc() — that made
       every body background calc fall back to its initial value (background-size
       computed as `auto`, making the dot grid invisible). So the real value is
       computed in JS (see set-grid-scale in index.html) and written to :root.
       This static fallback is used until that script runs or if it fails. */
    --grid-scale: 1;
    /* Height of the sticky navbar that sits above the hero frame.
       Used to anchor the body dot grid so it aligns with the hero's ruler.
       = .navbar padding-top (12) + .navbar__pill height (12*2 + 36 = 60)
         + .navbar padding-bottom (12) = 84px. Real value written at runtime
       by the JS in index.html. */
    --hero-nav-h: 84px;
    /* Anchor offsets from the hero frame origin to the first ruler intersection,
       minus half a tile so the dot CENTER (not corner) lands on the line.
       X: content-left (169) + corner-x (210) − 15 = 364
       Y: content-top (75) + ruler-top (133) − 15 = 193 */
    --hero-anchor-x: 364px;
    --hero-anchor-y: 193px;

    /* Global vertical lift applied to the hero. Because the body dot grid is
       anchored off --hero-nav-h, this same value is subtracted from the body
       background-position so the hero ruler and body dots stay in lockstep.
       Positive values lift the hero up; negative values push it down within
       the first viewport so the content sits closer to the visual centre. */
    --hero-lift: -24px;

    /* Shared ruler color (used by .hero-v2 AND navbar guides). Kept on :root
       so the navbar, which lives outside .hero-v2, can read the same token. */
    --hero-v2-grid-line: #c1c1a5;

    /* ==================================================================
       TYPOGRAPHY SYSTEM
       ------------------------------------------------------------------
       Role-based scale. ONE source of truth. Pick the role that matches
       the *purpose* of the text, not the component it's in.
       Two families:
         - SERIF (Exposure Trial) → display & editorial moments
                                       (hero titles, case-study H1s,
                                        footer display, page headlines)
         - SANS  (Bricolage Grotesque) → everything else
                                       (UI, body, labels, captions, nav)
       Each role exposes 4 vars: -size, -weight, -line, -track. Use the
       matching .t-{role} utility class in HTML, OR pull the vars into
       a component CSS rule. Do NOT introduce new component-named tokens.
       ------------------------------------------------------------------
       Quick map (case study & site):
         hero / footer display     → t-display-xl  (serif)
         page H1                   → t-display-lg  (serif)
         case study H1             → t-display-md  (serif)
         section / modal title     → t-display-sm  (serif)
         in-content H1 (sans)      → t-h1
         section header (sans)     → t-h2  (e.g. "Reflections.")
         sub-section / card title  → t-h3
         small group title         → t-h4
         large intro paragraph     → t-lead   (subtitles)
         oversize body             → t-body-lg (about-page paragraphs)
         default body              → t-body
         compact body              → t-body-sm (footer-role, helper)
         pull quote / testimonial  → t-quote
         image / helper caption    → t-caption (also review author)
         UPPERCASE eyebrow         → t-eyebrow (OVERVIEW, TIMELINE…)
         small UI label            → t-label   (back link, form labels)
         metadata value            → t-meta    (PLATFORM: Flutter)
         button / UI action        → t-ui
         navbar link               → t-nav
       ================================================================== */
    --font-sans: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
    --font-serif: 'Exposure Trial', Georgia, 'Times New Roman', serif;

    /* Weights — single source */
    --t-weight-regular:  400;
    --t-weight-medium:   500;
    --t-weight-semibold: 600;
    --t-weight-bold:     700;

    /* ── Display (serif) ─────────────────────────────────────────────── */
    --t-display-xl-size:   clamp(2.7rem, 3.8vw, 4.25rem);
    --t-display-xl-weight: var(--t-weight-regular);
    --t-display-xl-line:   1.12;
    --t-display-xl-track:  -0.04em;

    --t-display-lg-size:   clamp(2.1rem, 3.2vw, 2.75rem);
    --t-display-lg-weight: var(--t-weight-regular);
    --t-display-lg-line:   1.12;
    --t-display-lg-track:  -0.02em;

    --t-display-md-size:   clamp(1.85rem, 2.6vw, 2.5rem);
    --t-display-md-weight: 300;
    --t-display-md-line:   1.15;
    --t-display-md-track:  -0.015em;

    --t-display-sm-size:   clamp(1.5rem, 2vw, 1.85rem);
    --t-display-sm-weight: var(--t-weight-regular);
    --t-display-sm-line:   1.16;
    --t-display-sm-track:  -0.015em;

    /* ── Headings (sans) ─────────────────────────────────────────────── */
    --t-h1-size:   clamp(1.75rem, 2.4vw, 2.25rem);
    --t-h1-weight: var(--t-weight-semibold);
    --t-h1-line:   1.18;
    --t-h1-track:  -0.01em;

    --t-h2-size:   clamp(1.35rem, 1.85vw, 1.75rem);
    --t-h2-weight: var(--t-weight-semibold);
    --t-h2-line:   1.25;
    --t-h2-track:  -0.005em;

    --t-h3-size:   clamp(1.15rem, 1.4vw, 1.35rem);
    --t-h3-weight: var(--t-weight-semibold);
    --t-h3-line:   1.3;
    --t-h3-track:  0;

    --t-h4-size:   clamp(1rem, 1.15vw, 1.125rem);
    --t-h4-weight: var(--t-weight-semibold);
    --t-h4-line:   1.35;
    --t-h4-track:  0;

    /* ── Text (sans) ─────────────────────────────────────────────────── */
    --t-lead-size:   clamp(1.05rem, 1.3vw, 1.35rem);
    --t-lead-weight: var(--t-weight-regular);
    --t-lead-line:   1.4;
    --t-lead-track:  0;

    --t-body-lg-size:   clamp(1.1rem, 1.4vw, 1.25rem);
    --t-body-lg-weight: var(--t-weight-regular);
    --t-body-lg-line:   1.5;
    --t-body-lg-track:  0;

    --t-body-size:   1rem;
    --t-body-weight: var(--t-weight-regular);
    --t-body-line:   1.6;
    --t-body-track:  0;

    --t-body-sm-size:   0.9375rem;
    --t-body-sm-weight: var(--t-weight-regular);
    --t-body-sm-line:   1.5;
    --t-body-sm-track:  0;

    /* ── Quote / Caption ─────────────────────────────────────────────── */
    --t-quote-size:   clamp(1.05rem, 1.2vw, 1.25rem);
    --t-quote-weight: var(--t-weight-medium);
    --t-quote-line:   1.5;
    --t-quote-track:  0;

    --t-caption-size:   0.875rem;
    --t-caption-weight: var(--t-weight-regular);
    --t-caption-line:   1.5;
    --t-caption-track:  0;

    /* ── Labels (UI / metadata) ──────────────────────────────────────── */
    /* Eyebrow — UPPERCASE small label that introduces a section */
    --t-eyebrow-size:   0.75rem;
    --t-eyebrow-weight: var(--t-weight-semibold);
    --t-eyebrow-line:   1.35;
    --t-eyebrow-track:  0.08em;

    /* Label — sentence-case small label (back link, form fields) */
    --t-label-size:   0.8125rem;
    --t-label-weight: var(--t-weight-medium);
    --t-label-line:   1.35;
    --t-label-track:  0.02em;

    /* Meta — value text next to an eyebrow (e.g. Flutter, Lead Designer) */
    --t-meta-size:   0.9375rem;
    --t-meta-weight: var(--t-weight-medium);
    --t-meta-line:   1.5;
    --t-meta-track:  0;

    /* UI — buttons, inline actions, controls */
    --t-ui-size:   1rem;
    --t-ui-weight: var(--t-weight-medium);
    --t-ui-line:   1.3;
    --t-ui-track:  0;

    /* Nav — site header links */
    --t-nav-size:   1.125rem;
    --t-nav-weight: var(--t-weight-medium);
    --t-nav-line:   1;
    --t-nav-track:  0;

    /* Mobile-overlay nav (larger tap targets) */
    --t-nav-mobile-size: clamp(1.6rem, 5vw, 2rem);

    /* ==================================================================
       LEGACY ALIASES — DO NOT add new --type-* tokens.
       These exist so the existing site (homepage, about, play, hero,
       footer) keeps rendering identically while the case study pages
       and any new code consume the --t-* tokens above. New components
       must use --t-* directly.
       ================================================================== */
    --type-weight-regular:  var(--t-weight-regular);
    --type-weight-medium:   var(--t-weight-medium);
    --type-weight-semibold: var(--t-weight-semibold);
    --type-weight-bold:     var(--t-weight-bold);

    --type-serif-display-size:    var(--t-display-lg-size);
    --type-serif-display-weight:  var(--t-display-lg-weight);
    --type-serif-display-leading: var(--t-display-lg-line);
    --type-serif-display-tracking: var(--t-display-lg-track);

    --type-serif-modal-size:    var(--t-display-sm-size);
    --type-serif-modal-leading: var(--t-display-sm-line);

    --type-serif-case-title-size:    var(--t-display-md-size);
    --type-serif-case-title-weight:  var(--t-display-md-weight);
    --type-serif-case-title-leading: var(--t-display-md-line);

    --type-serif-about-size:    var(--t-display-lg-size);
    --type-serif-about-leading: var(--t-display-lg-line);

    --type-serif-about-section-size:     var(--t-display-sm-size);
    --type-serif-about-section-leading:  var(--t-display-sm-line);
    --type-serif-about-section-tracking: var(--t-display-sm-track);

    --type-about-paragraph-size:    var(--t-body-lg-size);
    --type-about-paragraph-leading: var(--t-body-lg-line);
    --type-about-paragraph-weight:  var(--t-body-lg-weight);

    --type-serif-card-title-size:    var(--t-display-sm-size);
    --type-serif-card-title-leading: var(--t-display-sm-line);

    --type-nav-size:    var(--t-nav-size);
    --type-nav-weight:  var(--t-nav-weight);
    --type-nav-leading: var(--t-nav-line);

    --type-mobile-overlay-nav-size: var(--t-nav-mobile-size);

    --type-heading-size:    var(--t-h2-size);
    --type-heading-weight:  var(--t-h2-weight);
    --type-heading-leading: var(--t-h2-line);

    --type-lead-size:    var(--t-lead-size);
    --type-lead-weight:  var(--t-lead-weight);
    --type-lead-leading: var(--t-lead-line);

    --type-body-size:    var(--t-body-size);
    --type-body-weight:  var(--t-body-weight);
    --type-body-leading: var(--t-body-line);

    --type-emphasis-size:    var(--t-body-size);
    --type-emphasis-weight:  var(--t-weight-medium);
    --type-emphasis-leading: var(--t-body-line);

    --type-quote-size:    var(--t-quote-size);
    --type-quote-weight:  var(--t-quote-weight);
    --type-quote-leading: var(--t-quote-line);

    --type-caption-size:    var(--t-caption-size);
    --type-caption-weight:  var(--t-caption-weight);
    --type-caption-leading: var(--t-caption-line);

    --type-label-size:     var(--t-eyebrow-size);
    --type-label-weight:   var(--t-eyebrow-weight);
    --type-label-tracking: var(--t-eyebrow-track);
    --type-label-leading:  var(--t-eyebrow-line);

    --type-overline-size:    var(--t-eyebrow-size);
    --type-overline-tracking: var(--t-eyebrow-track);

    --type-meta-size:    var(--t-meta-size);
    --type-meta-weight:  var(--t-meta-weight);
    --type-meta-leading: var(--t-meta-line);

    --type-ui-size:    var(--t-ui-size);
    --type-ui-weight:  var(--t-ui-weight);
    --type-ui-leading: var(--t-ui-line);

    --type-serif-display-size-sm:    clamp(1.45rem, 4.5vw, 1.85rem);
    --type-serif-case-title-size-sm: 1.75rem;

    /* ==================================================================
       CASE STUDY TYPOGRAPHY (--cs-*)
       ------------------------------------------------------------------
       Independent, editorial-leaning scale used ONLY by .pajelly-cs-body
       and its descendants (case study pages: project-1..N.html).
       Same role shape as --t-*, deliberately separate so the case study
       reading experience can evolve without disturbing the rest of the
       site (and vice versa).
       Differences vs --t-*:
         · body bumped from 16px → 18px (1.125rem) for long-form comfort
         · line-heights opened up (body 1.6 → 1.7, quote 1.5 → 1.55)
         · lead / quote / meta / caption / eyebrow / label all sized up
           one notch to keep the editorial rhythm
         · weights still inherit from the global --t-weight-* (universal)
       Component → role map (consumed by class rules below):
         .pajelly-title                            → cs-display-md
         .pajelly-subtitle                         → cs-lead
         .pajelly-label / .feature-label
           / .footer-title / .growth-exp__field    → cs-eyebrow
         .pajelly-desc / .feature-body
           / .feature-subtitle                     → cs-body
         .pajelly-val                              → cs-meta
         .review-quote                             → cs-quote
         .review-author / .feature-caption
           / .rating-text                          → cs-caption
         .feature-title                            → cs-h2
         .footer-name                              → cs-display-sm
         .footer-role                              → cs-body-sm
         .rating-number                            → cs-display-md (bold)
         .rating-stars                             → cs-h3
         .cs-back                                  → cs-label
         .cs-index__link                           → cs-caption
       ================================================================== */
    --cs-display-xl-size:   clamp(2.85rem, 4vw, 4.5rem);
    --cs-display-xl-weight: var(--t-weight-regular);
    --cs-display-xl-line:   1.1;
    --cs-display-xl-track:  -0.04em;

    --cs-display-lg-size:   clamp(2.35rem, 3.4vw, 3rem);
    --cs-display-lg-weight: var(--t-weight-regular);
    --cs-display-lg-line:   1.12;
    --cs-display-lg-track:  -0.02em;

    --cs-display-md-size:   clamp(2rem, 2.8vw, 2.75rem);
    --cs-display-md-weight: 300;
    --cs-display-md-line:   1.15;
    --cs-display-md-track:  -0.015em;

    --cs-display-sm-size:   clamp(1.65rem, 2.1vw, 2rem);
    --cs-display-sm-weight: var(--t-weight-regular);
    --cs-display-sm-line:   1.18;
    --cs-display-sm-track:  -0.015em;

    --cs-h1-size:   clamp(1.85rem, 2.5vw, 2.4rem);
    --cs-h1-weight: var(--t-weight-semibold);
    --cs-h1-line:   1.2;
    --cs-h1-track:  -0.01em;

    --cs-h2-size:   clamp(1.5rem, 1.95vw, 1.95rem);
    --cs-h2-weight: var(--t-weight-semibold);
    --cs-h2-line:   1.25;
    --cs-h2-track:  -0.005em;

    --cs-h3-size:   clamp(1.25rem, 1.5vw, 1.45rem);
    --cs-h3-weight: var(--t-weight-semibold);
    --cs-h3-line:   1.3;
    --cs-h3-track:  0;

    --cs-h4-size:   clamp(1.075rem, 1.25vw, 1.225rem);
    --cs-h4-weight: var(--t-weight-semibold);
    --cs-h4-line:   1.35;
    --cs-h4-track:  0;

    --cs-lead-size:   clamp(1.2rem, 1.5vw, 1.55rem);
    --cs-lead-weight: var(--t-weight-regular);
    --cs-lead-line:   1.45;
    --cs-lead-track:  0;

    --cs-body-lg-size:   clamp(1.25rem, 1.55vw, 1.4rem);
    --cs-body-lg-weight: var(--t-weight-regular);
    --cs-body-lg-line:   1.6;
    --cs-body-lg-track:  0;

    /* Body — 18px (1.125rem) editorial reading size */
    --cs-body-size:   1.125rem;
    --cs-body-weight: var(--t-weight-regular);
    --cs-body-line:   1.7;
    --cs-body-track:  0;

    --cs-body-sm-size:   1rem;
    --cs-body-sm-weight: var(--t-weight-regular);
    --cs-body-sm-line:   1.6;
    --cs-body-sm-track:  0;

    --cs-quote-size:   clamp(1.2rem, 1.5vw, 1.55rem);
    --cs-quote-weight: var(--t-weight-medium);
    --cs-quote-line:   1.55;
    --cs-quote-track:  0;

    --cs-caption-size:   0.9375rem;
    --cs-caption-weight: var(--t-weight-regular);
    --cs-caption-line:   1.55;
    --cs-caption-track:  0;

    --cs-eyebrow-size:   0.8125rem;
    --cs-eyebrow-weight: var(--t-weight-semibold);
    --cs-eyebrow-line:   1.35;
    --cs-eyebrow-track:  0.08em;

    --cs-label-size:   0.875rem;
    --cs-label-weight: var(--t-weight-medium);
    --cs-label-line:   1.4;
    --cs-label-track:  0.02em;

    --cs-meta-size:   1rem;
    --cs-meta-weight: var(--t-weight-medium);
    --cs-meta-line:   1.55;
    --cs-meta-track:  0;
}

body.night-mode {
    --hero-v2-grid-line: rgba(193, 193, 165, 0.28);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overscroll-behavior: none;
    cursor: auto
        /* reset base */
}

@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    @supports (overflow: clip) {
        html,
        body {
            overflow-x: clip;
        }
    }
}

/* Custom orange cursor dot */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: #FF6B00;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
                width 0.2s ease,
                height 0.2s ease,
                background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cursor-dot--blue {
    background: #72C5F9;
}

.cursor-dot--hover {
    width: 24px;
    height: 24px;
}

#custom-cursor-label {
    --cursor-label-scale: 0.72;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99998;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-width: min(360px, calc(100vw - 48px));
    color: #fff;
    pointer-events: none;
    transform: translate(10px, -58px) scale(var(--cursor-label-scale));
    transform-origin: 0 100%;
    opacity: 0;
    transition:
        opacity 0.18s ease,
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

#custom-cursor-label.is-expanded {
    --cursor-label-scale: 1;
    opacity: 1;
}

#custom-cursor-label.is-collapsing {
    --cursor-label-scale: 0.82;
}

.cursor-label__title {
    display: inline-flex;
    width: fit-content;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 999px;
    background: #ff7438;
    box-shadow:
        0 0 0 7px rgba(255, 255, 255, 0.34),
        0 16px 38px rgba(255, 107, 0, 0.32);
    font-family: var(--font-sans);
    font-size: clamp(1.08rem, 1.85vw, 2rem);
    font-weight: var(--type-weight-medium);
    line-height: 1;
    white-space: nowrap;
}

.cursor-label__desc {
    display: none;
    max-width: 28ch;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 28px;
    background: #ff7438;
    box-shadow:
        0 0 0 7px rgba(255, 255, 255, 0.26),
        0 16px 38px rgba(255, 107, 0, 0.3);
    font-family: var(--font-sans);
    font-size: clamp(0.96rem, 1.22vw, 1.18rem);
    font-weight: var(--type-weight-regular);
    line-height: 1.23;
}

#custom-cursor-label.has-description .cursor-label__desc {
    display: block;
}

body {
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-leading);
    color: var(--text-primary);
    background-color: var(--bg-color);
    background-image: radial-gradient(circle, #cfcfc4 1px, transparent 1px);
    background-size: calc(var(--grid-unit) * var(--grid-scale)) calc(var(--grid-unit) * var(--grid-scale));
    background-position:
        calc((100vw - 1440px * var(--grid-scale)) / 2 + var(--hero-anchor-x) * var(--grid-scale))
        calc(var(--hero-nav-h) + var(--hero-anchor-y) * var(--grid-scale) - var(--hero-lift));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
    cursor: none;
}

body a, body button, body [role="button"], body input, body textarea, body select {
    cursor: none;
}

/* =====================================================================
   Full-page portfolio preload — dot grid; many pastel pixels chase one
   continuous ∞ path as a fading trail while assets finish loading.
   -------------------------------------------------------------------- */
.portfolio-loader-active {
    overflow: hidden;
}

.portfolio-loader {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: grid;
    place-items: center;
    background-color: var(--bg-color);
    isolation: isolate;
    transition: opacity 0.38s cubic-bezier(0.23, 1, 0.32, 1);
}

body.night-mode .portfolio-loader {
    background-color: var(--bg-color);
}

.portfolio-loader__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #cfcfc4 1px, transparent 1px);
    background-size: calc(var(--grid-unit) * var(--grid-scale)) calc(var(--grid-unit) * var(--grid-scale));
    background-position: center;
    background-repeat: repeat;
}

body.night-mode .portfolio-loader__grid {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

.portfolio-loader__stage {
    position: relative;
    z-index: 1;
    width: min(720px, 94vw);
    height: clamp(300px, 52vw, 420px);
    pointer-events: none;
}

.portfolio-loader__orbit {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.portfolio-loader__pixel {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(40px, calc(var(--grid-unit) * var(--grid-scale) * 1.7), 58px);
    height: clamp(40px, calc(var(--grid-unit) * var(--grid-scale) * 1.7), 58px);
    box-sizing: border-box;
    border-radius: min(10%, 2px);
    transform: translateZ(0);
    will-change: transform, opacity;
}

/* Hero pastel cycle — repeats for arbitrarily many spans */
.portfolio-loader__pixel:nth-child(6n + 1) { background: #FCC0CB; }
.portfolio-loader__pixel:nth-child(6n + 2) { background: #F9E3D0; }
.portfolio-loader__pixel:nth-child(6n + 3) { background: #D6DBF8; }
.portfolio-loader__pixel:nth-child(6n + 4) { background: #BCF8D8; }
.portfolio-loader__pixel:nth-child(6n + 5) { background: #F9B3E1; }
.portfolio-loader__pixel:nth-child(6n + 6) { background: #BFE7FB; }

@media (max-width: 480px) {
    .portfolio-loader__stage {
        width: min(100%, 94vw);
        height: clamp(240px, 58vw, 340px);
    }

    .portfolio-loader__pixel {
        width: clamp(34px, calc(var(--grid-unit) * var(--grid-scale) * 1.45), 48px);
        height: clamp(34px, calc(var(--grid-unit) * var(--grid-scale) * 1.45), 48px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-loader__pixel {
        will-change: auto;
    }
}

.portfolio-loader.portfolio-loader--done {
    opacity: 0;
    pointer-events: none;
}

/* =========================================================
   TYPOGRAPHY UTILITY CLASSES
   ---------------------------------------------------------
   Drop-in classes that apply a complete role from the type
   system. Prefer these in HTML over writing per-component
   font-* rules. They bind family + size + weight + line +
   letter-spacing in one go and stay in sync via the --t-*
   tokens defined in :root.

   When a component needs role typography PLUS extra styling
   (color, margin, etc.), it can still pull individual
   --t-{role}-{prop} vars in its CSS rule. Don't introduce
   new component-named --type-* tokens.

   Class shape:  .t-{role}      → full role
                 .t-italic      → italic modifier
                 .t-serif       → switch family to serif
                 .t-sans        → switch family to sans
                 .t-muted       → muted color modifier (--text-muted)
   ========================================================= */
.t-display-xl,
.t-display-lg,
.t-display-md,
.t-display-sm {
    font-family: var(--font-serif);
}

.t-display-xl {
    font-size: var(--t-display-xl-size);
    font-weight: var(--t-display-xl-weight);
    line-height: var(--t-display-xl-line);
    letter-spacing: var(--t-display-xl-track);
}

.t-display-lg {
    font-size: var(--t-display-lg-size);
    font-weight: var(--t-display-lg-weight);
    line-height: var(--t-display-lg-line);
    letter-spacing: var(--t-display-lg-track);
}

.t-display-md {
    font-size: var(--t-display-md-size);
    font-weight: var(--t-display-md-weight);
    line-height: var(--t-display-md-line);
    letter-spacing: var(--t-display-md-track);
}

.t-display-sm {
    font-size: var(--t-display-sm-size);
    font-weight: var(--t-display-sm-weight);
    line-height: var(--t-display-sm-line);
    letter-spacing: var(--t-display-sm-track);
}

.t-h1,
.t-h2,
.t-h3,
.t-h4,
.t-lead,
.t-body-lg,
.t-body,
.t-body-sm,
.t-quote,
.t-caption,
.t-eyebrow,
.t-label,
.t-meta,
.t-ui,
.t-nav {
    font-family: var(--font-sans);
}

.t-h1 {
    font-size: var(--t-h1-size);
    font-weight: var(--t-h1-weight);
    line-height: var(--t-h1-line);
    letter-spacing: var(--t-h1-track);
}

.t-h2 {
    font-size: var(--t-h2-size);
    font-weight: var(--t-h2-weight);
    line-height: var(--t-h2-line);
    letter-spacing: var(--t-h2-track);
}

.t-h3 {
    font-size: var(--t-h3-size);
    font-weight: var(--t-h3-weight);
    line-height: var(--t-h3-line);
    letter-spacing: var(--t-h3-track);
}

.t-h4 {
    font-size: var(--t-h4-size);
    font-weight: var(--t-h4-weight);
    line-height: var(--t-h4-line);
    letter-spacing: var(--t-h4-track);
}

.t-lead {
    font-size: var(--t-lead-size);
    font-weight: var(--t-lead-weight);
    line-height: var(--t-lead-line);
    letter-spacing: var(--t-lead-track);
}

.t-body-lg {
    font-size: var(--t-body-lg-size);
    font-weight: var(--t-body-lg-weight);
    line-height: var(--t-body-lg-line);
    letter-spacing: var(--t-body-lg-track);
}

.t-body {
    font-size: var(--t-body-size);
    font-weight: var(--t-body-weight);
    line-height: var(--t-body-line);
    letter-spacing: var(--t-body-track);
}

.t-body-sm {
    font-size: var(--t-body-sm-size);
    font-weight: var(--t-body-sm-weight);
    line-height: var(--t-body-sm-line);
    letter-spacing: var(--t-body-sm-track);
}

.t-quote {
    font-size: var(--t-quote-size);
    font-weight: var(--t-quote-weight);
    line-height: var(--t-quote-line);
    letter-spacing: var(--t-quote-track);
}

.t-caption {
    font-size: var(--t-caption-size);
    font-weight: var(--t-caption-weight);
    line-height: var(--t-caption-line);
    letter-spacing: var(--t-caption-track);
}

.t-eyebrow {
    font-size: var(--t-eyebrow-size);
    font-weight: var(--t-eyebrow-weight);
    line-height: var(--t-eyebrow-line);
    letter-spacing: var(--t-eyebrow-track);
    text-transform: uppercase;
}

.t-label {
    font-size: var(--t-label-size);
    font-weight: var(--t-label-weight);
    line-height: var(--t-label-line);
    letter-spacing: var(--t-label-track);
}

.t-meta {
    font-size: var(--t-meta-size);
    font-weight: var(--t-meta-weight);
    line-height: var(--t-meta-line);
    letter-spacing: var(--t-meta-track);
}

.t-ui {
    font-size: var(--t-ui-size);
    font-weight: var(--t-ui-weight);
    line-height: var(--t-ui-line);
    letter-spacing: var(--t-ui-track);
}

.t-nav {
    font-size: var(--t-nav-size);
    font-weight: var(--t-nav-weight);
    line-height: var(--t-nav-line);
    letter-spacing: var(--t-nav-track);
}

/* Family / style modifiers — combine with any role above */
.t-serif  { font-family: var(--font-serif); }
.t-sans   { font-family: var(--font-sans); }
.t-italic { font-style: italic; }
.t-muted  { color: var(--text-muted); }

/* =========================================================
   PAGE TRANSITIONS — FULL-PAGE FADE
   ---------------------------------------------------------
   Lightweight cross-document fade. Every navigation between
   the homepage and a case study (and back) plays as:
       1. Body fades to 0 over the current theme's bg colour
       2. Browser navigates (hidden under the bg colour)
       3. New page mounts hidden except #portfolio-loader (full-screen),
          then fades other body children back to 1

   The .cs-incoming class is set by a tiny inline <script> in
   each page's <head> when sessionStorage flags an incoming
   navigation; CSS hides each body sibling except #portfolio-loader
   before first paint so the preload screen can animate. The same head
   script pins the <html> background to the current theme colour (read from
   localStorage) so the in-between moment matches the theme.
   ========================================================= */

html.cs-incoming body > :not(#portfolio-loader) {
    opacity: 0 !important;
    animation: portfolio-stuck-reveal 0.001s 4s forwards;
}

html.cs-incoming body.cs-page > :not(#portfolio-loader) {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

.cs-case-entry-veil {
    position: fixed;
    inset: 0;
    z-index: 2147482500;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 44%),
        var(--cs-entry-veil-bg, #fcfbf9);
    opacity: 1;
    will-change: opacity;
}

body.night-mode .cs-case-entry-veil {
    background:
        radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 44%),
        #0d0d0d;
}

.cs-page.cs-reveal-active .cs-reveal-item {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    filter: blur(6px);
    transition:
        opacity 1180ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 1180ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 1280ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--cs-reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

.cs-page.cs-reveal-active .cs-reveal-item.cs-reveal-item--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

html[data-cs-mode="edit"] .cs-page .cs-reveal-item,
html[data-cs-reveal="off"] .cs-page .cs-reveal-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

@keyframes portfolio-loader-hide {
    to {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* If JS stalls (slow script.js, Chrome transition bug), reveal content anyway */
@keyframes portfolio-stuck-reveal {
    to { opacity: 1 !important; visibility: visible !important; }
}

body.portfolio-loader-active #portfolio-loader:not(.portfolio-loader--done) {
    animation: portfolio-loader-hide 0.001s 4s forwards;
}

/* =========================================================
   LAYOUT & COMPONENTS
   ========================================================= */

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--layout-gutter);
    position: relative;
    z-index: 20;
}

/* ==========================================================================
   Navbar — Figma Portfolio-26 (node 210:9606) — floating pill, sticky
   ========================================================================== */
[data-site-header] {
    position: sticky;
    top: 0;
    z-index: 1000;
    pointer-events: none;
}

.navbar {
    position: relative;
    width: 100%;
    padding: 12px var(--layout-gutter);
    display: flex;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
}

.navbar__pill {
    pointer-events: auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 1360px;
    padding: 12px 32px;
    background: #FFFFFF;
    border: 1px solid #E3E3D6;
    border-radius: 48px;
    box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.04);
    transition:
        background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: none;
}

.navbar__logo .logo-img {
    width: 36px;
    height: 36px;
    display: block;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar__logo:hover .logo-img {
    transform: rotate(15deg);
}

.nav-tray {
    display: flex;
    align-items: center;
    gap: clamp(24px, 2.6vw, 60px);
}

.nav-item {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--font-sans);
    color: #7D7772;
    font-size: var(--type-nav-size);
    font-weight: var(--type-nav-weight);
    font-synthesis: none;
    line-height: var(--type-nav-leading);
    text-transform: capitalize;
    padding: 11px 10px;
    white-space: nowrap;
    cursor: none;
    border-radius: 999px;
    transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:hover {
    color: #1A1A1A;
}

.nav-item.nav-item--resume:hover,
.nav-item.nav-item--resume:focus-visible {
    color: transparent;
    background: linear-gradient(92deg, #77E866 2.78%, #F2D357 26.42%, #FBBA65 43.84%, #FD88A5 62.95%, #ED6DDA 78.67%, #D55FFF 99.06%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-item.is-active {
    color: #1A1A1A;
    font-weight: var(--type-nav-weight);
}

.resume-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: clamp(14px, 2.4vw, 28px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.resume-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.resume-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 18, 15, 0.34);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.resume-modal__panel {
    position: relative;
    z-index: 1;
    width: min(82vw, 560px, calc(90dvh * 0.707));
    aspect-ratio: 595 / 842;
    overflow: hidden;
    border: 1px solid rgba(34, 31, 27, 0.14);
    border-radius: 14px;
    background: #EEEAE1;
    box-shadow: 0 28px 80px rgba(28, 24, 18, 0.24);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.resume-modal.is-open .resume-modal__panel {
    transform: translateY(0) scale(1);
}

.resume-modal__actions {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.resume-modal__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(34, 31, 27, 0.14);
    border-radius: 50%;
    background: #F8F6F0;
    color: #1A1A1A;
    cursor: none;
    text-decoration: none;
    transition:
        background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.resume-modal__icon-btn:hover,
.resume-modal__icon-btn:focus-visible {
    background: #EFECE4;
}

.resume-modal__icon-btn:active {
    transform: scale(0.96);
}

.resume-modal__preview {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #EEEAE1;
}

.resume-modal__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.resume-modal-open {
    overflow: hidden;
}

@media (max-width: 680px) {
    .resume-modal {
        padding: 10px;
    }

    .resume-modal__panel {
        width: min(94vw, calc(86dvh * 0.707));
    }

    .resume-modal__actions {
        top: 10px;
        right: 10px;
    }
}

/* Theme toggle — Figma 210:9618, circular chip housing sun/moon glyph */
.theme-toggle {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: #F6F6ED;
    border: 1px solid #E3E3D6;
    border-radius: 36px;
    color: #1A1A1A;
    cursor: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:hover {
    background: #EFEFE2;
    border-color: #D7D7C7;
}

.theme-toggle:focus-visible {
    outline: 2px solid rgba(88, 124, 228, 0.65);
    outline-offset: 3px;
}

.theme-toggle__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: inherit;
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease;
}

.theme-toggle__icon--moon {
    opacity: 0;
}

.theme-toggle[aria-checked='true'] .theme-toggle__icon--sun {
    opacity: 0;
}

.theme-toggle[aria-checked='true'] .theme-toggle__icon--moon {
    opacity: 1;
}

/* Legacy .logo-circle kept for any non-header uses (about page etc.).
   Inside the navbar the .navbar__logo rules above take precedence. */
.logo-img {
    width: 50px;
    height: 50px;
    display: block;
}

/* ==========================================================================
   Hero V2 — Figma Portfolio-26 / Iteration 24 (node 158:9980)
   1440×776 design reference, measurements mapped to the 1280-wide inner frame.
   ========================================================================== */
.hero-v2 {
    --hero-v2-ink: #653a21;
    --hero-v2-panel: #f8f8f6;
    --hero-v2-pixel: #e3e3d6;
    --hero-v2-pill-border: #c1c1a4;
    --hero-v2-grid-line: #c1c1a5;

    --hero-v2-frame-w: 1440px;
    --hero-v2-frame-h: 776px;
    --hero-v2-content-w: 1142px;
    --hero-v2-content-h: 551px;

    display: block;
    width: 100%;
    padding: 0;
    overflow: visible;
}

.hero-v2__frame {
    position: relative;
    width: var(--hero-v2-frame-w);
    height: var(--hero-v2-frame-h);
    margin: calc(-1 * var(--hero-lift)) auto 0;
}

.hero-v2__content {
    position: absolute;
    top: 75px;
    left: 169px;
    width: var(--hero-v2-content-w);
    height: var(--hero-v2-content-h);
    pointer-events: none;
}

/* Re-enable pointer events only on the interactive tag pill inside content */
.hero-v2__content .hero-v2__tag {
    pointer-events: auto;
}

/* "Hi, I'm Aditya" pill ----------------------------------------------------- */
.hero-v2__tag {
    position: absolute;
    top: 67px;
    left: 239px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid var(--hero-v2-pill-border);
    border-radius: 40px;
    background: transparent;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 28px;
    line-height: 26px;
    letter-spacing: -0.02em;
    color: var(--hero-v2-ink);
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    cursor: none;
    transition:
        color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-v2__tag::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #72C5F9;
    transform: translate(-50%, -50%) scale(0);
    transform-origin: center;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

.hero-v2__tag:hover,
.hero-v2__tag:focus-visible {
    color: #ffffff;
    border-color: #72C5F9;
    outline: none;
}

.hero-v2__tag:hover::before,
.hero-v2__tag:focus-visible::before {
    transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .hero-v2__tag,
    .hero-v2__tag::before {
        transition: none;
    }
}

.hero-v2__tag em {
    font-style: italic;
    font-weight: 400;
    margin-left: 0.22em;
}

/* Headline block ------------------------------------------------------------ */
.hero-v2__headline {
    position: absolute;
    top: 163px;
    left: 240px;
    width: 629px;
    height: 211px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    background: var(--hero-v2-panel);
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 52px;
    line-height: 1.08;
    letter-spacing: -0.06em;
    color: var(--hero-v2-ink);
    white-space: nowrap;
}

.hero-v2__headline-line {
    display: block;
}

.hero-v2__headline em {
    font-style: italic;
}

/* Hand-lettered credit note ("Designing at Zeta") with a curly arrow that
   loops up toward the bottom of the headline. Positioned in the hero
   coordinate system used by every other absolute child of __content. */
.hero-v2__credit {
    position: absolute;
    top: 492px;
    left: 200px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    color: var(--hero-v2-ink);
    pointer-events: none;
    user-select: none;
    transform: rotate(6deg);
    transform-origin: left bottom;
}

.hero-v2__credit-text {
    font-family: 'Lazy Dog', 'Caveat', cursive;
    font-size: 44px;
    line-height: 1;
    letter-spacing: 0.01em;
    transform: translateY(-2px);
}

.hero-v2__credit-arrow {
    display: block;
    width: 72px;
    height: auto;
    transform: translateY(-56px) translateX(calc(-100px));
    pointer-events: none;
    user-select: none;
}

/* Stickers near top-right of the headline ---------------------------------- */
.hero-v2__stickers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-v2__sticker {
    position: absolute;
    display: block;
}

.hero-v2__sticker--square {
    top: 292px;
    left: 789px;
    width: 80px;
    height: 80px;
    background: #f97a4f;
}

.hero-v2__sticker--bar {
    top: 169px;
    left: 798px;
    width: 50px;
    height: 117px;
    background: #f9a5f6;
    transform: rotate(23.9deg);
    transform-origin: center center;
}

.hero-v2__sticker--dot {
    top: 255px;
    left: 832px;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background: #96dc91;
}

/* Postage stamp ------------------------------------------------------------- */
.hero-v2__stamp {
    position: absolute;
    left: 985px;
    top: 486px;
    width: 244px;
    aspect-ratio: 404 / 516;
    display: block;
    z-index: 4;
    pointer-events: none;
    transform: rotate(14deg);
    transform-origin: center center;
}

.hero-v2__stamp-base,
.hero-v2__stamp-photo {
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.hero-v2__stamp-base {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.hero-v2__stamp-photo-frame {
    position: absolute;
    z-index: 2;
    left: 13.4%;
    top: 8.8%;
    width: 73.2%;
    height: 78.8%;
    overflow: hidden;
    pointer-events: auto;
}

.hero-v2__filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.hero-v2__stamp-photo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: url("#hero-stamp-guilloche-filter");
    transition: filter 220ms ease;
}

.hero-v2__stamp-photo-frame:hover .hero-v2__stamp-photo {
    filter: none;
}

/* Dappled-light shader overlay --------------------------------------------- */
/* Wide transparent overlay anchored to the right of the hero. WebGL canvas
   is driven by asset/dappled-light-shader.js; only the tree shadow renders,
   the rest of the canvas is fully transparent so it falls over the hero
   content like real dappled light. Sits above the right-side decorative
   pixels via z-index, beneath the grid corners (z:4). */
.hero-v2__dappled {
    position: absolute;
    top: 0;
    right: 0;
    width: min(98vw, 1411px);
    aspect-ratio: 1008 / 600;
    height: auto;
    /* overflow visible so falling leaves can drift past the strip's bottom
       into the page below. The canvas itself stays bounded by its CSS box. */
    overflow: visible;
    pointer-events: none;
    z-index: 80;
}

.hero-v2__dappled-canvas {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    /* Opacity moved off the wrapper so falling leaves (siblings of this canvas)
       don't inherit the dim. Visual effect on the shader is identical. */
    opacity: 0.15;
    /* Critical: the wrapper is pointer-events: none, but in HTML that does
       NOT inherit to children — a default <canvas> has pointer-events: auto
       and would absorb hover/clicks for anything geometrically beneath it
       (e.g. project card-1 sits in the upper-left, partially under the
       70vw-wide shader strip). Explicitly opt the canvas out. */
    pointer-events: none;
    z-index: 2;
}

/* Dark mode bumps canvas opacity so the procedural moon backlight registers
   brightly behind the now-pitch-black tree silhouette. */
body.night-mode .hero-v2__dappled-canvas {
    opacity: 0.85;
}

body.night-mode .hero-v2__dappled {
    top: -18vh;
    right: -24vw;
    width: min(145vw, 2060px);
}

body.night-mode .hero-v2__dappled::before {
    content: '';
    position: absolute;
    top: -22vh;
    right: -18vw;
    width: min(150vw, 2200px);
    height: min(128vh, 1180px);
    background:
        radial-gradient(ellipse at 63% 20%,
            rgba(239, 235, 218, 0.24) 0%,
            rgba(239, 235, 218, 0.16) 24%,
            rgba(239, 235, 218, 0.08) 50%,
            rgba(239, 235, 218, 0.025) 72%,
            transparent 92%);
    filter: blur(58px);
    opacity: 0.86;
    pointer-events: none;
    z-index: -1;
}

/* Falling leaves — DOM <div> particles authored by asset/leaf-fall.js. SVGs
   in asset/leaves/ are white silhouettes with fill-opacity 0.38 + built-in
   Gaussian blur baked in; we use them as `mask-image` so CSS owns the color
   (light/dark themes can swap tint without touching the assets). The mask
   alpha already encodes the 0.38 base + soft blur, so the visible look is
   identical to rendering the SVG directly. */
.dappled-leaf {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--leaf-w, 32px);
    height: var(--leaf-h, 40px);
    pointer-events: none;
    user-select: none;
    /* Light theme tint — mirrors the GLSL u_shadowTint (#403E39). */
    background-color: #403E39;
    -webkit-mask-image: var(--leaf-mask);
            mask-image: var(--leaf-mask);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg));
    opacity: var(--o, 0);
    will-change: transform, opacity;
}

/* Dark theme tint — pitch black silhouette, mirrors the GLSL u_shadowTint
   dark value (#000000). */
body.night-mode .dappled-leaf {
    background-color: #000000;
}

@media (max-width: 1280px) {
    .hero-v2__dappled {
        display: block;
        width: min(140vw, 720px);
        right: -42vw;
        top: -4vh;
        opacity: 0.9;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dappled-leaf { display: none; }
}

/* Grid crosshair overlay (ruler style — drawn over the container panel) --- */
.hero-v2__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.hero-v2__corner {
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--hero-v2-pixel);
    z-index: 4;
}

.hero-v2__corner--tl { left: 210px; top: 133px; }
.hero-v2__corner--tr { left: 870px; top: 133px; }
.hero-v2__corner--bl { left: 210px; top: 373px; }
.hero-v2__corner--br { left: 870px; top: 373px; }

.hero-v2__line {
    position: absolute;
}

/* Horizontal dashed ruler (1140 wide, color #c1c1a5 with fade at ends) */
.hero-v2__line--h1,
.hero-v2__line--h2,
.hero-v2__line--h3,
.hero-v2__line--h4 {
    width: 1140px;
    height: 1px;
    background-image: repeating-linear-gradient(
        to right,
        var(--hero-v2-grid-line) 0,
        var(--hero-v2-grid-line) 3px,
        transparent 3px,
        transparent 6px
    );
    background-size: 100% 1px;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 13%,
        #000 83%,
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 13%,
        #000 83%,
        transparent 100%
    );
}

.hero-v2__line--h1 { left: 0;   top: 133px; }
.hero-v2__line--h2 { left: 0;   top: 163px; }
.hero-v2__line--h3 { left: 2px; top: 373px; }
.hero-v2__line--h4 { left: 2px; top: 403px; }

/* Vertical dashed ruler (551 tall, same style rotated) */
.hero-v2__line--v1,
.hero-v2__line--v2,
.hero-v2__line--v3,
.hero-v2__line--v4 {
    width: 1px;
    height: 551px;
    top: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--hero-v2-grid-line) 0,
        var(--hero-v2-grid-line) 3px,
        transparent 3px,
        transparent 6px
    );
    background-size: 1px 100%;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 13%,
        #000 83%,
        transparent 100%
    );
            mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 13%,
        #000 83%,
        transparent 100%
    );
}

.hero-v2__line--v1 { left: 210px; }
.hero-v2__line--v2 { left: 240px; }
.hero-v2__line--v3 { left: 870px; }
.hero-v2__line--v4 { left: 900px; }

/* Scattered pixel squares (behind/around the headline) -------------------- */
.hero-v2__pixel {
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--hero-v2-pixel);
    pointer-events: auto;
    z-index: 3;
    cursor: none;
}

/* Invisible hit-area that expands the hover target without affecting layout */
.hero-v2__pixel::before {
    content: "";
    position: absolute;
    inset: -12px;
    pointer-events: auto;
}

/* Left cluster — Figma coordinates on the 1440 canvas (hero frame origin) */
.hero-v2__pixel--l1 { left: 199px; top: 298px; background: #FCC0CB; }
.hero-v2__pixel--l2 { left: 229px; top: 328px; background: #D6DBF8; }
.hero-v2__pixel--l3 { left: 259px; top: 298px; background: #F9E3D0; }
.hero-v2__pixel--l4 { left: 259px; top: 358px; background: #BCF8D8; }
.hero-v2__pixel--l5 { left: 289px; top: 388px; background: #F9B3E1; }
.hero-v2__pixel--l6 { left: 199px; top: 388px; background: #BFE7FB; }
.hero-v2__pixel--l7 { left: 229px; top: 358px; opacity: 0.55; }

/* Right cluster */
.hero-v2__pixel--r1 { left: 1099px; top: 268px; background: #BCF8D8; }
.hero-v2__pixel--r2 { left: 1129px; top: 298px; background: #F9B3E1; }
.hero-v2__pixel--r3 { left: 1189px; top: 358px; background: #BFE7FB; }
.hero-v2__pixel--r4 { left: 1159px; top: 388px; background: #FDDABB; }
.hero-v2__pixel--r5 { display: none; }
.hero-v2__pixel--r6 { display: none; }

/* Burst pixels spawned on hover (see initHeroPixelPop in script.js) */
.hero-v2__pixel-burst {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
    z-index: 2;
}

/* Scale the whole artboard to fit the viewport (design ref: 1440×776).
   Driven by the shared --grid-scale so body dots + hero ruler move in lockstep. */
@media (min-width: 769px) {
    .hero-v2 {
        min-height: calc(var(--hero-v2-frame-h) * var(--grid-scale));
    }
    .hero-v2__frame {
        transform: scale(var(--grid-scale));
        transform-origin: top left;
        margin-left: calc((100vw - var(--hero-v2-frame-w) * var(--grid-scale)) / 2);
    }
}

/* Laptop tweaks (pixel clusters dim) */
@media (min-width: 769px) and (max-width: 1280px) {
    :root {
        /* Tablet/laptop gets a larger hero artboard so the headline reads
           bigger and the ruler-grid area expands with it. The JS in
           index.html reads this value and writes the shared --grid-scale. */
        --hero-v2-zoom: 1.08;
    }

    .hero-v2__pixel { opacity: 0.55; }
    .hero-v2__pixel--l7,
    .hero-v2__pixel--r5,
    .hero-v2__pixel--r6 { opacity: 0.3; }
}

/* --- Mobile: 360x800 artboard snapped to the shared dot grid --------------- */
/*
 * Single coordinate system: artboard = 360 (w) x 800 (h), aspect ratio 1:2.222.
 * Every element is a percentage of the frame so the composition scales as one.
 *
 * Figma source (node 1484:1420). Decorative structure is snapped to the dot
 * grid so the ruler lines, corner boxes, and body background build from the
 * same coordinate system:
 *   - Headline parent frame at (4.5, 213.72), 349.96 x 349.96
 *     - Pill         (66.79, 219.68)   161 x 46
 *     - Top corners  (45.79, 265.86), (293.56, 265.68)
 *     - h1 y=265.86, h2 y=286.86
 *     - Headline txt (68.34, 292.50)   224.88 x 128.32
 *     - Sticker grp1 (64.85, 429.92)   60 x 60          (square)
 *     - Sticker grp2 (129.33, 422.17)  144.17 x 67.75   (bar + dot)
 *     - h3 y=492.86, h4 y=513.86
 *     - Bot corners  (45.79, 492.47), (293.56, 492.47)
 *     - V rules at x=45.79, 66.79, 293.79, 314.79  starting y=563.68 down 350
 *   - Stamp group at (209.25, 549.17), 160.78 x 126.30
 *   - Credit group at (11.29, 545.21), 153.66 x 98.40
 *     - Text "Designing at Zeta" at (14.03, 602.68)
 *     - Arrow vector at (90.91, 545.21), 57 x 60.58
 *   - Top-left pixel cluster bbox (25.13, 100.33), 82.56 x 82.95
 *   - Bottom-right pixel cluster bbox (210.97, 719.67), 82.56 x 82.95
 *
 * Conversion to CSS percentages:
 *   x_pct = X_artboard / 360
 *   y_pct = Y_artboard / 800
 */
/* --- Mobile: same model as desktop, but on a 360x800 mobile artboard -------
 *
 *  Pattern (mirrors the desktop approach):
 *    - The .hero-v2__frame is a FIXED-size artboard (360x800px).
 *    - Structural children (corners and rulers) live on exact grid indexes.
 *      Other children (pixels, pill, headline, stamp, credit) stay at their
 *      designed artboard positions inside that frame.
 *    - The whole frame is then `transform: scale(--mobile-grid-scale)` to
 *      fill the viewport.
 *    - The body dot grid uses the SAME --mobile-grid-scale so the dots,
 *      rulers and corner squares always stay perfectly aligned.
 *
 *  Body background anchor offsets use the desktop convention:
 *    ruler line position - half a grid tile, because CSS dots render at the
 *    center of each background tile.
 *  Grid unit: 20.6467px (one dot interval, exact Figma value).
 *  Hence corner pixels (20.62px) are exactly one grid cell.
 */
@media (max-width: 768px) {
    :root {
        /* Re-anchor the body dot grid to the mobile artboard's grid origin.
           Mobile dot spacing in artboard space = 20.6467px (matches Figma).   */
        --grid-unit: 20.6467px;
        --hero-mobile-frame-h: 812px;
        --hero-anchor-x: calc(4.5px + var(--grid-unit) * 1.5);
        --hero-anchor-y: calc(4.5px + var(--grid-unit) * 12.5);
        /* Pull the hero up over the navbar (real px, applied to .hero-v2).   */
        --hero-lift: 70px;
    }

    body {
        /* Override desktop's bg-x formula (which assumes a 1440-wide frame)
           with the mobile 360-wide frame. The body's bg-y formula is
           reused as-is — it lines up with the navbar the same way.           */
        background-position:
            calc((100vw - 360px * var(--grid-scale)) / 2 + var(--hero-anchor-x) * var(--grid-scale))
            calc(var(--hero-nav-h) + var(--hero-anchor-y) * var(--grid-scale) - var(--hero-lift));
    }

    .hero-v2 {
        min-height: calc(var(--hero-mobile-frame-h) * var(--grid-scale));
        margin-top: calc(-1 * var(--hero-lift));
        padding: 0 0 clamp(28px, 8vw, 56px);
        overflow: hidden;
    }

    .hero-v2__frame {
        position: relative;
        width: 360px;
        height: var(--hero-mobile-frame-h);
        max-width: none;
        min-height: 0;
        margin: 0;
        margin-left: calc((100vw - 360px * var(--grid-scale)) / 2);
        padding: 0;
        transform: scale(var(--grid-scale));
        transform-origin: top left;
    }

    .hero-v2__content {
        /* Override desktop content offsets — mobile artboard positions are
           expressed directly off the frame top-left.                          */
        position: absolute;
        top: 0;
        left: 0;
        width: 360px;
        height: var(--hero-mobile-frame-h);
        display: block;
    }

    .hero-v2__grid {
        --hero-mobile-grid-origin: 4.5px;
        --hero-mobile-grid-step: var(--grid-unit);
        --hero-mobile-left-guide: calc(var(--hero-mobile-grid-origin) + var(--hero-mobile-grid-step) * 2);
        --hero-mobile-left-guide-inner: calc(var(--hero-mobile-grid-origin) + var(--hero-mobile-grid-step) * 3);
        --hero-mobile-right-guide: calc(var(--hero-mobile-grid-origin) + var(--hero-mobile-grid-step) * 14);
        --hero-mobile-right-guide-inner: calc(var(--hero-mobile-grid-origin) + var(--hero-mobile-grid-step) * 15);
        --hero-mobile-top-guide: calc(var(--hero-mobile-grid-origin) + var(--hero-mobile-grid-step) * 13);
        --hero-mobile-top-guide-inner: calc(var(--hero-mobile-grid-origin) + var(--hero-mobile-grid-step) * 14);
        --hero-mobile-bottom-guide: calc(var(--hero-mobile-grid-origin) + var(--hero-mobile-grid-step) * 24);
        --hero-mobile-bottom-guide-inner: calc(var(--hero-mobile-grid-origin) + var(--hero-mobile-grid-step) * 25);
        display: block;
    }

    /* Corner pixels snap to the same grid intersections as the body dot field. */
    .hero-v2__corner {
        position: absolute;
        width: var(--hero-mobile-grid-step);
        height: var(--hero-mobile-grid-step);
        background: var(--hero-v2-pixel);
    }
    .hero-v2__corner--tl { left: var(--hero-mobile-left-guide);  top: var(--hero-mobile-top-guide); right: auto; }
    .hero-v2__corner--tr { left: var(--hero-mobile-right-guide); top: var(--hero-mobile-top-guide); right: auto; }
    .hero-v2__corner--bl { left: var(--hero-mobile-left-guide);  top: var(--hero-mobile-bottom-guide); right: auto; }
    .hero-v2__corner--br { left: var(--hero-mobile-right-guide); top: var(--hero-mobile-bottom-guide); right: auto; }

    /* Horizontal rules — full-width dashed lines on the corner rows.          */
    .hero-v2__line--h1,
    .hero-v2__line--h2,
    .hero-v2__line--h3,
    .hero-v2__line--h4 {
        left: 4.5px;
        width: 350px;
        height: 1px;
    }
    .hero-v2__line--h1 { top: var(--hero-mobile-top-guide); }
    .hero-v2__line--h2 { top: var(--hero-mobile-top-guide-inner); }
    .hero-v2__line--h3 { top: var(--hero-mobile-bottom-guide); }
    .hero-v2__line--h4 { top: var(--hero-mobile-bottom-guide-inner); }

    /* Vertical rules — 1px wide, sit on the corner-cell edges.                
       v1/v3 = corner left edge, v2/v4 = corner right edge.                    */
    .hero-v2__line--v1,
    .hero-v2__line--v2,
    .hero-v2__line--v3,
    .hero-v2__line--v4 {
        top: calc(var(--hero-mobile-top-guide) - var(--hero-mobile-grid-step) * 3);
        height: calc(var(--hero-mobile-grid-step) * 16);
        width: 1px;
        display: block;
    }
    .hero-v2__line--v1 { left: var(--hero-mobile-left-guide); right: auto; }
    .hero-v2__line--v2 { left: var(--hero-mobile-left-guide-inner); right: auto; }
    .hero-v2__line--v3 { left: var(--hero-mobile-right-guide); right: auto; }
    .hero-v2__line--v4 { left: var(--hero-mobile-right-guide-inner); right: auto; }

    /* Pill: artboard (66.79, 219.68), 161 x 46.                                */
    .hero-v2__tag {
        position: absolute;
        top: calc(4.5px + var(--grid-unit) * 13 - 46px);
        left: calc(4.5px + var(--grid-unit) * 3);
        width: 161px;
        height: 46px;
        justify-content: center;
        font-size: 22px;
        line-height: 1;
        padding: 0;
    }

    /* Headline: artboard (68.34, 292.50), 224.88 x 128.32.                     */
    .hero-v2__headline {
        position: absolute;
        top: 292.50px;
        left: calc(4.5px + var(--grid-unit) * 3);
        width: calc(var(--grid-unit) * 11);
        height: auto;
        min-height: 128.32px;
        padding: 0;
        display: block;
        background: var(--hero-v2-panel);
        font-size: 33px;
        line-height: 1.05;
        letter-spacing: -0.04em;
        white-space: normal;
        gap: 0;
    }
    .hero-v2__headline-line { display: inline; }

    /* Stickers ----------------------------------------------------------- */
    .hero-v2__stickers { display: block; }

    /* Floating colored boxes also snap to the mobile dot-grid. */
    .hero-v2__sticker--square {
        top: calc(4.5px + var(--grid-unit) * 24 - var(--grid-unit) * 2.4);
        left: calc(4.5px + var(--grid-unit) * 3);
        width: calc(var(--grid-unit) * 2.4);
        height: calc(var(--grid-unit) * 2.4);
    }
    .hero-v2__sticker--bar {
        top: calc(4.5px + var(--grid-unit) * 24 - var(--grid-unit) * 1.35);
        left: calc(4.5px + var(--grid-unit) * 5.85);
        width: calc(var(--grid-unit) * 6);
        height: calc(var(--grid-unit) * 1.35);
        transform: rotate(-14deg);
        transform-origin: left bottom;
    }
    .hero-v2__sticker--dot {
        top: calc(4.5px + var(--grid-unit) * 22);
        left: calc(4.5px + var(--grid-unit) * 12);
        width: calc(var(--grid-unit) * 2);
        height: calc(var(--grid-unit) * 2);
    }

    /* Stamp: artboard (209.25, 549.17), 160.78 x 126.30.                       */
    .hero-v2__stamp {
        position: absolute;
        left: calc(4.5px + var(--grid-unit) * 10.5);
        right: auto;
        top: calc(4.5px + var(--grid-unit) * 24.8);
        width: calc(var(--grid-unit) * 6.15);
        transform: rotate(12deg);
        transform-origin: center center;
    }

    /* Designing at Zeta + arrow (artboard credit text at 14.03, 602.68).       */
    .hero-v2__credit {
        top: calc(4.5px + var(--grid-unit) * 29);
        left: calc(4.5px + var(--grid-unit) * 1);
        right: auto;
        gap: 4px;
        transform: rotate(5deg);
        transform-origin: left bottom;
    }
    .hero-v2__credit-text {
        font-size: 24px;
    }
    .hero-v2__credit-arrow {
        width: calc(var(--grid-unit) * 2.5);
        height: auto;
        transform: translateY(calc(var(--grid-unit) * -5.4)) translateX(calc(var(--grid-unit) * -1.25)) rotate(-9deg);
    }

    /* Colored pixel clusters — one grid cell each, aligned to dot centers.     */
    .hero-v2__pixel {
        display: block;
        position: absolute;
        width: var(--grid-unit);
        height: var(--grid-unit);
    }

    /* Top-left cluster (around the pill).                                      */
    .hero-v2__pixel--l1 { left: calc(4.5px + var(--grid-unit) * 1); top: calc(4.5px + var(--grid-unit) * 5); right: auto; }
    .hero-v2__pixel--l2 { left: calc(4.5px + var(--grid-unit) * 3); top: calc(4.5px + var(--grid-unit) * 5); right: auto; }
    .hero-v2__pixel--l3 { left: calc(4.5px + var(--grid-unit) * 2); top: calc(4.5px + var(--grid-unit) * 6); right: auto; }
    .hero-v2__pixel--l4 { left: calc(4.5px + var(--grid-unit) * 3); top: calc(4.5px + var(--grid-unit) * 7); right: auto; }
    .hero-v2__pixel--l5 { left: calc(4.5px + var(--grid-unit) * 1); top: calc(4.5px + var(--grid-unit) * 8); right: auto; }
    .hero-v2__pixel--l6 { left: calc(4.5px + var(--grid-unit) * 4); top: calc(4.5px + var(--grid-unit) * 8); right: auto; }
    .hero-v2__pixel--l7 { display: none; }

    /* Bottom-right cluster.                                                   */
    .hero-v2__pixel--r1 { left: calc(4.5px + var(--grid-unit) * 10); top: calc(4.5px + var(--grid-unit) * 35); right: auto; }
    .hero-v2__pixel--r2 { left: calc(4.5px + var(--grid-unit) * 11); top: calc(4.5px + var(--grid-unit) * 36); right: auto; }
    .hero-v2__pixel--r3 { left: calc(4.5px + var(--grid-unit) * 13); top: calc(4.5px + var(--grid-unit) * 37); right: auto; }
    .hero-v2__pixel--r4 { left: calc(4.5px + var(--grid-unit) * 12); top: calc(4.5px + var(--grid-unit) * 38); right: auto; }
    .hero-v2__pixel--r5,
    .hero-v2__pixel--r6 { display: none; }
}

/* --- Very small phones ---------------------------------------------------
 * No grid overrides needed: the JS already sets --grid-scale = vw/360 below
 * 768px, so the mobile artboard auto-fits sub-430 viewports too. Below tweaks
 * are typography-only.
 */
@media (max-width: 430px) {
    .hero-v2__headline {
        font-size: clamp(24px, 9.3vw, 31px);
        letter-spacing: -0.04em;
    }

    .hero-v2__tag {
        font-size: clamp(16px, 5vw, 20px);
    }

    .hero-v2__credit-text {
        font-size: clamp(18px, 5.5vw, 22px);
    }

    .hero-v2__credit-arrow {
        width: 40px;
        transform: translateY(-36px) translateX(-54px);
    }
}

/* Night mode --------------------------------------------------------------- */
body.night-mode .hero-v2 {
    --hero-v2-ink: #f2ece4;
    --hero-v2-panel: rgba(255, 255, 255, 0.03);
    --hero-v2-pixel: #2a2a22;
    --hero-v2-pill-border: rgba(255, 255, 255, 0.18);
    --hero-v2-grid-line: rgba(193, 193, 165, 0.28);
}

body.night-mode .hero-v2__headline {
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.night-mode .hero-v2__credit-arrow {
    opacity: 0.95;
    filter: invert(1) brightness(1.35);
}

/* Hero — Figma Portfolio-26 / Iteration 22 (1440 design width, −150px matches nav strip in file) */
.hero-section--figma {
    --hero-nav-strip: 150px;
    --hero-pad-x: var(--surface-padding, 40px);
    /* Full artboard scales with usable width; clamp keeps phones usable and caps desktop growth */
    --hero-scale: clamp(0.26, calc((100vw - 2 * var(--hero-pad-x)) / 1440), 1.18);
    display: block;
    height: auto;
    min-height: calc(936px * var(--hero-scale) + clamp(72px, 14vw, 140px));
    /* Nav is in flow above hero — only bottom / side rhythm here */
    padding: 0 0 clamp(48px, 6vw, 80px);
    /* overflow-x:hidden + overflow-y:visible forces overflow-y:auto in browsers → inner hero scrollbar */
    overflow: hidden;
}

.hero-figma {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--surface-padding, 40px);
    box-sizing: border-box;
}

.hero-figma__scale {
    display: flex;
    justify-content: center;
    width: 100%;
}

.hero-figma__canvas {
    position: relative;
    width: 1440px;
    height: 936px;
    flex: 0 0 auto;
    transform-origin: top center;
    transform: scale(var(--hero-scale));
    /* Collapse extra layout height when scale < 1; add space when scale > 1 */
    margin-bottom: calc(936px * (var(--hero-scale) - 1));
}

/* Hero = flat image stack (1440×936 artboard). GSAP targets `.hero-figma__media` imgs (mwg_000 pattern). */
/* Name, intro, lemon, watermelon share one z-index; overlap order = DOM order (later paints on top).
   Intro x/y: Figma https://www.figma.com/design/AGlwNvDQ2B2INIUa5I6hFd/Portfolio-26?node-id=71-136 */
.hero-figma__canvas--layers {
    --hero-cluster-tilt: -8deg;
    /* Intro width = base × (scale% ÷ 100). 90 = −10% from base. */
    --hero-intro-max-w-base: 60;
    --hero-intro-max-w-scale-pct: 90;
    --hero-cluster-z: 5;
    --hero-intro-left: 281.304px;
    --hero-intro-w: min(
        calc(1px * var(--hero-intro-max-w-base) * var(--hero-intro-max-w-scale-pct) / 100),
        calc(100% - 281.304px)
    );
    --hero-fruit-gap: 8px;
    --hero-lemon-w: 102px;
    --hero-melon-w: 118px;
    /* Intro img is rotated −8° / origin 50% 45% — nudge row to sit under visual lower-right (see mock). */
    --hero-fruit-nudge-x: 22px;
    --hero-fruit-nudge-y: 32px;
}

.hero-figma__canvas--layers .hero-layer {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: auto;
}

/* Cluster container — groups name, headline, lemon, watermelon */
.hero-cluster {
    position: absolute;
    left: 50%;
    top: calc(430.6796875px - var(--hero-nav-strip) - 80px);
    translate: -50% 0;
    z-index: var(--hero-cluster-z);
    width: 960px;
    height: 600px;
    transform: scale(1.2);
    transform-origin: center top;
    pointer-events: none;
}

.hero-cluster > * {
    pointer-events: auto;
}

/* ① Name — rebased to cluster container */
.hero-layer--name {
    left: 18px;
    top: 121px;
    width: 192px;
    height: auto;
    z-index: var(--hero-cluster-z);
    transform: rotate(var(--hero-cluster-tilt));
    transform-origin: center center;
}

/* ② Intro — rebased to cluster container */
.hero-headline-wrap {
    left: 0;
    top: 0;
    z-index: var(--hero-cluster-z);
    width: fit-content;
    height: fit-content;
    max-width: var(--hero-intro-w);
    overflow: visible;
    pointer-events: none;
}

.hero-headline-wrap .hero-headline-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    transform: rotate(var(--hero-cluster-tilt)) rotate(6deg);
    transform-origin: 50% 45%;
    pointer-events: auto;
}

/* ③ Lemon — rebased to cluster container */
.hero-layer--lemon {
    left: 445px;
    top: 272.32px;
    width: 105px;
    height: 113.4px;
    z-index: var(--hero-cluster-z);
    transform: rotate(var(--hero-cluster-tilt));
    transform-origin: center center;
}

/* ④ Watermelon — same row; flush to intro’s right + nudge */
.hero-layer--watermelon {
    left: 534.696px;
    top: 280px;
    width: 98px;
    height: 101.5px;
    z-index: var(--hero-cluster-z);
    transform: rotate(var(--hero-cluster-tilt));
    transform-origin: center center;
}

/* ⑤ Camera — front */
.hero-layer--camera {
    position: absolute;
    left: calc(-50.498px - 50.5px);
    top: calc(475.69140625px - var(--hero-nav-strip) + 706.69140625px);
    width: 351px;
    height: 330px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: none;
    z-index: 10;
    pointer-events: auto;
}

.hero-layer--camera img {
    position: absolute;
    left: 9.51px;
    top: 0;
    width: 341.074px;
    height: 329.569px;
    display: block;
    max-width: none;
    pointer-events: none;
    transition:
        filter 0.45s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

#hero-camera.flash-active img {
    filter: brightness(1.35) drop-shadow(0 0 28px rgba(255, 252, 235, 0.75));
}

.hero-figma__canvas--layers .hero-figma__media {
    will-change: transform;
}

/* Inertia tween hits the interactive box; nested bitmaps ignore pointer events */
.hero-figma__canvas--layers .hero-figma__media img {
    pointer-events: none;
}

.serif-italic {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: var(--type-weight-regular);
}



.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: #1A1A1A;
    color: white;
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    font-weight: var(--type-ui-weight);
    text-decoration: none;
    border-radius: 100px;
    width: fit-content;
    margin-top: 50px;
    /* Increased margin-top */
    transition: var(--transition-standard);
}

body.night-mode .hero-cta {
    background: #dcdcdc;
    color: #0d0d0d;
}

.hero-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.projects-section {
    padding: clamp(40px, 10vw, 80px) 0 clamp(56px, 7vw, 80px) 0;
    /* Increased top padding for better spacing */
    position: relative;
    z-index: 20;
}

.projects-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: clamp(32px, 4vw, 48px);
    width: 100%;
}

.projects-title {
    font-family: var(--font-serif);
    font-size: var(--type-serif-display-size);
    font-weight: var(--type-serif-display-weight);
    line-height: var(--type-serif-display-leading);
    letter-spacing: var(--type-serif-display-tracking);
    color: #3E2514;
    margin: 0;
}


/* Layout Controls */
.layout-controls {
    display: flex;
    gap: 12px;
    margin-top: 40vh;
    margin-bottom: 100px;
    scroll-margin-top: 40px;
}

.control-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: #EBEBEB;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    transition: var(--transition-standard);
}

.control-btn img {
    width: 20px;
    height: 20px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.control-btn.active img {
    opacity: 1;
}

/* Projects Wrapper Encapsulation */
.projects-wrapper {
    position: relative;
    padding: 0 0 var(--surface-padding-bottom) 0;
}

/* Tighter top spacing on the work section only (the hero sits right above it).
   The shared .projects-section rule still applies to #beyond so its gap with
   the projects section above is preserved. */
#projects.projects-section {
    padding-top: clamp(20px, 5vw, 40px);
}

.projects-wrapper .projects-header {
    padding-left: var(--surface-padding);
    padding-right: var(--surface-padding);
}

.projects-wrapper .work-container.bento-grid {
    padding-left: 0;
    padding-right: 0;
}

/* Beyond the Pixels Specifics */
.beyond-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: clamp(32px, 4vw, 48px);
    gap: 8px;
}

.projects-wrapper .beyond-header {
    padding-left: var(--surface-padding);
    padding-right: var(--surface-padding);
}

.beyond-subtitle {
    font-family: var(--font-sans);
    font-size: var(--type-lead-size);
    font-weight: var(--type-lead-weight);
    letter-spacing: -0.02em;
    color: #8C8C8C;
    margin: 0;
    line-height: var(--type-lead-leading);
    width: 340px;
}

.beyond-pixels-stage {
    width: 100%;
    height: 525px;
    background-color: #F9F8F6;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

/* Quote overlay sitting in the empty left side of .beyond-pixels-stage,
   vertically centred against the museum-stage column on the right. */
.beyond-info-overlay {
    position: absolute;
    left: clamp(24px, 4vw, 56px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(260px, 42%, 486px);
    margin: 0;
    pointer-events: none;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.beyond-info-overlay .beyond-subtitle {
    margin: 0;
    width: 100%;
}

.beyond-note {
    margin: 0;
    color: #653a21;
    font-family: 'Lazy Dog', cursive;
    font-size: 28px;
    line-height: 26px;
    letter-spacing: -0.02em;
}

.beyond-illustration {
    width: 100%;
    max-width: 340px;
    min-height: 72px;
    display: grid;
    grid-template-columns: 82px 79px 56px 84px;
    align-items: center;
    justify-content: start;
    column-gap: 12px;
}

.beyond-illustration img {
    display: block;
    max-width: none;
    flex: 0 0 auto;
    object-fit: contain;
}

.beyond-illustration__camera {
    width: 82px;
    height: 74px;
    transform: rotate(-9.39deg);
}

.beyond-illustration__film-roll {
    width: 79px;
    height: 58px;
    transform: translateY(4px) rotate(8.21deg);
}

.beyond-illustration__flower {
    width: 56px;
    height: 56px;
}

.beyond-illustration__notebook {
    width: 84px;
    height: 60px;
    transform: translateY(2px) rotate(-9.69deg);
}

.museum-stage {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    overflow: hidden;
    pointer-events: none;
}

.wrapper-3d {
    position: relative;
    perspective: 600px;
    transform-style: preserve-3d;
    pointer-events: auto;
}

.fold {
    overflow: hidden;
    width: 20vw;
    height: 32vh;
    background: transparent;
    position: relative;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.fold-top {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    transform-origin: bottom center;
    transform: rotateX(calc(-70deg));
}

.fold-bottom {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform-origin: top center;
    transform: rotateX(70deg);
}

.fold-align {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.fold-top .fold-align {
    transform: translateY(100%);
}

.fold-bottom .fold-align {
    transform: translateY(-100%);
}

.fold-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 14px;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ticker-image-wrapper {
    width: 100%;
    aspect-ratio: 1.4;
    overflow: hidden;
    border-radius: 4px;
    mask-image: radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ticker-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    padding: clamp(88px, 12vw, 148px) 0 0;
    position: relative;
    z-index: 20;
}

.site-footer::before {
    content: "";
    display: none; /* Hidden with the grass field; keep implementation for later. */
    position: absolute;
    top: clamp(420px, 48vw, 680px);
    left: 0;
    right: 0;
    height: clamp(72px, 10vw, 128px);
    z-index: 60;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(252, 251, 249, 0.94), rgba(252, 251, 249, 0));
}

.footer-cta-shell {
    position: relative;
    width: min(100%, 835px);
    margin: 0 auto;
    padding-top: clamp(220px, 22vw, 278px);
}

.footer-sticker-stack {
    position: absolute;
    top: -71px;
    left: 287px;
    width: clamp(220px, 22vw, 307px);
    aspect-ratio: 1;
    transform: translateX(-7%) rotate(-10deg);
    cursor: none;
    perspective: 1000px;
}

.sticker-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.sticker-shadow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sticker-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    transform-origin: top left;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.footer-sticker-stack:hover .sticker-image {
    transform: translate(-3px, -8px) rotateX(12deg) rotateY(-8deg) scale(1.03);
}

.footer-sticker-stack:hover .sticker-shadow {
    transform: translate(18px, 22px) scale(1.02);
    opacity: 0.6;
    filter: blur(8px);
}

.footer-cta-title {
    max-width: none;
    margin: 0 auto 12px;
    font-family: var(--font-serif);
    font-size: var(--type-serif-display-size);
    font-weight: var(--type-serif-display-weight);
    line-height: var(--type-serif-display-leading);
    letter-spacing: var(--type-serif-display-tracking);
    text-align: center;
    color: #3E2514;
}

.footer-cta-subtitle {
    margin: 0 auto;
    font-family: var(--font-sans);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.24;
    color: #5d5d5d;
    text-align: center;
}

.footer-grass-scene {
    position: relative;
    width: 100vw;
    margin-top: clamp(28px, 5vw, 64px);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 1440 / 400;
    overflow: hidden;
    pointer-events: auto;
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: auto 400px;
}

.footer-grass-scene::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to bottom, #fcfbf9 0%, rgba(252, 251, 249, 0.95) 18%, rgba(252, 251, 249, 0.55) 50%, rgba(252, 251, 249, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

body.night-mode .footer-grass-scene::before {
    background: linear-gradient(to bottom, #0d0d0d 0%, rgba(13, 13, 13, 0.95) 18%, rgba(13, 13, 13, 0.55) 50%, rgba(13, 13, 13, 0) 100%);
}

.footer-grass-scene__base,
.footer-grass-scene__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.footer-grass-scene__base {
    object-fit: cover;
    object-position: center bottom;
    z-index: 1;
    transition: opacity 0.35s ease;
}

.footer-grass-scene__overlay {
    --grass-overlay-shift-y: 37px;
    --grass-overlay-shift-up: 0px;
    --grass-overlay-extra-bottom: 160px;
    top: -42px;
    z-index: 2;
    background: transparent;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.35s ease;
    left: 50%;
    right: auto;
    width: 100vw;
    height: calc(100% + var(--grass-overlay-shift-y) + var(--grass-overlay-shift-up) + var(--grass-overlay-extra-bottom));
    transform: translate(-50%, calc(-1 * var(--grass-overlay-shift-y) - var(--grass-overlay-shift-up)));
}

.footer-grass-scene__base--light {
    opacity: 1;
}

.footer-grass-scene__base--dark {
    opacity: 0;
}

body.night-mode .footer-grass-scene__base--light {
    opacity: 0;
}

body.night-mode .footer-grass-scene__base--dark {
    opacity: 1;
}

@media (min-width: 1600px) {
    .footer-grass-scene__overlay {
        --grass-overlay-extra-bottom: 220px;
    }
}

@media (min-width: 1900px) {
    .footer-grass-scene__overlay {
        --grass-overlay-extra-bottom: 280px;
    }
}

@media (max-width: 1280px) {
    .footer-grass-scene__overlay {
        --grass-overlay-shift-y: 30px;
    }
}

@media (max-width: 768px) {
    .footer-grass-scene__overlay {
        --grass-overlay-shift-y: 22px;
        --grass-overlay-shift-up: 42px;
    }
}

@media (max-width: 430px) {
    .footer-grass-scene__overlay {
        --grass-overlay-shift-y: 16px;
        --grass-overlay-shift-up: 42px;
    }
}

.footer-meta {
    width: min(100%, 835px);
    margin: 28px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.footer-meta-copy {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    margin: 0;
    padding: 0 16px;
    font-family: var(--font-sans);
    font-size: var(--type-meta-size);
    font-weight: 700;
    line-height: var(--type-meta-leading);
    /* Same on light + dark grass; do not inherit body.night-mode --text-primary */
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
}

body.night-mode .footer-meta-copy {
    color: #ffffff;
}

.footer-meta-socials {
    display: flex;
    gap: 32px;
}

.footer-meta-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.footer-meta-social:hover {
    transform: translateY(-1px);
    opacity: 0.75;
}

.footer-meta-social img,
.footer-meta-social svg {
    display: block;
    width: 100%;
    height: 100%;
}

body.about-page .site-footer {
    padding-top: 0;
}

body.about-page .footer-cta-shell,
body.about-page .footer-meta {
    display: none;
}

body.about-page .footer-grass-scene {
    margin-top: 0;
}

/* Work Wall (Bento Grid) */
.work-container.bento-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto auto;
    gap: clamp(24px, 3vw, 40px);
    height: auto;
    margin-top: 0;
    position: relative;
}

/* Transparent WebGL canvas BEHIND the bento cards. asset/work-shader.js paints
   one shader plane per .work-card, masked to the cards' 4px border-radius via
   an SDF. Once WebGL is ready the static image layer is hidden so the shader
   becomes the card surface. */
.work-shader-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: block;
}

body.webgl-cards #work-wall .work-card {
    background: transparent;
    box-shadow: none;
}

body.webgl-cards #work-wall .work-card::after {
    display: block;
}

body.webgl-cards #work-wall .card-content {
    opacity: 0;
}

body.webgl-cards #work-wall .work-card__center-image {
    opacity: 0;
}

body.webgl-cards #work-wall .work-card:hover,
body.webgl-cards #work-wall .work-card.is-active,
body.webgl-cards #work-wall .work-card:focus-visible {
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .work-shader-canvas {
        display: none;
    }
}

.work-card {
    position: relative;
    background: white;
    border-radius: 6px;
    box-shadow: none;
    overflow: hidden;
    cursor: none;
    width: 100%;
    height: 100%;
}

.card-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    aspect-ratio: 5 / 3;
    /* Height becomes 1.2W (+20%) */
}

.card-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    aspect-ratio: 1 / 1.6;
    /* Height becomes 1.6W */
}

.card-3 {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    aspect-ratio: 5 / 3;
    /* Height becomes 1.2W (+20%) */
}

.card-4 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    aspect-ratio: 5 / 4;
    /* Height becomes 0.8W (Total Height Right = 1.6W + 0.8W = 2.4W) */
}

#work-wall .work-card {
    border-radius: 8px;
    background: #0f0f0d;
    box-shadow: none;
    isolation: isolate;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

#work-wall .work-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: none;
    pointer-events: none;
    z-index: 7;
}

#work-wall .work-card__status {
    position: absolute;
    top: clamp(12px, 1.6vw, 18px);
    left: clamp(12px, 1.6vw, 18px);
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #1a1a1a;
    font-family: var(--font-sans);
    font-size: clamp(0.68rem, 0.85vw, 0.78rem);
    font-weight: var(--type-weight-medium);
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 10px 28px rgba(15, 15, 13, 0.12);
    pointer-events: none;
    user-select: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

#work-wall .work-card__center-image {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(54%, 240px);
    max-height: 82%;
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

#work-wall .work-card__center-image {
    object-fit: contain;
}

#work-wall .card-content {
    position: absolute;
    inset: 0;
    transform: scale(1.02);
    transform-origin: center;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.55s ease;
}

#work-wall .home-card-overlay-image,
#work-wall .home-card-edit-image {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(72%, 420px);
    height: auto;
    max-height: 78%;
    max-width: none;
    object-fit: contain;
    transform: translate(-50%, -50%) translate(var(--home-card-img-x, 0px), var(--home-card-img-y, 0px)) rotate(var(--home-card-img-rotate, 0deg)) scale(var(--home-card-img-scale, 1));
    transform-origin: center;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    z-index: 5;
}

body.webgl-cards #work-wall .home-card-overlay-image,
body.webgl-cards #work-wall .home-card-edit-image {
    z-index: 5;
}

#work-wall .card-content::after {
    background: linear-gradient(180deg, rgba(13, 16, 22, 0.02) 0%, rgba(13, 16, 22, 0.12) 48%, rgba(13, 16, 22, 0.78) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0.24;
    transition: opacity 0.45s ease;
}

#work-wall .work-card__meta {
    --project-pill-orange: #ff7438;
    --project-pill-shadow: rgba(255, 107, 0, 0.28);
    --message-bubble-radius-sm: 18px;
    --message-bubble-radius-lg: 64px;
    position: absolute;
    left: clamp(28px, 8%, 128px);
    right: clamp(24px, 3vw, 36px);
    top: 55%;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
        "marker title"
        ". desc";
    align-items: center;
    gap: 10px 12px;
    z-index: 8;
    color: #fff;
    pointer-events: none;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.18s ease;
}

#work-wall .card-1 .work-card__meta {
    left: clamp(104px, 14%, 190px);
    right: clamp(96px, 18%, 260px);
    top: 58%;
}

#work-wall .card-2 .work-card__meta,
#work-wall .card-4 .work-card__meta {
    left: clamp(20px, 2.4vw, 30px);
    right: clamp(18px, 2.4vw, 28px);
    top: 52%;
}

#work-wall .card-3 .work-card__meta {
    top: 58%;
}

#work-wall .work-card__label {
    display: none;
}

#work-wall .work-card__marker,
#work-wall .work-card__title,
#work-wall .work-card__desc {
    margin: 0;
    opacity: 0;
    will-change: transform, opacity;
}

#work-wall .work-card__marker {
    grid-area: marker;
    width: clamp(28px, 2.4vw, 38px);
    height: clamp(28px, 2.4vw, 38px);
    align-self: end;
    margin-bottom: 2px;
    border-radius: 50%;
    background: var(--project-pill-orange);
    transform: translate(-10px, 6px) scale(0.45);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.24s ease;
}

#work-wall .work-card__title {
    grid-area: title;
    display: inline-flex;
    align-items: center;
    gap: 0.34em;
    justify-self: start;
    max-width: 100%;
    padding: clamp(9px, 1vw, 13px) clamp(18px, 2vw, 28px);
    border: 0;
    border-radius:
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-sm);
    background: var(--project-pill-orange);
    box-shadow: 0 14px 34px var(--project-pill-shadow);
    color: #fff;
    font-family: var(--font-sans);
    font-size: clamp(1.08rem, 1.85vw, 2rem);
    font-weight: var(--type-weight-medium);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(14px) scale(0.78);
    transform-origin: left bottom;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.2s ease,
        border-radius 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

#work-wall .work-card[data-link] .work-card__title::after {
    content: "";
    flex: 0 0 auto;
    width: 0.38em;
    height: 0.38em;
    margin-left: 0.04em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.92;
}

#work-wall .work-card__desc {
    grid-area: desc;
    max-width: min(430px, 100%);
    padding: clamp(12px, 1.3vw, 18px) clamp(18px, 2vw, 28px);
    border: 0;
    border-radius:
        var(--message-bubble-radius-sm)
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-lg);
    background: var(--project-pill-orange);
    box-shadow: 0 14px 34px var(--project-pill-shadow);
    color: #fff;
    font-family: var(--font-sans);
    font-size: clamp(0.96rem, 1.22vw, 1.18rem);
    font-weight: var(--type-weight-regular);
    line-height: 1.23;
    letter-spacing: 0;
    transform: translateY(-5px) scale(0.82);
    transform-origin: left top;
    transition: transform 0.54s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.24s ease,
        box-shadow 0.36s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.03s;
}

#work-wall .work-card__desc:empty {
    display: none;
}

#work-wall .card-2 .work-card__title,
#work-wall .card-4 .work-card__title {
    font-size: clamp(0.96rem, 1.5vw, 1.35rem);
}

#work-wall .card-2 .work-card__desc,
#work-wall .card-4 .work-card__desc {
    font-size: clamp(0.84rem, 1.1vw, 1rem);
    max-width: 100%;
}

/* Home project labels are clipped by each card's overflow. */
#work-wall .work-card:hover .work-card__meta,
#work-wall .work-card:focus-visible .work-card__meta,
#work-wall .work-card.is-active .work-card__meta {
    opacity: 1;
}

#work-wall .work-card:hover .work-card__marker,
#work-wall .work-card:hover .work-card__title,
#work-wall .work-card:hover .work-card__desc,
#work-wall .work-card:focus-visible .work-card__marker,
#work-wall .work-card:focus-visible .work-card__title,
#work-wall .work-card:focus-visible .work-card__desc,
#work-wall .work-card.is-active .work-card__marker,
#work-wall .work-card.is-active .work-card__title,
#work-wall .work-card.is-active .work-card__desc {
    opacity: 1;
}

#work-wall .work-card:hover .work-card__marker,
#work-wall .work-card:focus-visible .work-card__marker,
#work-wall .work-card.is-active .work-card__marker {
    transform: translate(-8px, 6px) scale(1);
}

#work-wall .work-card:hover .work-card__title,
#work-wall .work-card:focus-visible .work-card__title,
#work-wall .work-card.is-active .work-card__title {
    border-radius:
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-sm);
    box-shadow: 0 16px 38px rgba(255, 107, 0, 0.32);
    transform: translateY(0) scale(1);
}

#work-wall .work-card:hover .work-card__desc,
#work-wall .work-card:focus-visible .work-card__desc,
#work-wall .work-card.is-active .work-card__desc {
    box-shadow: 0 16px 38px rgba(255, 107, 0, 0.3);
    transform: translateY(0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
    #work-wall .work-card:hover .work-card__meta,
    #work-wall .work-card:focus-visible .work-card__meta,
    #work-wall .work-card.is-active .work-card__meta,
    #work-wall .work-card:hover .work-card__marker,
    #work-wall .work-card:hover .work-card__title,
    #work-wall .work-card:hover .work-card__desc,
    #work-wall .work-card:focus-visible .work-card__marker,
    #work-wall .work-card:focus-visible .work-card__title,
    #work-wall .work-card:focus-visible .work-card__desc,
    #work-wall .work-card.is-active .work-card__marker,
    #work-wall .work-card.is-active .work-card__title,
    #work-wall .work-card.is-active .work-card__desc {
        opacity: 0;
    }
}

#work-wall .work-card:focus-visible {
    outline: 2px solid rgba(88, 124, 228, 0.55);
    outline-offset: 4px;
}

.projects-header {
    position: relative;
}

.home-card-editor-actions {
    position: absolute;
    right: 0;
    bottom: 4px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: min(100%, 520px);
}

.home-card-editor-toggle,
.home-card-editor-sync {
    border: 1px solid rgba(18, 18, 18, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #171717;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 10px 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.home-card-editor-sync {
    background: rgba(236, 253, 245, 0.92);
    border-color: rgba(16, 185, 129, 0.28);
    color: #065f46;
}

.home-card-editor-sync__status {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #047857;
    min-height: 1em;
}

.home-card-editor-sync__status[data-state="saved"] {
    color: #047857;
}

.home-card-editor-toggle {
    position: static;
}

.home-card-editor-toggle.is-active {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

body.home-card-editor-active #work-wall .work-card {
    cursor: grab;
    outline: 1px solid rgba(0, 102, 255, 0.26);
    outline-offset: 5px;
}

body.home-card-editor-active #work-wall .work-card.is-home-card-editor-selected {
    outline: 2px solid rgba(0, 102, 255, 0.72);
}

body.home-card-editor-active #work-wall .work-card.is-home-card-dragging {
    cursor: grabbing;
}

body.home-card-editor-active #work-wall .work-card__meta {
    pointer-events: none;
}

.home-card-editor-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    z-index: 9;
    display: none;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    color: #111827;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.16);
    font-family: 'Inter', sans-serif;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.home-card-editor-active .home-card-editor-panel {
    display: grid;
}

.home-card-editor-panel__row,
.home-card-editor-panel__coords,
.home-card-editor-panel__control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-card-editor-panel__row {
    flex-wrap: wrap;
}

.home-card-editor-panel__title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
}

.home-card-editor-panel button {
    border: 0;
    border-radius: 7px;
    background: #111827;
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    padding: 8px 10px;
}

.home-card-editor-panel button[data-home-card-reset] {
    background: rgba(17, 24, 39, 0.08);
    color: #111827;
}

.home-card-editor-panel__control span,
.home-card-editor-panel__coords span {
    color: #4b5563;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.home-card-editor-panel__control input[type="range"] {
    min-width: 0;
    flex: 1;
}

.home-card-editor-panel__control input[type="number"] {
    width: 58px;
    min-width: 58px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.72);
    color: #111827;
    font: 700 12px/1 'Inter', sans-serif;
    padding: 8px;
}

.home-card-editor-panel__coords label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.home-card-editor-panel__coords input {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.72);
    color: #111827;
    font: 700 12px/1 'Inter', sans-serif;
    padding: 8px;
}

/* =========================================================
  PLAY PAGE — SCROLL CANVAS
   ---------------------------------------------------------
   • body.play-canvas-layout locks scroll so the canvas owns
     the entire viewport on this page only.
   • .play-canvas is a fixed-size viewport. Wheel / trackpad /
     touch scroll updates the virtual pan in initPlayCanvas().
   • Cards (.play-card) sit on the world at fixed coords and
     move with the scroll pan.
   • Stickers ([data-play-sticker]) sit on the world too but
     accept their own pointerdown so they drag independently;
     positions persist via localStorage.
   • Background dot + mesh grid is painted on .play-grid and
     shifted with background-position while the pan is clamped
     to the outermost cards plus large edge padding.
   ========================================================= */

body.play-canvas-layout {
    overflow: hidden;
    height: 100vh;
}

.play-page {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
}

.play-canvas {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #fdfaf3;
    cursor: default;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    z-index: 0;
}

body.night-mode .play-canvas {
    background: #141412;
}

.play-editor {
    position: absolute;
    top: max(84px, calc(env(safe-area-inset-top) + 72px));
    right: clamp(14px, 2vw, 28px);
    z-index: 12;
    width: min(420px, calc(100vw - 28px));
    pointer-events: none;
    font-family: var(--font-sans);
}

.play-editor__toggle,
.play-editor__panel {
    pointer-events: auto;
}

.play-editor__toggle {
    appearance: none;
    border: 1px solid rgba(62, 37, 20, 0.14);
    border-radius: 999px;
    padding: 10px 16px;
    background: rgba(255, 253, 248, 0.92);
    color: #3e2514;
    box-shadow:
        0 14px 30px rgba(40, 28, 16, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.play-editor__toggle:hover,
.play-editor__toggle[aria-pressed="true"] {
    background: #ff7b3c;
    border-color: rgba(255, 123, 60, 0.55);
    color: #fff;
}

.play-editor__toggle:active {
    transform: translateY(1px) scale(0.99);
}

.play-editor__panel {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid rgba(62, 37, 20, 0.12);
    border-radius: 10px;
    background: rgba(255, 253, 248, 0.94);
    box-shadow:
        0 18px 44px rgba(40, 28, 16, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.play-editor__panel[hidden] {
    display: none;
}

.play-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.play-editor__title,
.play-editor__status {
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.2;
}

.play-editor__title {
    color: #3e2514;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.play-editor__status {
    flex: 0 0 auto;
    color: rgba(62, 37, 20, 0.58);
    font-weight: 600;
}

.play-editor__fields {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.play-editor__field {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: rgba(62, 37, 20, 0.7);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.play-editor__field input {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(62, 37, 20, 0.14);
    border-radius: 7px;
    padding: 8px 7px;
    background: rgba(255, 255, 255, 0.72);
    color: #2a221a;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0;
}

.play-editor__field input:focus {
    outline: 2px solid rgba(255, 123, 60, 0.38);
    outline-offset: 1px;
}

.play-editor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.play-editor__actions button {
    appearance: none;
    border: 1px solid rgba(62, 37, 20, 0.12);
    border-radius: 999px;
    padding: 8px 11px;
    background: rgba(255, 255, 255, 0.72);
    color: #3e2514;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.play-editor__actions button:hover {
    background: rgba(255, 123, 60, 0.12);
    border-color: rgba(255, 123, 60, 0.35);
}

.play-editor__actions button:active {
    transform: translateY(1px) scale(0.99);
}

.play-editor__hint {
    margin: 10px 0 0;
    color: rgba(62, 37, 20, 0.56);
    font-size: 0.76rem;
    line-height: 1.35;
}

.play-editor-selection {
    position: absolute;
    z-index: 11;
    border: 1.5px solid #ff7b3c;
    border-radius: 8px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.75),
        0 14px 30px rgba(40, 28, 16, 0.12);
    pointer-events: none;
    transform-origin: center center;
}

.play-editor-selection[hidden] {
    display: none;
}

.play-editor-selection__line {
    position: absolute;
    left: 50%;
    top: -34px;
    width: 1.5px;
    height: 34px;
    background: #ff7b3c;
    transform: translateX(-50%);
}

.play-editor-selection__handle {
    position: absolute;
    left: 50%;
    top: -48px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid #ff7b3c;
    border-radius: 50%;
    background: #fffdf8;
    box-shadow: 0 8px 18px rgba(40, 28, 16, 0.18);
    cursor: grab;
    pointer-events: auto;
    transform: translateX(-50%);
}

.play-editor-selection__handle:active {
    cursor: grabbing;
}

.play-editor-selection__scale-handle {
    position: absolute;
    right: -13px;
    bottom: -13px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid #ff7b3c;
    border-radius: 50%;
    background: #fffdf8;
    box-shadow: 0 8px 18px rgba(40, 28, 16, 0.18);
    cursor: nwse-resize;
    pointer-events: auto;
}

.play-canvas.is-editing-layout .play-card,
.play-canvas.is-editing-layout [data-play-sticker] {
    cursor: grab;
}

.play-canvas.is-editing-layout .play-card.is-clickable:hover {
    transform: rotate(var(--rot)) scale(var(--scale));
}

.play-canvas.is-editing-layout .play-card.is-layout-selected,
.play-canvas.is-editing-layout .play-sticker.is-layout-selected {
    filter: drop-shadow(0 16px 24px rgba(255, 123, 60, 0.24));
}

.play-canvas.is-editing-layout .play-card.is-layout-dragging,
.play-canvas.is-editing-layout .play-sticker.is-layout-dragging {
    cursor: grabbing;
    transition: none;
}

body.night-mode .play-editor__toggle,
body.night-mode .play-editor__panel {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(24, 24, 21, 0.88);
    color: #f0eadb;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.night-mode .play-editor__toggle:hover,
body.night-mode .play-editor__toggle[aria-pressed="true"] {
    background: #ff8a4b;
    color: #191612;
}

body.night-mode .play-editor__title {
    color: #f0eadb;
}

body.night-mode .play-editor__status,
body.night-mode .play-editor__hint,
body.night-mode .play-editor__field {
    color: rgba(240, 234, 219, 0.78);
}

body.night-mode .play-editor__field input,
body.night-mode .play-editor__actions button {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: #f0eadb;
}

body.night-mode .play-editor-selection__handle {
    background: #1f1d19;
}

body.night-mode .play-editor-selection__scale-handle {
    background: #1f1d19;
}

@media (max-width: 640px) {
    .play-editor {
        top: auto;
        bottom: calc(env(safe-area-inset-bottom) + 12px);
        left: 12px;
        right: auto;
        width: calc(100vw - 24px);
    }

    .play-editor__panel {
        margin-top: 8px;
        padding: 10px;
    }

    .play-editor__header {
        margin-bottom: 8px;
    }

    .play-editor__fields {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 8px;
    }

    .play-editor__field {
        font-size: 0.62rem;
    }

    .play-editor__field input {
        padding: 7px 6px;
        font-size: 0.76rem;
    }

    .play-editor__actions {
        gap: 6px;
    }

    .play-editor__actions button {
        padding: 7px 9px;
        font-size: 0.7rem;
    }

    .play-editor__hint {
        display: none;
    }
}

/* Layered architecture inside .play-canvas (back → front):
     z=0  .play-grid     dots + mesh background
     z=1  .play-overlay  viewport-pinned title + subtitle
     z=2  .play-world    cards + stickers
   The grid lives on its own element (sibling of .play-world) instead
   of being baked into .play-world's background-image, so the title
   can sit visually between the grid and the cards. JS translates
   .play-world and shifts .play-grid's background-position from the
   same virtual pan values so both layers stay aligned. */

/* ── Grid background layer (z=0) ──────────────────────── */
/* Fills the viewport and repeats inside the finite scroll bounds.
   Background = two stacked layers:
   1. Dot grid (radial-gradient — matches the homepage body grid).
   2. Dashed grid-box lines every 90px (every 3rd dot), drawn as a
      tiled 90×90 SVG with shape-rendering="crispEdges" and explicit
      1px dashed strokes on the top + left edges of each cell. SVG is used
      instead of repeating-linear-gradient because the gradient's
      1px lines smear into invisibility in patches when the world
      is GPU-translated by sub-pixel amounts (low alpha + bilinear
      sampling). The SVG renders pixel-perfect under any DPR/zoom,
      and applyPan() in script.js rounds the virtual pan offset to whole
      pixels for the same reason.
   Alignment note: the radial-gradient centres each dot at (15, 15)
   within its 30×30 tile, so the line layer is shifted (15px, 15px)
   via background-position so its rect edges land exactly on the
   dot columns/rows at x = 15, 105, 195, … and y likewise.
   pointer-events: none so it never blocks scroll/sticker drag. */
.play-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    will-change: background-position;
    pointer-events: none;
    background-color: transparent;
    background-image:
        /* Dots — match homepage body grid exactly */
        radial-gradient(circle, #cfcfc4 1px, transparent 1px),
        /* Dashed grid-box lines every 90px (every 3rd dot) */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' shape-rendering='crispEdges'><path d='M0 .5H90M.5 0V90' fill='none' stroke='%23E3E3D6' stroke-width='1' stroke-dasharray='3 3'/></svg>");
    background-size:
        calc(var(--grid-unit) * var(--grid-scale)) calc(var(--grid-unit) * var(--grid-scale)),
        calc(var(--grid-unit) * var(--grid-scale) * 3) calc(var(--grid-unit) * var(--grid-scale) * 3);
    background-position:
        0 0,
        15px 15px;
    background-repeat:
        repeat,
        repeat;
}

body.night-mode .play-grid {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' shape-rendering='crispEdges'><path d='M0 .5H90M.5 0V90' fill='none' stroke='%23c1c1a5' stroke-opacity='.28' stroke-width='1' stroke-dasharray='3 3'/></svg>");
}

/* ── World layer (z=2) — only holds cards + stickers ──── */
/* Transparent so the grid (z=0) and title overlay (z=1) behind it
   remain visible wherever no card sits. Translated by the scroll pan
   in applyPan(). */
.play-world {
    position: absolute;
    top: 0;
    left: 0;
    width: 3000px;
    height: 2000px;
    z-index: 2;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    background: transparent;
}

/* ── Cards ────────────────────────────────────────────── */
.play-card {
    position: absolute;
    margin: 0;
    --rot: 0deg;
    --scale: 1;
    transform: rotate(var(--rot)) scale(var(--scale));
    transform-origin: center center;
    border-radius: 4px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
}

.play-card.is-clickable {
    cursor: pointer;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
}

.play-card.is-clickable:hover {
    transform: rotate(var(--rot)) scale(var(--scale)) translateY(-6px) scale(1.015);
    box-shadow: none;
}

.play-card.is-clickable:focus-visible {
    outline: 2px solid #ff8442;
    outline-offset: 6px;
}

.play-card.is-source-hidden {
    opacity: 0;
    transition: opacity 0.12s linear;
}

.play-card.play-card--transparent,
body.night-mode .play-card.play-card--transparent {
    background: transparent;
    box-shadow: none;
}

.play-card.play-card--transparent.is-clickable:hover,
body.night-mode .play-card.play-card--transparent.is-clickable:hover {
    box-shadow: none;
}

.play-card__media {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
}

.play-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.play-card--stats {
    overflow: visible;
}

.play-card--stats .play-card__media {
    position: relative;
    z-index: 1;
    border-radius: inherit;
}

.play-card__confetti {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.play-card__confetti-item {
    position: absolute;
    width: 58px;
    height: 58px;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 10px 14px rgba(40, 28, 16, 0.22));
    transition:
        opacity 0.2s ease,
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.play-card__confetti-item--heart {
    top: -12px;
    left: 20%;
    transform: translate(18px, 28px) rotate(-8deg) scale(0.25);
}

.play-card__confetti-item--user {
    top: 12%;
    right: -18px;
    transform: translate(-22px, 20px) rotate(10deg) scale(0.25);
}

.play-card--stats:hover .play-card__confetti-item,
.play-card--stats:focus-visible .play-card__confetti-item {
    opacity: 1;
}

.play-card--stats:hover .play-card__confetti-item--heart,
.play-card--stats:focus-visible .play-card__confetti-item--heart {
    transform: translate(-10px, -40px) rotate(-22deg) scale(1);
}

.play-card--stats:hover .play-card__confetti-item--user,
.play-card--stats:focus-visible .play-card__confetti-item--user {
    transform: translate(34px, -16px) rotate(18deg) scale(0.92);
}

body.night-mode .play-card.is-clickable:hover {
    box-shadow: none;
}

/* ── Play card detail overlay ────────────────────────── */
.play-detail {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.28s;
    will-change: opacity;
    backface-visibility: hidden;
}

.play-detail.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.play-detail.is-closing {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.play-detail__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background:
        linear-gradient(180deg, rgba(68, 63, 58, 0.54) 0%, rgba(68, 63, 58, 0.64) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}

.play-detail.is-active .play-detail__backdrop,
.play-detail.is-closing .play-detail__backdrop {
    opacity: 1;
}

.play-detail__stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(320px, 480px);
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4vw, 60px);
    width: min(1120px, calc(100vw - 104px));
    min-height: 100%;
    margin: 0 auto;
    padding:
        clamp(112px, 14vh, 148px)
        0
        clamp(120px, 16vh, 168px);
}

.play-detail__media-shell {
    position: relative;
    justify-self: end;
    width: min(100%, 360px);
    aspect-ratio: var(--detail-aspect, 4 / 5);
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

.play-detail__media {
    width: 100%;
    height: 100%;
    opacity: 1;
    border-radius: inherit;
    overflow: hidden;
    box-shadow: 0 32px 72px rgba(21, 16, 12, 0.18);
    transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
    backface-visibility: hidden;
}

.play-detail.is-morphing .play-detail__media {
    opacity: 0;
}

.play-detail__media .play-card__media,
.play-detail__media .play-card__media video {
    width: 100%;
    height: 100%;
}

.play-detail__copy {
    --message-bubble-orange-start: #ff8648;
    --message-bubble-orange-end: #ff743a;
    --message-bubble-radius-sm: 18px;
    --message-bubble-radius-lg: 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 480px;
}

.play-detail__title-pill,
.play-detail__body-bubble,
.play-detail__stats {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.28s ease,
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.play-detail.is-active .play-detail__title-pill,
.play-detail.is-active .play-detail__body-bubble,
.play-detail.is-active .play-detail__stats,
.play-detail.is-active .play-detail__link {
    opacity: 1;
    transform: translateY(0);
}

.play-detail.is-closing .play-detail__title-pill,
.play-detail.is-closing .play-detail__body-bubble,
.play-detail.is-closing .play-detail__stats,
.play-detail.is-closing .play-detail__link {
    opacity: 0;
    transform: translateY(12px);
}

.play-detail__title-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.34em;
    max-width: min(100%, 540px);
    padding: 18px 28px 20px;
    border-radius:
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-sm);
    background: linear-gradient(180deg, var(--message-bubble-orange-start) 0%, var(--message-bubble-orange-end) 100%);
    border: 0;
    color: #fffdf8;
    font-family: var(--font-sans);
    font-size: clamp(1.55rem, 2.1vw, 2.2rem);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.065em;
    text-wrap: balance;
    box-shadow:
        0 18px 40px rgba(18, 12, 8, 0.16),
        0 6px 16px rgba(18, 12, 8, 0.08);
    transition-delay: 0.08s;
}

.play-detail__title-pill.has-link::after {
    content: "";
    flex: 0 0 auto;
    width: 0.38em;
    height: 0.38em;
    margin-left: 0.04em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.92;
}

.play-detail__title-pill.has-link {
    cursor: pointer;
}

.play-detail__body-bubble {
    max-width: min(100%, 560px);
    padding: 28px 30px 32px;
    border-radius:
        var(--message-bubble-radius-sm)
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-lg)
        var(--message-bubble-radius-lg);
    background: linear-gradient(180deg, var(--message-bubble-orange-start) 0%, var(--message-bubble-orange-end) 100%);
    border: 0;
    color: #fffdf8;
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.08vw, 1.08rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.012em;
    box-shadow:
        0 22px 46px rgba(18, 12, 8, 0.16),
        0 8px 18px rgba(18, 12, 8, 0.08);
    transition-delay: 0.16s;
}

.play-detail__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    transition-delay: 0.24s;
}

.play-detail__stats[hidden] {
    display: none;
}

.play-detail__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(160, 89, 31, 0.28);
    background: rgba(255, 253, 248, 0.92);
    color: #2a221a;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
    box-shadow:
        0 14px 30px rgba(18, 12, 8, 0.14),
        0 4px 10px rgba(18, 12, 8, 0.08);
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.28s ease,
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    transition-delay: 0.3s;
}

.play-detail__link[hidden] {
    display: none;
}

.play-detail.is-active .play-detail__link {
    opacity: 1;
    transform: translateY(0);
}

.play-detail__link:hover {
    background: #fff7ed;
    box-shadow:
        0 18px 34px rgba(18, 12, 8, 0.16),
        0 6px 14px rgba(18, 12, 8, 0.09);
}

.play-detail__stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.92);
    box-shadow:
        0 14px 30px rgba(18, 12, 8, 0.14),
        0 4px 10px rgba(18, 12, 8, 0.08);
    color: #2a221a;
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.play-detail__stat img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.play-detail-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    overflow: hidden;
    border-radius: 12px;
    background: transparent;
    box-shadow:
        0 26px 56px rgba(22, 16, 12, 0.24),
        0 10px 18px rgba(22, 16, 12, 0.14);
    pointer-events: none;
    will-change: left, top, width, height, transform, opacity;
    backface-visibility: hidden;
    transform-origin: center center;
}

.play-detail-ghost--transparent {
    background: transparent;
    box-shadow: none;
}

.play-detail-ghost .play-card__media,
.play-detail-ghost .play-card__media video {
    width: 100%;
    height: 100%;
}

body.night-mode .play-detail__backdrop {
    background:
        linear-gradient(180deg, rgba(12, 12, 10, 0.72) 0%, rgba(12, 12, 10, 0.82) 100%);
}

body.night-mode .play-detail__media-shell {
    background: transparent;
    box-shadow: none;
}

body.night-mode .play-detail__media {
    box-shadow: 0 30px 72px rgba(0, 0, 0, 0.34);
}

body.night-mode .play-detail__title-pill,
body.night-mode .play-detail__body-bubble {
    border-color: rgba(255, 209, 173, 0.16);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.28),
        0 8px 20px rgba(0, 0, 0, 0.2);
}

body.night-mode .play-detail__link {
    border-color: rgba(255, 209, 173, 0.16);
    background: rgba(245, 239, 226, 0.94);
    color: #1b1612;
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.22),
        0 6px 14px rgba(0, 0, 0, 0.16);
}

/* ── Fixed bottom mascot ───────────────────────────────── */
.play-mascot {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 6;
    width: clamp(86px, 9vw, 132px);
    transform: translate(-50%, 24%);
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.play-mascot__tooltip {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 8px;
    transform: translateX(-50%) translateY(6px);
    padding: 10px 18px;
    background: linear-gradient(135deg, #ff8a3d 0%, #f97a4f 100%);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow:
        0 6px 18px rgba(249, 122, 79, 0.35),
        0 2px 6px rgba(40, 28, 16, 0.18);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.play-mascot__tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: #f97a4f;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
}

.play-mascot:hover .play-mascot__tooltip,
.play-mascot:focus-within .play-mascot__tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

body.night-mode .play-mascot__tooltip {
    background: linear-gradient(135deg, #ffb37a 0%, #f3a6df 100%);
    color: #141214;
    box-shadow:
        0 6px 18px rgba(243, 166, 223, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.35);
}

body.night-mode .play-mascot__tooltip::after {
    background: #f3a6df;
}

@media (prefers-reduced-motion: reduce) {
    .play-mascot__tooltip {
        transition: opacity 0.15s linear;
        transform: translateX(-50%) translateY(0);
    }
}

.play-mascot__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.play-mascot__shadow {
    fill: rgba(40, 28, 16, 0.14);
    filter: blur(4px);
}

.play-mascot__face {
    fill: #061f3e;
}

.play-mascot__pupil {
    fill: #d5e5ff;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.16s ease-out;
    will-change: transform;
}

.play-mascot__mouth {
    fill: none;
    stroke: #141214;
    stroke-width: 5;
    stroke-linecap: round;
}

body.night-mode .play-mascot__face {
    fill: #061f3e;
}

body.night-mode .play-mascot__pupil {
    fill: #d5e5ff;
}

body.night-mode .play-mascot__mouth {
    stroke: #141412;
}

/* ── Stickers ────────────────────────────────────────── */
.play-sticker {
    position: absolute;
    --rot: 0deg;
    --scale: 1;
    transform: rotate(var(--rot)) scale(var(--scale));
    transform-origin: center center;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    z-index: 10;
    filter: drop-shadow(0 8px 14px rgba(40, 28, 16, 0.18));
    transition: filter 0.2s ease;
}

.play-sticker:hover {
    filter: drop-shadow(0 12px 18px rgba(40, 28, 16, 0.26));
}

.play-sticker.is-dragging {
    cursor: grabbing;
    z-index: 50;
    filter: drop-shadow(0 18px 28px rgba(40, 28, 16, 0.35));
    transition: none;
}

.play-sticker img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* ── Centre title overlay ───────────────────────────── */
/* Child of .play-canvas (sibling of .play-grid and .play-world).
   Fills the canvas via inset: 0 (the canvas itself fills the viewport),
   so flex-centring lands the title + subtitle in the middle of the
   screen. Layered between the grid (z=0) and the world (z=2) so:
     • the dot/mesh grid reads as a true background BEHIND the title;
     • cards paint on TOP of the title — overlapping cards visually
       obscure the text where they sit, and the title shows through
       wherever no card covers it.
   pointer-events: none so it never intercepts canvas scroll or sticker drag. */
.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.play-overlay__inner {
    text-align: center;
    padding: 0 24px;
    max-width: 720px;
    transform: translate3d(var(--play-overlay-offset-x, 0px), var(--play-overlay-offset-y, 0px), 0);
    will-change: transform;
}

.play-overlay__title {
    margin: 0 0 12px;
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: var(--type-serif-display-weight);
    font-size: var(--type-serif-display-size);
    line-height: var(--type-serif-display-leading);
    letter-spacing: var(--type-serif-display-tracking);
    color: #2a221a;
}

.play-overlay__subtitle {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    letter-spacing: 0.02em;
    color: rgba(42, 34, 26, 0.6);
}

body.night-mode .play-overlay__title    { color: #f0eadb; }
body.night-mode .play-overlay__subtitle { color: rgba(240, 234, 219, 0.6); }

.play-canvas.is-detail-open .play-world,
.play-canvas.is-detail-open .play-grid,
.play-canvas.is-detail-open .play-sticker {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .play-card.is-clickable,
    .play-detail,
    .play-detail__title-pill,
    .play-detail__body-bubble,
    .play-mascot,
    .play-overlay__inner,
    .play-mascot__pupil,
    .play-card__confetti-item,
    .play-sticker {
        transition-duration: 0s !important;
    }
}

@media (max-width: 1100px) {
    .play-detail__stage {
        grid-template-columns: minmax(260px, 340px) minmax(280px, 420px);
        width: min(100%, calc(100vw - 64px));
        gap: 24px;
    }
}

@media (max-width: 840px) {
    .play-detail__stage {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 18px;
        width: min(100%, calc(100vw - 32px));
        padding:
            max(104px, calc(env(safe-area-inset-top) + 84px))
            0
            clamp(112px, 15vh, 148px);
    }

    .play-detail__media-shell {
        justify-self: center;
        width: min(100%, 320px);
    }

    .play-detail__copy {
        width: min(100%, 420px);
    }

    .play-detail__title-pill,
    .play-detail__body-bubble {
        width: 100%;
        max-width: 100%;
    }

    .play-detail__title-pill {
        border-radius:
            var(--message-bubble-radius-lg)
            var(--message-bubble-radius-lg)
            var(--message-bubble-radius-lg)
            var(--message-bubble-radius-sm);
    }
}


.card-content {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.card-content[data-lazy-bg]:not([data-lazy-loaded]) {
    background-color: #e8e6e1;
}

.play-card__media[data-lazy-bg]:not([data-lazy-loaded]) {
    background-color: transparent;
}

body.night-mode .card-content[data-lazy-bg]:not([data-lazy-loaded]) {
    background-color: #1c1c1c;
}

body.night-mode .play-card__media[data-lazy-bg]:not([data-lazy-loaded]) {
    background-color: transparent;
}

img[data-src]:not(.footer-grass-scene__base) {
    opacity: 0;
    transition: opacity 0.35s ease;
}

img[data-src][data-lazy-loaded]:not(.footer-grass-scene__base),
img[data-lazy-loaded]:not(.footer-grass-scene__base) {
    opacity: 1;
}

.card-content video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
}

.card-content:has(video)::after {
    display: none;
}

.card-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(200, 200, 200, 0.4);
    /* #C8C8C8 at 40% opacity */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
    z-index: 1;
}

@media (hover: none), (max-width: 768px) {
    #work-wall .work-card {
        transform: none;
    }

    #work-wall .card-content {
        transform: scale(1.04);
    }

    #work-wall .card-content::after {
        opacity: 0.94;
    }

    #work-wall .work-card__meta,
    #work-wall .card-1 .work-card__meta,
    #work-wall .card-2 .work-card__meta,
    #work-wall .card-3 .work-card__meta,
    #work-wall .card-4 .work-card__meta {
        left: 22px;
        right: 22px;
        top: auto;
        bottom: 22px;
        transform: none;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 8px 10px;
    }

    #work-wall .work-card:active .work-card__meta {
        opacity: 1;
    }

    #work-wall .work-card:active .work-card__marker,
    #work-wall .work-card:active .work-card__title,
    #work-wall .work-card:active .work-card__desc {
        opacity: 1;
    }

    #work-wall .work-card:active .work-card__marker {
        transform: translate(-6px, 4px) scale(1);
    }

    #work-wall .work-card:active .work-card__title,
    #work-wall .work-card:active .work-card__desc {
        transform: translateY(0) scale(1);
    }

    #work-wall .work-card__marker {
        width: 28px;
        height: 28px;
    }

    #work-wall .work-card__title,
    #work-wall .card-2 .work-card__title,
    #work-wall .card-4 .work-card__title {
        padding: 9px 16px;
        font-size: clamp(1rem, 4.8vw, 1.28rem);
    }

    #work-wall .work-card__desc,
    #work-wall .card-2 .work-card__desc,
    #work-wall .card-4 .work-card__desc {
        max-width: 100%;
        padding: 12px 16px;
        font-size: clamp(0.82rem, 3.8vw, 0.96rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    #work-wall .work-card,
    #work-wall .card-content,
    #work-wall .card-content::after,
    #work-wall .work-card__meta,
    #work-wall .work-card__marker,
    #work-wall .work-card__title,
    #work-wall .work-card__desc {
        transition: none;
    }
}



/* Individual Card Positions */
/*
.card-1 {
    width: 450px;
    height: 315px;
    top: 80px;
    left: 0;
    transform: rotate(-8deg);
    z-index: 10;
}

.card-2 {
    width: 585px;
    height: 405px;
    top: 30px;
    right: 0;
    transform: rotate(4deg);
    z-index: 5;
}

.card-3 {
    width: 405px;
    height: 288px;
    top: 420px;
    left: 15%;
    transform: rotate(-3deg);
    z-index: 12;
}

.card-4 {
    width: 522px;
    height: 360px;
    top: 360px;
    right: 10%;
    transform: rotate(6deg);
    z-index: 8;
}
*/

/* ===== Light Toggle Button ===== */
.light-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: transparent;
    cursor: none;
    color: #8C8C8C;
    transition: all 0.3s ease;
    margin-left: 8px;
    flex-shrink: 0;
}

.light-toggle-btn:hover {
    border-color: rgba(0, 0, 0, 0.25);
    color: #444;
    transform: scale(1.08);
}

/* ===== Night Mode Overrides ===== */
body.night-mode {
    --shadow-color: rgba(220, 220, 220, 0.15);
    --shadow-transition: rgba(220, 220, 220, 0.06);
    --bg-light2: #0d0d0d;
    --bg-color: #0d0d0d;
    --text-primary: #e8e8e8;
    --text-muted: #a8a8a8;
    background-color: var(--bg-color);
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: calc(var(--grid-unit) * var(--grid-scale)) calc(var(--grid-unit) * var(--grid-scale));
    background-position:
        calc((100vw - 1440px * var(--grid-scale)) / 2 + var(--hero-anchor-x) * var(--grid-scale))
        calc(var(--hero-nav-h) + var(--hero-anchor-y) * var(--grid-scale) - var(--hero-lift));
    color: var(--text-primary);
    cursor: none;
}

body.night-mode .light-toggle-btn {
    border-color: rgba(184, 184, 184, 0.35);
    color: #b8b8b8;
}

body.night-mode .navbar {
    background: transparent;
}

body.night-mode .navbar__pill {
    background: #131313;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.45);
}

body.night-mode .theme-toggle {
    background: #1A1A1A;
    border-color: rgba(255, 255, 255, 0.1);
    color: #F4EDDE;
}

body.night-mode .theme-toggle:hover {
    background: #222222;
    border-color: rgba(255, 255, 255, 0.18);
}

body.night-mode .nav-item {
    color: #a8a8a8;
}

body.night-mode .control-btn {
    background: rgba(255, 255, 255, 0.06);
}

body.night-mode .control-btn img {
    filter: invert(1) brightness(0.85);
}

body.night-mode .nav-item:hover {
    color: #f1f1f1;
}

body.night-mode .nav-item.nav-item--resume:hover,
body.night-mode .nav-item.nav-item--resume:focus-visible {
    color: transparent;
    background: linear-gradient(92deg, #77E866 2.78%, #F2D357 26.42%, #FBBA65 43.84%, #FD88A5 62.95%, #ED6DDA 78.67%, #D55FFF 99.06%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.night-mode .resume-modal__backdrop {
    background: rgba(4, 4, 4, 0.62);
}

body.night-mode .resume-modal__panel {
    border-color: rgba(255, 255, 255, 0.12);
    background: #1A1A1A;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

body.night-mode .resume-modal__icon-btn {
    color: #F4EDDE;
}

body.night-mode .resume-modal__preview {
    background: #1A1A1A;
}

body.night-mode .resume-modal__icon-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: #222222;
}

body.night-mode .resume-modal__icon-btn:hover,
body.night-mode .resume-modal__icon-btn:focus-visible {
    background: #2A2A2A;
}

body.night-mode .hero-headline-img {
    filter: brightness(1.05) contrast(1.02);
}

body.night-mode .work-card {
    background: #151515;
    box-shadow: none;
}

body.night-mode #work-wall .work-card {
    background: #151515;
    box-shadow: none;
}

body.night-mode #work-wall .work-card::after {
    display: block;
    box-shadow: none;
}

body.night-mode #work-wall .card-content::after {
    background: linear-gradient(180deg, rgba(5, 7, 10, 0.03) 0%, rgba(5, 7, 10, 0.16) 42%, rgba(5, 7, 10, 0.86) 100%);
}

/* WebGL replacement wins in both themes. If WebGL does not initialize,
   body.webgl-cards is never added and the normal image/Lottie fallback stays. */
body.night-mode.webgl-cards #work-wall .work-card {
    background: transparent;
    box-shadow: none;
}

body.night-mode.webgl-cards #work-wall .card-content,
body.night-mode.webgl-cards #work-wall .work-card__center-image {
    opacity: 0;
}

body.night-mode.webgl-cards .work-shader-canvas {
    filter: brightness(1.08) saturate(1.08);
}

body.night-mode .logo-img {
    filter: invert(1) brightness(1.8);
}

body.night-mode .nav-item.is-active {
    color: #f1f1f1;
}

body.night-mode .projects-title,
body.night-mode .footer-cta-title {
    color: #f1f1f1;
}

body.night-mode .beyond-pixels-stage {
    background-color: #0d0d0d;
    border-color: rgba(255, 255, 255, 0.04);
}

body.night-mode .beyond-subtitle {
    color: #b8b8b8;
}

body.night-mode .beyond-note {
    color: #c59a7b;
}

body.night-mode .footer-meta-social img,
body.night-mode .footer-meta-social svg {
    filter: invert(1) brightness(1.2);
}

body.night-mode .mobile-nav-overlay {
    background: rgba(13, 13, 13, 0.97);
}

body.mobile-nav-open {
    overflow: hidden;
}

body.night-mode .mobile-nav-overlay__close {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f0eadb;
}

body.night-mode .mobile-nav-overlay__close:hover,
body.night-mode .mobile-nav-overlay__close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

body.night-mode .mobile-menu-btn span {
    background-color: #dcdcdc;
}

body.night-mode .about-display {
    color: #f1f1f1;
}

body.night-mode .about-display em {
    color: #e8e8e8;
}

body.night-mode .about-kicker,
body.night-mode .about-exp-coming {
    color: #a8a8a8;
}

body.night-mode .about-visual-note {
    color: #8a8bf5;
}

body.night-mode .about-paragraph {
    color: #b8b8b8;
}

body.night-mode .about-intro-note {
    color: #b8b8b8;
}

body.night-mode .about-copy .about-paragraph strong {
    color: inherit;
}

body.night-mode .about-visual {
    background: transparent;
    box-shadow: none;
}


/* ===== Responsive ===== */
@media (max-width: 1280px) {
    .museum-stage {
        width: 62%;
    }
}

@media (max-width: 1280px) {
    /* The play page owns the full viewport with an absolute scroll canvas,
       so the home-page column overrides below should not target it. */

    .hero-section--figma {
        min-height: auto;
        padding: 32px 0 48px;
    }

    .hero-cluster {
        transform: scale(1.05);
    }

    /* Reset only the HOME page work cards; Play cards use their own
       absolute scroll-canvas layout. */
    #work-wall .work-card {
        width: 100% !important;
        left: 0 !important;
        right: auto !important;
        position: relative !important;
        top: 0 !important;
        margin-bottom: 0;
        transform: none !important;
    }

    /* Retain bento grid logic on tablet */

    .work-container {
        height: auto;
    }

    /* Museum Stage remains on the right side */

    .fold {
        height: 240px;
    }

    .footer-cta-shell {
        padding-top: clamp(228px, 24vw, 252px);
    }

    .footer-sticker-stack {
        width: clamp(220px, 27vw, 280px);
        transform: translateX(-4%) rotate(-9deg);
    }

    .footer-meta {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .nav-tray {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .navbar {
        padding: 14px var(--layout-gutter);
    }

    .navbar__pill {
        padding: 12px 20px;
        border-radius: 48px;
    }

    .hero-section--figma {
        padding: 28px 0 40px;
    }

    .hero-cluster {
        transform: scale(1);
    }
}

/* ===== Project Modal ===== */
.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.6s;
    transform: translateZ(0);
}

.project-modal.active {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(252, 251, 249, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        backdrop-filter 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        -webkit-backdrop-filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translateZ(0);
}

.project-modal.active .modal-backdrop {
    background: rgba(252, 251, 249, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.night-mode .modal-backdrop {
    background: rgba(0, 0, 0, 0);
}

body.night-mode .project-modal.active .modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.modal-container {
    position: relative;
    width: 85%;
    max-width: 1100px;
    height: 75vh;
    border-radius: 20px;
    background: transparent;
    box-shadow: none;
    display: flex;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

body.night-mode .modal-container {
    background: transparent;
    box-shadow: none;
}

.project-modal.active .modal-container {
    opacity: 1;
}

.logo-circle {
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(26, 26, 26, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    z-index: 2;
}

body.night-mode .logo-circle {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
}

/* Mobile Menu Button Base */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    cursor: none;
    z-index: 1000;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-primary);
    transition: transform 0.3s ease;
    transform-origin: center;
}

.mobile-menu-btn.active span:first-child {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-btn.active span:last-child {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Nav Modal Setup */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(249, 248, 246, 0.98);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    transform: translateY(-100%);
    transition:
        transform 0.5s cubic-bezier(0.77, 0, 0.175, 1),
        background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 999;
}

.mobile-nav-overlay__header {
    position: absolute;
    top: 14px;
    left: var(--layout-gutter);
    right: var(--layout-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mobile-nav-overlay__theme-toggle {
    display: inline-flex;
    flex-shrink: 0;
}

.mobile-nav-overlay__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #E3E3D6;
    border-radius: 36px;
    background: #F6F6ED;
    color: #1A1A1A;
    cursor: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-overlay__close svg {
    display: block;
    width: 18px;
    height: 18px;
}

.mobile-nav-overlay__close:hover,
.mobile-nav-overlay__close:focus-visible {
    background: #EFEFE2;
    border-color: #D7D7C7;
}

.mobile-nav-overlay.active {
    transform: translateY(0);
    pointer-events: auto;
    z-index: 1100;
}

@media (max-width: 768px) {
    .navbar:has(.mobile-nav-overlay.active) .navbar__pill {
        visibility: hidden;
    }
}

.mobile-nav-overlay .nav-item {
    font-family: var(--font-sans);
    font-size: var(--type-mobile-overlay-nav-size);
    font-weight: var(--type-heading-weight);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

.mobile-nav-overlay.active .nav-item {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .nav-tray {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .mobile-nav-overlay {
        justify-content: center;
        padding: 104px 24px 48px;
    }
}

.modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    cursor: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s, transform 0.3s, color 0.3s;
}

.project-modal.active .modal-close {
    opacity: 1;
}

body.night-mode .modal-close {
    background: rgba(255, 255, 255, 0.06);
    color: #dcdcdc;
}

.modal-close:hover {
    transform: scale(1.1) rotate(90deg);
}

.modal-content {
    display: flex;
    width: 100%;
    height: 100%;
}

.modal-image-col {
    flex: 1.2;
    height: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-image {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.modal-text-col {
    flex: 1;
    padding: 60px 60px 60px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.15s,
        transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.15s;
}

.project-modal.active .modal-text-col {
    opacity: 1;
    transform: translateX(0);
}

.modal-title {
    font-family: var(--font-serif);
    font-size: var(--type-serif-modal-size);
    font-weight: var(--type-serif-display-weight);
    color: #3E2514;
    line-height: var(--type-serif-modal-leading);
    margin-bottom: 24px;
}

body.night-mode .modal-title {
    color: #dcdcdc;
}

.modal-desc {
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-leading);
    color: var(--text-muted);
    margin-bottom: 48px;
    max-width: 400px;
}

body.night-mode .modal-desc {
    color: #b8b8b8;
}

.modal-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: #1A1A1A;
    color: white;
    font-family: var(--font-sans);
    font-size: var(--type-ui-size);
    font-weight: var(--type-ui-weight);
    text-decoration: none;
    border-radius: 100px;
    width: fit-content;
    transition: var(--transition-standard);
}

body.night-mode .modal-cta {
    background: #dcdcdc;
    color: #0d0d0d;
}

.modal-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .modal-content {
        flex-direction: column;
    }

    .modal-image-col {
        flex: none;
        height: 45%;
        padding: 16px;
    }

    .modal-text-col {
        padding: 24px;
        align-items: flex-start;
        justify-content: flex-start;
        height: 55%;
    }

    .modal-title {
        font-size: 2rem;
        margin-bottom: 16px;
    }

    .modal-desc {
        margin-bottom: 24px;
        font-size: 1rem;
    }

    .modal-container {
        height: 85vh;
        width: 90%;
    }
}

/* =========================================================
   CASE STUDY STYLES (PAJELLY.IO REPLICA)
   ========================================================= */

/* Case study root — sets the page-wide editorial body default. All
   case-study text classes consume --cs-* tokens so this scope is fully
   independent of the rest of the site's typography. */
.pajelly-cs-body {
    background-color: #FFFFFF;
    color: #57595C;
    font-family: var(--font-sans);
    font-size: var(--cs-body-size);
    font-weight: var(--cs-body-weight);
    line-height: var(--cs-body-line);
    letter-spacing: var(--cs-body-track);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

body::before {
    content: '';
    position: fixed;
    top: 200;
    left: 0;
    width: 100%;
    height: 72px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), transparent);
    pointer-events: none;
    z-index: 900;
}

body.night-mode::before {
    background: linear-gradient(to bottom, rgba(13, 13, 13, 0.9), transparent);
}

/* Legacy Ghost Navigation (kept for any page still referencing it) */
.pajelly-cs-nav {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    z-index: 1000;
}

.nav-title {
    font-size: 1.1rem;
    font-weight: 400;
    color: #989FA3;
}

.nav-close {
    color: #989FA3;
    transition: color 0.3s ease;
}

.nav-close:hover {
    color: #57595C;
}

/* Main Constrained Layout */
.pajelly-cs-main {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px var(--layout-gutter) 120px;
}

/* Back link — sits above the case study title. Role: cs-label. */
.cs-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #989FA3;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: var(--cs-label-size);
    font-weight: var(--cs-label-weight);
    line-height: var(--cs-label-line);
    letter-spacing: var(--cs-label-track);
    letter-spacing: 0.01em;
    margin-bottom: 24px;
    transition: color 0.25s ease;
}

.cs-back:hover {
    color: #333;
}

.cs-back__icon {
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.cs-back:hover .cs-back__icon {
    transform: translateX(-4px);
}

@media (max-width: 768px) {
    .pajelly-cs-main {
        padding-top: 16px;
    }
}

/* Growth experiments case study (project-2) */
/* Field-label inside a growth-exp prose block ("Objective", "Outcome").
   Role: cs-eyebrow.                                                     */
.growth-exp__field {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--cs-eyebrow-size);
    font-weight: var(--cs-eyebrow-weight);
    line-height: var(--cs-eyebrow-line);
    letter-spacing: var(--cs-eyebrow-track);
    text-transform: uppercase;
    color: #989FA3;
    margin-bottom: 0.4rem;
}

.growth-exp__stub {
    font-style: italic;
    color: #989FA3 !important;
}

.growth-exp__placeholder {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    background: linear-gradient(to bottom right, #eaf4fc, #d5eaf9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d98ba;
    font-size: 1rem;
}

.growth-exp__placeholder--sm {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    font-size: 0.85rem;
}

.growth-exp__placeholder--video {
    aspect-ratio: 16 / 9;
    background: linear-gradient(to bottom right, #1a1a1a, #2a2a2a);
    color: #666;
}

.growth-exp__grid {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.growth-exp__grid--2 {
    grid-template-columns: 1fr 1fr;
}

.growth-exp__grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 768px) {
    .growth-exp__grid--3 {
        grid-template-columns: 1fr;
    }

    .growth-exp__grid--2 {
        grid-template-columns: 1fr;
    }
}

/* Case Study: 2-column body layout (sidebar index + content) */
.cs-body-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    position: relative;
}

.cs-index {
    position: sticky;
    top: 120px;
    grid-row: 1;
    grid-column: 1;
    width: min(160px, calc(var(--layout-gutter) - 24px));
    transform: translateX(calc(-100% - 24px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
}

/* Sticky sidebar nav links inside case studies. Role: cs-caption. */
.cs-index__link {
    font-family: var(--font-sans);
    font-size: var(--cs-caption-size);
    font-weight: var(--cs-caption-weight);
    line-height: var(--cs-caption-line);
    letter-spacing: var(--cs-caption-track);
    color: #B5BABE;
    text-decoration: none;
    transition: color 0.25s ease;
}

.cs-index__link:hover {
    color: #333;
}

.cs-index__link.is-active {
    color: #FF6B00;
    font-weight: var(--cs-label-weight);
}

.cs-content {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
}

.cs-content .pajelly-feature-breakout {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 768px) {
    .cs-body-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cs-index {
        position: relative;
        top: auto;
        width: auto;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
        margin-bottom: 48px;
        padding-bottom: 16px;
        border-bottom: 1px solid #EDEDED;
    }
}

/* =========================================================
   CASE STUDY SECTION COMPONENTS
   ---------------------------------------------------------
   Atomic building blocks shared by all case studies, mapped
   to the JSON section types:
     hero              → .pajelly-cs-hero-img + .pajelly-cs-header
     text-block        → .cs-section + .cs-section__label/body
     text-media        → .cs-text-media (--text-left / --text-right)
     media-comparison  → .cs-media-comparison (before / after)
     media-grid        → .cs-media-grid (--cols-2 / --cols-3 / --cols-4)
     stats             → .cs-stats + .cs-stat
     media-full        → .cs-media-full (full bleed inside .cs-content)
   All consume --cs-* typography tokens and the standard
   case study spacing scale.
   ========================================================= */

/* Section wrapper used by every JSON section — gives consistent
   vertical rhythm and a hookable id for sidebar anchors. */
.cs-section {
    margin-bottom: 88px;
    scroll-margin-top: 96px;
}
.cs-section:last-child {
    margin-bottom: 0;
}

/* Uppercase eyebrow label (e.g. "OVERVIEW", "BRAND IDENTITY"). */
.cs-section__label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--cs-eyebrow-size);
    font-weight: var(--cs-eyebrow-weight);
    line-height: var(--cs-eyebrow-line);
    letter-spacing: var(--cs-eyebrow-track);
    text-transform: uppercase;
    color: #989FA3;
    margin: 0 0 16px;
}

/* Section sub-headline (serif). One per section, optional. */
.cs-section__headline {
    font-family: var(--font-serif);
    font-size: var(--cs-display-sm-size);
    font-weight: var(--cs-display-sm-weight);
    line-height: var(--cs-display-sm-line);
    letter-spacing: var(--cs-display-sm-track);
    color: #1f1f1f;
    margin: 0 0 24px;
}

/* Body paragraph. Repeats vertically with consistent spacing.
   Supports inline <strong> and <em> from JSON markdown. */
.cs-section__body {
    font-family: var(--font-sans);
    font-size: var(--cs-body-size);
    font-weight: var(--cs-body-weight);
    line-height: var(--cs-body-line);
    letter-spacing: var(--cs-body-track);
    color: #333;
    margin: 0 0 18px;
}
.cs-section__body:last-child { margin-bottom: 0; }
.cs-section__body strong { font-weight: var(--t-weight-semibold); }

/* Inline hover-pill links inside case-study copy */
.cs-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.42em;
    vertical-align: middle;
    font-weight: var(--t-weight-semibold);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    --cs-link-accent: #14b8a6;
    --cs-avatar-squircle-radius: 34%;
}

.cs-inline-link.has-inline-avatar::before {
    content: "";
    width: 1.72em;
    height: 1.72em;
    flex: 0 0 1.72em;
    border-radius: var(--cs-avatar-squircle-radius);
    background-image: var(--cs-inline-link-avatar);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Stable accent palette — hash of pill label / link text picks one */
.cs-inline-link[data-link-accent="0"],
.cs-link-pill[data-link-accent="0"] { --cs-link-accent: #14b8a6; }

.cs-inline-link[data-link-accent="1"],
.cs-link-pill[data-link-accent="1"] { --cs-link-accent: #72c5f9; }

.cs-inline-link[data-link-accent="2"],
.cs-link-pill[data-link-accent="2"] { --cs-link-accent: #a855f7; }

.cs-inline-link[data-link-accent="3"],
.cs-link-pill[data-link-accent="3"] { --cs-link-accent: #22c55e; }

.cs-inline-link[data-link-accent="4"],
.cs-link-pill[data-link-accent="4"] { --cs-link-accent: #f59e0b; }

.cs-inline-link[data-link-accent="5"],
.cs-link-pill[data-link-accent="5"] { --cs-link-accent: #ec4899; }

.cs-inline-link[data-link-accent="6"],
.cs-link-pill[data-link-accent="6"] { --cs-link-accent: #6366f1; }

html[data-cs-mode="edit"] .cs-inline-link {
    text-decoration: underline dotted;
    text-decoration-color: rgba(51, 51, 51, 0.35);
    text-underline-offset: 3px;
    background: rgba(255, 116, 56, 0.08);
    border-radius: 4px;
    padding: 0 4px 0 2px;
    box-shadow: inset 0 -1px 0 rgba(255, 116, 56, 0.25);
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

html[data-cs-mode="edit"] .cs-inline-link:hover {
    color: var(--cs-link-accent);
    background: color-mix(in srgb, var(--cs-link-accent) 12%, transparent);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--cs-link-accent) 45%, transparent);
}

html[data-cs-link-editor-open="true"] .cs-inline-link,
html[data-cs-link-editor-open="true"] .cs-inline-link:hover {
    background: rgba(255, 116, 56, 0.08);
    box-shadow: inset 0 -1px 0 rgba(255, 116, 56, 0.25);
    color: inherit;
}

html[data-cs-mode="view"] .cs-inline-link {
    transition: color 0.22s ease;
}

html[data-cs-mode="view"] .cs-inline-link.has-inline-avatar,
html[data-cs-mode="edit"] .cs-inline-link.has-inline-avatar {
    padding-left: 0;
}

html[data-cs-mode="view"] .cs-inline-link[data-href],
html[data-cs-mode="view"] a.cs-inline-link[href] {
    cursor: pointer;
}

html[data-cs-mode="view"] .cs-inline-link:hover,
html[data-cs-mode="view"] .cs-inline-link:focus-visible {
    color: var(--cs-link-accent);
}

html[data-cs-mode="view"] .cs-link-pill__label {
    color: var(--cs-link-accent, #989FA3);
}

/* Caption that sits below an image / grid / comparison. */
.cs-section__caption {
    font-family: var(--font-sans);
    font-size: var(--cs-caption-size);
    font-weight: var(--cs-caption-weight);
    line-height: var(--cs-caption-line);
    letter-spacing: var(--cs-caption-track);
    color: #989FA3;
    margin: 16px 0 0;
}

/* ------------ text-media (text + image side-by-side) ------------- */
/* Two-column block: one side text, the other side media. Modifier
   controls which side the text is on. Stacks on mobile. */
.cs-text-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
.cs-text-media--text-right {
    direction: rtl;
}
.cs-text-media--text-right > * {
    direction: ltr;
}

.cs-text-media__text > :first-child { margin-top: 0; }
.cs-text-media__text > :last-child { margin-bottom: 0; }
.cs-text-media__media > :first-child { margin-top: 0; }
.cs-text-media__media > :last-child { margin-bottom: 0; }

/* Single image inside the media slot fills its column. */
.cs-text-media__media img,
.cs-text-media__media .placeholder-graphic {
    width: 100%;
    border-radius: 8px;
    display: block;
}

@media (max-width: 768px) {
    .cs-text-media,
    .cs-text-media--text-right {
        grid-template-columns: 1fr;
        gap: 24px;
        direction: ltr;
    }
}

/* ------------ media-comparison (before / after) ------------------- */
/* Two figures side-by-side with a labelled tag in the corner of each.
   Caption sits beneath the pair. */
.cs-media-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.cs-media-comparison__item {
    position: relative;
    margin: 0;
}

.cs-media-comparison__item img,
.cs-media-comparison__item .placeholder-graphic {
    width: 100%;
    border-radius: 8px;
    display: block;
}

.cs-media-comparison__label {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border-radius: 99px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: var(--t-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #333;
    z-index: 1;
}

@media (max-width: 768px) {
    .cs-media-comparison {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ------------ media-grid (2/3/4 columns) -------------------------- */
.cs-media-grid {
    display: grid;
    gap: 16px;
}
.cs-media-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cs-media-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cs-media-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.cs-media-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

.cs-media-grid img,
.cs-media-grid .placeholder-graphic {
    width: 100%;
    aspect-ratio: 23 / 15;
    border-radius: 8px;
    display: block;
    object-fit: cover;
}

.cs-editor-media {
    margin-top: 32px;
}

.cs-editor-media__item {
    position: relative;
    margin: 0;
}

.cs-editor-media .placeholder-graphic {
    min-height: clamp(220px, 28vw, 420px);
    display: grid;
    place-items: center;
    border: 1px dashed rgba(31, 31, 31, 0.18);
    background:
        linear-gradient(135deg, rgba(245, 233, 216, 0.88), rgba(227, 207, 168, 0.58));
    color: rgba(31, 29, 40, 0.45);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
}

.cs-editor-media .cs-editor-media-slot {
    min-height: clamp(220px, 28vw, 420px);
}

.cs-editor-media .placeholder-graphic::after {
    content: attr(data-src);
    max-width: 80%;
    overflow-wrap: anywhere;
}

.cs-editor-media .placeholder-graphic:not([data-src=""]) {
    font-size: 0;
}

.cs-editor-media .placeholder-graphic:not([data-src=""])::after {
    font-size: 0.82rem;
}

.cs-editor-media--full .placeholder-graphic {
    min-height: clamp(320px, 42vw, 620px);
}

.cs-editor-media--full .cs-editor-media-slot {
    min-height: clamp(320px, 42vw, 620px);
}

.cs-editor-media__item .cs-section__caption {
    margin: 12px 0 0;
}

/* ------------ horizontal: text + phone media ---------------------- */
.cs-horizontal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    margin-top: 48px;
}

.cs-horizontal__text > .cs-section__body:last-child {
    margin-bottom: 0;
}

.cs-horizontal__text > .cs-h3 {
    margin-bottom: 16px;
}

.cs-horizontal__media {
    display: grid;
    place-items: center;
}

.cs-horizontal__frame {
    width: 100%;
    max-width: 480px;
}

.cs-horizontal__frame--phone {
    max-width: 320px;
    padding: 16px;
    border-radius: 44px;
    background: #161616;
    box-shadow: 0 30px 60px rgba(31, 29, 40, 0.18);
}

.cs-horizontal__frame--phone .placeholder-graphic {
    aspect-ratio: 9 / 19.5;
    min-height: 0;
    border-radius: 28px;
    border: 0;
    background: linear-gradient(160deg, #f5e9d8, #e3cfa8);
    color: rgba(22, 22, 22, 0.55);
}

.cs-feature-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(40px, 5vw, 84px);
    align-items: center;
    margin-top: 48px;
}

.cs-feature-block__text {
    min-width: 0;
}

.cs-feature-block__headline {
    margin: 0 0 28px;
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--cs-text-ink);
}

.cs-feature-block__body {
    margin-bottom: 0 !important;
}

.cs-feature-block__statement {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(28px, 3.1vw, 36px);
    font-weight: 600;
    line-height: 1.42;
    letter-spacing: -0.02em;
    color: var(--cs-text-ink);
    text-wrap: pretty;
}

.cs-feature-block__media {
    display: grid;
}

.cs-feature-block__stage {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 472px;
    padding: 0;
    border-radius: 28px;
    background: #e9f5ff;
    overflow: hidden;
}

.cs-feature-block__frame {
    width: 100%;
    height: 100%;
}

.cs-feature-block__stage .cs-editor-media-slot,
.cs-feature-block__stage .placeholder-graphic {
    --cs-media-slot-radius: 0px;
    width: 100%;
    height: 100%;
    min-height: 472px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.cs-feature-block__stage .cs-editor-media-slot > img,
.cs-feature-block__stage .cs-editor-media-slot > video {
    object-fit: contain;
}

.cs-feature-block--reverse .cs-feature-block__text {
    order: 2;
}

.cs-feature-block--reverse .cs-feature-block__media {
    order: 1;
}

@media (max-width: 900px) {
    .cs-horizontal {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cs-feature-block {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .cs-horizontal__frame--phone {
        margin: 0 auto;
    }
    .cs-feature-block__stage {
        min-height: 360px;
    }
    .cs-feature-block__stage .cs-editor-media-slot,
    .cs-feature-block__stage .placeholder-graphic {
        min-height: 360px;
    }
}

/* ------------ metrics block (in-section) -------------------------- */
.cs-metrics {
    margin-top: 32px;
}

.cs-metrics__caption {
    margin: 0 0 16px;
    font-family: var(--font-sans);
    font-size: var(--cs-caption-size);
    font-weight: var(--type-weight-regular);
    line-height: var(--cs-caption-line);
    color: #989FA3;
}

.cs-metrics .cs-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 64px;
    padding: 0;
    border: 0;
}

.cs-metrics .cs-stat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 174px;
    flex: 0 0 auto;
}

.cs-metrics .cs-stat__value {
    font-family: var(--font-sans);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    color: #333;
}

.cs-metrics .cs-stat__label {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0;
    color: #626364;
}

.cs-metrics .cs-stat__note {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #989FA3;
    margin-top: 0;
    max-width: none;
}

.cs-metrics--highlight .cs-stat__value {
    color: #FF6B00;
}

.cs-metrics--muted .cs-stat__value {
    color: #6c7176;
    font-size: 28px;
}

.cs-metrics--large .cs-stat__value {
    font-size: 40px;
}

@media (max-width: 768px) {
    .cs-metrics .cs-stats {
        gap: 32px;
    }

    .cs-metrics .cs-stat,
    .cs-metrics .cs-stat--add {
        width: calc(50% - 16px);
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    .cs-metrics .cs-stat,
    .cs-metrics .cs-stat--add {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .cs-media-grid--cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .cs-media-grid--cols-3,
    .cs-media-grid--cols-4,
    .cs-media-grid--cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .cs-media-grid--cols-2,
    .cs-media-grid--cols-3,
    .cs-media-grid--cols-4,
    .cs-media-grid--cols-5 {
        grid-template-columns: 1fr;
    }
}

/* ------------ stats row ------------------------------------------- */
.cs-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 32px 0;
    border: 0;
}

.cs-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-stat__value {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: var(--t-weight-regular);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #1f1f1f;
}

.cs-stat__label {
    font-family: var(--font-sans);
    font-size: var(--cs-caption-size);
    font-weight: var(--cs-caption-weight);
    line-height: var(--cs-caption-line);
    letter-spacing: var(--cs-caption-track);
    color: #6c7176;
}

.cs-stat__delta {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: var(--t-weight-medium);
    color: #2a8b3c;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .cs-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .cs-stats { grid-template-columns: 1fr; }
}

/* ------------ media-full (image OR video, full bleed) ------------- */
.cs-media-full {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}
.cs-media-full img,
.cs-media-full video,
.cs-media-full .placeholder-graphic {
    width: 100%;
    height: auto;
    display: block;
}
/* Video placeholder hint — show a centered play glyph so the slot
   reads as "video goes here" before real assets are wired up. */
.placeholder-graphic--video {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Optional footnote below a stat (e.g. "Within first 6 months of launch") */
.cs-stat__note {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    line-height: 1.4;
    color: #989FA3;
    margin-top: 6px;
    max-width: 22ch;
}

/* ------------ subsection (nested heading inside a .cs-section) --- */
/* Used when one section contains several "chapters" — e.g. design
   iterations broken into Home / Payments / Onboarding. Each subsection
   gets a hairline divider on top so the rhythm reads as nested. */
.cs-subsection {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid #EDEDED;
}
.cs-subsection:first-of-type {
    margin-top: 32px;
    padding-top: 0;
    border-top: none;
}

.cs-subsection__title {
    font-family: var(--font-serif);
    font-size: var(--cs-h3-size);
    font-weight: var(--cs-h3-weight);
    line-height: var(--cs-h3-line);
    letter-spacing: var(--cs-h3-track);
    color: #1f1f1f;
    margin: 0 0 16px;
}

/* ------------ callout (tinted info box w/ optional list) ---------- */
/* Highlights an aside — a bullet list, a note, or a brief observation
   the body shouldn't carry inline. Warm cream tint with an amber rule
   on the leading edge. */
.cs-callout {
    background: #faf6ec;
    border-left: 3px solid #d4b378;
    border-radius: 8px;
    padding: 22px 26px;
    margin: 28px 0;
}

.cs-callout__label {
    font-family: var(--font-sans);
    font-size: var(--cs-eyebrow-size);
    font-weight: var(--cs-eyebrow-weight);
    line-height: var(--cs-eyebrow-line);
    letter-spacing: var(--cs-eyebrow-track);
    text-transform: uppercase;
    color: #8a6a30;
    margin: 0 0 12px;
}

.cs-callout__body {
    font-family: var(--font-sans);
    font-size: var(--cs-body-size);
    line-height: var(--cs-body-line);
    color: #44403c;
    margin: 0;
}

.cs-callout__list {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: disc;
}

.cs-callout__list li {
    font-family: var(--font-sans);
    font-size: var(--cs-body-size);
    line-height: var(--cs-body-line);
    color: #44403c;
    margin: 6px 0;
}
.cs-callout__list li::marker { color: #d4b378; }

/* ------------ phases (numbered breakdown of work) ----------------- */
/* For describing distinct phases of a project (planning, execution,
   handoff…). Each item gets a serif numeral, sans title, and a short
   detail line. Two-column on desktop, single column on small screens. */
.cs-phases {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.cs-phases__item {
    padding: 22px 24px;
    background: #fafaf7;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-phases__num {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: #989FA3;
    letter-spacing: 0.02em;
}

.cs-phases__title {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: var(--t-weight-semibold);
    line-height: 1.3;
    color: #1f1f1f;
    margin: 0;
}

.cs-phases__detail {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.5;
    color: #6c7176;
    margin: 4px 0 0;
}

@media (max-width: 768px) {
    .cs-phases { grid-template-columns: 1fr; }
}

/* ------------ flow comparison (text-based before/after) ----------- */
/* Pair of short statements describing a flow change, tinted to read as
   "before" (warm) and "after" (mint). Different from .cs-media-comparison
   which compares two images. */
.cs-flow-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0;
}

.cs-flow-compare__item {
    padding: 22px 24px;
    border-radius: 10px;
}

.cs-flow-compare__before { background: #fdf3ee; }
.cs-flow-compare__after  { background: #eef9ef; }

.cs-flow-compare__tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: var(--t-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b46839;
    margin-bottom: 10px;
}
.cs-flow-compare__after .cs-flow-compare__tag { color: #2a8b3c; }

.cs-flow-compare__body {
    font-family: var(--font-sans);
    font-size: var(--cs-body-size);
    line-height: 1.55;
    color: #1f1f1f;
    margin: 0;
}

@media (max-width: 768px) {
    .cs-flow-compare { grid-template-columns: 1fr; }
}

/* ------------ credits (team line at the foot of overview) --------- */
/* Inline-block list of contributors. Each .cs-credit shows a tiny role
   eyebrow and the contributor's name. */
.cs-credits {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #EDEDED;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px 28px;
}

.cs-credit__role {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: var(--t-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #989FA3;
    margin: 0 0 4px;
}

.cs-credit__name {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: var(--t-weight-medium);
    color: #1f1f1f;
    margin: 0;
}

.cs-credit__detail {
    font-family: var(--font-sans);
    font-size: 0.84rem;
    line-height: 1.45;
    color: #6c7176;
    margin: 2px 0 0;
}

/* ------------ CTA (closing call-to-action button) ----------------- */
/* Pill-shaped link sitting at the very end of a case study, after the
   reflection paragraph. */
.cs-cta-row {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid #EDEDED;
}

.cs-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #1f1f1f;
    color: #fff;
    border-radius: 99px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: var(--t-weight-semibold);
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.cs-cta:hover {
    background: #000;
    transform: translateY(-2px);
}

.cs-cta__arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.cs-cta:hover .cs-cta__arrow {
    transform: translate(2px, -2px);
}

/* Dark-mode tone tweaks for the new components. Headlines/values
   need to lift to a near-white; eyebrows + captions to a softer grey. */
body.night-mode .cs-section__headline,
body.night-mode .cs-stat__value,
body.night-mode .cs-subsection__title,
body.night-mode .cs-phases__title,
body.night-mode .cs-flow-compare__body,
body.night-mode .cs-credit__name {
    color: #ECEEF0;
}
body.night-mode .cs-section__body,
body.night-mode .cs-callout__body,
body.night-mode .cs-callout__list li,
body.night-mode .cs-phases__detail,
body.night-mode .cs-credit__detail { color: #c2c5c9; }
body.night-mode .cs-section__label,
body.night-mode .cs-section__caption,
body.night-mode .cs-stat__label,
body.night-mode .cs-stat__note,
body.night-mode .cs-credit__role { color: #8a9094; }
body.night-mode .cs-credits,
body.night-mode .cs-subsection,
body.night-mode .cs-cta-row {
    border-top-color: #2a2a2a;
    border-bottom-color: #2a2a2a;
}
body.night-mode .cs-media-comparison__label {
    background: rgba(20, 20, 20, 0.85);
    color: #ECEEF0;
}
body.night-mode .cs-callout {
    background: rgba(212, 179, 120, 0.08);
    border-left-color: rgba(212, 179, 120, 0.55);
}
body.night-mode .cs-callout__label { color: #d4b378; }
body.night-mode .cs-phases__item { background: rgba(255, 255, 255, 0.03); }
body.night-mode .cs-phases__num { color: #a8a8a8; }
body.night-mode .cs-flow-compare__before { background: rgba(212, 99, 75, 0.08); }
body.night-mode .cs-flow-compare__after  { background: rgba(75, 168, 99, 0.08); }
body.night-mode .cs-flow-compare__tag { color: #d49266; }
body.night-mode .cs-flow-compare__after .cs-flow-compare__tag { color: #6acf7f; }
body.night-mode .cs-cta {
    background: #ECEEF0;
    color: #0d0d0d;
}
body.night-mode .cs-cta:hover { background: #fff; }

/* Feature Image Hero */
.pajelly-cs-hero-img {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 64px;
    background: #f4f4f4;
}

.pajelly-cs-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Typography Headings */
.pajelly-cs-header {
    margin-bottom: 48px;
}

/* Case study H1. Role: cs-display-md (serif). */
.pajelly-title {
    font-family: var(--font-serif);
    font-size: var(--cs-display-md-size);
    font-weight: var(--cs-display-md-weight);
    line-height: var(--cs-display-md-line);
    letter-spacing: var(--cs-display-md-track);
    color: #333;
    margin: 0 0 16px 0;
}

/* Subtitle below the case study H1. Role: cs-lead. */
.pajelly-subtitle {
    font-family: var(--font-sans);
    font-size: var(--cs-lead-size);
    font-weight: var(--cs-lead-weight);
    line-height: var(--cs-lead-line);
    letter-spacing: var(--cs-lead-track);
    color: #82BBED;
    margin: 0;
}

/* Info Grid (Left Data / Right Meta) */
.pajelly-cs-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    margin-bottom: 120px;
}

/* Section eyebrow inside case studies (OVERVIEW, TIMELINE, …). Role: cs-eyebrow. */
.pajelly-label {
    font-family: var(--font-sans);
    font-size: var(--cs-eyebrow-size);
    font-weight: var(--cs-eyebrow-weight);
    line-height: var(--cs-eyebrow-line);
    letter-spacing: var(--cs-eyebrow-track);
    text-transform: uppercase;
    color: #82BBED;
    margin: 0 0 16px 0;
}

/* Overview / description paragraphs in case studies. Role: cs-body. */
.pajelly-desc {
    font-family: var(--font-sans);
    font-size: var(--cs-body-size);
    font-weight: var(--cs-body-weight);
    line-height: var(--cs-body-line);
    letter-spacing: var(--cs-body-track);
    margin-bottom: 24px;
}

.pajelly-meta-block {
    margin-bottom: 32px;
}

/* Metadata value (next to a .pajelly-label eyebrow). Role: cs-meta. */
.pajelly-val {
    font-family: var(--font-sans);
    font-size: var(--cs-meta-size);
    font-weight: var(--cs-meta-weight);
    line-height: var(--cs-meta-line);
    letter-spacing: var(--cs-meta-track);
    color: #333;
    margin: 0;
}

/* Rating Feature Block */
.pajelly-cs-reviews {
    margin-bottom: 120px;
}

.review-box {
    background: #F8F9FA;
    border-radius: 8px;
    padding: 48px;
    display: flex;
    gap: 64px;
    align-items: center;
}

.review-left {
    flex-shrink: 0;
}

/* App-store style review block. */
/* Big rating number — promoted to cs-display-md so it scales like a heading. */
.rating-number {
    font-family: var(--font-sans);
    font-size: var(--cs-display-md-size);
    font-weight: var(--t-weight-bold);
    line-height: 1;
    color: #111;
}

.rating-stars {
    font-family: var(--font-sans);
    font-size: var(--cs-h3-size);
    line-height: var(--cs-h3-line);
    color: #111;
    letter-spacing: 4px;
    margin: 8px 0;
}

.rating-text {
    font-family: var(--font-sans);
    font-size: var(--cs-caption-size);
    font-weight: var(--t-weight-medium);
    line-height: var(--cs-caption-line);
    color: #989FA3;
}

.review-right {
    flex-grow: 1;
}

/* Pull quote / testimonial inside .review-box. Role: cs-quote. */
.review-quote {
    font-family: var(--font-sans);
    font-size: var(--cs-quote-size);
    font-weight: var(--cs-quote-weight);
    line-height: var(--cs-quote-line);
    letter-spacing: var(--cs-quote-track);
    color: #333;
    margin: 0 0 16px 0;
}

/* Quote attribution line. Role: cs-caption. */
.review-author {
    font-family: var(--font-sans);
    font-size: var(--cs-caption-size);
    font-weight: var(--cs-caption-weight);
    line-height: var(--cs-caption-line);
    letter-spacing: var(--cs-caption-track);
    color: #989FA3;
    margin: 0;
}

/* Generic Stack Features */
.pajelly-feature {
    margin-bottom: 120px;
}

/* Section heading inside a case-study feature ("Reflections."). Role: cs-h2. */
.feature-title {
    font-family: var(--font-sans);
    font-size: var(--cs-h2-size);
    font-weight: var(--cs-h2-weight);
    line-height: var(--cs-h2-line);
    letter-spacing: var(--cs-h2-track);
    color: #111;
    margin: 0 0 8px 0;
}

/* Sub-heading directly under a .feature-title. Role: cs-body, muted color. */
.feature-subtitle {
    font-family: var(--font-sans);
    font-size: var(--cs-body-size);
    font-weight: var(--cs-body-weight);
    line-height: var(--cs-body-line);
    letter-spacing: var(--cs-body-track);
    color: #989FA3;
    margin: 0 0 40px 0;
}

.feature-image-wrapper {
    width: 100%;
}

/* Image / asset caption inside a feature block. Role: cs-caption. */
.feature-caption {
    font-family: var(--font-sans);
    font-size: var(--cs-caption-size);
    font-weight: var(--cs-caption-weight);
    line-height: var(--cs-caption-line);
    letter-spacing: var(--cs-caption-track);
    color: #989FA3;
    margin-top: 16px;
    text-align: left;
}

/* Breakout Layouts */
.pajelly-feature-breakout {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 120px;
}

/* Eyebrow inside a feature block ("VIDEO KYC", "EVOLUTION"). Role: cs-eyebrow. */
.feature-label {
    font-family: var(--font-sans);
    font-size: var(--cs-eyebrow-size);
    font-weight: var(--cs-eyebrow-weight);
    line-height: var(--cs-eyebrow-line);
    letter-spacing: var(--cs-eyebrow-track);
    text-transform: uppercase;
    color: #989FA3;
    margin: 0 0 16px 0;
}

/* Long-form prose inside a feature block. Role: cs-body. */
.feature-body {
    font-family: var(--font-sans);
    font-size: var(--cs-body-size);
    font-weight: var(--cs-body-weight);
    line-height: var(--cs-body-line);
    letter-spacing: var(--cs-body-track);
    margin-bottom: 40px;
    max-width: 640px;
}

/* Muted variant — replaces the inline `style="font-size: 1rem; color: #989FA3"`
   override that was in project-1.html line 231 (Evolution lead-in). Use this
   class on a .feature-body when you want the same role at the muted color. */
.feature-body--muted {
    color: #989FA3;
}

.appstore-asset-stack {
    display: flex;
    flex-direction: column;
}

/* Footer Element */
.pajelly-cs-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 160px;
    padding-top: 40px;
}

/* Case study footer — eyebrow → display → body-sm. */
.footer-title {
    font-family: var(--font-sans);
    font-size: var(--cs-eyebrow-size);
    font-weight: var(--cs-eyebrow-weight);
    line-height: var(--cs-eyebrow-line);
    letter-spacing: var(--cs-eyebrow-track);
    text-transform: uppercase;
    color: #989FA3;
    margin: 0 0 16px 0;
}

.footer-name {
    font-family: var(--font-serif);
    font-size: var(--cs-display-sm-size);
    font-weight: var(--cs-display-sm-weight);
    line-height: var(--cs-display-sm-line);
    letter-spacing: var(--cs-display-sm-track);
    color: #111;
    margin: 0 0 8px 0;
}

.footer-role {
    font-family: var(--font-sans);
    font-size: var(--cs-body-sm-size);
    font-weight: var(--cs-body-sm-weight);
    line-height: var(--cs-body-sm-line);
    letter-spacing: var(--cs-body-sm-track);
    color: #989FA3;
    margin: 0;
}

/* Responsive */
/* Responsive Constraints Mobile Bounds */
@media (max-width: 768px) {
    .hero-section--figma {
        padding: 24px 0 40px;
    }

    .hero-cluster {
        transform: scale(0.95);
    }

    /* Typography — section titles use global scale */
    .projects-title,
    .footer-cta-title {
        font-size: var(--type-serif-display-size-sm);
    }

    /* Force grids single column completely vertical */
    .projects-wrapper {
        padding-left: var(--surface-padding) !important;
        padding-right: var(--surface-padding) !important;
    }
    
    .projects-wrapper .projects-header,
    .projects-wrapper .beyond-header,
    .projects-wrapper .work-container.bento-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* The play page uses its own scroll canvas, so no mobile column
       override is needed here. */

    .work-container.bento-grid,
    .pajelly-cs-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        width: 100%;
    }

    .card-1,
    .card-2,
    .card-3,
    .card-4 {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .work-container.bento-grid .work-card {
        height: 36vh !important;
        aspect-ratio: auto;
        margin-bottom: 0;
    }

    /* Shield absolute mascot rendering so it doesn't break limits */
    .wrapper-mascot {
        width: 140px;
        height: 140px;
        top: -80px;
        right: 12px;
    }

    .beyond-header {
        margin-bottom: 40px;
    }

    .beyond-subtitle {
        font-size: calc(var(--type-lead-size) * 0.92);
    }

    .beyond-pixels-stage {
        display: flex;
        min-height: 0;
        height: auto;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
    }

    .beyond-info-overlay {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        padding: 32px 32px 48px;
        max-width: 100%;
        text-align: center;
        align-items: center;
        gap: 24px;
        pointer-events: auto;
        z-index: 2;
    }

    .beyond-note {
        font-size: 24px;
        line-height: 24px;
    }

    .beyond-illustration {
        width: 100%;
        max-width: 320px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: center;
        column-gap: 10px;
        min-height: 0;
    }

    .beyond-illustration__camera {
        width: 70px;
        height: 63px;
    }

    .beyond-illustration__film-roll {
        width: 68px;
        height: 50px;
    }

    .beyond-illustration__flower {
        width: 48px;
        height: 48px;
    }

    .beyond-illustration__notebook {
        width: 72px;
        height: 52px;
    }

    #beyond-reactive-content h3 {
        font-size: 2rem;
    }

    #beyond-reactive-content p {
        font-size: 1rem;
        margin-bottom: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .museum-stage {
        position: relative;
        padding-right: 0;
        justify-content: center;
        width: 100% !important;
        height: 360px;
        min-height: 360px;
        top: auto;
        right: auto;
        bottom: auto;
        left: 0;
        flex: 0 0 auto;
    }

    .museum-stage::before,
    .museum-stage::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 80px; /* slightly smaller gradient for mobile */
        z-index: 10;
        pointer-events: none;
    }

    .museum-stage::before {
        top: 0;
        background: linear-gradient(to bottom, #F9F8F6 10%, transparent 100%);
    }

    .museum-stage::after {
        bottom: 0;
        background: linear-gradient(to top, #F9F8F6 10%, transparent 100%);
    }

    .wrapper-3d {
        width: 45vw;
        max-width: 200px;
    }

    .fold {
        width: 100%;
        height: 220px;
    }

    .fold-content {
        gap: 14px;
        padding: 0 14px;
    }

    .ticker-image-wrapper {
        border-width: 6px;
        border-radius: 4px;
    }

    .review-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding: 24px;
    }

    .projects-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 40px;
    }

    .site-footer {
        padding-top: 84px;
    }

    .footer-cta-shell {
        padding-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
    }

    .footer-sticker-stack {
        position: relative;
        top: auto;
        left: auto;
        width: min(100%, 280px);
        transform: rotate(-8deg);
    }

    .footer-cta-title {
        margin: 0;
    }

    .footer-meta {
        margin-top: 16px;
        gap: 18px;
    }

    .footer-meta-copy {
        bottom: 18px;
        font-size: 0.78rem;
        white-space: normal;
        max-width: calc(100% - 32px);
    }

    .footer-meta-socials {
        gap: 16px;
    }

    .pajelly-title {
        font-size: var(--type-serif-case-title-size-sm);
    }

    .pajelly-cs-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }
}

@media (max-width: 480px) {
    :root {
        --layout-gutter: clamp(16px, 5vw, 24px);
    }

    .footer-cta-subtitle {
        font-size: 1.1rem;
        line-height: 1.2;
    }

    .hero-section--figma {
        padding: 16px 0 28px;
    }

    .hero-cluster {
        transform: scale(0.85);
    }

    .projects-title,
    .footer-cta-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 430px) {
    .hero-section--figma {
        padding: 12px 0 20px;
        min-height: calc(936px * var(--hero-scale) + 48px);
    }

    .hero-figma__canvas--layers {
        --hero-cluster-tilt: -4deg;
    }

    .hero-cluster {
        transform: scale(0.6);
    }

    .hero-layer--name {
        left: 120px;
        top: -80px;
        z-index: calc(var(--hero-cluster-z) + 1);
    }
}

@media (max-width: 360px) {
    .hero-cluster {
        transform: scale(0.55);
    }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.nav-item.is-active {
    color: #1A1A1A;
}

.about-page {
    min-height: 100vh;
}

.about-main {
    /* Tight gap under sticky nav: nav height + modest offset (was clamp(132px, 12vw, 170px)) */
    padding: calc(var(--hero-nav-h) + clamp(16px, 2.25vw, 28px)) var(--layout-gutter) clamp(84px, 8vw, 120px);
}

body.about-page .about-main {
    padding-bottom: 0;
}

body.about-page .site-footer {
    padding-top: 0;
}

body.about-page .footer-grass-scene {
    margin-top: 0;
}

.about-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: clamp(72px, 10vw, 140px);
}

.about-stage {
    display: grid;
    grid-template-columns: minmax(0, 40rem) minmax(300px, 430px);
    justify-content: start;
    gap: clamp(18px, 2.5vw, 36px);
    align-items: center;
    min-height: clamp(520px, 68vh, 720px);
}

.about-visual-wrap {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: min(100%, 320px);
    aspect-ratio: 4 / 5;
}

.about-visual {
    position: relative;
    z-index: 1;
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 8px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    transform: rotate(6deg);
    transform-origin: center;
}

.about-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 3px;
    filter: saturate(0.95) contrast(1.02) brightness(1.02);
}

.about-visual-pixel {
    position: absolute;
    width: var(--grid-unit);
    height: var(--grid-unit);
    pointer-events: none;
    z-index: 0;
}

.about-visual-pixel--tr1 {
    right: calc(var(--grid-unit) * -2);
    top: calc(var(--grid-unit) * -1);
    background: #BCF8D8;
}

.about-visual-pixel--tr2 {
    right: calc(var(--grid-unit) * -1);
    top: calc(var(--grid-unit) * -2);
    background: #F9B3E1;
}

.about-visual-pixel--tr3 {
    right: calc(var(--grid-unit) * -3);
    top: 0;
    background: #BFE7FB;
    opacity: 0.72;
}

.about-visual-pixel--bl1 {
    left: calc(var(--grid-unit) * -2);
    bottom: calc(var(--grid-unit) * -1);
    background: #FCC0CB;
}

.about-visual-pixel--bl2 {
    left: calc(var(--grid-unit) * -3);
    bottom: 0;
    background: #D6DBF8;
}

.about-visual-pixel--bl3 {
    left: calc(var(--grid-unit) * -1);
    bottom: calc(var(--grid-unit) * -2);
    background: #F9E3D0;
    opacity: 0.72;
}

.about-visual-pixel--bl4 {
    left: calc(var(--grid-unit) * -4);
    bottom: calc(var(--grid-unit) * -1);
    background: #BCF8D8;
    opacity: 0.82;
}

.about-visual-pixel--bl5 {
    left: calc(var(--grid-unit) * -3);
    bottom: calc(var(--grid-unit) * -3);
    background: #BFE7FB;
    opacity: 0.62;
}

.about-visual-pixel--bl6 {
    left: 0;
    bottom: calc(var(--grid-unit) * -3);
    background: #F9B3E1;
    opacity: 0.68;
}

.about-visual-caption {
    display: none;
}

.about-visual-note {
    position: absolute;
    z-index: 2;
    left: calc(var(--grid-unit) * -4.2);
    top: calc(var(--grid-unit) * 3.1);
    margin: 0;
    max-width: 170px;
    font-family: 'Lazy Dog', cursive;
    font-size: clamp(1.45rem, 2.2vw, 2.15rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: 0;
    color: #5657f5;
    transform: rotate(-2deg);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.about-copy {
    max-width: 48rem;
    min-width: 0;
}

.about-kicker {
    margin: 0 0 clamp(18px, 2.4vw, 28px);
    font-family: var(--font-sans);
    font-size: var(--type-about-paragraph-size);
    line-height: var(--type-about-paragraph-leading);
    font-weight: var(--type-lead-weight);
    letter-spacing: 0;
    color: #8C8C8C;
}

.about-display {
    font-family: var(--font-serif);
    font-size: var(--type-serif-about-size);
    line-height: var(--type-serif-about-leading);
    font-weight: var(--type-serif-display-weight);
    letter-spacing: var(--type-serif-display-tracking);
    margin: 0 0 1.35rem;
    color: #1a1a1a;
    text-wrap: balance;
}

.about-display em {
    font-style: italic;
    font-weight: 400;
}

.about-body {
    display: grid;
    gap: 1.05rem;
}

.about-paragraph {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--type-about-paragraph-size);
    line-height: var(--type-about-paragraph-leading);
    font-weight: var(--type-about-paragraph-weight);
    color: #66615d;
    text-wrap: balance;
}

.about-intro-note {
    margin: 0;
    max-width: 52rem;
    font-family: var(--font-sans);
    font-size: clamp(1.15rem, 1.45vw, 1.35rem);
    line-height: 1.48;
    font-weight: var(--type-lead-weight);
    color: #8C8C8C;
    text-wrap: balance;
}

.about-copy .about-paragraph strong {
    font-weight: var(--type-about-paragraph-weight);
    color: inherit;
}

.about-signoff {
    max-width: 520px;
}

/* About — experience timeline */
.about-experience {
    margin-top: clamp(48px, 7vw, 88px);
    padding-top: clamp(32px, 5vw, 56px);
}

.about-experience__title {
    font-family: var(--font-serif);
    font-size: var(--type-serif-about-section-size);
    font-weight: var(--type-serif-display-weight);
    line-height: var(--type-serif-about-section-leading);
    letter-spacing: var(--type-serif-about-section-tracking);
    color: #3e2514;
    margin: 0 0 clamp(12px, 2vw, 20px);
}

.about-experience__main {
    min-width: 0;
}

.about-exp-row {
    --node-size: clamp(58px, 6vw, 76px);
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 2vw, 28px);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.about-exp-row::-webkit-scrollbar {
    display: none;
}

.about-exp-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 116px);
    align-items: start;
    justify-items: start;
    gap: clamp(22px, 4vw, 52px);
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: clamp(20px, 3vw, 28px) 0 clamp(24px, 3vw, 34px);
    overflow-x: auto;
    scrollbar-width: none;
}

.about-exp-coming {
    flex: 0 0 auto;
    margin: calc(clamp(20px, 3vw, 28px) + (var(--node-size) / 2) - 0.82em) 0 0;
    font-family: 'Lazy Dog', cursive;
    font-size: clamp(1.25rem, 2.2vw, 2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: #8C8C8C;
    white-space: nowrap;
}

.about-exp-timeline::-webkit-scrollbar {
    display: none;
}

.about-exp-timeline::before {
    content: '';
    position: absolute;
    left: calc(var(--node-size) / 2);
    right: calc(116px - (var(--node-size) / 2));
    top: calc(clamp(20px, 3vw, 28px) + (var(--node-size) / 2));
    height: 1px;
    background-image: repeating-linear-gradient(
        to right,
        rgba(140, 140, 140, 0.28) 0,
        rgba(140, 140, 140, 0.28) 3px,
        transparent 3px,
        transparent 8px
    );
    pointer-events: none;
}

.about-exp-node {
    appearance: none;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 116px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
}

.about-exp-node:focus-visible .about-exp-icon {
    box-shadow: 0 0 0 3px var(--bg-color), 0 0 0 5px rgba(62, 37, 20, 0.35);
}

.about-exp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--node-size);
    height: var(--node-size);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(54, 40, 23, 0.08);
    transform-origin: 50% 100%;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.about-exp-icon--zeta {
    background: #4f2d9e;
}

.about-exp-icon--zeta .about-exp-icon__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-exp-icon--nowme {
    background: #ffffff;
}

.about-exp-icon--mesha {
    background: #060606;
}

.about-exp-icon--10k {
    background: #6a0fc2;
}

.about-exp-icon--metafic {
    background: #ffffff;
}

.about-exp-icon__img {
    width: 72%;
    height: 72%;
    object-fit: contain;
    display: block;
}

.about-exp-name {
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    font-weight: var(--type-weight-medium);
    line-height: 1.2;
    color: #66615d;
    text-align: left;
    white-space: nowrap;
}

.about-exp-year {
    font-family: var(--font-sans);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    font-weight: var(--type-weight-regular);
    line-height: 1.2;
    color: #a2a2a2;
    text-align: left;
}

.about-exp-node:hover .about-exp-icon,
.about-exp-node.is-active .about-exp-icon {
    transform: translateY(-4px) rotate(4deg);
    box-shadow: 0 18px 34px rgba(54, 40, 23, 0.16);
    filter: saturate(1.05);
}

.about-exp-node.is-active .about-exp-name {
    color: #1a1a1a;
}

.about-exp-work {
    margin-top: clamp(12px, 2vw, 24px);
    padding-top: clamp(22px, 3vw, 32px);
}

.about-exp-work[hidden] {
    display: none;
}

.about-exp-card {
    display: grid;
    grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 56px);
    align-items: start;
}

.about-exp-card[hidden] {
    display: none;
}

.about-exp-card h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.3vw, 1.85rem);
    font-weight: var(--type-serif-display-weight);
    line-height: 1.2;
    color: #1a1a1a;
}

.about-exp-card p {
    margin: 8px 0 0;
    font-family: var(--font-sans);
    font-size: var(--type-caption-size);
    font-weight: var(--type-weight-regular);
    line-height: var(--type-caption-leading);
    color: #8C8C8C;
}

.about-exp-card ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-exp-card li {
    position: relative;
    padding-left: 18px;
    font-family: var(--font-sans);
    font-size: var(--type-body-size);
    line-height: var(--type-body-leading);
    font-weight: var(--type-body-weight);
    color: #66615d;
}

.about-exp-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8C8C8C;
}

@media (prefers-reduced-motion: reduce) {
    .about-exp-icon {
        transition: none;
    }

    .about-exp-node:hover .about-exp-icon,
    .about-exp-node.is-active .about-exp-icon {
        transform: none;
    }
}

body.night-mode .about-experience__title {
    color: #c9b8a8;
}

body.night-mode .about-exp-timeline::before {
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.18) 0,
        rgba(255, 255, 255, 0.18) 3px,
        transparent 3px,
        transparent 8px
    );
}

body.night-mode .about-exp-icon {
    box-shadow: none;
}

body.night-mode .about-exp-node.is-active .about-exp-icon,
body.night-mode .about-exp-node:hover .about-exp-icon {
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
}

body.night-mode .about-exp-name,
body.night-mode .about-exp-card li {
    color: #b8b8b8;
}

body.night-mode .about-exp-year,
body.night-mode .about-exp-card p {
    color: #a8a8a8;
}

body.night-mode .about-exp-node.is-active .about-exp-name,
body.night-mode .about-exp-card h3 {
    color: #e8e8e8;
}

/* About — “More of me” photo cards */
.about-more {
    margin-top: clamp(48px, 7vw, 88px);
    padding-top: clamp(32px, 5vw, 56px);
}

.about-more__title {
    font-family: var(--font-serif);
    font-size: var(--type-serif-about-section-size);
    font-weight: var(--type-serif-display-weight);
    line-height: var(--type-serif-about-section-leading);
    letter-spacing: var(--type-serif-about-section-tracking);
    color: #3e2514;
    margin: 0 0 clamp(12px, 2vw, 20px);
}

.about-more__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
    align-items: start;
    width: 100%;
    max-width: 100%;
}

.about-more__item {
    margin: 0;
    min-width: 0;
}

.about-more__card {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-more__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #e8e4df;
}

.about-more__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease;
}

/* Optional clip: add <source> inside .about-more__video + .has-hover-video on the card (see script) */
.about-more__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.about-more__card--hover-video.has-hover-video:hover .about-more__media--hover-video .about-more__video,
.about-more__card--hover-video.has-hover-video:focus-within .about-more__media--hover-video .about-more__video {
    opacity: 1;
}

.about-more__card--hover-video.has-hover-video:hover .about-more__media--hover-video .about-more__poster,
.about-more__card--hover-video.has-hover-video:focus-within .about-more__media--hover-video .about-more__poster {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .about-more__card--hover-video .about-more__video {
        display: none;
    }

    .about-more__poster,
    .about-more__video {
        transition: none;
    }
}

.about-more__caption {
    font-family: var(--font-sans);
    font-size: var(--type-about-paragraph-size);
    font-weight: var(--type-about-paragraph-weight);
    line-height: var(--type-about-paragraph-leading);
    color: #8C8C8C;
    text-align: left;
    margin: 0;
    text-wrap: balance;
}

@media (min-width: 769px) {
    .about-more__caption {
        font-size: var(--type-body-size);
        font-weight: var(--type-body-weight);
        line-height: var(--type-body-leading);
    }
}

body.night-mode .about-more__title {
    color: #c9b8a8;
}

body.night-mode .about-more__media {
    background: #1f1f1f;
}

body.night-mode .about-more__caption {
    color: #b8b8b8;
}

@media (max-width: 768px) {
    .about-main {
        padding-top: calc(var(--hero-nav-h) + 8px);
    }

    .about-experience {
        margin-top: 72px;
        padding-top: 32px;
    }

    .about-experience__title {
        margin-bottom: 14px;
    }

    .about-more {
        margin-top: 40px;
        padding-top: 32px;
    }

    .about-shell {
        padding-bottom: 72px;
    }

    .about-more__title {
        margin-bottom: 14px;
    }

    .about-more__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        overflow: visible;
        scrollbar-width: none;
    }

    .about-more__grid::-webkit-scrollbar {
        display: none;
    }

    .about-more__media {
        aspect-ratio: 16 / 9;
    }

    .about-stage {
        grid-template-columns: 1fr;
        gap: 72px;
        min-height: auto;
    }

    .about-visual-wrap {
        order: 1;
        max-width: min(100%, 290px);
        margin: 0 auto;
    }

    .about-visual {
        transform: rotate(2deg);
    }

    .about-visual-note {
        left: calc(var(--grid-unit) * -1);
        top: calc(var(--grid-unit) * 2);
        max-width: 140px;
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }

    .about-copy {
        order: 2;
        width: min(100%, 320px);
        max-width: 320px;
        padding-top: 0;
        margin-top: 0;
        margin-inline: auto;
        text-align: left;
    }

    .about-kicker {
        margin-bottom: 18px;
    }

    .about-display {
        font-size: var(--type-serif-display-size-sm);
        line-height: 1.18;
        margin-bottom: 0.75rem;
    }

    .about-body {
        gap: 1rem;
        justify-items: start;
    }

    .about-paragraph {
        text-wrap: pretty;
    }

    .about-exp-row {
        display: block;
        overflow: visible;
    }

    .about-exp-timeline {
        width: max-content;
        grid-template-columns: repeat(5, 116px);
        gap: 24px;
        margin-right: 0;
        padding-right: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
    }

    .about-exp-coming {
        display: block;
        width: max-content;
        margin: 10px 0 0;
    }

    .about-exp-card {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* =============================================================================
   CASE STUDY EDITOR  — Notion/Framer-style in-place editor (project-1.html)
   The page renders identically in View mode; in Edit mode every text becomes
   contenteditable, every media slot accepts drag-and-drop, and a hover
   toolbar on every block lets you reorder, change layout, or delete.
   ============================================================================= */

:root {
    --cs-edit-accent: #2f6df6;
    --cs-edit-accent-soft: rgba(47, 109, 246, 0.12);
    --cs-edit-border: rgba(15, 23, 42, 0.08);
    --cs-edit-chrome-bg: rgba(255, 255, 255, 0.96);
    --cs-edit-chrome-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.25), 0 2px 6px -2px rgba(15, 23, 42, 0.08);
}

html[data-cs-mode="edit"] body {
    -webkit-user-select: text;
    user-select: text;
}

/* --- Floating toolbar --- */
.cs-editor-toolbar {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: var(--cs-edit-chrome-bg);
    border: 1px solid var(--cs-edit-border);
    border-radius: 14px;
    box-shadow: var(--cs-edit-chrome-shadow);
    backdrop-filter: blur(12px);
    font-family: var(--font-sans);
    font-size: 12px;
    color: #111827;
}

.cs-editor-toolbar__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    letter-spacing: 0.01em;
    transition: background 0.15s ease, color 0.15s ease;
}

.cs-editor-toolbar__btn:hover { background: rgba(15, 23, 42, 0.06); }
.cs-editor-toolbar__btn--danger { color: #b42318; }
.cs-editor-toolbar__btn--danger:hover { background: rgba(180, 35, 24, 0.08); }
.cs-editor-toolbar__btn--wide {
    width: auto;
    min-width: max-content;
    padding: 8px 12px;
}

.cs-editor-toolbar__mode {
    background: #111827;
    color: #fff;
}
.cs-editor-toolbar[data-mode="edit"] .cs-editor-toolbar__mode {
    background: var(--cs-edit-accent);
}
.cs-editor-toolbar__mode:hover { background: #1f2937; }
.cs-editor-toolbar[data-mode="edit"] .cs-editor-toolbar__mode:hover { background: #2554c7; }

.cs-editor-toolbar__status {
    padding: 0 8px;
    font-size: 11px;
    color: #6b7280;
    min-width: 36px;
    text-align: right;
    transition: color 0.2s ease;
}
.cs-editor-toolbar__status[data-state="saved"] { color: #15803d; }

/* --- Placeholder text on empty editable nodes --- */
html[data-cs-mode="edit"] [contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: #b8bcc2;
    pointer-events: none;
}

html[data-cs-mode="edit"] [contenteditable] {
    outline: none;
    border-radius: 4px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
html[data-cs-mode="edit"] [contenteditable]:hover {
    background: rgba(15, 23, 42, 0.025);
}
html[data-cs-mode="edit"] [contenteditable]:focus {
    background: var(--cs-edit-accent-soft);
    box-shadow: 0 0 0 2px var(--cs-edit-accent-soft);
}

.cs-rich-text-toolbar {
    position: fixed;
    z-index: 1200;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cs-edit-border);
    border-radius: 8px;
    background: var(--cs-edit-chrome-bg);
    box-shadow: var(--cs-edit-chrome-shadow);
    transform: translateX(-50%);
    font-family: var(--font-sans);
}

.cs-rich-text-toolbar.is-visible {
    display: inline-flex;
}

.cs-rich-text-toolbar__btn {
    appearance: none;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #111827;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.cs-rich-text-toolbar__btn--italic {
    font-style: italic;
}

.cs-rich-text-toolbar__btn--underline {
    text-decoration: underline;
}

.cs-rich-text-toolbar__btn:hover {
    background: rgba(15, 23, 42, 0.06);
}

.cs-rich-text-toolbar__btn--link {
    font-size: 15px;
    line-height: 1;
}

/* Hover pill shown on linked text (view mode) */
.cs-link-pill {
    position: fixed;
    z-index: 1150;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px 10px 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    background: #ffffff;
    box-shadow:
        0 12px 32px rgba(15, 23, 42, 0.1),
        0 4px 10px rgba(15, 23, 42, 0.05);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-100% + 6px)) scale(0.94);
    transform-origin: 50% 100%;
    transition:
        opacity 0.2s ease,
        transform 0.24s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.cs-link-pill.is-visible {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
}

.cs-link-pill::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 2px;
}

.cs-link-pill__avatar-wrap {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: var(--cs-avatar-squircle-radius, 34%);
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}

.cs-link-pill__avatar-wrap.has-image {
    display: block;
}

.cs-link-pill__avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-link-pill__label {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--cs-link-accent, #989FA3);
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Link editor popover (edit mode) */
.cs-link-editor-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2147482998;
    background: rgba(247, 248, 250, 0.82);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.cs-link-editor-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.cs-link-editor {
    position: fixed;
    z-index: 2147482999;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.14),
        0 4px 12px rgba(15, 23, 42, 0.06);
    font-family: var(--font-sans);
    isolation: isolate;
    overflow: hidden;
    pointer-events: auto;
}

.cs-link-editor.is-visible {
    display: flex;
}

.cs-link-editor__title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7280;
}

.cs-link-editor__hint {
    margin: -4px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #9ca3af;
}

.cs-link-editor__input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--cs-edit-border);
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
    color: #111827;
    box-sizing: border-box;
}

.cs-link-editor__input:focus {
    outline: none;
    border-color: rgba(15, 23, 42, 0.25);
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.06);
}

.cs-link-editor__dropzone {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed rgba(15, 23, 42, 0.18);
    border-radius: 12px;
    background: #fafafa;
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.cs-link-editor__dropzone:hover,
.cs-link-editor__dropzone.is-dragover,
.cs-link-editor__dropzone:focus-visible {
    outline: none;
    border-color: rgba(255, 116, 56, 0.55);
    background: rgba(255, 116, 56, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 116, 56, 0.08);
}

.cs-link-editor__dropzone-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cs-link-editor__dropzone-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.cs-link-editor__dropzone-hint {
    font-size: 12px;
    color: #9ca3af;
}

.cs-link-editor__image-preview {
    width: 44px;
    height: 44px;
    border-radius: var(--cs-avatar-squircle-radius, 34%);
    overflow: hidden;
    background: #f3f4f6;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.cs-link-editor__dropzone.has-image .cs-link-editor__image-preview {
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.cs-link-editor__dropzone:not(.has-image) .cs-link-editor__image-preview::before {
    content: "+";
    font-size: 20px;
    line-height: 1;
    color: #9ca3af;
}

.cs-link-editor__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-link-editor__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cs-link-editor__status {
    margin: 0;
    min-height: 16px;
    font-size: 12px;
    color: #059669;
}

.cs-link-editor__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
    user-select: none;
    -webkit-user-select: none;
}

.cs-link-editor__btn {
    appearance: none;
    border: 0;
    border-radius: 10px;
    min-height: 38px;
    padding: 10px 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.cs-link-editor__btn--ghost {
    background: transparent;
    color: #6b7280;
}

.cs-link-editor__btn--ghost:hover {
    background: rgba(15, 23, 42, 0.05);
}

.cs-link-editor__btn--primary {
    background: #111827;
    color: #fff;
    min-width: 86px;
    box-shadow: 0 10px 20px rgba(17, 24, 39, 0.14);
}

.cs-link-editor__btn--primary:hover {
    background: #1f2937;
    box-shadow: 0 12px 24px rgba(17, 24, 39, 0.18);
}

.cs-link-editor__btn--primary:active {
    transform: translateY(1px);
}

.cs-link-editor__btn:focus-visible {
    outline: 2px solid rgba(17, 24, 39, 0.18);
    outline-offset: 2px;
}

body.night-mode .cs-link-pill {
    background: #1f2229;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.2);
}

body.night-mode .cs-link-pill::after {
    background: #1f2229;
    border-color: rgba(255, 255, 255, 0.08);
}

body.night-mode .cs-link-pill__label {
    color: var(--cs-link-accent, #cbd5e1);
}

body.night-mode .cs-link-editor-backdrop {
    background: rgba(10, 12, 16, 0.72);
}

body.night-mode .cs-link-editor {
    background: #1f2229;
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.1);
}

body.night-mode .cs-link-editor__input {
    background: #14161c;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

body.night-mode .cs-link-editor__dropzone {
    background: #14161c;
    border-color: rgba(255, 255, 255, 0.12);
}

body.night-mode .cs-link-editor__btn--primary {
    background: #f3f4f6;
    color: #111827;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
}

body.night-mode .cs-link-editor__btn:focus-visible {
    outline-color: rgba(243, 244, 246, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .cs-link-pill {
        transition: none;
    }
}

/* Dark mode for editor chrome */
body.night-mode .cs-editor-toolbar {
    background: rgba(20, 22, 28, 0.96);
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.08);
}
body.night-mode .cs-editor-toolbar__btn:hover { background: rgba(255, 255, 255, 0.06); }
body.night-mode .cs-editor-toolbar__mode { background: #f3f4f6; color: #111827; }
html[data-cs-mode="edit"] body.night-mode [contenteditable]:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* --- Block chrome (edit mode only) --- */
html[data-cs-mode="edit"] .cs-block--editable {
    position: relative;
    border-radius: 10px;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}
html[data-cs-mode="edit"] .cs-block--editable:hover {
    box-shadow: inset 0 0 0 1px var(--cs-edit-border);
}
html[data-cs-mode="edit"] .cs-block--empty {
    box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.14);
}
html[data-cs-mode="edit"] .cs-block.is-dragging {
    opacity: 0.4;
}
html[data-cs-mode="edit"] .cs-block.is-drop-before::before,
html[data-cs-mode="edit"] .cs-block.is-drop-after::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cs-edit-accent);
    border-radius: 3px;
    pointer-events: none;
}
html[data-cs-mode="edit"] .cs-block.is-drop-before::before { top: -10px; }
html[data-cs-mode="edit"] .cs-block.is-drop-after::after { bottom: -10px; }

.cs-block-toolbar {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--cs-edit-chrome-bg);
    border: 1px solid var(--cs-edit-border);
    border-radius: 8px;
    box-shadow: var(--cs-edit-chrome-shadow);
    z-index: 5;
    font-family: var(--font-sans);
    font-size: 11px;
    color: #374151;
}
html[data-cs-mode="edit"] .cs-block--editable:hover > .cs-block-toolbar,
html[data-cs-mode="edit"] .cs-block--editable:focus-within > .cs-block-toolbar {
    display: inline-flex;
}

.cs-block-toolbar__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    transition: background 0.15s ease;
}
.cs-block-toolbar__btn:hover { background: rgba(15, 23, 42, 0.06); }
.cs-block-toolbar__btn.is-active {
    width: auto;
    padding: 0 7px;
    background: rgba(15, 23, 42, 0.08);
    color: #111827;
}
.cs-block-toolbar__delete:hover { background: rgba(180, 35, 24, 0.1); color: #b42318; }
.cs-block-toolbar__drag {
    cursor: grab;
    color: #9ca3af;
    letter-spacing: -2px;
    font-size: 14px;
}
.cs-block-toolbar__drag:active { cursor: grabbing; }

.cs-block-toolbar__select {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.cs-block-toolbar__select:hover { background: rgba(15, 23, 42, 0.06); }

.cs-block-toolbar__number {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 26px;
    padding: 0 5px;
    border-radius: 6px;
    color: #6b7280;
    font: inherit;
}

.cs-block-toolbar__number:hover {
    background: rgba(15, 23, 42, 0.06);
}

.cs-block-toolbar__number span {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.cs-block-toolbar__number input {
    width: 42px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    outline: 0;
}

.cs-block-toolbar__number input::placeholder {
    color: #9ca3af;
}

.cs-block-toolbar__number input::-webkit-outer-spin-button,
.cs-block-toolbar__number input::-webkit-inner-spin-button {
    margin: 0;
}

.cs-block--media-height-custom .cs-editor-media-slot {
    height: var(--cs-media-height-custom) !important;
    min-height: var(--cs-media-height-custom) !important;
}

.cs-block--media-height-custom .placeholder-graphic {
    height: var(--cs-media-height-custom) !important;
    min-height: var(--cs-media-height-custom) !important;
}

body.night-mode .cs-block-toolbar {
    background: rgba(20, 22, 28, 0.96);
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.08);
}
body.night-mode .cs-block-toolbar__btn:hover { background: rgba(255, 255, 255, 0.06); }
body.night-mode .cs-block-toolbar__number:hover { background: rgba(255, 255, 255, 0.06); }
body.night-mode .cs-block-toolbar__number input { color: #f9fafb; }

.cs-empty-block-delete {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(180, 35, 24, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: #b42318;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

html[data-cs-mode="edit"] .cs-block--empty:hover > .cs-empty-block-delete,
html[data-cs-mode="edit"] .cs-block--empty:focus-within > .cs-empty-block-delete {
    display: inline-flex;
}

body.night-mode .cs-empty-block-delete {
    background: rgba(20, 22, 28, 0.96);
    border-color: rgba(248, 113, 113, 0.24);
    color: #fca5a5;
}

/* --- Inserter ( + ) row between blocks --- */
.cs-inserter {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    margin: 6px 0;
    opacity: 0;
    transition: opacity 0.15s ease, height 0.15s ease;
}
html[data-cs-mode="edit"] .cs-content:hover .cs-inserter,
html[data-cs-mode="edit"] .cs-inserter:hover,
html[data-cs-mode="edit"] .cs-inserter:focus-within {
    opacity: 1;
    height: 22px;
}

.cs-inserter__trigger {
    appearance: none;
    border: 1px dashed var(--cs-edit-border);
    background: transparent;
    color: #9ca3af;
    width: 28px;
    height: 22px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cs-inserter__trigger:hover {
    background: var(--cs-edit-accent-soft);
    color: var(--cs-edit-accent);
    border-color: var(--cs-edit-accent);
}

.cs-inserter__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 4px;
    padding: 6px;
    background: var(--cs-edit-chrome-bg);
    border: 1px solid var(--cs-edit-border);
    border-radius: 10px;
    box-shadow: var(--cs-edit-chrome-shadow);
    z-index: 10;
    min-width: 300px;
}
.cs-inserter__menu[hidden] { display: none; }
.cs-inserter__item {
    appearance: none;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-family: var(--font-sans);
    font-size: 12px;
    color: #111827;
    transition: background 0.15s ease;
}
.cs-inserter__item:hover { background: var(--cs-edit-accent-soft); color: var(--cs-edit-accent); }

.cs-inserter--section {
    appearance: none;
    border: 1px dashed var(--cs-edit-border);
    background: transparent;
    color: #9ca3af;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-family: var(--font-sans);
    font-size: 12px;
    margin-top: 24px;
    opacity: 1;
    height: auto;
    display: block;
    text-align: center;
}
.cs-inserter--section:hover {
    background: var(--cs-edit-accent-soft);
    color: var(--cs-edit-accent);
    border-color: var(--cs-edit-accent);
}

body.night-mode .cs-inserter__menu,
body.night-mode .cs-inserter--section {
    background: rgba(20, 22, 28, 0.96);
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.08);
}
body.night-mode .cs-inserter__item { color: #e5e7eb; }
body.night-mode .cs-inserter__trigger { color: #a8a8a8; border-color: rgba(255, 255, 255, 0.12); }

/* --- Media slots (drag/drop targets) --- */
.cs-editor-media-slot {
    --cs-media-slot-radius: 12px;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--cs-media-slot-radius);
    clip-path: inset(0 round var(--cs-media-slot-radius));
    overflow: hidden;
    background-clip: padding-box;
    background: #f5f6f8;
    cursor: default;
}

.cs-editor-media-slot--filled {
    background: transparent;
}
html[data-cs-mode="edit"] .cs-editor-media-slot {
    cursor: pointer;
}
.cs-editor-media-slot > img,
.cs-editor-media-slot > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-editor-media-slot--video {
    background: transparent;
}

.cs-editor-media-slot--video > video {
    width: calc(100% + 6px);
    height: calc(100% + 9px);
    object-fit: cover;
    background: transparent;
    transform: translate3d(-3px, -3px, 0) scale(1.05);
    transform-origin: center;
    pointer-events: none;
}

.cs-editor-media-slot--video > video::-webkit-media-controls,
.cs-editor-media-slot--video > video::-webkit-media-controls-enclosure {
    display: none !important;
}

.cs-editor-media-slot--gif-crop > img {
    width: calc(100% + 6px);
    height: calc(100% + 9px);
    transform: translate3d(-3px, -3px, 0) scale(1.05);
    transform-origin: center;
}

.cs-editor-media-slot .placeholder-graphic {
    position: relative;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 180px;
}

.cs-editor-media-slot__hint {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-family: var(--font-sans);
    font-size: 12px;
    color: #6b7280;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-radius: 12px;
}
html[data-cs-mode="edit"] .cs-editor-media-slot:hover .cs-editor-media-slot__hint,
html[data-cs-mode="edit"] .cs-editor-media-slot.is-drop-target .cs-editor-media-slot__hint {
    display: flex;
}

.cs-editor-media-slot.is-drop-target {
    box-shadow: inset 0 0 0 2px var(--cs-edit-accent);
}

.cs-editor-media-slot--hero {
    min-height: 320px;
    aspect-ratio: 16 / 9;
}

body.night-mode .cs-editor-media-slot { background: #1a1d23; }
body.night-mode .cs-editor-media-slot--filled { background: transparent; }
body.night-mode .cs-editor-media-slot__hint {
    color: #9ca3af;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}

/* --- Metrics: add/remove + horizontal-reverse --- */
.cs-metrics .cs-stat--add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 174px;
    min-height: 120px;
    padding: 16px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    background: transparent;
    color: #9ca3af;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cs-metrics .cs-stat--add:hover {
    background: var(--cs-edit-accent-soft);
    color: var(--cs-edit-accent);
    border-color: var(--cs-edit-accent);
}

.cs-stat--add {
    appearance: none;
    border: 1px dashed var(--cs-edit-border);
    background: transparent;
    color: #9ca3af;
    font: inherit;
    font-family: var(--font-sans);
    font-size: 12px;
    cursor: pointer;
    border-radius: 10px;
    padding: 16px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cs-stat--add:hover {
    background: var(--cs-edit-accent-soft);
    color: var(--cs-edit-accent);
    border-color: var(--cs-edit-accent);
}

.cs-stat { position: relative; }
.cs-metrics__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 23, 42, 0.08);
    color: #4b5563;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
html[data-cs-mode="edit"] .cs-stat:hover .cs-metrics__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cs-metrics__remove:hover { background: rgba(180, 35, 24, 0.15); color: #b42318; }

.cs-horizontal--reverse .cs-horizontal__text {
    grid-column: 2;
}
.cs-horizontal--reverse .cs-horizontal__media {
    grid-column: 1;
    grid-row: 1;
}

@media (max-width: 900px) {
    .cs-horizontal--reverse .cs-horizontal__text,
    .cs-horizontal--reverse .cs-horizontal__media {
        grid-column: auto;
        grid-row: auto;
    }
}

/* --- Per-block spacing (applied in both edit + view modes) --- */
/* Margin BELOW the block — Notion equivalent of adding extra blank lines. */
.cs-block--gap-tight   { margin-bottom: 8px; }
.cs-block--gap-default { margin-bottom: 28px; }
.cs-block--gap-loose   { margin-bottom: 56px; }
.cs-block--gap-xl      { margin-bottom: 96px; }

/* --- Spacer block (pure vertical whitespace, like /spacer in Notion) --- */
.cs-spacer {
    width: 100%;
    display: block;
    pointer-events: none;
}
.cs-spacer--sm { height: 12px; }
.cs-spacer--md { height: 32px; }
.cs-spacer--lg { height: 64px; }
.cs-spacer--xl { height: 120px; }

html[data-cs-mode="edit"] .cs-spacer {
    pointer-events: auto;
    position: relative;
    border-radius: 6px;
    background:
        repeating-linear-gradient(135deg,
            rgba(15, 23, 42, 0.04) 0,
            rgba(15, 23, 42, 0.04) 6px,
            transparent 6px,
            transparent 12px);
}
.cs-spacer__hint {
    display: none;
}
html[data-cs-mode="edit"] .cs-spacer__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
    pointer-events: none;
}

html[data-cs-mode="edit"] body.night-mode .cs-spacer {
    background:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 6px,
            transparent 6px,
            transparent 12px);
}
body.night-mode .cs-spacer__hint { color: #a8a8a8; }

/* --- Divider rule block --- */
.cs-block--rule { padding: 6px 0; }
.cs-rule {
    border: 0;
    height: 1px;
    background: rgba(15, 23, 42, 0.1);
    margin: 0;
}
body.night-mode .cs-rule { background: rgba(255, 255, 255, 0.1); }

/* --- Columns block --- */
.cs-columns {
    display: grid;
    gap: 32px;
    align-items: start;
}
.cs-columns--2 { grid-template-columns: 1fr 1fr; }
.cs-columns--3 { grid-template-columns: 1fr 1fr 1fr; }

.cs-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Nested blocks inside a column should not double up their bottom margin
   too aggressively; keep their per-block spacing as authored but cap the
   default to feel tighter inside a column. */
.cs-column > .cs-block--gap-default { margin-bottom: 20px; }
.cs-column > .cs-block:last-child { margin-bottom: 0; }

html[data-cs-mode="edit"] .cs-column--empty {
    min-height: 120px;
    border: 1px dashed var(--cs-edit-border);
    border-radius: 10px;
    padding: 12px;
}

@media (max-width: 768px) {
    .cs-columns--2,
    .cs-columns--3 { grid-template-columns: 1fr; }
}

/* --- Grouped inserter menu --- */
.cs-inserter__group + .cs-inserter__group {
    border-top: 1px solid var(--cs-edit-border);
    margin-top: 6px;
    padding-top: 6px;
}
.cs-inserter__group-label {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 4px 10px 2px;
}
.cs-inserter__group-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
/* Override the previous flat grid layout */
.cs-inserter__menu {
    display: block;
    grid-template-columns: none;
    min-width: 280px;
}
body.night-mode .cs-inserter__group-label { color: #a8a8a8; }
body.night-mode .cs-inserter__group + .cs-inserter__group {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* --- Hide all editor chrome cleanly in View mode --- */
html:not([data-cs-mode="edit"]) .cs-block-toolbar,
html:not([data-cs-mode="edit"]) .cs-inserter,
html:not([data-cs-mode="edit"]) .cs-stat--add,
html:not([data-cs-mode="edit"]) .cs-metrics__remove,
html:not([data-cs-mode="edit"]) .cs-editor-media-slot__hint,
html:not([data-cs-mode="edit"]) .cs-spacer__hint,
html:not([data-cs-mode="edit"]) .cs-meta-cell--add,
html:not([data-cs-mode="edit"]) .cs-meta-cell__remove {
    display: none !important;
}

/* =============================================================================
   CASE STUDY V2 — Kasturi-style narrow single-column layout
   Applies to <body class="cs-page"> on project-1..4.html.
   ============================================================================= */

.cs-page {
    /* Width tiers (centered per block via margin-inline:auto + max-width).
       Each tier scales up gently with viewport using clamp() so a 24-inch
       monitor feels intentional, not just a wider phone layout. */
    --cs-w-text:   min(800px,  calc(720px + (100vw - 1024px) * 0.10));   /* reading column */
    --cs-w-media:  min(1100px, calc(720px + (100vw - 1024px) * 0.40));   /* image/video/grid */
    --cs-w-wide:   min(1280px, calc(720px + (100vw - 1024px) * 0.55));   /* header + hero */

    /* Side gutters also grow on big screens. */
    --cs-gutter: clamp(20px, 4vw, 64px);

    --cs-text-ink: #1a1a1a;
    --cs-text-mute: #8a8f95;
    --cs-text-faint: #b0b4ba;
    --cs-rule: rgba(15, 23, 42, 0.08);
}

/* Below 1024px the tiers collapse to the reading column for parity with
   today's narrow layout — no surprises on laptops. */
@media (max-width: 1023px) {
    .cs-page {
        --cs-w-text:  720px;
        --cs-w-media: 720px;
        --cs-w-wide:  720px;
    }
}

body.night-mode.cs-page {
    --cs-text-ink: #f3f4f6;
    --cs-text-mute: #9ca3af;
    --cs-text-faint: #a8a8a8;
    --cs-rule: rgba(255, 255, 255, 0.08);
}

/* .cs-main now just provides the side-gutter scaffold. Width is centered
   *per block* against the viewport via the tier variables. */
.cs-main {
    width: 100%;
    margin: 0 auto;
    padding: 96px var(--cs-gutter) 160px;
    box-sizing: border-box;
    /* The widest tier defines the outer envelope so nothing escapes the gutters. */
    max-width: calc(var(--cs-w-wide) + (var(--cs-gutter) * 2));
}

/* All direct content elements default to the text (reading) tier and
   center themselves against .cs-main. Specific blocks below opt into the
   media or wide tier. */
.cs-main > *,
.cs-page .cs-content > *,
.cs-page .cs-section > * {
    max-width: var(--cs-w-text);
    margin-inline: auto;
    box-sizing: border-box;
}

/* --- Header (wide tier on big screens) --- */
.cs-page-header {
    margin: 32px auto 56px;
    max-width: var(--cs-w-wide);
}

.cs-page-header__title {
    font-family: var(--font-serif);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--cs-text-ink);
    margin: 0 0 20px;
}

.cs-page-header__subtitle {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--cs-text-ink);
    opacity: 0.7;
    margin: 0 0 48px;
    max-width: 56ch;
}

.cs-page-header__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 32px;
    margin: 0;
    padding: 24px 0;
    border-top: 1px solid var(--cs-rule);
    border-bottom: 1px solid var(--cs-rule);
}

.cs-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    min-width: 0;
}

.cs-meta-cell__label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-text-mute);
    margin: 0;
}

.cs-meta-cell__value {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--cs-text-ink);
    margin: 0;
}

.cs-meta-cell--add {
    appearance: none;
    border: 1px dashed var(--cs-rule);
    background: transparent;
    color: var(--cs-text-mute);
    font: inherit;
    font-family: var(--font-sans);
    font-size: 12px;
    cursor: pointer;
    border-radius: 8px;
    padding: 8px;
    align-self: stretch;
}
.cs-meta-cell--add:hover { color: var(--cs-edit-accent); border-color: var(--cs-edit-accent); }

.cs-meta-cell__remove {
    position: absolute;
    top: -4px;
    right: -4px;
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 0;
    background: rgba(15, 23, 42, 0.08);
    color: #4b5563;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    align-items: center;
    justify-content: center;
}
html[data-cs-mode="edit"] .cs-meta-cell:hover .cs-meta-cell__remove { display: inline-flex; }

/* --- Hero (wide tier; loosens aspect on huge screens so it does not letterbox) --- */
.cs-page-hero {
    width: 100%;
    max-width: var(--cs-w-wide);
    margin: 0 auto 96px;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: #f4f4f4;
}
@media (min-width: 1440px) {
    .cs-page-hero { aspect-ratio: 16 / 9; }
}
body.night-mode .cs-page-hero { background: #1a1d23; }
.cs-page-hero img,
.cs-page-hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Content column: single column, narrow reading width --- */
.cs-page .cs-content {
    width: 100%;
}

.cs-page .cs-section {
    padding: 0;
    margin: 0;
    border: 0;
}
.cs-page .cs-section + .cs-section { margin-top: 0; }

/* --- Reading-grade typography for body text --- */
.cs-page .cs-section__body {
    font-family: var(--font-sans);
    font-size: var(--cs-body-size);
    line-height: var(--cs-body-line);
    letter-spacing: -0.005em;
    color: var(--cs-text-ink);
    margin: 0 0 22px;
}

.cs-page .cs-block--section-label {
    margin-bottom: 24px;
}

.cs-page .cs-section__label {
    color: #82bbed;
}

/* --- Section heading block (divider) — Kasturi `## Section title` --- */
.cs-heading-block {
    margin-top: 56px;
    margin-bottom: 24px;
}
.cs-heading-block:first-child { margin-top: 0; }

.cs-h2 {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--cs-text-ink);
    margin: 0;
}

/* --- Eyebrow + heading block --- */
.cs-eyebrow-heading {
    margin-top: 56px;
    margin-bottom: 20px;
}

.cs-eyebrow {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-text-mute);
    margin: 0 0 12px;
}

.cs-h3 {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--cs-text-ink);
    margin: 0;
}

/* --- Impact item --- */
.cs-impact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
    border-top: 1px solid var(--cs-rule);
}
.cs-impact + .cs-impact { border-top: 1px solid var(--cs-rule); }
.cs-impact:last-of-type { border-bottom: 1px solid var(--cs-rule); }

.cs-impact__headline {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--cs-text-ink);
    margin: 0;
}

.cs-impact__body {
    font-family: var(--font-sans);
    font-size: var(--cs-body-size);
    line-height: 1.55;
    color: var(--cs-text-mute);
    margin: 0;
}

/* --- Numbered item --- */
.cs-numbered {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 24px;
    padding: 28px 0;
    border-top: 1px solid var(--cs-rule);
}
.cs-numbered:last-of-type { border-bottom: 1px solid var(--cs-rule); }

.cs-numbered__index {
    grid-row: 1 / span 2;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--cs-text-faint);
    padding-top: 4px;
}

.cs-numbered__headline {
    grid-column: 2;
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--cs-text-ink);
    margin: 0;
}

.cs-numbered__body {
    grid-column: 2;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--cs-text-mute);
    margin: 0;
}

/* --- Pull-quote / HMW --- */
.cs-pullquote {
    margin: 64px 0;
}

.cs-pullquote__body {
    font-family: var(--font-serif);
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--cs-text-ink);
    margin: 0;
    font-style: italic;
}

/* --- Inline media inside the narrow column —
   media blocks opt into the wider media tier on big screens. --- */
.cs-page .cs-block--image,
.cs-page .cs-block--video,
.cs-page .cs-block--horizontal,
.cs-page .cs-block--feature-1,
.cs-page .cs-block--feature-2,
.cs-page .cs-block--comparison,
.cs-page .cs-block--metrics,
.cs-page .cs-editor-media,
.cs-page .cs-media-full,
.cs-page .cs-media-grid {
    max-width: var(--cs-w-media);
    margin-inline: auto;
}

.cs-page .cs-block--image,
.cs-page .cs-block--video,
.cs-page .cs-block--horizontal,
.cs-page .cs-block--feature-1,
.cs-page .cs-block--feature-2,
.cs-page .cs-block--comparison,
.cs-page .cs-block--metrics {
    margin-top: 24px;
    margin-bottom: 40px;
}

/* Fullbleed image escape — breaks out of the gutters edge-to-edge. */
.cs-page .cs-block--image.cs-media-full,
.cs-page .cs-block--video.cs-media-full {
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}
.cs-page .cs-block--image.cs-media-full .cs-editor-media-slot,
.cs-page .cs-block--video.cs-media-full .cs-editor-media-slot {
    --cs-media-slot-radius: 0px;
    border-radius: 0;
}

.cs-page .cs-section__caption {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    line-height: 31px;
    letter-spacing: 0;
    color: #333;
    font-style: normal;
    margin: 24px 0 0;
    text-align: center;
}

html[data-cs-mode="edit"] .cs-section__caption[contenteditable] {
    min-height: 31px;
    cursor: text;
    user-select: text;
}

html[data-cs-mode="edit"] .cs-section__caption[contenteditable]:empty::before {
    color: inherit;
    font: inherit;
}

/* Zapp Account mirrors the Figma case-study frame:
   1200px rail = 160px index + 56px gap + 984px content. */
html[data-case-study-id="zapp-account"] .cs-main {
    --cs-w-text: 984px;
    --cs-w-media: 984px;
    --cs-w-wide: 1200px;
    --cs-gutter: 0px;
    position: relative;
    width: calc(100% - 120px);
    max-width: 1200px;
    padding: 96px 0 160px;
}

/* Growth Experiments uses the same Figma rail as Zapp Account:
   160px index + 56px gap + 984px main content. */
html[data-case-study-id="growth-experiments"] .cs-main,
html[data-case-study-id="project-3"] .cs-main,
html[data-case-study-id="now-and-me"] .cs-main {
    --cs-w-text: 984px;
    --cs-w-media: 984px;
    --cs-w-wide: 1200px;
    --cs-gutter: 0px;
    position: relative;
    width: calc(100% - 120px);
    max-width: 1200px;
    padding: 96px 0 160px;
}

html[data-case-study-id="growth-experiments"] .cs-back,
html[data-case-study-id="project-3"] .cs-back,
html[data-case-study-id="now-and-me"] .cs-back {
    position: absolute;
    top: 96px;
    left: 0;
    width: 160px;
    height: 40px;
    margin: 0;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #e3e3d6;
    border-radius: 8px;
    background: #f8f8f6;
    color: #989fa3;
    font-size: 15px;
    font-weight: 500;
    line-height: 23.25px;
}

html[data-case-study-id="growth-experiments"] .cs-back:hover,
html[data-case-study-id="project-3"] .cs-back:hover,
html[data-case-study-id="now-and-me"] .cs-back:hover {
    background: #f8f8f6;
    color: #626364;
    transform: none;
}

html[data-case-study-id="growth-experiments"] .cs-page-header,
html[data-case-study-id="project-3"] .cs-page-header,
html[data-case-study-id="now-and-me"] .cs-page-header {
    width: 984px;
    max-width: 984px;
    min-height: 98px;
    margin: 0 0 56px 216px;
}

html[data-case-study-id="growth-experiments"] .cs-page-header__title,
html[data-case-study-id="project-3"] .cs-page-header__title,
html[data-case-study-id="now-and-me"] .cs-page-header__title {
    font-size: 43.8px;
    line-height: 50.6px;
    letter-spacing: -0.66px;
    margin-bottom: 17px;
}

html[data-case-study-id="growth-experiments"] .cs-page-header__subtitle,
html[data-case-study-id="project-3"] .cs-page-header__subtitle,
html[data-case-study-id="now-and-me"] .cs-page-header__subtitle {
    color: #626364;
    font-size: 18px;
    line-height: 30px;
    opacity: 1;
    max-width: 984px;
    margin-bottom: 0;
}

html[data-case-study-id="growth-experiments"] .cs-page-header > .cs-page-header__meta,
html[data-case-study-id="project-3"] .cs-page-header > .cs-page-header__meta,
html[data-case-study-id="now-and-me"] .cs-page-header > .cs-page-header__meta {
    display: none;
}

html[data-case-study-id="growth-experiments"] .cs-page-hero,
html[data-case-study-id="project-3"] .cs-page-hero,
html[data-case-study-id="now-and-me"] .cs-page-hero {
    width: 1200px;
    max-width: 1200px;
    height: 563px;
    margin: 0 0 56px;
    aspect-ratio: auto;
    border-radius: 20px;
}

html[data-case-study-id="growth-experiments"] .cs-content,
html[data-case-study-id="project-3"] .cs-content,
html[data-case-study-id="now-and-me"] .cs-content {
    width: 1200px;
    max-width: 1200px;
    margin: 0;
}

html[data-case-study-id="growth-experiments"] .cs-body-layout--growth,
html[data-case-study-id="project-3"] .cs-body-layout--growth,
html[data-case-study-id="now-and-me"] .cs-body-layout--growth {
    display: grid;
    grid-template-columns: 160px 984px;
    column-gap: 56px;
    align-items: start;
    width: 1200px;
    max-width: 1200px;
    margin: 0;
}

html[data-case-study-id="growth-experiments"] .cs-body-layout--growth .cs-index,
html[data-case-study-id="project-3"] .cs-body-layout--growth .cs-index,
html[data-case-study-id="now-and-me"] .cs-body-layout--growth .cs-index {
    position: sticky;
    top: 120px;
    grid-column: 1;
    width: 160px;
    transform: none;
    gap: 12px;
    padding-top: 0;
}

html[data-case-study-id="growth-experiments"] .cs-body-layout--growth .cs-index__link,
html[data-case-study-id="project-3"] .cs-body-layout--growth .cs-index__link,
html[data-case-study-id="now-and-me"] .cs-body-layout--growth .cs-index__link {
    display: block;
    min-height: 24px;
    color: #B5BABE;
    font-size: 16px;
    font-weight: 400;
    line-height: 23.25px;
    letter-spacing: 0;
    will-change: transform;
}

html[data-case-study-id="growth-experiments"] .cs-body-layout--growth .cs-index__link:hover,
html[data-case-study-id="project-3"] .cs-body-layout--growth .cs-index__link:hover,
html[data-case-study-id="now-and-me"] .cs-body-layout--growth .cs-index__link:hover {
    color: #626364;
}

html[data-case-study-id="growth-experiments"] .cs-body-layout--growth .cs-index__link.is-active,
html[data-case-study-id="project-3"] .cs-body-layout--growth .cs-index__link.is-active,
html[data-case-study-id="now-and-me"] .cs-body-layout--growth .cs-index__link.is-active {
    color: #ff6b00;
    font-weight: 600;
}

html[data-case-study-id="growth-experiments"] .cs-body-layout__content,
html[data-case-study-id="project-3"] .cs-body-layout__content,
html[data-case-study-id="now-and-me"] .cs-body-layout__content {
    grid-column: 2;
    width: 984px;
    min-width: 0;
}

html[data-case-study-id="growth-experiments"] .cs-body-layout__content > .cs-section,
html[data-case-study-id="project-3"] .cs-body-layout__content > .cs-section,
html[data-case-study-id="now-and-me"] .cs-body-layout__content > .cs-section {
    width: 984px;
}

html[data-case-study-id="growth-experiments"] .cs-body-layout__content > .cs-section + .cs-section,
html[data-case-study-id="project-3"] .cs-body-layout__content > .cs-section + .cs-section,
html[data-case-study-id="now-and-me"] .cs-body-layout__content > .cs-section + .cs-section {
    margin-top: 120px;
}

html[data-case-study-id="growth-experiments"] .cs-body-layout__content .cs-section > *,
html[data-case-study-id="project-3"] .cs-body-layout__content .cs-section > *,
html[data-case-study-id="now-and-me"] .cs-body-layout__content .cs-section > * {
    max-width: 984px;
    margin-inline: 0;
}

html[data-case-study-id="growth-experiments"] .cs-meta-inline,
html[data-case-study-id="project-3"] .cs-meta-inline,
html[data-case-study-id="now-and-me"] .cs-meta-inline {
    display: flex;
    grid-template-columns: none;
    gap: 64px;
    width: 908px;
    max-width: 908px;
    margin: 0 0 70px;
    padding: 0;
    border: 0;
}

html[data-case-study-id="growth-experiments"] .cs-meta-inline .cs-meta-cell,
html[data-case-study-id="project-3"] .cs-meta-inline .cs-meta-cell,
html[data-case-study-id="now-and-me"] .cs-meta-inline .cs-meta-cell {
    gap: 12px;
}

html[data-case-study-id="growth-experiments"] .cs-meta-inline .cs-meta-cell__label,
html[data-case-study-id="project-3"] .cs-meta-inline .cs-meta-cell__label,
html[data-case-study-id="now-and-me"] .cs-meta-inline .cs-meta-cell__label,
html[data-case-study-id="growth-experiments"] .cs-section__label,
html[data-case-study-id="project-3"] .cs-section__label,
html[data-case-study-id="now-and-me"] .cs-section__label {
    color: #82bbed;
    font-size: 15px;
    font-weight: 600;
    line-height: 20.25px;
    letter-spacing: 1.2px;
    margin: 0;
}

html[data-case-study-id="growth-experiments"] .cs-meta-inline .cs-meta-cell__value,
html[data-case-study-id="project-3"] .cs-meta-inline .cs-meta-cell__value,
html[data-case-study-id="now-and-me"] .cs-meta-inline .cs-meta-cell__value {
    color: #626364;
    font-size: 18px;
    font-weight: 700;
    line-height: 24.8px;
}

html[data-case-study-id="growth-experiments"] .cs-block--section-label,
html[data-case-study-id="project-3"] .cs-block--section-label,
html[data-case-study-id="now-and-me"] .cs-block--section-label {
    margin-bottom: 24px;
}

html[data-case-study-id="growth-experiments"] .cs-section__body,
html[data-case-study-id="project-3"] .cs-section__body,
html[data-case-study-id="now-and-me"] .cs-section__body {
    color: #626364;
    font-size: 18px;
    line-height: 30.6px;
    margin-bottom: 24px;
}

html[data-case-study-id="growth-experiments"] .cs-eyebrow-heading,
html[data-case-study-id="project-3"] .cs-eyebrow-heading,
html[data-case-study-id="now-and-me"] .cs-eyebrow-heading {
    margin: 0 0 24px;
}

html[data-case-study-id="growth-experiments"] .cs-eyebrow:empty,
html[data-case-study-id="project-3"] .cs-eyebrow:empty,
html[data-case-study-id="now-and-me"] .cs-eyebrow:empty {
    display: none;
}

html[data-case-study-id="growth-experiments"] .cs-h3,
html[data-case-study-id="project-3"] .cs-h3,
html[data-case-study-id="now-and-me"] .cs-h3 {
    color: #111;
    font-size: 32px;
    line-height: 39px;
    letter-spacing: -0.156px;
}

html[data-case-study-id="growth-experiments"] .cs-block--image,
html[data-case-study-id="project-3"] .cs-block--image,
html[data-case-study-id="now-and-me"] .cs-block--image,
html[data-case-study-id="growth-experiments"] .cs-block--horizontal,
html[data-case-study-id="project-3"] .cs-block--horizontal,
html[data-case-study-id="now-and-me"] .cs-block--horizontal,
html[data-case-study-id="growth-experiments"] .cs-block--feature-1,
html[data-case-study-id="project-3"] .cs-block--feature-1,
html[data-case-study-id="now-and-me"] .cs-block--feature-1,
html[data-case-study-id="growth-experiments"] .cs-block--feature-2,
html[data-case-study-id="project-3"] .cs-block--feature-2,
html[data-case-study-id="now-and-me"] .cs-block--feature-2,
html[data-case-study-id="growth-experiments"] .cs-block--metrics,
html[data-case-study-id="project-3"] .cs-block--metrics,
html[data-case-study-id="now-and-me"] .cs-block--metrics {
    margin-top: 70px;
    margin-bottom: 70px;
}

html[data-case-study-id="growth-experiments"] .cs-editor-media--full .placeholder-graphic,
html[data-case-study-id="project-3"] .cs-editor-media--full .placeholder-graphic,
html[data-case-study-id="now-and-me"] .cs-editor-media--full .placeholder-graphic {
    min-height: 376px;
    border: 0;
    border-radius: 20px;
    background: #c4c4c4;
}

html[data-case-study-id="growth-experiments"] .cs-editor-media--full .cs-editor-media-slot,
html[data-case-study-id="project-3"] .cs-editor-media--full .cs-editor-media-slot,
html[data-case-study-id="now-and-me"] .cs-editor-media--full .cs-editor-media-slot {
    min-height: 376px;
    border-radius: 20px;
}

html[data-case-study-id="growth-experiments"] .cs-media-grid--cols-2,
html[data-case-study-id="project-3"] .cs-media-grid--cols-2,
html[data-case-study-id="now-and-me"] .cs-media-grid--cols-2 {
    grid-template-columns: repeat(2, 460px);
    gap: 64px;
}

html[data-case-study-id="growth-experiments"] .cs-media-grid--cols-3,
html[data-case-study-id="project-3"] .cs-media-grid--cols-3,
html[data-case-study-id="now-and-me"] .cs-media-grid--cols-3 {
    grid-template-columns: repeat(3, 285.333px);
    gap: 64px;
}

html[data-case-study-id="growth-experiments"] .cs-media-grid .placeholder-graphic,
html[data-case-study-id="project-3"] .cs-media-grid .placeholder-graphic,
html[data-case-study-id="now-and-me"] .cs-media-grid .placeholder-graphic {
    min-height: 0;
    aspect-ratio: 23 / 15;
    border: 0;
    border-radius: 20px;
    background: #c4c4c4;
}

html[data-case-study-id="growth-experiments"] .cs-media-grid .cs-editor-media-slot,
html[data-case-study-id="project-3"] .cs-media-grid .cs-editor-media-slot,
html[data-case-study-id="now-and-me"] .cs-media-grid .cs-editor-media-slot {
    min-height: 0;
    aspect-ratio: 23 / 15;
    border-radius: 20px;
}

html[data-case-study-id="growth-experiments"] .cs-bento,
html[data-case-study-id="project-3"] .cs-bento,
html[data-case-study-id="now-and-me"] .cs-bento {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 70px;
    margin-bottom: 70px;
    width: 100%;
    max-width: 984px;
    overflow: hidden;
}

html[data-case-study-id="growth-experiments"] .cs-bento__item,
html[data-case-study-id="project-3"] .cs-bento__item,
html[data-case-study-id="now-and-me"] .cs-bento__item {
    min-width: 0;
    flex: 0 0 auto;
}

html[data-case-study-id="growth-experiments"] .cs-bento__item--1,
html[data-case-study-id="project-3"] .cs-bento__item--1,
html[data-case-study-id="now-and-me"] .cs-bento__item--1 {
    width: calc((100% - 24px) * 0.71875);
}

html[data-case-study-id="growth-experiments"] .cs-bento__item--2,
html[data-case-study-id="project-3"] .cs-bento__item--2,
html[data-case-study-id="now-and-me"] .cs-bento__item--2 {
    width: calc((100% - 24px) * 0.28125);
}

html[data-case-study-id="growth-experiments"] .cs-bento__item--3,
html[data-case-study-id="project-3"] .cs-bento__item--3,
html[data-case-study-id="now-and-me"] .cs-bento__item--3 {
    width: calc((100% - 24px) * 0.5);
}

html[data-case-study-id="growth-experiments"] .cs-bento__item--4,
html[data-case-study-id="project-3"] .cs-bento__item--4,
html[data-case-study-id="now-and-me"] .cs-bento__item--4 {
    width: calc((100% - 24px) * 0.5);
}

html[data-case-study-id="growth-experiments"] .cs-bento__item--5,
html[data-case-study-id="project-3"] .cs-bento__item--5,
html[data-case-study-id="now-and-me"] .cs-bento__item--5 {
    width: calc((100% - 24px) * 0.64375);
}

html[data-case-study-id="growth-experiments"] .cs-bento__item--6,
html[data-case-study-id="project-3"] .cs-bento__item--6,
html[data-case-study-id="now-and-me"] .cs-bento__item--6 {
    width: calc((100% - 24px) * 0.35625);
}

html[data-case-study-id="growth-experiments"] .cs-bento .cs-editor-media-slot,
html[data-case-study-id="project-3"] .cs-bento .cs-editor-media-slot,
html[data-case-study-id="now-and-me"] .cs-bento .cs-editor-media-slot {
    height: 300px;
}

html[data-case-study-id="growth-experiments"] .cs-bento .placeholder-graphic,
html[data-case-study-id="project-3"] .cs-bento .placeholder-graphic,
html[data-case-study-id="now-and-me"] .cs-bento .placeholder-graphic {
    width: 100%;
    height: 300px;
    min-height: 300px;
    border: 0;
    border-radius: 20px;
    background: #c4c4c4;
}

html[data-case-study-id="growth-experiments"] .cs-bento > .cs-section__caption:empty,
html[data-case-study-id="project-3"] .cs-bento > .cs-section__caption:empty,
html[data-case-study-id="now-and-me"] .cs-bento > .cs-section__caption:empty {
    display: none;
}

html[data-case-study-id="growth-experiments"] .cs-section__caption,
html[data-case-study-id="project-3"] .cs-section__caption,
html[data-case-study-id="now-and-me"] .cs-section__caption {
    color: #333;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 31px;
    letter-spacing: 0;
    margin-top: 24px;
    text-align: center;
}

html[data-case-study-id="zapp-account"] .cs-back {
    position: absolute;
    top: 96px;
    left: 0;
    width: 160px;
    height: 40px;
    margin: 0;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #e3e3d6;
    border-radius: 8px;
    background: #f8f8f6;
    color: #989fa3;
    font-size: 15px;
    font-weight: 500;
    line-height: 23.25px;
}

html[data-case-study-id="zapp-account"] .cs-back:hover {
    background: #f8f8f6;
    color: #626364;
    transform: none;
}

html[data-case-study-id="zapp-account"] .cs-page-header {
    width: 984px;
    max-width: 984px;
    min-height: 179px;
    margin: 0 0 56px 216px;
}

html[data-case-study-id="zapp-account"] .cs-page-header__title {
    font-size: 43.8px;
    line-height: 50.6px;
    letter-spacing: -0.66px;
    margin-bottom: 17px;
}

html[data-case-study-id="zapp-account"] .cs-page-header__subtitle {
    color: #626364;
    font-size: 18px;
    line-height: 30px;
    opacity: 1;
    max-width: 984px;
    margin-bottom: 0;
}

html[data-case-study-id="zapp-account"] .cs-page-header > .cs-page-header__meta {
    display: none;
}

html[data-case-study-id="zapp-account"] .cs-page-hero {
    width: 1200px;
    max-width: 1200px;
    height: 563px;
    margin: 0 0 56px;
    aspect-ratio: auto;
    border-radius: 20px;
}

html[data-case-study-id="zapp-account"] .cs-content {
    width: 1200px;
    max-width: 1200px;
    margin: 0;
}

html[data-case-study-id="zapp-account"] .cs-body-layout--zapp {
    display: grid;
    grid-template-columns: 160px 984px;
    column-gap: 56px;
    align-items: start;
    width: 1200px;
    max-width: 1200px;
    margin: 0;
}

html[data-case-study-id="zapp-account"] .cs-body-layout--zapp .cs-index {
    position: sticky;
    top: 120px;
    grid-column: 1;
    width: 160px;
    transform: none;
    gap: 12px;
    padding-top: 0;
}

html[data-case-study-id="zapp-account"] .cs-body-layout--zapp .cs-index__link {
    display: block;
    min-height: 24px;
    color: #B5BABE;
    font-size: 16px;
    font-weight: 400;
    line-height: 23.25px;
    letter-spacing: 0;
    will-change: transform;
}

html[data-case-study-id="zapp-account"] .cs-body-layout--zapp .cs-index__link:hover {
    color: #626364;
}

html[data-case-study-id="zapp-account"] .cs-body-layout--zapp .cs-index__link.is-active {
    color: #ff6b00;
    font-weight: 600;
}

html[data-case-study-id="zapp-account"] .cs-body-layout__content {
    grid-column: 2;
    width: 984px;
    min-width: 0;
}

html[data-case-study-id="zapp-account"] .cs-body-layout__content > .cs-section {
    width: 984px;
}

html[data-case-study-id="zapp-account"] .cs-body-layout__content > .cs-section + .cs-section {
    margin-top: 120px;
}

html[data-case-study-id="zapp-account"] .cs-body-layout__content .cs-section > * {
    max-width: 984px;
    margin-inline: 0;
}

html[data-case-study-id="zapp-account"] .cs-meta-inline {
    display: flex;
    grid-template-columns: none;
    gap: 64px;
    width: 908px;
    max-width: 908px;
    margin: 0 0 70px;
    padding: 0;
    border: 0;
}

html[data-case-study-id="zapp-account"] .cs-meta-inline .cs-meta-cell {
    gap: 12px;
}

html[data-case-study-id="zapp-account"] .cs-meta-inline .cs-meta-cell__label,
html[data-case-study-id="zapp-account"] .cs-section__label {
    color: #82bbed;
    font-size: 15px;
    font-weight: 600;
    line-height: 20.25px;
    letter-spacing: 1.2px;
    margin: 0;
}

html[data-case-study-id="zapp-account"] .cs-meta-inline .cs-meta-cell__value {
    color: #626364;
    font-size: 18px;
    font-weight: 700;
    line-height: 24.8px;
}

html[data-case-study-id="zapp-account"] .cs-block--section-label {
    margin-bottom: 24px;
}

html[data-case-study-id="zapp-account"] .cs-section__body {
    color: #626364;
    font-size: 18px;
    line-height: 30.6px;
    margin-bottom: 24px;
}

html[data-case-study-id="zapp-account"] .cs-eyebrow-heading {
    margin: 0 0 24px;
}

html[data-case-study-id="zapp-account"] .cs-eyebrow:empty {
    display: none;
}

html[data-case-study-id="zapp-account"] .cs-h3 {
    color: #111;
    font-size: 24px;
    line-height: 39px;
    letter-spacing: -0.156px;
}

html[data-case-study-id="zapp-account"] .cs-block--image,
html[data-case-study-id="zapp-account"] .cs-block--horizontal,
html[data-case-study-id="zapp-account"] .cs-block--feature-1,
html[data-case-study-id="zapp-account"] .cs-block--feature-2,
html[data-case-study-id="zapp-account"] .cs-block--metrics {
    margin-top: 70px;
    margin-bottom: 70px;
}

html[data-case-study-id="zapp-account"] .cs-editor-media--full .placeholder-graphic {
    min-height: 376px;
    border: 0;
    border-radius: 20px;
    background: #c4c4c4;
}

html[data-case-study-id="zapp-account"] .cs-editor-media--full .cs-editor-media-slot {
    min-height: 376px;
    border-radius: 20px;
}

html[data-case-study-id="zapp-account"] .cs-horizontal,
html[data-case-study-id="growth-experiments"] .cs-horizontal,
html[data-case-study-id="now-and-me"] .cs-horizontal,
html[data-case-study-id="project-3"] .cs-horizontal,
html[data-case-study-id="zapp-account"] .cs-feature-block,
html[data-case-study-id="growth-experiments"] .cs-feature-block,
html[data-case-study-id="now-and-me"] .cs-feature-block,
html[data-case-study-id="project-3"] .cs-feature-block {
    grid-template-columns: 472px 472px;
    gap: 40px;
    margin: 0;
}

html[data-case-study-id="zapp-account"] .cs-horizontal + .cs-horizontal,
html[data-case-study-id="growth-experiments"] .cs-horizontal + .cs-horizontal,
html[data-case-study-id="now-and-me"] .cs-horizontal + .cs-horizontal,
html[data-case-study-id="project-3"] .cs-horizontal + .cs-horizontal,
html[data-case-study-id="zapp-account"] .cs-feature-block + .cs-feature-block,
html[data-case-study-id="growth-experiments"] .cs-feature-block + .cs-feature-block,
html[data-case-study-id="now-and-me"] .cs-feature-block + .cs-feature-block,
html[data-case-study-id="project-3"] .cs-feature-block + .cs-feature-block {
    margin-top: 64px;
}

html[data-case-study-id="zapp-account"] .cs-horizontal__frame,
html[data-case-study-id="growth-experiments"] .cs-horizontal__frame,
html[data-case-study-id="now-and-me"] .cs-horizontal__frame,
html[data-case-study-id="project-3"] .cs-horizontal__frame,
html[data-case-study-id="zapp-account"] .cs-feature-block__stage,
html[data-case-study-id="growth-experiments"] .cs-feature-block__stage,
html[data-case-study-id="now-and-me"] .cs-feature-block__stage,
html[data-case-study-id="project-3"] .cs-feature-block__stage,
html[data-case-study-id="zapp-account"] .cs-feature-block__frame,
html[data-case-study-id="growth-experiments"] .cs-feature-block__frame,
html[data-case-study-id="now-and-me"] .cs-feature-block__frame,
html[data-case-study-id="project-3"] .cs-feature-block__frame {
    width: 100%;
    max-width: 472px;
}

html[data-case-study-id="zapp-account"] .cs-horizontal__frame:not(.cs-horizontal__frame--phone) .placeholder-graphic,
html[data-case-study-id="growth-experiments"] .cs-horizontal__frame:not(.cs-horizontal__frame--phone) .placeholder-graphic,
html[data-case-study-id="now-and-me"] .cs-horizontal__frame:not(.cs-horizontal__frame--phone) .placeholder-graphic,
html[data-case-study-id="project-3"] .cs-horizontal__frame:not(.cs-horizontal__frame--phone) .placeholder-graphic {
    min-height: 472px;
    border: 0;
    border-radius: 20px;
    background: #e9f7ff;
}

html[data-case-study-id="zapp-account"] .cs-horizontal__frame:not(.cs-horizontal__frame--phone) .cs-editor-media-slot,
html[data-case-study-id="growth-experiments"] .cs-horizontal__frame:not(.cs-horizontal__frame--phone) .cs-editor-media-slot,
html[data-case-study-id="now-and-me"] .cs-horizontal__frame:not(.cs-horizontal__frame--phone) .cs-editor-media-slot,
html[data-case-study-id="project-3"] .cs-horizontal__frame:not(.cs-horizontal__frame--phone) .cs-editor-media-slot {
    min-height: 472px;
    border-radius: 20px;
}

html[data-case-study-id="zapp-account"] .cs-feature-block__stage,
html[data-case-study-id="growth-experiments"] .cs-feature-block__stage,
html[data-case-study-id="now-and-me"] .cs-feature-block__stage,
html[data-case-study-id="project-3"] .cs-feature-block__stage {
    width: 100%;
    max-width: 472px;
    height: 472px;
    min-height: 472px;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
}

html[data-case-study-id="zapp-account"] .cs-feature-block__stage .placeholder-graphic,
html[data-case-study-id="growth-experiments"] .cs-feature-block__stage .placeholder-graphic,
html[data-case-study-id="now-and-me"] .cs-feature-block__stage .placeholder-graphic,
html[data-case-study-id="project-3"] .cs-feature-block__stage .placeholder-graphic,
html[data-case-study-id="zapp-account"] .cs-feature-block__stage .cs-editor-media-slot,
html[data-case-study-id="growth-experiments"] .cs-feature-block__stage .cs-editor-media-slot,
html[data-case-study-id="now-and-me"] .cs-feature-block__stage .cs-editor-media-slot,
html[data-case-study-id="project-3"] .cs-feature-block__stage .cs-editor-media-slot {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 20px;
}

html[data-case-study-id="zapp-account"] .cs-horizontal__text > .cs-h3 {
    font-size: 20px;
    line-height: 39px;
    margin-bottom: 24px;
}

html[data-case-study-id="zapp-account"] .cs-feature-block__headline,
html[data-case-study-id="growth-experiments"] .cs-feature-block__headline,
html[data-case-study-id="now-and-me"] .cs-feature-block__headline,
html[data-case-study-id="project-3"] .cs-feature-block__headline {
    font-size: 20px;
    line-height: 39px;
    margin-bottom: 24px;
}

html[data-case-study-id="zapp-account"] .cs-horizontal__text > .cs-section__body {
    margin-bottom: 0;
}

html[data-case-study-id="zapp-account"] .cs-feature-block__body,
html[data-case-study-id="growth-experiments"] .cs-feature-block__body,
html[data-case-study-id="now-and-me"] .cs-feature-block__body,
html[data-case-study-id="project-3"] .cs-feature-block__body {
    margin-bottom: 0;
}

html[data-case-study-id="zapp-account"] .cs-feature-block__statement,
html[data-case-study-id="growth-experiments"] .cs-feature-block__statement,
html[data-case-study-id="now-and-me"] .cs-feature-block__statement,
html[data-case-study-id="project-3"] .cs-feature-block__statement {
    font-size: 32px;
    line-height: 1.7;
    letter-spacing: -0.02em;
}

html[data-case-study-id="zapp-account"] .cs-media-grid--cols-3 {
    grid-template-columns: repeat(3, 285.333px);
    gap: 64px;
}

html[data-case-study-id="zapp-account"] .cs-media-grid .placeholder-graphic {
    min-height: 0;
    aspect-ratio: 23 / 15;
    border: 0;
    border-radius: 20px;
    background: #c4c4c4;
}

html[data-case-study-id="zapp-account"] .cs-media-grid .cs-editor-media-slot {
    min-height: 0;
    aspect-ratio: 23 / 15;
    border-radius: 20px;
}

html[data-case-study-id="zapp-account"] .cs-cta-row--next,
html[data-case-study-id="growth-experiments"] .cs-cta-row--next,
html[data-case-study-id="project-3"] .cs-cta-row--next,
html[data-case-study-id="now-and-me"] .cs-cta-row--next {
    width: 1200px;
    max-width: 1200px;
    margin: 120px 0 0;
    padding-top: 0;
    border-top: 0;
    display: flex;
    justify-content: flex-end;
}

html[data-case-study-id="zapp-account"] .cs-cta--next,
html[data-case-study-id="growth-experiments"] .cs-cta--next,
html[data-case-study-id="project-3"] .cs-cta--next,
html[data-case-study-id="now-and-me"] .cs-cta--next {
    width: 160px;
    height: 40px;
    padding: 8px 12px;
    justify-content: center;
    gap: 10px;
    border: 1px solid #e3e3d6;
    border-radius: 8px;
    background: #f8f8f6;
    color: #989fa3;
    font-size: 15px;
    font-weight: 500;
    line-height: 23.25px;
}

html[data-case-study-id="zapp-account"] .cs-cta--next:hover,
html[data-case-study-id="growth-experiments"] .cs-cta--next:hover,
html[data-case-study-id="project-3"] .cs-cta--next:hover,
html[data-case-study-id="now-and-me"] .cs-cta--next:hover {
    background: #f8f8f6;
    color: #626364;
    transform: none;
}

html[data-case-study-id="zapp-account"] .cs-cta--next .cs-cta__arrow,
html[data-case-study-id="growth-experiments"] .cs-cta--next .cs-cta__arrow,
html[data-case-study-id="project-3"] .cs-cta--next .cs-cta__arrow,
html[data-case-study-id="now-and-me"] .cs-cta--next .cs-cta__arrow {
    width: 18px;
    height: 18px;
    transform: none;
}

html[data-case-study-id="zapp-account"] .cs-cta--next:hover .cs-cta__arrow,
html[data-case-study-id="growth-experiments"] .cs-cta--next:hover .cs-cta__arrow,
html[data-case-study-id="project-3"] .cs-cta--next:hover .cs-cta__arrow,
html[data-case-study-id="now-and-me"] .cs-cta--next:hover .cs-cta__arrow {
    transform: translateX(2px);
}

/* Design section: match Figma node 1758:20358.
   The intro stack uses 24px gaps; the row stack begins 70px after the
   "Every round..." line, then repeats rows at 64px. */
html[data-case-study-id="zapp-account"] #cs-design > .cs-block {
    margin-top: 0;
}

html[data-case-study-id="zapp-account"] #cs-design > .cs-block--section-label,
html[data-case-study-id="zapp-account"] #cs-design > .cs-block--eyebrow-heading,
html[data-case-study-id="zapp-account"] #cs-design > .cs-block--text:nth-child(3),
html[data-case-study-id="zapp-account"] #cs-design > .cs-block--image {
    margin-bottom: 24px;
}

html[data-case-study-id="zapp-account"] #cs-design > .cs-block--image {
    margin-top: 0;
}

html[data-case-study-id="zapp-account"] #cs-design > .cs-block--image .placeholder-graphic {
    min-height: 376px;
    border: 0;
    border-radius: 20px;
    background: #c4c4c4;
}

html[data-case-study-id="zapp-account"] #cs-design > .cs-block--image .cs-editor-media-slot {
    min-height: 376px;
    border-radius: 20px;
}

html[data-case-study-id="zapp-account"] #cs-design > .cs-block--text:nth-child(5) {
    margin-bottom: 70px;
}

html[data-case-study-id="zapp-account"] #cs-design > .cs-block--horizontal {
    grid-template-columns: 472px 472px;
    gap: 40px;
    align-items: center;
    margin: 0;
}

html[data-case-study-id="zapp-account"] #cs-design > .cs-block--horizontal + .cs-block--horizontal {
    margin-top: 64px;
}

html[data-case-study-id="zapp-account"] #cs-design > .cs-block--horizontal .placeholder-graphic {
    min-height: 472px;
    border: 0;
    border-radius: 20px;
    background: #e9f7ff;
}

html[data-case-study-id="zapp-account"] #cs-design > .cs-block--horizontal .cs-editor-media-slot {
    min-height: 472px;
    border-radius: 20px;
}

/* Process section: match Figma node 1750:20296, whose internal structure is
   not the same as the generic Zapp section rhythm. */
html[data-case-study-id="zapp-account"] #cs-process > .cs-block {
    margin-top: 0;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--section-label {
    margin-bottom: 24px;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--eyebrow-heading {
    margin-bottom: 24px;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--text {
    margin-bottom: 24px;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--text:nth-child(4),
html[data-case-study-id="zapp-account"] #cs-process > .cs-block--text:nth-child(7),
html[data-case-study-id="zapp-account"] #cs-process > .cs-block--metrics,
html[data-case-study-id="zapp-account"] #cs-process > .cs-block--text:nth-child(9) {
    margin-bottom: 70px;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--horizontal {
    height: 300px;
    grid-template-columns: 472px 472px;
    gap: 40px;
    align-items: center;
    margin: 0;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--horizontal:nth-child(5) {
    margin-bottom: 64px;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--horizontal:nth-child(6) {
    margin-bottom: 70px;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--horizontal .cs-section__body {
    color: #333;
    font-weight: 600;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--horizontal .placeholder-graphic {
    min-height: 300px;
    border: 0;
    border-radius: 20px;
    background: #c4c4c4;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--horizontal .cs-editor-media-slot {
    min-height: 300px;
    border-radius: 20px;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--image {
    margin: 0 0 24px;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--image .placeholder-graphic {
    min-height: 376px;
    border: 0;
    border-radius: 20px;
    background: #c4c4c4;
}

html[data-case-study-id="zapp-account"] #cs-process > .cs-block--image .cs-editor-media-slot {
    min-height: 376px;
    border-radius: 20px;
}

html[data-case-study-id="zapp-account"] body.night-mode .cs-back,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-back,
html[data-case-study-id="project-3"] body.night-mode .cs-back,
html[data-case-study-id="now-and-me"] body.night-mode .cs-back,
html[data-case-study-id="zapp-account"] body.night-mode .cs-cta--next,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-cta--next,
html[data-case-study-id="project-3"] body.night-mode .cs-cta--next,
html[data-case-study-id="now-and-me"] body.night-mode .cs-cta--next {
    background: #171717;
    border-color: rgba(255, 255, 255, 0.14);
    color: #c7c7c7;
}

html[data-case-study-id="zapp-account"] body.night-mode .cs-back:hover,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-back:hover,
html[data-case-study-id="project-3"] body.night-mode .cs-back:hover,
html[data-case-study-id="now-and-me"] body.night-mode .cs-back:hover,
html[data-case-study-id="zapp-account"] body.night-mode .cs-cta--next:hover,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-cta--next:hover,
html[data-case-study-id="project-3"] body.night-mode .cs-cta--next:hover,
html[data-case-study-id="now-and-me"] body.night-mode .cs-cta--next:hover {
    background: #202020;
    color: #f1f1f1;
}

html[data-case-study-id="zapp-account"] body.night-mode .cs-page-header__subtitle,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-page-header__subtitle,
html[data-case-study-id="project-3"] body.night-mode .cs-page-header__subtitle,
html[data-case-study-id="now-and-me"] body.night-mode .cs-page-header__subtitle,
html[data-case-study-id="zapp-account"] body.night-mode .cs-meta-inline .cs-meta-cell__value,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-meta-inline .cs-meta-cell__value,
html[data-case-study-id="project-3"] body.night-mode .cs-meta-inline .cs-meta-cell__value,
html[data-case-study-id="now-and-me"] body.night-mode .cs-meta-inline .cs-meta-cell__value,
html[data-case-study-id="zapp-account"] body.night-mode .cs-section__body,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-section__body,
html[data-case-study-id="project-3"] body.night-mode .cs-section__body,
html[data-case-study-id="now-and-me"] body.night-mode .cs-section__body {
    color: #c7c7c7;
}

html[data-case-study-id="zapp-account"] body.night-mode .cs-h3,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-h3,
html[data-case-study-id="project-3"] body.night-mode .cs-h3,
html[data-case-study-id="now-and-me"] body.night-mode .cs-h3,
html[data-case-study-id="zapp-account"] body.night-mode #cs-process > .cs-block--horizontal .cs-section__body,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-section__caption,
html[data-case-study-id="project-3"] body.night-mode .cs-section__caption,
html[data-case-study-id="now-and-me"] body.night-mode .cs-section__caption {
    color: #f1f1f1;
}

html[data-case-study-id="zapp-account"] body.night-mode .cs-body-layout--zapp .cs-index__link,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-body-layout--growth .cs-index__link,
html[data-case-study-id="project-3"] body.night-mode .cs-body-layout--growth .cs-index__link,
html[data-case-study-id="now-and-me"] body.night-mode .cs-body-layout--growth .cs-index__link {
    color: #a8a8a8;
}

html[data-case-study-id="zapp-account"] body.night-mode .cs-body-layout--zapp .cs-index__link:hover,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-body-layout--growth .cs-index__link:hover,
html[data-case-study-id="project-3"] body.night-mode .cs-body-layout--growth .cs-index__link:hover,
html[data-case-study-id="now-and-me"] body.night-mode .cs-body-layout--growth .cs-index__link:hover {
    color: #f1f1f1;
}

html[data-case-study-id="zapp-account"] body.night-mode .cs-body-layout--zapp .cs-index__link.is-active,
html[data-case-study-id="growth-experiments"] body.night-mode .cs-body-layout--growth .cs-index__link.is-active,
html[data-case-study-id="project-3"] body.night-mode .cs-body-layout--growth .cs-index__link.is-active,
html[data-case-study-id="now-and-me"] body.night-mode .cs-body-layout--growth .cs-index__link.is-active {
    color: #ff8a33;
}

@media (max-width: 1280px) {
    html[data-case-study-id="zapp-account"] .cs-main {
        width: 100%;
        max-width: 100%;
        padding: 72px 20px 120px;
    }

    html[data-case-study-id="zapp-account"] .cs-back {
        position: static;
        width: auto;
        justify-content: flex-start;
        margin-bottom: 24px;
    }

    html[data-case-study-id="zapp-account"] .cs-page-header,
    html[data-case-study-id="zapp-account"] .cs-page-hero,
    html[data-case-study-id="zapp-account"] .cs-content,
    html[data-case-study-id="zapp-account"] .cs-body-layout--zapp,
    html[data-case-study-id="zapp-account"] .cs-body-layout__content,
    html[data-case-study-id="zapp-account"] .cs-body-layout__content > .cs-section {
        width: 100%;
        max-width: 984px;
        margin-left: auto;
        margin-right: auto;
    }

    html[data-case-study-id="zapp-account"] .cs-body-layout--zapp {
        grid-template-columns: 1fr;
    }

    html[data-case-study-id="zapp-account"] .cs-index {
        display: none;
    }

    html[data-case-study-id="growth-experiments"] .cs-main,
    html[data-case-study-id="project-3"] .cs-main,
    html[data-case-study-id="now-and-me"] .cs-main {
        width: 100%;
        max-width: 100%;
        padding: 72px 20px 120px;
    }

    html[data-case-study-id="growth-experiments"] .cs-back,
    html[data-case-study-id="project-3"] .cs-back,
    html[data-case-study-id="now-and-me"] .cs-back {
        position: static;
        width: auto;
        justify-content: flex-start;
        margin-bottom: 24px;
    }

    html[data-case-study-id="growth-experiments"] .cs-page-header,
    html[data-case-study-id="project-3"] .cs-page-header,
    html[data-case-study-id="now-and-me"] .cs-page-header,
    html[data-case-study-id="growth-experiments"] .cs-page-hero,
    html[data-case-study-id="project-3"] .cs-page-hero,
    html[data-case-study-id="now-and-me"] .cs-page-hero,
    html[data-case-study-id="growth-experiments"] .cs-content,
    html[data-case-study-id="project-3"] .cs-content,
    html[data-case-study-id="now-and-me"] .cs-content,
    html[data-case-study-id="growth-experiments"] .cs-body-layout--growth,
    html[data-case-study-id="project-3"] .cs-body-layout--growth,
    html[data-case-study-id="now-and-me"] .cs-body-layout--growth,
    html[data-case-study-id="growth-experiments"] .cs-body-layout__content,
    html[data-case-study-id="project-3"] .cs-body-layout__content,
    html[data-case-study-id="now-and-me"] .cs-body-layout__content,
    html[data-case-study-id="growth-experiments"] .cs-body-layout__content > .cs-section,
    html[data-case-study-id="project-3"] .cs-body-layout__content > .cs-section,
    html[data-case-study-id="now-and-me"] .cs-body-layout__content > .cs-section {
        width: 100%;
        max-width: 984px;
        margin-left: auto;
        margin-right: auto;
    }

    html[data-case-study-id="growth-experiments"] .cs-body-layout--growth,
    html[data-case-study-id="project-3"] .cs-body-layout--growth,
    html[data-case-study-id="now-and-me"] .cs-body-layout--growth {
        grid-template-columns: 1fr;
    }

    html[data-case-study-id="growth-experiments"] .cs-index,
    html[data-case-study-id="project-3"] .cs-index,
    html[data-case-study-id="now-and-me"] .cs-index {
        display: none;
    }

    html[data-case-study-id="growth-experiments"] .cs-media-grid--cols-2,
    html[data-case-study-id="project-3"] .cs-media-grid--cols-2,
    html[data-case-study-id="now-and-me"] .cs-media-grid--cols-2,
    html[data-case-study-id="growth-experiments"] .cs-media-grid--cols-3,
    html[data-case-study-id="project-3"] .cs-media-grid--cols-3,
    html[data-case-study-id="now-and-me"] .cs-media-grid--cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    html[data-case-study-id="growth-experiments"] .cs-bento,
    html[data-case-study-id="project-3"] .cs-bento,
    html[data-case-study-id="now-and-me"] .cs-bento {
        display: grid;
        grid-template-columns: 1fr;
    }

    html[data-case-study-id="growth-experiments"] .cs-bento__item,
    html[data-case-study-id="project-3"] .cs-bento__item,
    html[data-case-study-id="now-and-me"] .cs-bento__item {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .cs-editor-toolbar {
        top: calc(var(--hero-nav-h, 72px) + 10px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: calc(100vw - 24px);
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .cs-editor-toolbar::-webkit-scrollbar {
        display: none;
    }

    .cs-editor-toolbar__btn,
    .cs-editor-toolbar__status {
        flex: 0 0 auto;
    }

    .cs-editor-toolbar__status {
        display: none;
    }

    html[data-case-study-id="zapp-account"] .cs-main {
        padding: 92px 20px 104px;
    }

    html[data-case-study-id="zapp-account"] .cs-page-header,
    html[data-case-study-id="zapp-account"] .cs-page-hero,
    html[data-case-study-id="zapp-account"] .cs-content,
    html[data-case-study-id="zapp-account"] .cs-body-layout--zapp,
    html[data-case-study-id="zapp-account"] .cs-body-layout__content,
    html[data-case-study-id="zapp-account"] .cs-body-layout__content > .cs-section,
    html[data-case-study-id="zapp-account"] .cs-meta-inline,
    html[data-case-study-id="zapp-account"] .cs-horizontal,
    html[data-case-study-id="zapp-account"] .cs-feature-block,
    html[data-case-study-id="zapp-account"] .cs-media-grid,
    html[data-case-study-id="zapp-account"] .cs-cta-row--next {
        width: min(100%, 320px);
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    html[data-case-study-id="zapp-account"] .cs-back {
        margin-bottom: 20px;
        padding-inline: 14px;
    }

    html[data-case-study-id="zapp-account"] .cs-page-header {
        min-height: 0;
        margin-bottom: 40px;
    }

    html[data-case-study-id="zapp-account"] .cs-page-header__title {
        font-size: 40px;
        line-height: 1.08;
        letter-spacing: -0.04em;
        margin-bottom: 16px;
    }

    html[data-case-study-id="zapp-account"] .cs-page-header__subtitle {
        font-size: 16px;
        line-height: 1.7;
        max-width: 320px;
    }

    html[data-case-study-id="zapp-account"] .cs-page-hero {
        height: auto;
        aspect-ratio: 320 / 376;
        margin-bottom: 40px;
    }

    html[data-case-study-id="zapp-account"] .cs-meta-inline {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 20px;
        margin-bottom: 56px;
    }

    html[data-case-study-id="zapp-account"] .cs-meta-inline .cs-meta-cell {
        min-width: 0;
        gap: 8px;
    }

    html[data-case-study-id="zapp-account"] .cs-meta-inline .cs-meta-cell__label,
    html[data-case-study-id="zapp-account"] .cs-section__label {
        font-size: 11px;
        line-height: 1.3;
        letter-spacing: 0.1em;
    }

    html[data-case-study-id="zapp-account"] .cs-meta-inline .cs-meta-cell__value {
        font-size: 14px;
        line-height: 1.45;
    }

    html[data-case-study-id="zapp-account"] .cs-body-layout--zapp {
        gap: 0;
    }

    html[data-case-study-id="zapp-account"] .cs-body-layout__content > .cs-section + .cs-section {
        margin-top: 88px;
    }

    html[data-case-study-id="zapp-account"] .cs-block--section-label {
        margin-bottom: 16px;
    }

    html[data-case-study-id="zapp-account"] .cs-eyebrow-heading {
        margin-bottom: 18px;
    }

    html[data-case-study-id="zapp-account"] .cs-section__body {
        font-size: 16px;
        line-height: 1.68;
        margin-bottom: 18px;
    }

    html[data-case-study-id="zapp-account"] .cs-h3 {
        font-size: 24px;
        line-height: 1.22;
        letter-spacing: -0.02em;
    }

    html[data-case-study-id="zapp-account"] .cs-block--image,
    html[data-case-study-id="zapp-account"] .cs-block--horizontal,
    html[data-case-study-id="zapp-account"] .cs-block--feature-1,
    html[data-case-study-id="zapp-account"] .cs-block--feature-2,
    html[data-case-study-id="growth-experiments"] .cs-block--feature-1,
    html[data-case-study-id="growth-experiments"] .cs-block--feature-2,
    html[data-case-study-id="now-and-me"] .cs-block--feature-1,
    html[data-case-study-id="now-and-me"] .cs-block--feature-2,
    html[data-case-study-id="project-3"] .cs-block--feature-1,
    html[data-case-study-id="project-3"] .cs-block--feature-2,
    html[data-case-study-id="zapp-account"] .cs-block--metrics {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    html[data-case-study-id="zapp-account"] .cs-editor-media--full .placeholder-graphic,
    html[data-case-study-id="zapp-account"] .cs-editor-media--full .cs-editor-media-slot {
        min-height: 376px;
    }

    html[data-case-study-id="zapp-account"] .cs-horizontal,
    html[data-case-study-id="growth-experiments"] .cs-horizontal,
    html[data-case-study-id="now-and-me"] .cs-horizontal,
    html[data-case-study-id="project-3"] .cs-horizontal,
    html[data-case-study-id="zapp-account"] .cs-feature-block,
    html[data-case-study-id="growth-experiments"] .cs-feature-block,
    html[data-case-study-id="now-and-me"] .cs-feature-block,
    html[data-case-study-id="project-3"] .cs-feature-block,
    html[data-case-study-id="zapp-account"] #cs-design > .cs-block--horizontal,
    html[data-case-study-id="zapp-account"] #cs-process > .cs-block--horizontal {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto;
        margin: 0 auto;
    }

    html[data-case-study-id="zapp-account"] .cs-horizontal + .cs-horizontal,
    html[data-case-study-id="growth-experiments"] .cs-horizontal + .cs-horizontal,
    html[data-case-study-id="now-and-me"] .cs-horizontal + .cs-horizontal,
    html[data-case-study-id="project-3"] .cs-horizontal + .cs-horizontal,
    html[data-case-study-id="zapp-account"] .cs-feature-block + .cs-feature-block,
    html[data-case-study-id="growth-experiments"] .cs-feature-block + .cs-feature-block,
    html[data-case-study-id="now-and-me"] .cs-feature-block + .cs-feature-block,
    html[data-case-study-id="project-3"] .cs-feature-block + .cs-feature-block,
    html[data-case-study-id="zapp-account"] #cs-design > .cs-block--horizontal + .cs-block--horizontal,
    html[data-case-study-id="zapp-account"] #cs-process > .cs-block--horizontal + .cs-block--horizontal {
        margin-top: 32px;
    }

    html[data-case-study-id="zapp-account"] .cs-horizontal__text,
    html[data-case-study-id="growth-experiments"] .cs-horizontal__text,
    html[data-case-study-id="now-and-me"] .cs-horizontal__text,
    html[data-case-study-id="project-3"] .cs-horizontal__text,
    html[data-case-study-id="zapp-account"] .cs-feature-block__text,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__text,
    html[data-case-study-id="now-and-me"] .cs-feature-block__text,
    html[data-case-study-id="project-3"] .cs-feature-block__text {
        display: contents;
    }

    html[data-case-study-id="zapp-account"] .cs-horizontal__text > .cs-h3 {
        order: 1;
        width: 100%;
        margin: 0;
    }

    html[data-case-study-id="zapp-account"] .cs-feature-block__headline,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__headline,
    html[data-case-study-id="now-and-me"] .cs-feature-block__headline,
    html[data-case-study-id="project-3"] .cs-feature-block__headline,
    html[data-case-study-id="zapp-account"] .cs-feature-block__statement,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__statement,
    html[data-case-study-id="now-and-me"] .cs-feature-block__statement,
    html[data-case-study-id="project-3"] .cs-feature-block__statement {
        order: 1;
        width: 100%;
        margin: 0;
    }

    html[data-case-study-id="zapp-account"] .cs-horizontal__media,
    html[data-case-study-id="growth-experiments"] .cs-horizontal__media,
    html[data-case-study-id="now-and-me"] .cs-horizontal__media,
    html[data-case-study-id="project-3"] .cs-horizontal__media,
    html[data-case-study-id="zapp-account"] .cs-feature-block__media,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__media,
    html[data-case-study-id="now-and-me"] .cs-feature-block__media,
    html[data-case-study-id="project-3"] .cs-feature-block__media {
        order: 2;
        width: 100%;
    }

    html[data-case-study-id="zapp-account"] .cs-horizontal__text > .cs-section__body {
        order: 3;
        width: 100%;
        margin: 0;
    }

    html[data-case-study-id="zapp-account"] .cs-feature-block__body,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__body,
    html[data-case-study-id="now-and-me"] .cs-feature-block__body,
    html[data-case-study-id="project-3"] .cs-feature-block__body {
        order: 3;
        width: 100%;
        margin: 0;
    }

    html[data-case-study-id="zapp-account"] .cs-horizontal__frame,
    html[data-case-study-id="growth-experiments"] .cs-horizontal__frame,
    html[data-case-study-id="now-and-me"] .cs-horizontal__frame,
    html[data-case-study-id="project-3"] .cs-horizontal__frame,
    html[data-case-study-id="zapp-account"] .cs-horizontal__media,
    html[data-case-study-id="growth-experiments"] .cs-horizontal__media,
    html[data-case-study-id="now-and-me"] .cs-horizontal__media,
    html[data-case-study-id="project-3"] .cs-horizontal__media,
    html[data-case-study-id="zapp-account"] .cs-feature-block__stage,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__stage,
    html[data-case-study-id="now-and-me"] .cs-feature-block__stage,
    html[data-case-study-id="project-3"] .cs-feature-block__stage,
    html[data-case-study-id="zapp-account"] .cs-feature-block__media,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__media,
    html[data-case-study-id="now-and-me"] .cs-feature-block__media,
    html[data-case-study-id="project-3"] .cs-feature-block__media,
    html[data-case-study-id="zapp-account"] .cs-horizontal__text > *,
    html[data-case-study-id="growth-experiments"] .cs-horizontal__text > *,
    html[data-case-study-id="now-and-me"] .cs-horizontal__text > *,
    html[data-case-study-id="project-3"] .cs-horizontal__text > *,
    html[data-case-study-id="zapp-account"] .cs-feature-block__text > *,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__text > *,
    html[data-case-study-id="now-and-me"] .cs-feature-block__text > *,
    html[data-case-study-id="project-3"] .cs-feature-block__text > *,
    html[data-case-study-id="zapp-account"] #cs-design > .cs-block--horizontal .cs-editor-media-slot,
    html[data-case-study-id="zapp-account"] #cs-design > .cs-block--horizontal .placeholder-graphic,
    html[data-case-study-id="zapp-account"] #cs-process > .cs-block--horizontal .cs-editor-media-slot,
    html[data-case-study-id="zapp-account"] #cs-process > .cs-block--horizontal .placeholder-graphic {
        width: 100%;
        max-width: 320px;
    }

    html[data-case-study-id="zapp-account"] .cs-horizontal__frame,
    html[data-case-study-id="growth-experiments"] .cs-horizontal__frame,
    html[data-case-study-id="now-and-me"] .cs-horizontal__frame,
    html[data-case-study-id="project-3"] .cs-horizontal__frame,
    html[data-case-study-id="zapp-account"] .cs-horizontal__frame .cs-editor-media-slot,
    html[data-case-study-id="growth-experiments"] .cs-horizontal__frame .cs-editor-media-slot,
    html[data-case-study-id="now-and-me"] .cs-horizontal__frame .cs-editor-media-slot,
    html[data-case-study-id="project-3"] .cs-horizontal__frame .cs-editor-media-slot,
    html[data-case-study-id="zapp-account"] .cs-horizontal__frame .placeholder-graphic,
    html[data-case-study-id="growth-experiments"] .cs-horizontal__frame .placeholder-graphic,
    html[data-case-study-id="now-and-me"] .cs-horizontal__frame .placeholder-graphic,
    html[data-case-study-id="project-3"] .cs-horizontal__frame .placeholder-graphic,
    html[data-case-study-id="zapp-account"] .cs-feature-block__stage,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__stage,
    html[data-case-study-id="now-and-me"] .cs-feature-block__stage,
    html[data-case-study-id="project-3"] .cs-feature-block__stage,
    html[data-case-study-id="zapp-account"] .cs-feature-block__stage .cs-editor-media-slot,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__stage .cs-editor-media-slot,
    html[data-case-study-id="now-and-me"] .cs-feature-block__stage .cs-editor-media-slot,
    html[data-case-study-id="project-3"] .cs-feature-block__stage .cs-editor-media-slot,
    html[data-case-study-id="zapp-account"] .cs-feature-block__stage .placeholder-graphic,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__stage .placeholder-graphic,
    html[data-case-study-id="now-and-me"] .cs-feature-block__stage .placeholder-graphic,
    html[data-case-study-id="project-3"] .cs-feature-block__stage .placeholder-graphic {
        width: 100%;
        max-width: 320px;
        min-height: 320px;
        height: 320px;
        aspect-ratio: 1 / 1;
    }

    html[data-case-study-id="zapp-account"] .cs-horizontal__frame .cs-editor-media-slot > video,
    html[data-case-study-id="growth-experiments"] .cs-horizontal__frame .cs-editor-media-slot > video,
    html[data-case-study-id="now-and-me"] .cs-horizontal__frame .cs-editor-media-slot > video,
    html[data-case-study-id="project-3"] .cs-horizontal__frame .cs-editor-media-slot > video,
    html[data-case-study-id="zapp-account"] .cs-feature-block__stage .cs-editor-media-slot > video,
    html[data-case-study-id="growth-experiments"] .cs-feature-block__stage .cs-editor-media-slot > video,
    html[data-case-study-id="now-and-me"] .cs-feature-block__stage .cs-editor-media-slot > video,
    html[data-case-study-id="project-3"] .cs-feature-block__stage .cs-editor-media-slot > video {
        transform: scale(1.05);
    }

    html[data-case-study-id="zapp-account"] .cs-media-grid--cols-2,
    html[data-case-study-id="zapp-account"] .cs-media-grid--cols-3 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    html[data-case-study-id="zapp-account"] .cs-media-grid .placeholder-graphic,
    html[data-case-study-id="zapp-account"] .cs-media-grid .cs-editor-media-slot {
        min-height: 0;
        aspect-ratio: 23 / 15;
    }

    html[data-case-study-id="zapp-account"] .cs-section__caption {
        margin-top: 16px;
        font-size: 18px;
        line-height: 1.5;
    }

    html[data-case-study-id="zapp-account"] .cs-cta-row--next {
        justify-content: center;
        margin-top: 88px;
    }

    html[data-case-study-id="zapp-account"] .cs-cta--next {
        width: 161px;
        height: 44px;
        border-radius: 999px;
    }
}

/* --- CTA row --- */
.cs-page .cs-cta-row {
    margin-top: 96px;
    padding-top: 48px;
    border-top: 1px solid var(--cs-rule);
}

/* --- Back link: inline-flex, sits at the left edge of the wide tier. --- */
.cs-page .cs-back {
    margin: 0 0 16px;
    max-width: var(--cs-w-wide);
    /* inline-flex; margin-inline:auto from the generic rule is a no-op here. */
}

/* --- Make sure the editor toolbar stays visible above the new layout --- */
.cs-editor-toolbar { top: 84px; }

@media (max-width: 768px) {
    .cs-main { padding: 72px 20px 96px; }
    .cs-page-header { margin: 16px 0 32px; }
    .cs-page-hero { margin-bottom: 56px; }
    .cs-pullquote { margin: 40px 0; }
    .cs-numbered { grid-template-columns: 40px 1fr; gap: 4px 16px; }
}

/* =============================================================================
   LARGE DISPLAY SCALE — 24" monitors and larger
   ---------------------------------------------------------------------------
   Scale the portfolio as a system instead of zooming individual components:
   wider layout rails, slightly larger type caps, roomier surfaces, and a larger
   hero/grid artboard. Laptop/tablet/mobile tiers remain unchanged.
   ============================================================================= */

@media (min-width: 1600px) {
    :root {
        --hero-v2-zoom: 1.12;
        --layout-gutter: clamp(96px, 8vw, 220px);

        --t-display-xl-size: clamp(3.45rem, 3.35vw, 4.55rem);
        --t-display-lg-size: clamp(2.45rem, 2.75vw, 3.05rem);
        --t-display-md-size: clamp(2.2rem, 2.35vw, 2.75rem);
        --t-display-sm-size: clamp(1.7rem, 1.75vw, 2.05rem);
        --t-h1-size: clamp(2rem, 2.05vw, 2.45rem);
        --t-h2-size: clamp(1.55rem, 1.6vw, 1.9rem);
        --t-h3-size: clamp(1.25rem, 1.25vw, 1.45rem);
        --t-h4-size: clamp(1.125rem, 1.2vw, 1.3rem);
        --t-lead-size: clamp(1.35rem, 1.35vw, 1.6rem);
        --t-body-lg-size: clamp(1.25rem, 1.25vw, 1.45rem);
        --t-body-size: 1.0625rem;
        --t-body-sm-size: 1rem;
        --t-caption-size: 0.9375rem;
        --t-eyebrow-size: 0.8125rem;
        --t-label-size: 0.875rem;
        --t-meta-size: 1rem;
        --t-ui-size: 1.0625rem;

        --cs-display-xl-size: clamp(3.6rem, 3.55vw, 4.8rem);
        --cs-display-lg-size: clamp(2.55rem, 2.85vw, 3.2rem);
        --cs-display-md-size: clamp(2.25rem, 2.45vw, 2.9rem);
        --cs-display-sm-size: clamp(1.8rem, 1.9vw, 2.15rem);
        --cs-h1-size: clamp(2.05rem, 2.15vw, 2.6rem);
        --cs-h2-size: clamp(1.65rem, 1.7vw, 2rem);
        --cs-h3-size: clamp(1.35rem, 1.35vw, 1.55rem);
        --cs-h4-size: clamp(1.225rem, 1.3vw, 1.4rem);
        --cs-lead-size: clamp(1.65rem, 1.65vw, 1.95rem);
        --cs-body-lg-size: clamp(1.5rem, 1.5vw, 1.7rem);
        --cs-body-size: 1.25rem;
        --cs-body-sm-size: 1.125rem;
        --cs-caption-size: 1.0625rem;
        --cs-eyebrow-size: 0.875rem;
        --cs-label-size: 0.9375rem;
        --cs-meta-size: 1.0625rem;
    }

    .container {
        max-width: 1680px;
    }

    .navbar__pill {
        max-width: 1600px;
    }

    .cs-page {
        --cs-w-text: 860px;
        --cs-w-media: 1220px;
        --cs-w-wide: 1440px;
        --cs-gutter: clamp(48px, 5vw, 96px);
    }

    .cs-page .cs-h2 {
        font-size: clamp(2.15rem, 2.2vw, 2.55rem);
    }

    .cs-page .cs-h3,
    .cs-page .cs-impact__headline {
        font-size: clamp(1.45rem, 1.45vw, 1.75rem);
    }

    .projects-section {
        padding-top: clamp(56px, 7vw, 104px);
        padding-bottom: clamp(72px, 7vw, 112px);
    }

    #projects.projects-section {
        padding-top: clamp(28px, 5vw, 56px);
    }

    .projects-title {
        font-size: clamp(2.35rem, 2.55vw, 3rem);
    }
}

@media (min-width: 1600px) and (max-width: 2199px) {
    .museum-stage {
        width: 54%;
    }

    .wrapper-3d {
        width: min(13vw, 236px);
        transform: scale(0.8);
        transform-origin: center center;
    }

    .fold {
        width: 100%;
        height: clamp(156px, 20vh, 208px);
    }

    .fold-content {
        gap: 8px;
        padding: 0 8px;
    }

    .ticker-image-wrapper {
        aspect-ratio: 1.72;
    }
}

@media (min-width: 2200px) {
    :root {
        --hero-v2-zoom: 1.18;
        --layout-gutter: clamp(140px, 7vw, 280px);

        --t-display-xl-size: clamp(4.35rem, 3.35vw, 5.25rem);
        --t-display-lg-size: clamp(2.95rem, 2.55vw, 3.45rem);
        --t-display-md-size: clamp(2.65rem, 2.25vw, 3.1rem);
        --t-display-sm-size: clamp(2rem, 1.7vw, 2.35rem);
        --t-h1-size: clamp(2.35rem, 1.95vw, 2.8rem);
        --t-h2-size: clamp(1.85rem, 1.55vw, 2.2rem);
        --t-h3-size: clamp(1.45rem, 1.2vw, 1.65rem);
        --t-lead-size: clamp(1.55rem, 1.25vw, 1.85rem);
        --t-body-lg-size: clamp(1.4rem, 1.15vw, 1.6rem);
        --t-body-size: 1.125rem;

        --cs-body-size: 1.375rem;
        --cs-body-sm-size: 1.1875rem;
        --cs-body-lg-size: clamp(1.65rem, 1.35vw, 1.85rem);
        --cs-lead-size: clamp(1.85rem, 1.45vw, 2.15rem);
    }

    .container {
        max-width: 1840px;
    }

    .navbar__pill {
        max-width: 1760px;
    }

    .cs-page {
        --cs-w-text: 920px;
        --cs-w-media: 1360px;
        --cs-w-wide: 1600px;
    }

    .cs-page .cs-h2 {
        font-size: clamp(2.35rem, 1.95vw, 2.85rem);
    }

    .cs-page .cs-h3,
    .cs-page .cs-impact__headline {
        font-size: clamp(1.6rem, 1.3vw, 1.9rem);
    }

    .projects-title {
        font-size: clamp(2.5rem, 2.25vw, 3.15rem);
    }
}

/* Keep the Eyebrow + heading block on one shared type scale across all case studies. */
html[data-case-study-id] .cs-eyebrow-heading .cs-h3 {
    font-size: 32px;
    line-height: 39px;
    letter-spacing: -0.156px;
}

@media (max-width: 768px) {
    html[data-case-study-id] .cs-eyebrow-heading .cs-h3 {
        font-size: 24px;
        line-height: 1.22;
        letter-spacing: -0.02em;
    }
}