/* ==========================================================================
   Marcom Studio — stylesheet
   Fonts: Bricolage Grotesque (display) + Instrument Sans (text)
   All colours come from the tokens below; dark mode only swaps tokens,
   so every piece of text keeps proper contrast in both themes.
   ========================================================================== */

/* ---------- Self-hosted variable fonts (SIL Open Font License) ---------- */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2-variations"), url("../fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin-ext-standard-normal.woff2") format("woff2-variations"), url("../fonts/bricolage-grotesque-latin-ext-standard-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans-latin-standard-normal.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-standard-normal.woff2") format("woff2");
    font-weight: 400 700;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans-latin-ext-standard-normal.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-ext-standard-normal.woff2") format("woff2");
    font-weight: 400 700;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Jost";
    src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Jost";
    src: url("../fonts/jost-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/jost-latin-ext-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
    --bg: #ffffff;
    --bg-alt: #f4f4f2;
    --surface: #ffffff;
    --surface-2: #f4f4f2;
    --ink: #121214;          /* headings & primary text  — 18.4:1 on white */
    --ink-2: #33343a;        /* body text                — 12.3:1 */
    --muted: #5b5c63;        /* secondary text           — 6.6:1  */
    --line: #e2e2de;
    --line-strong: #121214;
    --accent: #f2a900;       /* marigold fill (buttons, dots, highlights) */
    --accent-soft: #ffe7a6;
    --accent-text: #8a5000;  /* accent used as TEXT on light bg — 6.6:1 */
    --on-accent: #121214;
    --word: #e3e3de;         /* giant background words (decorative) */
    --panel: #141416;        /* always-dark panels (ticker) */
    --on-panel: #f5f5f3;
    --on-panel-muted: #c2c2bd;
    --danger: #b42318;
    --success: #067647;

    --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --font-text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --font-geo: "Jost", "Futura", "Century Gothic", "Avenir Next", sans-serif; /* premium geometric caps */
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --fs-xs: 0.8125rem;   /* 13 */
    --fs-sm: 0.9375rem;   /* 15 */
    --fs-base: 1.0625rem; /* 17 */
    --fs-lg: 1.25rem;     /* 20 */
    --fs-xl: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
    --fs-2xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    --fs-3xl: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
    --fs-word: clamp(3rem, 15.5vw, 13rem);

    --r-xl: 28px;
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;
    --gutter: clamp(16px, 4vw, 32px);
    --max: 1240px;
    --header-h: 72px;

    --shadow-sm: 0 1px 2px rgb(18 18 20 / 0.06);
    --shadow-md: 0 1px 2px rgb(18 18 20 / 0.05), 0 14px 34px -14px rgb(18 18 20 / 0.28);
    --shadow-lg: 0 30px 80px -24px rgb(18 18 20 / 0.45);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    color-scheme: light;
}

