/* =============================================================
   Product Studio at CODE — Light theme
   Tokens taken 1:1 from code.berlin's design system:
   – DM Sans Variable + DM Mono
   – Brand accents (Lime / Mint / Orchid / Pumpkin / Rose)
   – Neutral scale (white → black, 10 stops)
   – Heading weight 400 with -0.02em scaled letter-spacing
   – Sharp 2–4 px corners (no pills)
   ============================================================= */

:root {
    /* ---- Brand accents (rgba per code.berlin) ---- */
    --color-tokens-accent-lime:    rgba(201, 254, 110, 1);
    --color-tokens-accent-mint:    rgba(51, 222, 123, 1);
    --color-tokens-accent-orchid:  rgba(129, 112, 239, 1);
    --color-tokens-accent-pumpkin: rgba(237, 109, 45, 1);
    --color-tokens-accent-rose:    rgba(253, 115, 198, 1);

    /* Added — deep cobalt blue for masculine palette balance */
    --color-tokens-accent-blue:    rgba(63, 107, 245, 1);
    --color-tokens-accent-violet:  rgba(99, 80, 230, 1);

    /* ---- Neutral scale (raw R G B for use inside rgb(var(--x))) ---- */
    --color-tokens-neutral-white:     255 255 255;
    --color-tokens-neutral-neutral-1: 244 244 244;
    --color-tokens-neutral-neutral-2: 225 225 225;
    --color-tokens-neutral-neutral-3: 198 198 198;
    --color-tokens-neutral-neutral-4: 172 172 172;
    --color-tokens-neutral-neutral-5: 148 148 148;
    --color-tokens-neutral-neutral-6: 120 120 120;
    --color-tokens-neutral-neutral-7:  95  95  95;
    --color-tokens-neutral-neutral-8:  68  68  68;
    --color-tokens-neutral-neutral-9:  34  34  34;
    --color-tokens-neutral-neutral-10: 17  17  17;
    --color-tokens-neutral-black:       0   0   0;

    --color-tokens-translucent-dark:  rgba(17, 17, 17, 0.8);
    --color-tokens-translucent-white: rgba(244, 244, 244, 0.9);

    /* ---- Semantic colors ---- */
    --bg:           rgb(var(--color-tokens-neutral-white));
    --bg-alt:       rgb(var(--color-tokens-neutral-neutral-1));
    --bg-emph:      rgb(var(--color-tokens-neutral-neutral-10));
    --bg-black:     rgb(var(--color-tokens-neutral-black));

    --ink:          rgb(var(--color-tokens-neutral-black));
    --ink-1:        rgb(var(--color-tokens-neutral-neutral-9));   /* primary body */
    --ink-2:        rgb(var(--color-tokens-neutral-neutral-8));
    --ink-muted:    rgb(var(--color-tokens-neutral-neutral-7));
    --ink-soft:     rgb(var(--color-tokens-neutral-neutral-5));
    --ink-disabled: rgb(var(--color-tokens-neutral-neutral-3));

    --line:         rgb(var(--color-tokens-neutral-neutral-2));
    --line-emph:    rgb(var(--color-tokens-neutral-neutral-5));
    --line-strong:  rgb(var(--color-tokens-neutral-black));

    /* ---- Type ---- */
    --font-sans: "DM Sans", "DM Sans Variable", ui-sans-serif, system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-mono: "DM Mono", ui-monospace, monospace;

    /* Type scale — code.berlin values */
    --fs-h-4xl: clamp(60px, 9vw, 120px);
    --fs-h-2xl: clamp(44px, 5vw, 54px);
    --fs-h-xl:  28px;
    --fs-h-l:   24px;
    --fs-h-m:   20px;

    --fs-body-l: clamp(18px, 1.4vw, 20px);
    --fs-body-m: clamp(17px, 1.2vw, 18px);
    --fs-body-s: 16px;
    --fs-label:  14px;
    --fs-label-s: 12px;

    /* Letter-spacing — scaled per font-size like code.berlin */
    --ls-tight: -0.02em;

    /* ---- Layout / spacing ---- */
    --maxw: 1280px;
    --pad-x: clamp(20px, 4vw, 48px);
    --section-pad: clamp(72px, 10vw, 144px);

    /* ---- Radius (soft, rounded — own character, not strict code.berlin) ---- */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-pill: 9999px;

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 0.18s var(--ease);
    --t: 0.28s var(--ease);
}

/* =============================================================
   Base
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-1);
    font-family: var(--font-sans);
    font-size: var(--fs-body-m);
    line-height: 1.5;
    font-variation-settings: "wght" 400, "opsz" 14;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    overscroll-behavior: none;
}

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

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a   { color: inherit; text-decoration: none; }
ul, ol, h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

/* =============================================================
   Type (code.berlin scale — weight 400, negative letter-spacing scaled by size)
   ============================================================= */

.t-h-4xl,
.hero-title {
    font-size: var(--fs-h-4xl);
    line-height: 1.05;
    font-weight: 400;
    font-variation-settings: "wght" 400, "ital" 0;
    letter-spacing: var(--ls-tight);
    color: var(--ink);
}

.t-h-2xl,
.section-title {
    font-size: var(--fs-h-2xl);
    line-height: 1.1;
    font-weight: 400;
    font-variation-settings: "wght" 400, "ital" 0;
    letter-spacing: var(--ls-tight);
    color: var(--ink);
}

.t-h-xl  { font-size: var(--fs-h-xl); line-height: 1.2; font-weight: 400; letter-spacing: -0.015em; }
.t-h-l   { font-size: var(--fs-h-l);  line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; }
.t-h-m   { font-size: var(--fs-h-m);  line-height: 1.25; font-weight: 500; }

.t-body-l { font-size: var(--fs-body-l); line-height: 1.5; }
.t-body-m { font-size: var(--fs-body-m); line-height: 1.5; }
.t-body-s { font-size: var(--fs-body-s); line-height: 1.5; }

.t-label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    line-height: 1.4;
    letter-spacing: 0.04em;
    font-weight: 500;
    text-transform: uppercase;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-label-s);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 20px;
}

/* =============================================================
   Buttons (code.berlin style: sharp corners 4 px, weight 500)
   ============================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}

.btn-sm  { padding: 10px 16px; font-size: 14px; }
.btn-lg  { padding: 16px 26px; font-size: 16px; }

.btn-primary {
    background: var(--color-tokens-accent-lime);
    color: var(--ink);
    border-color: var(--color-tokens-accent-lime);
}
.btn-primary:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

.btn-dark {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.btn-dark:hover {
    background: transparent;
    color: var(--ink);
}

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

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    transition: opacity var(--t);
}
.btn-text:hover { opacity: 0.55; }

/* =============================================================
   Nav — full-width sticky banner (glass-blur across the top)
   ============================================================= */

.nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
                0 4px 20px -10px rgba(0, 0, 0, 0.08);
}

.nav-inner {
    width: 100%;
    /* widen on large screens so the bar reaches just before the // BUILD label */
    max-width: max(var(--maxw), 56vw);
    margin: 0 auto;
    padding: 22px var(--pad-x);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.nav-logo img { height: 57px; width: auto; }

.nav-links {
    display: flex;
    justify-content: center;
    gap: 28px;
}

.nav-links a {
    font-size: 15px;
    color: var(--ink-1);
    transition: color var(--t);
}
.nav-links a:hover { color: var(--ink); }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-link-secondary {
    font-size: 15px;
    color: var(--ink-muted);
    padding: 6px 10px;
}
.nav-link-secondary:hover { color: var(--ink); }

@media (max-width: 760px) {
    .nav-links { display: none; }
    .nav-inner { grid-template-columns: auto 1fr; gap: 12px; }
}

/* =============================================================
   HERO — "Founded at CODE" as visual statement
   ============================================================= */

.hero {
    position: relative;
    padding: clamp(100px, 14vh, 160px) 0 clamp(110px, 13vh, 150px);
    margin-top: 0;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #F6F8FB 0%, #FAFAF7 60%, #F6F8FB 100%);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
}

/* ===== Atmospheric BG layers ===== */
.hero-atmos {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Drifting brand-color blobs — masculine palette: blue / mint / orchid / lime */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
    opacity: 0.7;
}
.hero-blob--1 {
    width: 50%; aspect-ratio: 1 / 1;
    top: -12%; left: -8%;
    background: radial-gradient(circle, rgba(51, 222, 123, 0.55), transparent 65%);  /* Mint */
    animation: heroDrift 34s ease-in-out infinite;
}
.hero-blob--2 {
    width: 46%; aspect-ratio: 1.1 / 1;
    top: 8%; right: -14%;
    background: radial-gradient(circle, rgba(63, 107, 245, 0.42), transparent 65%);  /* Cobalt blue */
    animation: heroDrift2 42s ease-in-out infinite -7s;
}
.hero-blob--3 {
    width: 52%; aspect-ratio: 1.1 / 1;
    bottom: -22%; left: 8%;
    background: radial-gradient(circle, rgba(99, 80, 230, 0.40), transparent 65%);   /* Violet */
    animation: heroDrift 46s ease-in-out infinite -14s;
}
.hero-blob--4 {
    width: 40%; aspect-ratio: 1.3 / 1;
    bottom: -12%; right: -10%;
    background: radial-gradient(circle, rgba(129, 112, 239, 0.42), transparent 65%); /* Orchid */
    animation: heroDrift2 38s ease-in-out infinite -22s;
}

@keyframes heroDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(50px, -30px, 0) scale(1.08); }
}
@keyframes heroDrift2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-40px, 40px, 0) scale(1.06); }
}

/* Old text-stroke watermark replaced by .hero-blueprint SVG below */
.hero-watermark { display: none; }

/* Blueprint illustration — wireframe product studies + headline sheet */
.hero-blueprint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

@media (max-width: 900px) {
    .hero-blueprint { opacity: 0.55; }
}

/* Gently floating blueprint cards — each a standalone <svg> = own GPU layer (smooth) */
@keyframes bpFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -9px, 0); }
}
.hero-bp-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 0.5;
    will-change: transform;
    animation: bpFloat 7s ease-in-out infinite;
}
.hero-bp-card--1 { animation-duration: 7.6s; animation-delay: -1.1s; }
.hero-bp-card--2 { animation-duration: 9.3s; animation-delay: -2.3s; }
.hero-bp-card--3 { animation-duration: 8.1s; animation-delay: -6.4s; }
.hero-bp-card--4 { animation-duration: 8.8s; animation-delay: -3.7s; }
.hero-bp-card--5 { animation-duration: 6.7s; animation-delay: -5.2s; }
.hero-bp-card--6 { animation-duration: 8.5s; animation-delay: -4.6s; }

@media (prefers-reduced-motion: reduce) {
    .hero-bp-card { animation: none; }
}

/* DaVinci notebook sketch — still used by de/index.html hero */
.hero-watermark-sketch {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-2deg);
    width: clamp(960px, 115vw, 1800px);
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: 0.055;
    mix-blend-mode: multiply;
    filter: sepia(0.45) saturate(1.4) hue-rotate(-10deg) blur(0.3px);
}

@media (max-width: 900px) {
    .hero-watermark-sketch {
        width: 140vw;
        opacity: 0.045;
    }
}

/* Film grain noise overlay */
.hero-grain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

/* ===== Hero inner — centered stack ===== */
.hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Pill badge — small mono caps eyebrow */
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 8px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--r-pill);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 36px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
                0 6px 20px -10px rgba(0, 0, 0, 0.1);
    transition: border-color var(--t);
}
.hero-pill:hover { border-color: rgba(0, 0, 0, 0.2); }

.hero-pill-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--color-tokens-accent-lime);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hero-pill-icon svg { width: 12px; height: 12px; }

.hero-pill-text {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-1);
    white-space: nowrap;
}

.hero-pill-divider {
    width: 1px;
    height: 14px;
    background: rgba(0, 0, 0, 0.12);
}

.hero-pill-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-tokens-accent-mint);
    box-shadow: 0 0 0 3px rgba(51, 222, 123, 0.2);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* ===== Editorial corner markers ===== */
.hero-corner {
    position: absolute;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
    pointer-events: none;
}

.hero-corner--tl { top: 100px; left: 32px; }
.hero-corner--tr { top: 100px; right: 32px; }
.hero-corner--bl { bottom: 110px; left: 32px; }
.hero-corner--br { bottom: 110px; right: 32px; }

.hero-corner::before,
.hero-corner::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1px;
    background: currentColor;
    vertical-align: middle;
    opacity: 0.5;
}

.hero-corner--tl::before,
.hero-corner--bl::before { margin-right: 10px; }

.hero-corner--tr::after,
.hero-corner--br::after { margin-left: 10px; }

.hero-corner--tr::before,
.hero-corner--br::before { display: none; }

.hero-corner--tl::after,
.hero-corner--bl::after { display: none; }

@media (max-width: 1100px) {
    .hero-corner { display: none; }
}

/* ===== Editorial margin annotations ===== */
.hero-annot {
    position: absolute;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    pointer-events: none;
}

.hero-annot--bl { bottom: 152px; left: 32px; }
.hero-annot--tr { top: 100px; right: 32px; text-align: right; }