[data-theme="dark"] {
    --bg: #0e0e10;
    --bg-alt: #141417;
    --surface: #18181b;
    --surface-2: #202024;
    --ink: #f5f5f3;
    --ink-2: #dcdcd7;
    --muted: #a8a8a2;        /* 7.9:1 on #0e0e10 */
    --line: #2b2b30;
    --line-strong: #3d3d44;
    --accent-soft: #3a2a05;
    --accent-text: #ffc53d;  /* 11:1 on #0e0e10 */
    --word: #303037;
    --panel: #1b1b1f;
    --danger: #ff8a7a;
    --success: #4ade80;
    --shadow-md: 0 1px 2px rgb(0 0 0 / 0.4), 0 14px 34px -14px rgb(0 0 0 / 0.7);
    --shadow-lg: 0 30px 80px -24px rgb(0 0 0 / 0.8);
    color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
    margin: 0;
    font-family: var(--font-text);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-optical-sizing: auto;
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: var(--accent); color: #121214; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.icon { width: 1.1em; height: 1.1em; flex: none; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

.skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 200;
    padding: 10px 16px; border-radius: var(--r-sm);
    background: var(--ink); color: var(--bg); font-weight: 600;
    transform: translateY(-160%);
    transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

.container {
    width: 100%;
    max-width: calc(var(--max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.muted { color: var(--muted); }

.bg-canvas {
    position: fixed; inset: 0; z-index: -1;
    width: 100vw; height: 100vh;
    pointer-events: none;
}

/* ---------- Buttons ---------- */
.btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--ink);
    --btn-border: var(--line);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    min-height: 44px;
    padding: 0.7em 1.2em;
    border-radius: 999px;
    border: 1.5px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.15s, box-shadow 0.25s, translate 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 1em; height: 1em; transition: transform 0.2s var(--ease-out); }
.btn:hover .icon { transform: translateX(2px); }

.btn--sm { min-height: 38px; padding: 0.55em 1em; font-size: var(--fs-xs); }
.btn--lg { min-height: 52px; padding: 0.9em 1.5em; font-size: var(--fs-base); }

.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--bg); --btn-border: var(--ink); }
.btn--ink:hover { --btn-bg: var(--accent); --btn-fg: #121214; --btn-border: var(--accent); }

.btn--accent { --btn-bg: var(--accent); --btn-fg: #121214; --btn-border: var(--accent); box-shadow: 0 10px 24px -10px rgb(242 169 0 / 0.65); }
.btn--accent:hover { --btn-bg: #ffbf1f; --btn-border: #ffbf1f; box-shadow: 0 14px 30px -10px rgb(242 169 0 / 0.75); }

.btn--light { --btn-bg: #ffffff; --btn-fg: #121214; --btn-border: #ffffff; }
.btn--light:hover { --btn-bg: var(--accent); --btn-border: var(--accent); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--line); }
.btn--ghost:hover { --btn-border: var(--ink); }

.icon-btn {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 999px;
    color: var(--ink);
    transition: background-color 0.2s;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn--sm { width: 36px; height: 36px; }

.text-link {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-weight: 600; color: var(--ink);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 2px;
    transition: color 0.2s;
}
.text-link:hover { color: var(--accent-text); }
.text-link .icon { transition: transform 0.2s var(--ease-out); }
.text-link:hover .icon { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: translate 0.55s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.3s, background-color 0.3s;
}
.site-header.is-hidden { translate: 0 -100%; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -20px rgb(0 0 0 / 0.35); }
.site-header__inner {
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.wordmark {
    display: inline-flex; align-items: flex-start; gap: 4px;
    font-family: var(--font-display);
    font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em;
    color: var(--ink);
}
.wordmark__dot {
    width: 9px; height: 9px; margin-top: 6px;
    border-radius: 50%; background: var(--accent);
}
.main-nav { display: flex; gap: 4px; }
.main-nav a {
    padding: 9px 14px; border-radius: 999px;
    font-family: var(--font-geo); font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
    transition: background-color 0.2s, color 0.2s;
}
.main-nav a:hover { background: var(--surface-2); }
.main-nav a.is-current { background: var(--ink); color: var(--bg); }
.site-header__actions { display: flex; align-items: center; gap: 8px; }

.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; color: var(--accent); }
[data-theme="dark"] .theme-toggle__moon { display: none; }

.nav-toggle { display: none; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }

.mobile-nav {
    display: flex; flex-direction: column;
    padding: 8px var(--gutter) 20px;
    border-top: 1px solid var(--line);
    background: var(--bg);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
    padding: 14px 0; border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--ink);
}

@media (max-width: 860px) {
    .main-nav { display: none; }
    .nav-toggle { display: inline-grid; }
}
@media (max-width: 480px) {
    .site-header__actions .btn { display: none; }
}

/* ---------- Hero: animated liquid-gold stage ---------- */
.hero { padding-top: clamp(16px, 3vw, 32px); overflow: hidden; }

.hero-stage {
    --champagne: #ecd9ab;
    --ivory: #f7f2e8;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
    min-height: clamp(560px, 86vh, 820px);
    padding: clamp(16px, 2.4vw, 28px);
    border-radius: var(--r-xl);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(80% 70% at 70% 30%, #3a2a12 0%, transparent 60%),
        radial-gradient(60% 60% at 20% 80%, #241a0c 0%, transparent 70%),
        #0b0a09;              /* shown until WebGL paints, and if it can't */
    color: var(--ivory);
    box-shadow: var(--shadow-lg);
}
.hero-stage__canvas {
    position: absolute; inset: 0; z-index: -3;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1.6s ease;
}
.hero-stage__canvas.is-ready { opacity: 1; }
.hero-stage__shade {
    position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(70% 80% at 22% 58%, rgb(8 7 6 / 0.62) 0%, rgb(8 7 6 / 0.25) 55%, transparent 80%),
        linear-gradient(to top, rgb(8 7 6 / 0.7) 0%, transparent 35%),
        linear-gradient(to bottom, rgb(8 7 6 / 0.45) 0%, transparent 22%);
    pointer-events: none;
}
.hero-stage__grain {
    position: absolute; inset: -50%; z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    opacity: 0.07;
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-3%, 2%); }
    40% { transform: translate(2%, -3%); }
    60% { transform: translate(-2%, -1%); }
    80% { transform: translate(3%, 2%); }
}

.hero-stage__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.glass-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgb(12 10 8 / 0.5);
    border: 1px solid rgb(255 255 255 / 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em;
}
.glass-chip--gold { color: #ffd98a; }
.live-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgb(242 169 0 / 0.7);
    animation: pulse 2.2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgb(242 169 0 / 0.6); }
    70% { box-shadow: 0 0 0 10px rgb(242 169 0 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(242 169 0 / 0); }
}

.hero-stage__body {
    align-self: center;
    max-width: 1000px;
    padding-inline: clamp(4px, 3vw, 40px);
    will-change: transform, opacity;
}
.hero-kicker {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: clamp(18px, 2.4vw, 28px);
    font-family: var(--font-geo);
    font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--champagne);
}
.hero-kicker::before { content: ""; width: 44px; height: 1px; background: currentColor; opacity: 0.8; }
.hero-title {
    font-family: var(--font-geo);
    font-size: clamp(2.5rem, 0.9rem + 5.6vw, 6.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ivory);
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.04em; }
.hero-title .line__in { display: inline-block; }

/* Rotating gold word */
.rotator {
    display: inline-grid;
    vertical-align: bottom;
    overflow: hidden;
    padding-bottom: 0.08em; margin-bottom: -0.08em;
}
.rotator__word {
    grid-area: 1 / 1;
    font-weight: 400;
    background: linear-gradient(100deg, #a8741f 0%, #e3b75c 22%, #fff1c9 40%, #f0cf7f 55%, #b8862f 78%, #f3d58b 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: sheen 7s linear infinite;
    translate: 0 105%;
    opacity: 0;
    transition: translate 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease;
}
.rotator__word.is-active { translate: 0 0; opacity: 1; }
.rotator__word.is-leaving { translate: 0 -105%; opacity: 0; }
@keyframes sheen { to { background-position: -240% 0; } }

.hero-lede {
    margin-top: clamp(18px, 2vw, 26px);
    max-width: 46ch;
    color: rgb(247 242 232 / 0.8);
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
    line-height: 1.55;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

.hero-stage__bottom {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap;
    padding-inline: clamp(4px, 3vw, 40px);
    padding-top: 18px;
    border-top: 1px solid rgb(255 255 255 / 0.12);
}
.clocks { display: flex; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; }
.clock { display: grid; gap: 2px; }
.clock__city { font-family: var(--font-geo); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(247 242 232 / 0.62); }
.clock__time { font-family: var(--font-geo); font-size: 1.375rem; font-weight: 300; color: var(--ivory); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.clock__time .colon { animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.hero-scroll {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-geo); font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0.28em; text-transform: uppercase; color: rgb(247 242 232 / 0.75);
}
.hero-scroll__line { position: relative; width: 56px; height: 1px; background: rgb(255 255 255 / 0.25); overflow: hidden; }
.hero-scroll__line::after { content: ""; position: absolute; inset: 0; background: var(--accent); translate: -100% 0; animation: scroll-line 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes scroll-line { 0% { translate: -100% 0; } 50% { translate: 0 0; } 100% { translate: 100% 0; } }

.btn--glass { --btn-bg: rgb(255 255 255 / 0.08); --btn-fg: #ffffff; --btn-border: rgb(255 255 255 / 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--glass:hover { --btn-bg: rgb(255 255 255 / 0.16); --btn-border: rgb(255 255 255 / 0.5); }

/* Load sequence (only when JS runs; everything is visible without it) */
.js .hero-title .line__in { translate: 0 110%; transition: translate 1.4s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: calc(var(--d, 0) * 0.13s + 0.15s); }
.js .hero-anim { opacity: 0; translate: 0 18px; transition: opacity 1.1s ease, translate 1.2s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: calc(var(--d, 0) * 0.12s + 0.35s); }
.js.hero-in .hero-title .line__in, .js.hero-in .hero-anim { translate: none; opacity: 1; }

@media (max-width: 760px) {
    .hero-stage { min-height: 600px; }
    .hero-kicker { letter-spacing: 0.2em; font-size: 0.6875rem; gap: 10px; }
    .hero-kicker::before { width: 24px; }
    .hero-scroll { display: none; }
    .clock__time { font-size: 1.125rem; }
    .hide-below-md { display: none !important; }
}

/* ---------- Intro curtain (first visit per session) ---------- */
.intro { display: none; }
.intro-on .intro {
    position: fixed; inset: 0; z-index: 1000;
    display: flex;
    background: #0b0a09; color: #f7f2e8;
    transition: translate 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}
.intro-on body { overflow: hidden; }
.intro.is-done { translate: 0 -100%; }
.intro__inner { margin: auto; display: flex; align-items: flex-end; gap: clamp(10px, 2vw, 22px); }
.intro__word { display: block; overflow: hidden; }
.intro__word-in {
    display: block;
    font-family: var(--font-geo); font-weight: 300;
    font-size: clamp(3rem, 12vw, 9rem); line-height: 1;
    letter-spacing: 0.2em; margin-right: -0.2em;
    translate: 0 105%;
    animation: intro-rise 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0.1s forwards;
}
@keyframes intro-rise { to { translate: 0 0; } }
.intro__count { min-width: 3ch; padding-bottom: 0.9em; font-family: var(--font-geo); font-size: 0.8125rem; letter-spacing: 0.2em; color: #ecd9ab; font-variant-numeric: tabular-nums; }
.intro__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(255 255 255 / 0.08); }
.intro__bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: 2px; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, #b8862f, var(--accent), #ffe08a); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Floating artefacts */
.artifacts {
    display: flex; justify-content: center; gap: clamp(10px, 2vw, 22px);
    padding: 34px 4px 10px;
    will-change: transform;
}
.artifact {
    flex: 0 0 auto;
    animation: float 5s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.8s);
}
.artifact:nth-child(odd) { margin-top: 18px; }
@keyframes float {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
.artifact__card {
    position: relative; display: block;
    width: clamp(120px, 13vw, 176px);
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #111;
    border: 1px solid rgb(255 255 255 / 0.08);
    box-shadow: var(--shadow-md);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
    text-align: left;
}
.artifact__card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.88) 0%, rgb(0 0 0 / 0.15) 55%, transparent 75%);
}
.artifact__card:hover { transform: translateY(-8px) scale(1.04); box-shadow: var(--shadow-lg); }
.artifact__img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s var(--ease-out);
}
.artifact__card:hover .artifact__img { transform: scale(1.1); }
.artifact__tag {
    position: absolute; top: 10px; left: 10px; z-index: 1;
    padding: 3px 8px; border-radius: 999px;
    background: rgb(0 0 0 / 0.72);
    color: #ffd166;
    font-size: 0.6875rem; font-weight: 600;
}
.artifact__label {
    position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1;
    color: #ffffff;
    font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; line-height: 1.15;
}
@media (max-width: 980px) {
    .artifacts { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; scrollbar-width: none; }
    .artifacts::-webkit-scrollbar { display: none; }
    .artifact { scroll-snap-align: start; animation: none; }
    .artifact:nth-child(odd) { margin-top: 0; }
}

/* Purpose / Human / Creative — split-line reveal.
   Each word is drawn twice: the top band shows its upper half, the bottom band
   its lower half. JS sets --t / --b (0 = in place, 1 = hidden) from scroll
   position, so the halves slide in separately and lock together mid-screen. */
.manifesto { position: relative; isolation: isolate; padding-top: clamp(64px, 9vw, 120px); }
/* Quiet the 3D wave behind the words so the type reads cleanly */
.manifesto::before {
    content: ""; position: absolute; z-index: -1;
    inset: 0 calc(var(--gutter) * -1) -40px;
    background: radial-gradient(ellipse 70% 62% at 50% 55%, var(--bg) 45%, color-mix(in srgb, var(--bg) 60%, transparent) 72%, transparent 100%);
    pointer-events: none;
}
.manifesto__kicker {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 0.35em 1.1em;
    margin-bottom: clamp(32px, 5vw, 64px);
    font-family: var(--font-geo);
    font-size: clamp(0.8125rem, 0.7rem + 0.45vw, 1.125rem);
    font-weight: 400;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--ink);
}
.manifesto__kicker > span { margin-right: -0.5em; } /* cancel trailing tracking so it centres */
.manifesto__mark { color: var(--accent-text); font-weight: 500; }

.manifesto__rows { display: grid; gap: clamp(2px, 0.8vw, 12px); }
.m-row { position: relative; display: flex; justify-content: center; }
.m-word {
    display: block;
    margin-right: -0.06em;
    font-family: var(--font-geo);
    font-size: var(--fs-word);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--word);
    user-select: none;
    pointer-events: none;
}
.m-word__band { display: block; height: 0.5em; overflow: hidden; }
.m-word__txt {
    display: block;
    line-height: 1;
    transform: translate3d(0, calc(var(--t, 0) * -0.56em), 0);
    will-change: transform;
}
.m-word__band--bot .m-word__txt {
    margin-top: -0.5em;
    transform: translate3d(0, calc(var(--b, 0) * 0.56em), 0);
}
.m-row__text {
    position: absolute;
    z-index: 1;
    max-width: 29ch;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1.65;
    opacity: calc(1 - var(--b, 0));
    transform: translate3d(0, calc(var(--b, 0) * 18px), 0);
}
.m-row--1 .m-row__text { left: 51%; top: 40%; }
.m-row--2 .m-row__text { left: 17%; top: 56%; }
.m-row--3 .m-row__text { left: 60%; top: -6%; }

.manifesto__more { display: flex; justify-content: center; margin-top: clamp(32px, 5vw, 56px); }
.know-more {
    padding-bottom: 7px;
    font-family: var(--font-geo);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink);
    background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat;
    transition: color 0.2s, background-size 0.4s var(--ease-out);
}
.know-more:hover { color: var(--accent-text); background-size: 55% 2px; }