@media (max-width: 1100px) {
    .hero-annot { display: none; }
}

/* ===== Floating service chips around the CODE statement ===== */
.hero-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 10px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-1);
    white-space: nowrap;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 16px 36px -16px rgba(20, 30, 60, 0.18);
    transition: transform 0.4s var(--ease), border-color var(--t);
}

.hero-chip:hover { border-color: rgba(0, 0, 0, 0.18); }

.hero-chip-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hero-chip-icon svg { width: 14px; height: 14px; }

.hero-chip-num {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin-right: 2px;
}

/* Per-chip accent colors — masculine palette */
.hero-chip--web .hero-chip-icon  { background: rgba(51, 222, 123, 0.16);  color: #1FA85C; }
.hero-chip--mvp .hero-chip-icon  { background: rgba(63, 107, 245, 0.14);  color: #2A4DD9; }
.hero-chip--auto .hero-chip-icon { background: rgba(99, 80, 230, 0.14);   color: #4A37C9; }
.hero-chip--ai .hero-chip-icon   { background: rgba(129, 112, 239, 0.16); color: #5947D6; }

/* Position chips around the CODE statement */
.hero-chip--web  { top: 36%; left: 7%;  animation: chipFloat 9s ease-in-out infinite; }
.hero-chip--mvp  { top: 30%; right: 7%; animation: chipFloat 10s ease-in-out infinite -2s; }
.hero-chip--auto { top: 58%; left: 5%;  animation: chipFloat 11s ease-in-out infinite -4s; }
.hero-chip--ai   { top: 62%; right: 5%; animation: chipFloat 9.5s ease-in-out infinite -6s; }

@keyframes chipFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -8px, 0); }
}

@media (max-width: 1200px) {
    .hero-chip { display: none; }
}

/* ===== "Founded at CODE" — the visual statement ===== */
.hero-statement {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.hero-statement-label {
    font-family: var(--font-mono);
    font-size: clamp(13px, 1.3vw, 16px);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.hero-statement-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 36px;
    background: var(--ink);
    border-radius: var(--r-lg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 30px 60px -25px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: transform var(--t);
}
.hero-statement-mark:hover { transform: translateY(-2px); }

.hero-statement-mark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 40px;
}

.hero-statement-logo {
    height: clamp(56px, 8.5vw, 112px);
    width: auto;
}

.hero-statement-sublabel {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* ===== Bottom marquee — Trusted-by partners ===== */
.hero-marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.hero-marquee-label {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.hero-marquee-track {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: max-content;
    animation: marqueeScroll var(--marquee-duration, 38s) linear infinite;
    will-change: transform;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.hero-marquee {
    /* viewport-spanning so JS sees the full marquee width */
    width: 100%;
}

/* Uniform partner wordmarks. margin-right on every item gives the loop
   a symmetric trailing gap; the JS duplicator measures one base-set width
   and animates by exactly that distance, so the loop is seamless at any
   viewport. */
.hero-marquee .mq {
    font-family: var(--font-sans);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--ink-muted);
    white-space: nowrap;
    margin-right: 72px;
    transition: color var(--t);
}
.hero-marquee .mq:hover { color: var(--ink); }

@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(var(--marquee-set-width, 50%) * -1)); }
}

/* ===== Hero headline — centered, balanced, fits viewport ===== */
.hero-tagline {
    max-width: 20ch;
    margin: 0 auto;
    font-size: clamp(38px, 5.4vw, 76px);
    line-height: 1.05;
    letter-spacing: var(--ls-tight);
    font-weight: 400;
    color: var(--ink);
    text-align: center;
    text-wrap: balance;
}

.hero-tagline em {
    font-style: normal;
    color: var(--ink-soft);
    font-weight: 400;
}

/* Subtitle */
.hero-sub {
    margin: 20px auto 0;
    max-width: 56ch;
    font-size: var(--fs-body-m);
    color: var(--ink-muted);
    line-height: 1.55;
    text-wrap: balance;
    text-align: center;
}

.hero-sub strong {
    color: var(--ink);
    font-weight: 500;
}

/* CTA row */
.hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

/* =============================================================
   FOUNDED-AT-CODE banner section (between hero + work)
   ============================================================= */

.founded-banner {
    padding: clamp(80px, 10vw, 140px) 0;
    background: var(--ink);
    color: var(--bg);
    position: relative;
    overflow: hidden;
}

.founded-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 30% 0%, rgba(51, 222, 123, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 80% 100%, rgba(99, 80, 230, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.founded-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
}

.founded-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-tokens-accent-mint);
}

.founded-statement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
    margin: 8px 0;
}

.founded-text {
    font-family: var(--font-sans);
    font-size: clamp(40px, 6.5vw, 88px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--ls-tight);
    color: rgba(255, 255, 255, 0.45);
}

.founded-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-md);
    transition: background var(--t), border-color var(--t), transform var(--t);
}
.founded-mark:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--color-tokens-accent-mint);
    transform: translateY(-2px);
}

.founded-mark-logo {
    height: clamp(48px, 7vw, 88px);
    width: auto;
}

.founded-lede {
    max-width: 64ch;
    font-size: var(--fs-body-l);
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.55;
    text-wrap: balance;
}
.founded-lede strong {
    color: var(--bg);
    font-weight: 500;
}

.founded-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 24px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    width: 100%;
    max-width: 880px;
}

@media (min-width: 720px) {
    .founded-meta { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.founded-meta > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.founded-meta-num {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    color: var(--bg);
    letter-spacing: -0.02em;
    line-height: 1;
}

.founded-meta-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    max-width: 28ch;
    line-height: 1.45;
}

/* =============================================================
   Section heading row (shared)
   ============================================================= */

.section {
    padding: var(--section-pad) 0;
}

.section--alt { background: var(--bg-alt); }

.section-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 56px;
}

@media (min-width: 900px) {
    .section-head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 32px;
    }
    .section-link { justify-self: end; align-self: end; }
}

.section-link {
    font-size: 15px;
    color: var(--ink-muted);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color var(--t);
}
.section-link:hover { color: var(--ink); }

/* =============================================================
   WORK (Selected case studies — Clay/Apple style)
   ============================================================= */

.work-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(48px, 6vw, 96px) 24px;
}

@media (min-width: 900px) {
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(64px, 8vw, 120px) clamp(24px, 3vw, 48px);
    }
    .work-card--feature { grid-column: 1 / -1; }
}

.work-card {
    position: relative;
}

.work-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.work-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;       /* portrait by default */
    border-radius: var(--r-md);
    overflow: hidden;
    background: linear-gradient(135deg, var(--tint-1, #1a1a1a) 0%, var(--tint-2, #444444) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 30px 80px -40px rgba(0, 0, 0, 0.4);
    transition: transform 0.5s var(--ease);
}

.work-card--feature .work-card-media { aspect-ratio: 16 / 9; }
.work-card--portrait .work-card-media { aspect-ratio: 4 / 5; }

.work-card:hover .work-card-media {
    transform: translateY(-4px);
}

.work-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease), opacity var(--t);
    opacity: 0.94;
}

.work-card:hover .work-card-media img {
    transform: scale(1.04);
    opacity: 1;
}

/* Hover CTA — slides up from bottom of image */
.work-card-cta {
    position: absolute;
    left: 24px;
    bottom: 24px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--r-pill);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
    pointer-events: none;
}

.work-card:hover .work-card-cta {
    opacity: 1;
    transform: translateY(0);
}

.work-card-body {
    padding: 28px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Meta row above title (Apple-editorial) */
.work-card-meta {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.work-card-num {
    color: var(--color-tokens-accent-mint);
    background: rgba(51, 222, 123, 0.12);
    padding: 3px 7px;
    border-radius: var(--r-xs);
    font-size: 10px;
}

.work-card-year { color: var(--ink-soft); }

.work-card-services { color: var(--ink-muted); }

.work-card-title {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.work-card--feature .work-card-title {
    font-size: clamp(40px, 5vw, 64px);
}

.work-card-desc {
    font-size: var(--fs-body-m);
    color: var(--ink-muted);
    line-height: 1.55;
    max-width: 56ch;
}

.work-card-desc strong {
    color: var(--ink);
    font-weight: 500;
}

.work-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.work-card-tags span {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}

/* =============================================================
   SERVICES
   ============================================================= */

.service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 700px)  { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .service-grid { grid-template-columns: repeat(4, 1fr); } }

.service-item {
    padding: 28px 24px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
    transition: border-color var(--t), transform var(--t);
}

.service-item:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}

.service-num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
}

.service-name {
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.service-desc {
    font-size: 15px;
    color: var(--ink-muted);
    line-height: 1.55;
}

.service-stack {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.service-stack li {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

/* =============================================================
   APPROACH (How we work — numbered process list)
   ============================================================= */

.approach-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
}

.approach-step {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 24px;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
    transition: background var(--t);
}

@media (min-width: 800px) {
    .approach-step { grid-template-columns: 80px 280px 1fr; }
}

.approach-step:hover { background: var(--bg-alt); }

.approach-num {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-tokens-accent-lime);
    text-shadow: 0 0 0 var(--ink-soft);
    letter-spacing: 0.04em;
}

/* Override — Lime on white is too low contrast for text; use dark with lime square next to it */
.approach-num {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-soft);
}
.approach-num::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--color-tokens-accent-lime);
    border-radius: var(--r-xs);
}

.approach-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.approach-desc {
    font-size: 16px;
    color: var(--ink-muted);
    line-height: 1.55;
    max-width: 56ch;
}

/* =============================================================
   FOUNDERS (team intro)
   ============================================================= */

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

@media (min-width: 800px) {
    .founders { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

.founder-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: border-color var(--t);
}
.founder-card:hover { border-color: var(--ink); }

.founder-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: contrast(1.02) saturate(0.9);
}

.founder-body { padding: 24px; }

.founder-name {
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.founder-role {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 4px;
}

.founder-bio {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-muted);
}

/* =============================================================
   ABOUT (Two-column: text + CODE card)
   ============================================================= */

.about-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

@media (min-width: 960px) {
    .about-inner {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 64px;
    }
}

.about-lede {
    margin-top: 24px;
    font-size: var(--fs-body-l);
    color: var(--ink-muted);
    line-height: 1.55;
    max-width: 58ch;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
    margin-top: 48px;
}

.about-grid h4 {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 8px;
    font-weight: 500;
}

.about-grid p {
    font-size: 16px;
    color: var(--ink-1);
    line-height: 1.5;
}

/* CODE partnership card */
.about-card {
    padding: 32px;
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-sm);
    position: relative;
    overflow: hidden;
}

.about-card::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(201, 254, 110, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.about-card > * { position: relative; }

.about-card-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-tokens-accent-mint);
    margin-bottom: 24px;
}

.about-card-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-card-list li {
    position: relative;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.about-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 12px;
    height: 1px;
    background: var(--color-tokens-accent-mint);
}

.about-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    font-size: 14px;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-tokens-accent-mint);
    border-bottom: 1px solid var(--color-tokens-accent-mint);
    padding-bottom: 1px;
    transition: opacity var(--t);
}
.about-card-link:hover { opacity: 0.7; }

/* =============================================================
   FAQ
   ============================================================= */

.faq-list {
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-summary {
    list-style: none;
    cursor: pointer;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-size: 20px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    transition: color var(--t);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::after {
    content: '+';
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 400;
    color: var(--ink-muted);
    transition: transform var(--t), color var(--t);
    line-height: 1;
}
.faq-item[open] .faq-summary::after { transform: rotate(45deg); color: var(--ink); }
.faq-summary:hover { color: var(--ink-1); }

.faq-body {
    padding: 0 0 24px;
    font-size: 16px;
    color: var(--ink-muted);
    line-height: 1.6;
    max-width: 64ch;
}

/* =============================================================
   BOOKING / CONTACT
   ============================================================= */

.booking {
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
}

.booking-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}

@media (min-width: 980px) {
    .booking-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 64px;
    }
}

.booking-head {
    position: sticky;
    top: 100px;
}

.booking-head .section-title {
    margin-bottom: 20px;
}

.booking-lede {
    font-size: var(--fs-body-l);
    color: var(--ink-muted);
    line-height: 1.55;
    max-width: 44ch;
}

.booking-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

.booking-meta li {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.booking-meta strong {
    color: var(--ink);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
}

/* Booking panel (tabs + content) */
.booking-panel {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.18);
}

.booking-tabs {
    display: flex;
    gap: 0;
    padding: 8px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
}

.booking-tab {
    flex: 1;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background var(--t), color var(--t);
}

.booking-tab.is-active {
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04),
                0 4px 12px -6px rgba(0, 0, 0, 0.1);
}

.booking-tab-panel {
    padding: 24px;
}
.booking-tab-panel[hidden] { display: none; }

@media (min-width: 700px) {
    .booking-tab-panel { padding: 32px; }
}

/* Form */
.booking-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 600px) {
    .form-row { grid-template-columns: 1fr 1fr; }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label,
.form-group-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    transition: border-color var(--t), box-shadow var(--t);
    outline: none;
    width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--ink-soft);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.form-group textarea { resize: vertical; min-height: 100px; line-height: 1.5; }