@media (max-width: 900px) {
    .manifesto__kicker { gap: 0.3em 0.7em; letter-spacing: 0.3em; font-size: 0.75rem; }
    .manifesto__kicker > span { margin-right: -0.3em; }
    .m-row { flex-direction: column; align-items: center; }
    .m-row__text { position: static; margin: 10px auto 18px; max-width: 34ch; text-align: center; }
}

/* Ticker */
.marquee {
    display: block;
    margin-top: clamp(40px, 6vw, 64px);
    padding: 18px 0;
    background: #121214;
    color: #ffffff;
    overflow: hidden;
    border-block: 1px solid #2a2a2f;
}
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.motion-on .marquee__track { animation: none; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item {
    padding-inline: 26px;
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 0.9rem + 0.8vw, 1.5rem);
    font-weight: 700; letter-spacing: -0.01em;
    white-space: nowrap;
}
.marquee__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 12px rgb(242 169 0 / 0.9); }
@keyframes marquee { to { transform: translateX(-50%); } }

.scroll-cue-wrap { display: flex; justify-content: center; padding-block: 28px 8px; }
.scroll-cue {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    border: 1.5px solid var(--line);
    color: var(--ink); font-size: var(--fs-sm); font-weight: 600;
    transition: border-color 0.2s;
}
.scroll-cue:hover { border-color: var(--ink); }
.scroll-cue .icon { color: var(--accent-text); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(56px, 7vw, 96px); }
.section--rule { border-top: 1px solid var(--line); }