.form-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip-option { position: relative; }
.chip-option input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.chip-option span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 14px;
    color: var(--ink-1);
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.chip-option:hover span { border-color: var(--ink); }
.chip-option input:checked + span {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

.booking-submit {
    align-self: flex-start;
    margin-top: 8px;
}

/* Success state: replaces the form once a brief has been sent */
.booking-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(40px, 6vw, 64px) 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg);
    animation: bookingSuccessIn 0.35s var(--ease);
}
.booking-success-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--color-tokens-accent-mint);
    color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 30px; line-height: 1;
    font-weight: 500;
    margin-bottom: 18px;
    box-shadow: 0 12px 30px -10px rgba(51, 222, 123, 0.45);
}
.booking-success-title {
    font-size: clamp(22px, 2.5vw, 30px);
    line-height: 1.18;
    letter-spacing: -0.015em;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 10px;
}
.booking-success-sub {
    font-size: 15px;
    color: var(--ink-muted);
    max-width: 38ch;
    line-height: 1.5;
}
@keyframes bookingSuccessIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);  }
}

/* Inline error message above the submit button */
.booking-error {
    font-size: 13px;
    color: #B00020;
    margin: 8px 0 0;
    padding: 10px 12px;
    background: rgba(176, 0, 32, 0.06);
    border-left: 3px solid #B00020;
    border-radius: 4px;
    align-self: stretch;
}

@media (max-width: 979px) {
    .booking-head { position: static; }
}

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

.footer {
    padding: clamp(96px, 12vw, 160px) 0 32px;
    background: var(--ink);
    color: var(--bg);
    border-top: none;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 0% 100%, rgba(51, 222, 123, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 100% 0%, rgba(99, 80, 230, 0.10) 0%, transparent 60%);
    pointer-events: none;
}

.footer > .container { position: relative; }

/* Massive wordmark statement at the top of the footer */
.footer-wordmark {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
    padding-bottom: clamp(56px, 8vw, 96px);
    margin-bottom: clamp(48px, 6vw, 80px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer-wordmark-label {
    font-family: var(--font-sans);
    font-size: clamp(36px, 6vw, 88px);
    font-weight: 400;
    letter-spacing: var(--ls-tight);
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
}

.footer-wordmark-logo {
    height: clamp(26px, 4.3vw, 63px);
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 800px) {
    .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr); gap: 64px; }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 38ch;
}

.footer-logo {
    height: auto;
    width: 180px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.footer-tag {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.55;
}

.footer-tag a {
    color: var(--bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: border-color var(--t);
}
.footer-tag a:hover { border-color: var(--color-tokens-accent-mint); }

.footer-contact {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}
.footer-email {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--bg);
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 1px;
    transition: border-color var(--t), color var(--t);
}
.footer-email:hover {
    border-color: var(--color-tokens-accent-mint);
    color: var(--color-tokens-accent-mint);
}
.footer-link {
    font-size: 14px;
    color: var(--color-tokens-accent-mint);
    border-bottom: 1px solid var(--color-tokens-accent-mint);
    padding-bottom: 1px;
}
.footer-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.2);
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 560px) { .footer-nav { grid-template-columns: 1fr; } }

.footer-nav h5 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 16px;
    font-weight: 500;
}

.footer-nav a,
.footer-meta {
    display: block;
    padding: 5px 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
    transition: color var(--t);
}
.footer-nav a:hover { color: var(--bg); }
.footer-meta { color: rgba(255, 255, 255, 0.45); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: clamp(56px, 8vw, 96px);
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    flex-wrap: wrap;
    gap: 16px;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.footer-back-top {
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--t);
}
.footer-back-top:hover { color: var(--bg); }

/* =============================================================
   CASE STUDY MODAL — FLIP zoom-in from card position
   ============================================================= */

.case-backdrop {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(10, 12, 18, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s var(--ease);
}
.case-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.case-modal {
    position: fixed;
    z-index: 999;
    top: var(--from-top, 50vh);
    left: var(--from-left, 50vw);
    width: var(--from-width, 0);
    height: var(--from-height, 0);
    background: var(--bg);
    border-radius: var(--r-md);
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transform-origin: top left;
    will-change: top, left, width, height, border-radius;
    transition: top 0.55s var(--ease),
                left 0.55s var(--ease),
                width 0.55s var(--ease),
                height 0.55s var(--ease),
                border-radius 0.5s var(--ease);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 60px 120px -40px rgba(0, 0, 0, 0.5);
}

.case-modal.is-opening {
    visibility: visible;
    pointer-events: auto;
}

.case-modal.is-open {
    top: 24px;
    left: 24px;
    width: calc(100% - 48px);
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    border-radius: var(--r-lg);
}

@media (max-width: 760px) {
    .case-modal.is-open {
        top: 12px;
        left: 12px;
        width: calc(100% - 24px);
        height: calc(100dvh - 24px);
        border-radius: var(--r-md);
    }
}

.case-modal-inner {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transition: opacity 0.35s var(--ease) 0.2s;
}

.case-modal.is-open .case-modal-inner {
    opacity: 1;
}

.case-modal.is-closing .case-modal-inner {
    transition: opacity 0.2s var(--ease);
    opacity: 0;
}

/* Close button */
.case-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t), transform var(--t), border-color var(--t);
    opacity: 0;
    transition: opacity 0.3s var(--ease) 0.35s,
                background 0.25s var(--ease),
                transform 0.25s var(--ease);
}
.case-modal.is-open .case-modal-close { opacity: 1; }
.case-modal-close:hover {
    background: var(--ink);
    color: var(--bg);
    transform: scale(1.05);
    border-color: var(--ink);
}
.case-modal-close svg { width: 18px; height: 18px; }

/* ─── Case study content ─── */
.case-hero {
    width: 100%;
    aspect-ratio: 21 / 9;
    background: linear-gradient(135deg, var(--tint-1, #1a1a1a), var(--tint-2, #444444));
    position: relative;
    overflow: hidden;
}
.case-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.92;
}

.case-body {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px) clamp(60px, 8vw, 120px);
}

.case-head { margin-bottom: clamp(40px, 5vw, 64px); }

.case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.case-num {
    color: var(--color-tokens-accent-mint);
    background: rgba(51, 222, 123, 0.14);
    padding: 4px 10px;
    border-radius: var(--r-xs);
    font-size: 11px;
}

.case-title {
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 400;
    color: var(--ink);
    line-height: 1;
    letter-spacing: var(--ls-tight);
    margin-bottom: 24px;
}

.case-lede {
    font-size: var(--fs-body-l);
    color: var(--ink-muted);
    line-height: 1.5;
    max-width: 60ch;
}
.case-lede strong { color: var(--ink); font-weight: 500; }

.case-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 0 0 48px;
}
@media (min-width: 720px) { .case-facts { grid-template-columns: repeat(4, 1fr); } }
.case-facts div { display: flex; flex-direction: column; gap: 6px; }
.case-facts dt {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
}
.case-facts dd {
    margin: 0;
    font-size: 16px;
    color: var(--ink);
    font-weight: 500;
}

.case-section {
    margin: 48px 0;
    max-width: 64ch;
}

.case-section h2 {
    font-size: 14px;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 16px;
}

.case-section p,
.case-section ul {
    font-size: var(--fs-body-m);
    color: var(--ink-1);
    line-height: 1.6;
}

.case-list { display: flex; flex-direction: column; gap: 10px; }
.case-list li { position: relative; padding-left: 22px; }
.case-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 12px; height: 1px;
    background: var(--color-tokens-accent-mint);
}

/* Mockup blocks */
.case-mockup {
    margin: 56px 0;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-alt);
}
.case-mockup img {
    width: 100%;
    height: auto;
    display: block;
}
.case-mockup--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    background: transparent;
}
.case-mockup--split img {
    border-radius: var(--r-md);
}
@media (max-width: 700px) {
    .case-mockup--split { grid-template-columns: 1fr; }
}

/* Metrics */
.case-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 8px;
}
@media (min-width: 720px) { .case-metrics { grid-template-columns: repeat(4, 1fr); } }

.case-metric {
    padding: 28px 20px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.case-metric-num {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.025em;
    line-height: 1;
}
.case-metric-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Stack tags inside modal */
.case-section--stack { margin-top: 64px; }
.case-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.case-stack span {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink-1);
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg);
}

/* ===== Case palette swatches (AUVIO 5-color, Insivo indigo) ===== */
.case-palette-head {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 28px 0 14px;
}
.case-palette {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 18px;
}
@media (min-width: 720px) {
    .case-palette { grid-template-columns: repeat(5, 1fr); }
}
.case-palette-swatch {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg);
    transition: transform 0.4s var(--ease), border-color var(--t), box-shadow var(--t);
    will-change: transform;
}
@media (max-width: 420px) {
    .case-palette-swatch { padding: 14px; gap: 8px; }
    .case-swatch-name { font-size: 12px; line-height: 1.25; }
}
.case-palette-swatch:hover {
    transform: translateY(-4px);
    border-color: var(--line-emph);
    box-shadow: 0 12px 30px -18px rgba(0,0,0,0.22);
}
.case-swatch-chip {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-sm);
    background: var(--swatch, #ccc);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.case-swatch-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.case-swatch-hex {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    text-transform: uppercase;
}

/* ===== Case callout (Stash amber, Insivo indigo, AUVIO iridescent) ===== */
.case-callout {
    position: relative;
    margin: 28px 0;
    padding: 22px 24px 22px 28px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--callout, var(--ink));
    border-radius: var(--r-md);
    background: var(--bg-alt);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.case-callout-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.case-callout p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-1);
}
.case-callout-hex {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--callout, var(--ink));
    color: var(--callout-ink, #fff);
}
.case-callout--amber { --callout: #FBBF24; --callout-ink: #18181B; }
.case-callout--indigo { --callout: #4F46E5; --callout-ink: #fff; }
.case-callout--iridescent {
    --callout: #FF6BCB; --callout-ink: #fff;
    background: linear-gradient(135deg, rgba(255,107,203,0.06), rgba(0,217,255,0.06) 60%, rgba(139,92,246,0.06));
}

/* ===== Case trade-offs grid ===== */
.case-tradeoffs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 18px;
}
@media (min-width: 720px) {
    .case-tradeoffs { grid-template-columns: repeat(2, 1fr); }
}
.case-tradeoff {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg);
    transition: border-color var(--t), transform 0.4s var(--ease);
}
.case-tradeoff:hover {
    border-color: var(--line-emph);
    transform: translateY(-2px);
}
.case-tradeoff h3 {
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.005em;
}
.case-tradeoff p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-muted);
}

/* =============================================================
   SUBPAGE PATTERNS — shared across about/services/contact/etc.
   Added 2026-05-13: extends the light.css vocabulary to non-
   landing pages while reusing .section, .section-head, .founders,
   .approach-list, .work-grid from the landing.
   ============================================================= */

/* ---- Nav: language toggle (sits inside .nav-actions) ---- */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 6px 8px;
    border-radius: var(--r-xs);
    border: 1px solid transparent;
    transition: border-color var(--t);
}
.lang-toggle:hover { border-color: var(--line); }
.lang-toggle a {
    color: var(--ink-soft);
    transition: color var(--t);
}
.lang-toggle a.is-active { color: var(--ink); }
.lang-toggle a:hover { color: var(--ink); }
.lang-toggle .lang-sep { color: var(--ink-disabled); }

/* ---- Page hero — compact variant for subpages ----
   Distinguishable from landing .hero: shorter, single column,
   subtle blob accents only, no marquee/chips/watermark.        */
.page-hero {
    position: relative;
    padding: clamp(120px, 18vh, 200px) 0 clamp(72px, 10vh, 120px);
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #F6F8FB 0%, #FAFAF7 100%);
    border-bottom: 1px solid var(--line);
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 40% at 10% 20%, rgba(51, 222, 123, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 35% 35% at 90% 80%, rgba(99, 80, 230, 0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.page-hero > .container {
    position: relative;
    z-index: 1;
}
.page-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 24px;
}
.page-hero-eyebrow::before {
    content: '';
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}
.page-hero-title {
    font-size: clamp(48px, 7vw, 96px);
    line-height: 1.02;
    letter-spacing: var(--ls-tight);
    font-weight: 400;
    color: var(--ink);
    max-width: 14ch;
    text-wrap: balance;
}
.page-hero-title em {
    font-style: normal;
    color: var(--ink-soft);
}
.page-hero-sub {
    margin-top: 24px;
    max-width: 56ch;
    font-size: var(--fs-body-l);
    color: var(--ink-muted);
    line-height: 1.55;
}

/* ---- Mission stats (4-up grid, sits next to text in .about-inner) ---- */
.about-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-content: start;
}
.stat-item {
    padding: 28px 24px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color var(--t), transform var(--t);
}
.stat-item:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}
.stat-num {
    font-size: clamp(32px, 3.4vw, 44px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.stat-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    line-height: 1.45;
}

/* ---- CTA / contact form section ---- */
.cta-section .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}
@media (min-width: 960px) {
    .cta-section .container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 80px;
    }
}
.cta-text .section-title { margin-top: 4px; }
.cta-text .about-lede { margin-top: 20px; }