.section-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px;
    flex-wrap: wrap;
    margin-bottom: clamp(32px, 4vw, 52px);
}
.section-head--stack { display: block; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
    color: var(--accent-text);
    font-family: var(--font-geo);
    font-size: var(--fs-xs); font-weight: 500;
    letter-spacing: 0.26em; text-transform: uppercase;
}
.section-title { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.035em; max-width: 18ch; }
.section-lede { margin-top: 16px; max-width: 60ch; color: var(--muted); font-size: var(--fs-lg); line-height: 1.5; }
.section-lede--side { margin-top: 0; max-width: 46ch; font-size: var(--fs-base); }

.marker {
    position: relative; white-space: nowrap; z-index: 0;
}
.marker::after {
    content: ""; position: absolute; z-index: -1;
    left: -0.05em; right: -0.05em; bottom: 0.08em; height: 0.32em;
    background: var(--accent);
    border-radius: 3px;
    transform: rotate(-1deg);
}
[data-theme="dark"] .marker::after { opacity: 0.85; }

/* ---------- Accordion ---------- */
.accordion {
    display: flex; gap: 10px;
    height: 560px;
    padding: 10px;
    border-radius: var(--r-xl);
    background: var(--bg-alt);
    border: 1px solid var(--line);
}
.acc-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #0b0b0d;
    transition: flex-grow 0.95s cubic-bezier(0.65, 0.05, 0.36, 1);
    isolation: isolate;
}
.acc-item.is-active { flex-grow: 7; box-shadow: var(--shadow-md); }
.acc-item__img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.45) saturate(0.9);
    transform: scale(1.12);
    transition: filter 0.8s ease, transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.acc-item:hover .acc-item__img { filter: brightness(0.62); }
.acc-item.is-active .acc-item__img { filter: none; transform: scale(1); }
.acc-item__shade {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgb(6 6 8 / 0.95) 0%, rgb(6 6 8 / 0.55) 40%, rgb(6 6 8 / 0.1) 75%, rgb(6 6 8 / 0.3) 100%);
    opacity: 0; transition: opacity 0.5s;
}
.acc-item.is-active .acc-item__shade { opacity: 1; }

.acc-item__trigger {
    position: absolute; inset: 0; z-index: 2;
    display: grid; place-items: center;
    color: #ffffff;
    border-radius: inherit;
}
.acc-item.is-active .acc-item__trigger { pointer-events: none; }
.acc-item__label {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.01em;
    white-space: nowrap;
    transition: opacity 0.3s;
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.6);
}
.acc-item.is-active .acc-item__label { opacity: 0; }