/* Form field primitives — reusable across all forms (contact/about/etc) */
.cta-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-group-label,
.cta-form label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 600px) {
    .form-row { grid-template-columns: 1fr 1fr; }
}
.cta-form input[type="email"],
.cta-form input[type="text"],
.cta-form select,
.cta-form textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink);
    transition: border-color var(--t), background var(--t);
}
.cta-form input:hover,
.cta-form select:hover,
.cta-form textarea:hover { border-color: var(--line-emph); }
.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--bg);
}
.cta-form input::placeholder,
.cta-form textarea::placeholder { color: var(--ink-soft); }
.cta-form textarea { resize: vertical; min-height: 120px; }
.cta-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23222' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.form-error {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--color-tokens-accent-pumpkin);
    min-height: 14px;
}

/* Contact preference radio group */
.contact-pref-group {
    display: flex;
    gap: 10px;
    border: none;
    padding: 0;
    margin: 0;
}
.contact-pref-option {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-1);
    cursor: pointer;
    transition: border-color var(--t), background var(--t), color var(--t);
}
.contact-pref-option:has(input:checked) {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.contact-pref-option input { display: none; }

/* Submit button */
.cta-submit-btn {
    align-self: flex-start;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink);
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t), color var(--t), transform var(--t);
}
.cta-submit-btn:hover {
    background: transparent;
    color: var(--ink);
    transform: translateY(-1px);
}

/* Cal.com inline embed wrapper */
.cal-embed-wrap {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px;
    min-height: 580px;
}
.cal-embed-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 16px;
}

/* ---- Founder-card variant for about.html (has photo + body + role) ---- */
.founder-card .founder-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-alt);
}
.founder-card .founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.02) saturate(0.92);
    transition: transform 0.8s var(--ease);
}
.founder-card:hover .founder-photo img { transform: scale(1.03); }
.founder-card .founder-body { padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.founder-card .founder-links {
    margin-top: 8px;
    display: flex;
    gap: 14px;
}
.founder-card .founder-links a {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    transition: opacity var(--t);
}
.founder-card .founder-links a:hover { opacity: 0.55; }

/* About-page: stack stats below text on mobile, side-by-side ≥960 */
.about-inner > .about-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.about-inner > .about-text p {
    font-size: var(--fs-body-m);
    color: var(--ink-1);
    line-height: 1.6;
}
.about-inner > .about-text .body-large {
    font-size: var(--fs-body-l);
    color: var(--ink);
}
.inline-link {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    transition: opacity var(--t);
}
.inline-link:hover { opacity: 0.55; }

/* =============================================================
   SERVICES PAGE — extends .service-item with optional icon
   ============================================================= */

.service-item .service-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: rgba(129, 112, 239, 0.10);
    color: #5947D6;
    margin-bottom: 4px;
}
.service-item .service-icon svg { width: 22px; height: 22px; }

/* Per-service icon colors — brand palette, masculine cool tones first */
.service-item[data-color="red"]    .service-icon { background: rgba(237, 109, 45, 0.12); color: #C25422; }
.service-item[data-color="teal"]   .service-icon { background: rgba(51, 222, 123, 0.14); color: #1FA85C; }
.service-item[data-color="yellow"] .service-icon { background: rgba(201, 254, 110, 0.22); color: #5A7A0E; }
.service-item[data-color="blue"]   .service-icon { background: rgba(63, 107, 245, 0.12); color: #2A4DD9; }
.service-item[data-color="violet"] .service-icon { background: rgba(129, 112, 239, 0.14); color: #4A37C9; }

.service-item .service-feature-list {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.service-item .service-feature-list li {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.service-item .service-feature-list li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 1px;
    background: var(--ink-soft);
    transform: translateY(-4px);
}

/* Services page: 3-col grid at large widths (5 services), 2-col mid, 1-col small */
.service-grid--five {
    grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .service-grid--five { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .service-grid--five { grid-template-columns: repeat(3, 1fr); } }

/* =============================================================
   WORKSHOPS — 2-up cards with header / meta / agenda
   ============================================================= */

.workshop-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 800px) {
    .workshop-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.workshop-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: border-color var(--t), transform var(--t);
}
.workshop-card:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}

.workshop-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.workshop-title {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.workshop-duration {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-tokens-accent-mint);
    background: rgba(51, 222, 123, 0.12);
    padding: 5px 10px;
    border-radius: var(--r-xs);
    flex-shrink: 0;
    white-space: nowrap;
}

.workshop-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.workshop-meta-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.workshop-meta-label:not(:first-child) { margin-top: 14px; }
.workshop-meta-line {
    font-size: 14px;
    color: var(--ink-1);
    line-height: 1.5;
}

.workshop-agenda {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.workshop-agenda-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.5;
}
.workshop-agenda-item::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    background: var(--color-tokens-accent-lime);
    border-radius: 50%;
    transform: translateY(-2px);
}

.workshops-cta {
    margin-top: 48px;
    display: flex;
    justify-content: flex-start;
}

/* =============================================================
   CONTACT PAGE — info column + form column (split)
   ============================================================= */

.contact-split .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}
@media (min-width: 960px) {
    .contact-split .container {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
        gap: 72px;
    }
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: calc(var(--navbar-height, 80px) + 24px);
}
.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.contact-info-block:last-of-type { border-bottom: none; padding-bottom: 0; }
.contact-info-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.contact-info-value {
    font-size: 18px;
    color: var(--ink);
    line-height: 1.4;
    font-weight: 500;
    transition: color var(--t);
}
a.contact-info-value:hover { color: var(--color-tokens-accent-pumpkin); }

.contact-info-note {
    margin-top: 8px;
    padding: 20px;
    background: var(--bg-alt);
    border-radius: var(--r-sm);
}
.contact-info-note p {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.55;
}

.contact-social-links {
    display: flex;
    gap: 14px;
}
.contact-social-link {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    transition: opacity var(--t);
}
.contact-social-link:hover { opacity: 0.55; }

/* Multi-select pill checkboxes (service interest) */
.multi-select-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: none;
    padding: 0;
    margin: 0;
}
.multi-select-option {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-1);
    cursor: pointer;
    transition: border-color var(--t), background var(--t), color var(--t);
}
.multi-select-option:hover { border-color: var(--ink); }
.multi-select-option:has(input:checked) {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.multi-select-option input { display: none; }

/* =============================================================
   IMPRINT / PRIVACY — long-form prose pages
   ============================================================= */

.legal-page {
    padding: clamp(48px, 8vh, 96px) 0 clamp(72px, 10vh, 120px);
}
.legal-page .container {
    max-width: 760px;
}
.legal-prose h2 {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-top: 56px;
    margin-bottom: 16px;
    line-height: 1.2;
}
.legal-prose h2:first-of-type { margin-top: 0; }
.legal-prose h3 {
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    margin-top: 32px;
    margin-bottom: 12px;
    line-height: 1.3;
}
.legal-prose p,
.legal-prose li {
    font-size: 15px;
    color: var(--ink-1);
    line-height: 1.7;
    margin-bottom: 14px;
}
.legal-prose ul,
.legal-prose ol {
    margin-bottom: 14px;
    padding-left: 22px;
    list-style: disc;
}
.legal-prose ol { list-style: decimal; }
.legal-prose a {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
    transition: opacity var(--t);
}
.legal-prose a:hover { opacity: 0.55; }
.legal-prose strong { font-weight: 500; color: var(--ink); }
.legal-prose hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 48px 0;
}
.legal-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 8px;
}