.acc-item__panel {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(20px, 3vw, 36px);
    color: #ffffff;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s 0s, visibility 0s 0.4s;
}
.acc-item.is-active .acc-item__panel { opacity: 1; visibility: visible; transition: opacity 0.5s 0.25s, visibility 0s 0s; }
.acc-item__meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); font-weight: 600; }
.acc-item__cat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: rgb(0 0 0 / 0.55); color: #ffd166;
    backdrop-filter: blur(6px);
}
.acc-item__cat .icon { width: 13px; height: 13px; }
.acc-item__year { padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / 0.55); color: #ffffff; font-variant-numeric: tabular-nums; }
.acc-item__body { max-width: 600px; }
.acc-item__client { color: #ffd166; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; }
.acc-item__title { color: #ffffff; font-size: var(--fs-2xl); font-weight: 800; margin-bottom: 12px; }
.acc-item__desc {
    color: #ececea; font-size: var(--fs-sm); line-height: 1.6; max-width: 58ch;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 22px;
}
.acc-item__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.acc-item__deliv { color: #d4d4cf; font-size: var(--fs-xs); }

@media (max-width: 900px) {
    .accordion { flex-direction: column; height: 760px; }
    .acc-item.is-active { flex-grow: 9; }
    .acc-item__label { writing-mode: horizontal-tb; transform: none; }
    .acc-item__desc { -webkit-line-clamp: 2; }
    .acc-item__deliv { display: none; }
}

/* ---------- Gallery ---------- */
.filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 12px;
    margin-bottom: 36px;
    border-radius: var(--r-lg);
    background: var(--bg-alt);
    border: 1px solid var(--line);
}
.search-field, .select-field {
    display: flex; align-items: center; gap: 10px;
    height: 46px;
    padding-inline: 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    color: var(--muted);
    transition: border-color 0.2s;
}
.search-field { flex: 1 1 260px; }
.search-field:focus-within, .select-field:focus-within { border-color: var(--ink); }
.search-field input, .select-field select {
    flex: 1; min-width: 0; height: 100%;
    border: 0; outline: 0; background: transparent;
    color: var(--ink); font-size: var(--fs-sm); font-weight: 500;
}
.search-field input::placeholder { color: var(--muted); opacity: 1; }
.select-field select { cursor: pointer; padding-right: 4px; }
.select-field option { background: var(--surface); color: var(--ink); }

.segmented {
    display: flex; gap: 4px; padding: 4px;
    border-radius: 999px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
    max-width: 100%;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented__btn {
    padding: 8px 14px; border-radius: 999px;
    color: var(--muted); font-size: var(--fs-xs); font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
.segmented__btn:hover { color: var(--ink); }
.segmented__btn.is-active { background: var(--ink); color: var(--bg); }

.empty-state {
    display: grid; justify-items: center; gap: 14px;
    padding: 64px 20px; margin-bottom: 24px;
    border: 1.5px dashed var(--line); border-radius: var(--r-lg);
    color: var(--ink); font-weight: 500;
}
.empty-state[hidden] { display: none; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .card-grid { grid-template-columns: 1fr; } }
.work-card[hidden] { display: none; }

.work-card__inner {
    display: flex; flex-direction: column; width: 100%; height: 100%;
    text-align: left;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out, box-shadow 0.3s, border-color 0.3s;
}
.work-card__inner:hover { box-shadow: var(--shadow-lg); border-color: transparent; }
.work-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0b0b0d; }
.work-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.work-card__inner:hover .work-card__img { transform: scale(1.06); }
.work-card__hover {
    position: absolute; inset: auto 0 0 0;
    display: flex; align-items: center; gap: 6px;
    padding: 40px 18px 16px;
    background: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent);
    color: #ffffff; font-size: var(--fs-xs); font-weight: 600;
    opacity: 0; transition: opacity 0.3s;
}
.work-card__inner:hover .work-card__hover, .work-card__inner:focus-visible .work-card__hover { opacity: 1; }
.work-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 18px; }
.work-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.work-card__cat { color: var(--accent-text); }
.work-card__year { font-variant-numeric: tabular-nums; margin-left: auto; }
.work-card__title {
    display: block; margin-bottom: 8px;
    font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
    color: var(--ink);
}
.work-card__tagline { display: block; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.work-card__foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin-top: auto; padding-top: 16px;
    border-top: 1px solid var(--line);
    margin-block-start: 18px;
    color: var(--muted); font-size: var(--fs-xs); font-weight: 600;
}
.work-card__foot .icon { color: var(--accent-text); transition: transform 0.25s var(--ease-out); }
.work-card__inner:hover .work-card__foot .icon { transform: translateX(4px); }

/* ---------- Disciplines ---------- */
.disc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) { .disc-grid { grid-template-columns: 1fr; } }
.disc-card {
    display: flex; flex-direction: column;
    padding: clamp(24px, 3vw, 36px);
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1.5px solid var(--line);
    transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.disc-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.disc-card__icon {
    display: grid; place-items: center;
    width: 52px; height: 52px; margin-bottom: 28px;
    border-radius: 16px;
    background: var(--accent-soft); color: var(--accent-text);
}
.disc-card__icon .icon { width: 24px; height: 24px; }
.disc-card__title { font-size: var(--fs-2xl); font-weight: 700; margin-bottom: 8px; }
.disc-card__tagline { color: var(--accent-text); font-weight: 600; font-size: var(--fs-sm); margin-bottom: 16px; }
.disc-card__desc { color: var(--ink-2); font-size: var(--fs-base); line-height: 1.65; margin-bottom: 24px; max-width: 60ch; }
.disc-card__proof {
    display: flex; align-items: center; gap: 10px;
    margin-top: auto; padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--ink); font-size: var(--fs-sm); font-weight: 600;
}
.disc-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---------- 3D sphere ---------- */
.sphere-stage {
    position: relative;
    height: clamp(520px, 62vw, 660px);
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    background:
        radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
        var(--bg-alt);
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}
.sphere-stage.is-dragging { cursor: grabbing; }
.sphere-ring {
    position: absolute; left: 50%; top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.sphere-ring--outer { width: min(88%, 480px); aspect-ratio: 1; border: 1.5px dashed var(--line-strong); opacity: 0.35; animation: spin 80s linear infinite; }
.sphere-ring--inner { width: min(62%, 340px); aspect-ratio: 1; border: 1px solid var(--line-strong); opacity: 0.2; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.sphere-hint {
    position: absolute; top: 18px; left: 18px; z-index: 600;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600;
    pointer-events: none;
}
.sphere-hint .icon { color: var(--accent-text); }

/* No-JS fallback: a simple wrapped grid */
.sphere-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 80px 20px 20px; height: 100%; overflow: auto; }
.sphere-card {
    position: relative; display: block;
    width: 132px; aspect-ratio: 4 / 5;
    border-radius: 16px; overflow: hidden;
    background: #0b0b0d;
    border: 1px solid rgb(255 255 255 / 0.14);
    box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.55);
    text-align: left;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.sphere-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.1) 60%, transparent); }
.sphere-card__img { width: 100%; height: 100%; object-fit: cover; }
.sphere-card__text { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; display: grid; gap: 2px; }
.sphere-card__client { color: #ffd166; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sphere-card__title { color: #ffffff; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; line-height: 1.15; }
.sphere-card:hover, .sphere-card:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 18px 40px -10px rgb(242 169 0 / 0.5); }

/* JS-enhanced 3D mode */
.sphere-stage.is-3d .sphere-list { display: block; padding: 0; overflow: visible; }
.sphere-stage.is-3d .sphere-item {
    position: absolute; left: 50%; top: 50%;
    will-change: transform, opacity;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding-block: clamp(56px, 8vw, 96px) 32px;
}
.footer-cta {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px 64px; align-items: end;
    padding-bottom: clamp(48px, 6vw, 72px);
    border-bottom: 1px solid var(--line);
}
.footer-cta__title { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.035em; max-width: 16ch; }
.footer-cta__side { display: grid; gap: 22px; justify-items: start; }
.footer-cta__side p { color: var(--muted); max-width: 40ch; }
@media (max-width: 860px) { .footer-cta { grid-template-columns: 1fr; } }

.notice {
    display: flex; align-items: center; gap: 10px;
    margin-top: 24px; padding: 14px 18px; border-radius: var(--r-md);
    font-weight: 600; font-size: var(--fs-sm);
}
.notice--ok { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.notice--error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.footer-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px;
    padding-block: clamp(40px, 5vw, 64px);
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand__name { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 10px; }
.footer-brand__text { color: var(--muted); max-width: 36ch; font-size: var(--fs-sm); }
.footer-brand__status { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 4px rgb(18 183 106 / 0.18); }
.footer-col__title { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; color: var(--ink); margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col li, .footer-col a { color: var(--ink-2); font-size: var(--fs-sm); }
.footer-col a { display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent-text); }
.footer-col .icon { color: var(--muted); }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-top: 24px; border-top: 1px solid var(--line);
    color: var(--muted); font-size: var(--fs-xs);
}