/* =============================================================
   BURGER MENU — off-canvas mobile drawer
   ============================================================= */

.nav-burger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--ink);
    z-index: 101;
}
.nav-burger span {
    display: block;
    width: 22px;
    height: 1.6px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger span + span { margin-top: 5px; }
.nav.is-menu-open .nav-burger span:nth-child(1) {
    transform: translateY(6.6px) rotate(45deg);
}
.nav.is-menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav-burger span:nth-child(3) {
    transform: translateY(-6.6px) rotate(-45deg);
}

.nav-mobile {
    display: none;
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    height: calc(100vh - 62px);
    height: calc(100dvh - 62px);
    flex-direction: column;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 28px var(--pad-x) 32px;
    z-index: 99;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.nav-mobile-links { display: flex; flex-direction: column; }
.nav-mobile-links a {
    display: block;
    padding: 18px 4px;
    font-size: 22px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    transition: color var(--t);
}
.nav-mobile-links a:hover,
.nav-mobile-links a:focus-visible { color: var(--ink-1); }
.nav-mobile-cta {
    margin-top: 28px;
    width: 100%;
    justify-content: center;
}
.nav-mobile-lang {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.nav-mobile-lang a {
    color: var(--ink-muted);
    padding: 4px;
}
.nav-mobile-lang a.is-active { color: var(--ink); }

@media (max-width: 760px) {
    .nav-inner { grid-template-columns: 1fr auto; }
    .nav-actions { display: none; }
    .nav-burger { display: inline-flex; justify-self: end; }
    .nav.is-menu-open .nav-mobile {
        display: flex;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* =============================================================
   MOBILE PASS (≤768px) — comprehensive small-screen adjustments
   Applies to EN and DE simultaneously via shared stylesheet.
   ============================================================= */

@media (max-width: 768px) {
    /* Safety net: never allow horizontal scroll on small screens */
    html, body { overflow-x: hidden; }

    /* ---- HERO ---- */
    /* Strip heavy decorative blueprint art (designed for 1700px viewBox, overflows on phones) */
    .hero-blueprint,
    .hero-bp-card,
    .hero-watermark-sketch { display: none; }

    .hero {
        min-height: auto;
        padding: clamp(80px, 18vh, 120px) 0 clamp(96px, 14vh, 130px);
    }
    .hero-tagline {
        font-size: clamp(32px, 8.5vw, 48px);
        max-width: 100%;
        line-height: 1.12;
    }
    .hero-sub {
        font-size: 15px;
        max-width: 44ch;
        margin-top: 18px;
    }
    .hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 28px;
    }
    .hero-cta .btn {
        width: 100%;
        justify-content: center;
    }
    .hero-marquee { bottom: 18px; }
    .hero-marquee-label { display: none; }

    /* ---- NAV ---- */
    .nav-inner { padding: 14px var(--pad-x); gap: 10px; }
    .nav-logo img { height: 45px; }
    .nav-link-secondary { display: none; }
    .lang-toggle { font-size: 13px; }
    .nav .btn-sm { padding: 8px 14px; font-size: 13px; }

    /* ---- FOUNDED BANNER ---- */
    .founded-banner { padding: 56px 0; }
    .founded-statement { flex-direction: column; gap: 12px; align-items: center; }

    /* ---- SECTIONS ---- */
    .section { padding: 56px 0; }
    .section-title { font-size: clamp(28px, 8vw, 40px); }

    /* ---- WORK CAROUSEL (mx-refs) ---- */
    .mx-refs-head { gap: 14px; }
    .mx-ref-media-body { padding: 22px; }
    .mx-ref-media-body h3 { font-size: 26px; }
    .mx-ref-media-body p { font-size: 14px; }
    .mx-ref-stats { padding: 22px; gap: 18px; }

    /* ---- SERVICES STATEMENT (mx-statement) ---- */
    .mx-statement h2 { font-size: clamp(26px, 7vw, 36px); }
    .mx-service { gap: 12px; padding: 16px 4px; }

    /* ---- APPROACH ----
       Grid has 3 children (num, title, desc) but only 2 columns on mobile;
       description falls into the narrow num column without explicit placement. */
    .approach-step {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 6px 16px;
        padding: 28px 0;
    }
    .approach-num   { grid-row: 1; grid-column: 1; align-self: center; }
    .approach-title { grid-row: 1; grid-column: 2; }
    .approach-desc  { grid-row: 2; grid-column: 1 / -1; margin-top: 6px; }

    /* ---- ABOUT ---- */
    .about-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 32px; }
    .about-card { padding: 24px; }

    /* ---- FAQ ---- */
    .faq-summary { font-size: 16px; padding: 18px 0; }
    .faq-body { font-size: 14px; }

    /* ---- BOOKING / CONTACT ---- */
    .booking-tabs { gap: 4px; }
    .booking-tab { padding: 12px 14px; font-size: 14px; flex: 1; }
    .booking-meta { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
    .booking-meta strong { font-size: 16px; }
    .form-chips { gap: 8px; }

    /* ---- FOOTER ---- */
    .footer-wordmark-logo { height: 48px; }
    .footer-wordmark { gap: 12px; }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* ---- CASE STUDY MODALS ---- */
    .case-modal-inner { padding: 24px; }
    .case-title { font-size: clamp(30px, 9vw, 44px); }
}

/* =============================================================
   EXTRA-SMALL PASS (≤420px) — final polish for narrow phones
   ============================================================= */

@media (max-width: 420px) {
    .nav-logo img { height: 42px; }
    .nav .btn-sm { padding: 7px 12px; font-size: 12px; }
    .hero-tagline { font-size: clamp(28px, 9vw, 38px); }
    .booking-meta { grid-template-columns: 1fr; }
    .form-chips .chip-option { font-size: 13px; }
}