/* ---------- Modals ---------- */
.modal {
    width: min(960px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-xl);
    background: var(--surface);
    color: var(--ink-2);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.modal::backdrop { background: rgb(6 6 8 / 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[open] { animation: modal-in 0.4s var(--ease-out); }
.modal[open]::backdrop { animation: fade-in 0.3s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
.modal__frame { position: relative; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.modal__close {
    position: absolute; top: 16px; right: 16px; z-index: 5;
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 999px;
    background: rgb(0 0 0 / 0.6); color: #ffffff;
    backdrop-filter: blur(6px);
    transition: background-color 0.2s;
}
.modal__close:hover { background: rgb(0 0 0 / 0.85); }
.modal__close--plain { background: var(--surface-2); color: var(--ink); }
.modal__close--plain:hover { background: var(--line); }
body.modal-open { overflow: hidden; }

/* Case study */
.case-hero { position: relative; aspect-ratio: 16 / 9; background: #0b0b0d; overflow: hidden; }
.case-hero img { width: 100%; height: 100%; object-fit: cover; }
.case-hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(6 6 8 / 0.95), rgb(6 6 8 / 0.55) 40%, rgb(6 6 8 / 0.05) 75%); }
.case-hero__text { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 4vw, 40px); }
.case-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; color: #ffd166; font-size: var(--fs-sm); font-weight: 600; }
.case-hero__title { color: #ffffff; font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.035em; }
.case-body { display: grid; gap: 36px; padding: clamp(24px, 4vw, 44px); }
.case-h3 { font-size: var(--fs-2xl); margin-bottom: 12px; }
.case-lede { color: var(--ink-2); font-size: var(--fs-lg); line-height: 1.6; max-width: 65ch; }
.case-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
    padding: 26px; border-radius: var(--r-lg);
    background: var(--surface-2); border: 1px solid var(--line);
}
@media (max-width: 640px) { .case-split { grid-template-columns: 1fr; } }
.case-label { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; color: var(--accent-text); margin-bottom: 10px; }
.case-quote { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.case-list { display: grid; gap: 8px; }
.case-list li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; }
.case-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.case-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.case-hint { color: var(--muted); font-size: var(--fs-xs); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.swatch {
    display: grid; gap: 4px; padding: 8px 8px 12px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--line);
    background: var(--surface);
    text-align: left;
    transition: border-color 0.2s, transform 0.2s;
}
.swatch:hover { border-color: var(--ink); transform: translateY(-2px); }
.swatch__chip { display: grid; place-items: center; height: 64px; margin-bottom: 6px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.swatch__chip .icon { opacity: 0; transition: opacity 0.2s; }
.swatch:hover .swatch__chip .icon, .swatch.is-copied .swatch__chip .icon { opacity: 1; }
.swatch__name { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; padding-inline: 4px; }
.swatch__hex { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-xs); padding-inline: 4px; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.type-card { padding: 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.type-card__role { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; margin-bottom: 4px; }
.type-card__family { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; }
.case-impact { padding: 24px; border-radius: var(--r-lg); background: var(--accent-soft); }
.case-impact .case-label { color: var(--accent-text); }
[data-theme="light"] .case-impact .case-label { color: #6b3e00; }
.case-impact__text { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.case-testimonial { margin: 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--accent); }
.case-testimonial p { color: var(--ink); font-size: var(--fs-lg); line-height: 1.55; font-weight: 500; }
.case-testimonial footer { margin-top: 10px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.case-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.case-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.flip { display: inline-flex; }
.flip .icon { transform: rotate(180deg); }
.btn:hover .flip .icon { transform: rotate(180deg) translateX(2px); }
[hidden] { display: none !important; }

/* Inquiry form */
.modal--form { width: min(720px, calc(100vw - 24px)); }
.inquiry, .inquiry-done { padding: clamp(24px, 5vw, 48px); }
.inquiry__title { font-size: var(--fs-2xl); font-weight: 800; margin-bottom: 8px; padding-right: 48px; }
.inquiry__lede { color: var(--muted); margin-bottom: 28px; max-width: 52ch; }
.inquiry-done { text-align: center; display: grid; justify-items: center; }
.inquiry-done .inquiry__title { padding-right: 0; }
.inquiry-done__icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 18px; border-radius: 50%; background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.inquiry-done__icon .icon { width: 34px; height: 34px; }
.inquiry-done strong { color: var(--ink); }

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__row--3 { grid-template-columns: 1.25fr 1.1fr 0.85fr; gap: 14px; }
.form__row--3 select { font-size: var(--fs-sm); padding-left: 12px; padding-right: 34px; background-position: right 10px center; }
@media (max-width: 640px) { .form__row, .form__row--3 { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .field__label-row label { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.field__label-row { display: flex; justify-content: space-between; align-items: baseline; }
.field__count { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--line);
    background: var(--surface-2);
    color: var(--ink);
    font-size: var(--fs-base);
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.field select {
    appearance: none; -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.field option { background: var(--surface); color: var(--ink); }
.field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.85; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--ink); background: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: var(--fs-xs); font-weight: 600; min-height: 0; }
.field__error:empty { display: none; }
.form__alert { padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.form__actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px; flex-wrap: wrap; }
.form__actions--center { justify-content: center; margin-top: 8px; }
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Audio dock ---------- */
.audio-dock {
    position: fixed; right: 20px; bottom: 20px; z-index: 50;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.audio-dock__bar { display: flex; align-items: center; gap: 8px; padding: 8px; }
.audio-dock__viz { width: 100px; height: 32px; border-radius: 8px; background: var(--surface-2); }
.audio-dock__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding-inline: 12px;
    border-radius: 999px;
    background: var(--surface-2); color: var(--ink);
    font-size: var(--fs-xs); font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}
.audio-dock__toggle:hover { background: var(--line); }
.audio-dock__toggle[aria-pressed="true"] { background: var(--accent); color: #121214; }
.audio-dock__on { display: none; }
.audio-dock__toggle[aria-pressed="true"] .audio-dock__on { display: block; }
.audio-dock__toggle[aria-pressed="true"] .audio-dock__off { display: none; }
.audio-dock__panel { display: grid; gap: 12px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.audio-dock__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; }
.audio-dock__row input[type="range"] { width: 110px; accent-color: var(--accent); }
.audio-dock__row output { width: 3.2ch; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.mini-seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.mini-seg button { display: grid; place-items: center; width: 32px; height: 28px; border-radius: 7px; color: var(--muted); }
.mini-seg button:hover { color: var(--ink); }
.mini-seg button.is-active { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-sm); }
.mini-seg .icon { width: 15px; height: 15px; }
@media (max-width: 560px) {
    .audio-dock { right: 12px; bottom: 12px; }
    .audio-dock__label { display: none; }
    .audio-dock__viz { width: 64px; }
}

/* ---------- Custom cursor (fine pointers only) ---------- */
.cursor { display: none; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .cursor.is-on { display: block; }
    .cursor__dot, .cursor__ring {
        position: fixed; left: 0; top: 0; z-index: 9999;
        border-radius: 50%; pointer-events: none;
        will-change: transform;
    }
    .cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); }
    .cursor__ring {
        width: 34px; height: 34px; margin: -17px 0 0 -17px;
        border: 1.5px solid color-mix(in srgb, var(--accent) 85%, transparent);
        transition: width 0.35s cubic-bezier(0.19, 1, 0.22, 1), height 0.35s cubic-bezier(0.19, 1, 0.22, 1), margin 0.35s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.25s, border-color 0.25s;
    }
    .cursor.is-hover .cursor__ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgb(242 169 0 / 0.12); }
    .cursor.is-down .cursor__ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
    .cursor__label {
        position: absolute; inset: 0; display: grid; place-items: center;
        font-family: var(--font-geo); font-size: 0.625rem; font-weight: 600;
        letter-spacing: 0.18em; text-transform: uppercase; color: #121214;
        opacity: 0; transition: opacity 0.2s;
    }
    .cursor.has-label .cursor__ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--accent); border-color: var(--accent); }
    .cursor.has-label .cursor__label { opacity: 1; }
    .cursor.has-label .cursor__dot { opacity: 0; }
}



/* ---------- Content additions ---------- */
.hero-lede strong { color: #ffffff; font-weight: 600; }
.hero-meta { display: flex; align-items: flex-end; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; }
.hero-serving { font-family: var(--font-geo); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(247 242 232 / 0.7); padding-bottom: 4px; }
.section-lede strong, .disc-card__desc strong, .service-card__text strong { font-weight: 600; color: var(--ink); }

/* Floating service cards under the hero */
.svc-card {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    width: clamp(150px, 15.5vw, 214px);
    aspect-ratio: 4 / 5;
    padding: 16px;
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 80% at 100% 0%, rgb(242 169 0 / 0.18), transparent 55%),
        linear-gradient(165deg, #1b1915, #0d0c0b);
    border: 1px solid rgb(236 217 171 / 0.14);
    box-shadow: var(--shadow-md);
    color: #f7f2e8;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.45s, border-color 0.3s;
}
.svc-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgb(255 240 200 / 0.14) 48%, transparent 62%);
    translate: -120% 0;
    transition: translate 0.9s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgb(236 217 171 / 0.4); }
.svc-card:hover::after { translate: 120% 0; }
.svc-card__icon {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: rgb(242 169 0 / 0.14); color: #ffcf5c;
    border: 1px solid rgb(242 169 0 / 0.3);
}
.svc-card__icon .icon { width: 20px; height: 20px; }
.svc-card__text { display: grid; gap: 6px; }
.svc-card__title { font-family: var(--font-display); font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.0625rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #ffffff; }
.svc-card__sub { font-family: var(--font-geo); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #ecd9ab; line-height: 1.4; }
.svc-card__arrow { position: absolute; top: 16px; right: 16px; color: rgb(247 242 232 / 0.5); transition: color 0.3s, transform 0.3s; }
.svc-card__arrow .icon { width: 16px; height: 16px; }
.svc-card:hover .svc-card__arrow { color: #ffcf5c; transform: translate(2px, -2px); }

/* What we do */
.services { padding-top: clamp(72px, 9vw, 120px); scroll-margin-top: 84px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
    display: flex; flex-direction: column;
    padding: clamp(24px, 2.6vw, 32px);
    border-radius: var(--r-xl);
    background:
        radial-gradient(100% 70% at 100% 0%, rgb(242 169 0 / 0.12), transparent 60%),
        #141311;
    color: #f7f2e8;
    border: 1px solid rgb(255 255 255 / 0.06);
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.3s;
}
.service-card:hover { transform: translateY(-6px); border-color: rgb(242 169 0 / 0.55); }
.service-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 28px; }
.service-card__num { font-family: var(--font-geo); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; color: #ffc53d; }
.service-card__tag { padding: 4px 10px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.16); font-family: var(--font-geo); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #d9d6cf; }
.service-card__title { font-family: var(--font-geo); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; color: #ffffff; margin-bottom: 14px; }
.service-card__text { color: #cfcbc2; font-size: var(--fs-sm); line-height: 1.65; }
.service-card__text strong { color: #ffe3a3; }
.services .stats { margin-top: clamp(56px, 7vw, 88px); }

/* Branded gradient tile used when a project has no photo */
.pv {
    position: relative; display: block;
    width: 100%; height: 100%;
    overflow: hidden;
    container-type: size;
    background:
        radial-gradient(70% 65% at 22% 18%, color-mix(in srgb, var(--pa) 80%, transparent), transparent 72%),
        radial-gradient(65% 60% at 88% 92%, color-mix(in srgb, var(--pb) 70%, transparent), transparent 70%),
        linear-gradient(160deg, #16140f, #0a0908);
}
.pv::before {
    content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    opacity: 0.12; mix-blend-mode: overlay;
}
.pv__ring {
    position: absolute; left: 62%; top: 38%;
    width: 70cqmin; aspect-ratio: 1; translate: -50% -50%;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.22);
    box-shadow: 0 0 0 7cqmin rgb(255 255 255 / 0.03), 0 0 0 16cqmin rgb(255 255 255 / 0.025);
}
.pv__name {
    position: absolute; left: 7%; bottom: 8%;
    font-family: var(--font-geo); font-weight: 300;
    font-size: min(16cqw, calc(150cqw / var(--len, 8)));
    line-height: 1; letter-spacing: 0.02em;
    text-transform: uppercase; white-space: nowrap;
    color: rgb(255 255 255 / 0.2);
}
.case-pv { position: absolute; inset: 0; }
.sphere-card .pv__name, .acc-item .pv__name { display: none; }

/* Sphere: service cards */
.sphere-card--service { background: linear-gradient(165deg, #1b1915, #0d0c0b); border-color: rgb(236 217 171 / 0.2); }
.sphere-card--service::after { background: none; }
.sphere-card__icon { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(242 169 0 / 0.14); color: #ffcf5c; }
.sphere-card__icon .icon { width: 17px; height: 17px; }
.sphere-card--service .sphere-card__title { font-size: 0.8125rem; }

.case-split--single { grid-template-columns: 1fr; }
.work-card__tagline { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
button.text-link { cursor: pointer; }


/* ---------- Real images (designed crops) ---------- */
/* Featured slider: designed "open" and "closed" crops cross-fade */
.acc-item.has-media .acc-item__img { filter: none; transform: none; transition: opacity 0.7s ease, filter 0.6s ease; }
.acc-item.has-media .acc-item__img--open { opacity: 0; }
.acc-item.has-media .acc-item__img--closed { opacity: 1; filter: brightness(0.62) saturate(0.95); }
.acc-item.has-media:hover .acc-item__img--closed { filter: brightness(0.85); }
.acc-item.has-media.is-active .acc-item__img--open { opacity: 1; }
.acc-item.has-media.is-active .acc-item__img--closed { opacity: 0; }
.acc-item.has-media .acc-item__label { text-shadow: 0 1px 2px rgb(0 0 0 / 0.7), 0 0 18px rgb(0 0 0 / 0.6); }
.acc-item.has-media.is-active .acc-item__shade {
    background: linear-gradient(to top, rgb(6 6 8 / 0.9) 0%, rgb(6 6 8 / 0.5) 22%, rgb(6 6 8 / 0) 40%);
}
/* Keep the client's artwork visible: compact caption on image panels */
.acc-item.has-media .acc-item__desc, .acc-item.has-media .acc-item__deliv { display: none; }
.acc-item.has-media .acc-item__title { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); margin-bottom: 14px; }
.acc-item.has-media .acc-item__client { margin-bottom: 2px; }
.acc-item.has-media .acc-item__panel { padding: clamp(16px, 2.2vw, 26px); }

/* Service cards with artwork */
.svc-card--img { padding: 14px; background: #0d0c0b; }
.svc-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1); }
.svc-card--img:hover .svc-card__bg { transform: scale(1.06); }
.svc-card__scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgb(8 7 6 / 0.94) 0%, rgb(8 7 6 / 0.55) 38%, rgb(8 7 6 / 0) 62%); }
.svc-card--img .svc-card__text, .svc-card--img .svc-card__arrow { position: relative; z-index: 1; }
.svc-card--img .svc-card__text { margin-top: auto; }
.svc-card--img .svc-card__arrow { position: absolute; color: #ffffff; background: rgb(0 0 0 / 0.45); border-radius: 999px; padding: 5px; top: 12px; right: 12px; }
.svc-card--img::after { z-index: 1; }

/* Sphere: reel cards */
.sphere-card--reel { aspect-ratio: 9 / 16; }
.sphere-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b0b0d; }
.sphere-card__play {
    position: absolute; left: 50%; top: 44%; z-index: 2;
    display: grid; place-items: center;
    width: 38px; height: 38px; translate: -50% -50%;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.22); border: 1px solid rgb(255 255 255 / 0.5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    transition: background-color 0.25s, transform 0.25s;
}
.sphere-card__play .icon { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }
.sphere-card--reel:hover .sphere-card__play { background: var(--accent); border-color: var(--accent); color: #121214; transform: scale(1.1); }
.sphere-card--svcimg .sphere-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sphere-card--svcimg::after { background: linear-gradient(to top, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.1) 60%, transparent); }

/* Reel player */
.modal--reel { width: fit-content; max-width: calc(100vw - 24px); background: #0b0a09; overflow: visible; }
.reel-player { position: relative; display: grid; gap: 10px; padding: 10px; }
.reel-player__frame { height: min(80dvh, 820px); aspect-ratio: 9 / 16; max-width: calc(100vw - 44px); border-radius: 16px; overflow: hidden; background: #000; }
.reel-player__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.reel-player__bar { display: flex; justify-content: center; align-items: center; gap: 18px; color: #f7f2e8; }
.reel-player__nav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.25); color: #ffffff; transition: background-color 0.2s, border-color 0.2s; }
.reel-player__nav:hover { background: var(--accent); border-color: var(--accent); color: #121214; }
.reel-player__count { font-family: var(--font-geo); font-size: 0.8125rem; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.modal--reel .modal__close { top: 18px; right: 18px; }

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- Scroll reveals (JS adds .is-visible) ---------- */
.js [data-reveal] {
    opacity: 0;
    translate: 0 44px;
    transition: opacity 1s ease, translate 1.3s cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: calc(var(--ri, 0) * 90ms);
}
.js [data-reveal].is-visible { opacity: 1; translate: none; }

/* Headline words rise out of a mask */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.w__i { display: inline-block; }
.js [data-words] .w__i { translate: 0 108%; transition: translate 1.2s cubic-bezier(0.19, 1, 0.22, 1); transition-delay: calc(var(--wi, 0) * 55ms); }
.js [data-words].is-visible .w__i { translate: none; }
.js [data-words] .marker::after { transform: rotate(-1deg) scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0.45s; }
.js [data-words].is-visible .marker::after { transform: rotate(-1deg) scaleX(1); }

/* Gallery filter: cards that come back in */
.work-card.is-entering { animation: card-in 0.8s cubic-bezier(0.19, 1, 0.22, 1) both; animation-delay: calc(var(--fi, 0) * 60ms); }
@keyframes card-in { from { opacity: 0; scale: 0.96; translate: 0 24px; } }

/* ---------- Studio numbers ---------- */
.stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    max-width: 1040px;
    margin: clamp(56px, 8vw, 104px) auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column-reverse; gap: 8px; }
.stat__value {
    margin: 0;
    font-family: var(--font-geo); font-weight: 300;
    font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.5rem);
    line-height: 1; letter-spacing: -0.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.stat__label { font-family: var(--font-geo); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; } }

/* ---------- Copy email ---------- */
.copy-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted); font-size: 0.72rem; font-weight: 600;
    transition: color 0.2s, border-color 0.2s;
}
.copy-btn:hover { color: var(--ink); border-color: var(--ink); }
.copy-btn .icon { width: 12px; height: 12px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .marquee__track { animation: none; }
    .js [data-reveal], .js [data-words] .w__i, .js .hero-anim, .js .hero-title .line__in { opacity: 1 !important; translate: none !important; }
    .hero-stage__grain { animation: none; }
}

/* Case study: cross-fade when stepping to the next/previous project */
.modal__frame { transition: opacity 0.22s ease, translate 0.22s ease; }
.modal__frame.is-switching { opacity: 0; translate: 0 10px; }