/* ══════════════════════════════════════════════════════════
   STUDIO TWENTY FOUR — DARK MONOCHROME DESIGN SYSTEM
   Typeface: Geist / Geist Mono
   ══════════════════════════════════════════════════════════ */

:root {
    /* Surfaces */
    --bg:            #000000;
    --bg-alt:        #0A0A0A;
    --surface:       #121212;
    --surface-2:     #1C1C1C;
    --surface-3:     #242424;
    --band:          #F4F4F6;

    /* Ink */
    --fg:            #FFFFFF;
    --fg-muted:      #9F9F9F;
    --fg-dim:        #808080;
    --fg-faint:      rgba(255,255,255,0.45);

    /* Lines */
    --line:          rgba(255,255,255,0.10);
    --line-strong:   rgba(255,255,255,0.22);

    /* Brand accent — hover states only, never a resting colour.
       5.58:1 against black; the light section swaps in a darker tone. */
    --accent-brand:      #D4622A;
    --accent-brand-soft: #E8763B;
    --accent-brand-tint: rgba(212,98,42,0.12);
    --accent-brand-line: rgba(212,98,42,0.45);

    /* Legacy token aliases (kept so inherited markup keeps working) */
    --cream:         #000000;
    --cream-dark:    #121212;
    --ink:           #FFFFFF;
    --ink-light:     #9F9F9F;
    --ink-muted:     #808080;
    --accent:        #FFFFFF;
    --accent-soft:   #CCCCCC;
    --accent-pale:   rgba(255,255,255,0.10);
    --teal:          #FFFFFF;
    --teal-pale:     rgba(255,255,255,0.10);
    --border:        rgba(255,255,255,0.10);
    --glass-border:  rgba(255,255,255,0.10);
    --glass-bg:      rgba(0,0,0,0.72);
    --surface-legacy: #121212;
    --shadow-soft:   none;
    --shadow-float:  none;

    /* Shape */
    --radius-lg:     32px;
    --radius-card:   28px;
    --radius:        24px;
    --radius-sm:     16px;
    --radius-btn:    999px;
    --radius-pill:   999px;

    /* Motion */
    --ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:   cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ── RESET ────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg);
}

body {
    font-family: 'Geist', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--fg);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.01em;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
svg { display: block; }
::selection { background: #FFFFFF; color: #000000; }

/* ── TYPOGRAPHY ───────────────────────────────────────── */
h1, h2, h3, h4, h5 {
    font-family: 'Geist', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--fg);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

h1 { font-size: clamp(44px, 7vw, 84px); line-height: 0.98; letter-spacing: -0.05em; }
h2 { font-size: clamp(34px, 4.6vw, 60px); }
h3 { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }

p  { color: var(--fg-muted); }
strong { color: var(--fg); font-weight: 500; }

/* ── LAYOUT ───────────────────────────────────────────── */
.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.section { padding: 120px 0; }

/* ── SECTION HEADINGS ─────────────────────────────────── */
.section-label,
.callout-label,
.key-takeaway-label,
.work-card-tag,
.pricing-tier-label,
.coming-soon-label,
.code-block-label,
.decision-label,
.illustration-caption,
.blog-reading-time,
.article-meta,
.pexels-credit {
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.section-label { margin-bottom: 24px; }

.section-headline {
    font-size: clamp(34px, 4.6vw, 60px);
    margin-bottom: 24px;
    color: var(--fg);
}

.section-intro {
    font-size: 18px;
    color: var(--fg-muted);
    max-width: 640px;
    line-height: 1.6;
}

/* ── NAVIGATION ───────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}

.nav.scrolled {
    border-bottom-color: var(--line);
    box-shadow: none;
}

.nav-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}

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

/* Orange/black logo files → white on the dark theme */
.nav-logo img[src*="Logo_studio24.svg"],
.nav-logo img[src*="Logo_studio24_black.svg"],
.footer-brand img[src*="Logo_studio24.svg"],
.footer-brand img[src*="Logo_studio24_black.svg"],
nav a img[src*="Logo_studio24.svg"],
nav a img[src*="Logo_studio24_black.svg"] {
    filter: brightness(0) invert(1);
}

.nav-links { display: flex; align-items: center; gap: 32px; }

.nav-link {
    font-size: 14px;
    font-weight: 400;
    color: var(--fg-muted);
    letter-spacing: -0.01em;
    transition: color 0.3s var(--ease);
}
.nav-link:hover { color: var(--fg); }

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
    padding: 11px 12px 11px 22px;
    background: var(--fg);
    color: #000;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-radius: var(--radius-pill);
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-cta:hover { background: var(--fg-muted); color: #000; }

.nav-cta span[aria-hidden],
.btn-primary span[aria-hidden],
.btn-secondary span[aria-hidden],
.btn-white span[aria-hidden],
.btn-ghost span[aria-hidden],
.btn-outline span[aria-hidden],
.btn-orange span[aria-hidden],
.btn-primary-dark span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    background: rgba(0,0,0,0.10);
    transition: transform 0.45s var(--ease);
}

.nav-cta:hover span[aria-hidden],
.btn-primary:hover span[aria-hidden],
.btn-white:hover span[aria-hidden],
.btn-orange:hover span[aria-hidden],
.btn-primary-dark:hover span[aria-hidden] { transform: translateX(3px); }

.lang-switcher { display: flex; align-items: center; gap: 8px; }
.lang-option { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.08em; color: var(--fg-dim); transition: color 0.3s var(--ease); }
.lang-option:hover { color: var(--fg); }
.lang-active { color: var(--fg); }
.lang-divider { font-size: 12px; color: var(--line-strong); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--fg); margin: 5px 0; transition: all 0.5s var(--ease); }

/* ── BUTTONS ──────────────────────────────────────────── */
.btn-primary, .btn-white, .btn-orange, .btn-primary-dark,
.btn-secondary, .btn-ghost, .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    border-radius: var(--radius-pill);
    cursor: pointer;
    /* Equal height so buttons sitting side by side always line up */
    min-height: 52px;
    transition: background 0.38s var(--ease), color 0.38s var(--ease), border-color 0.38s var(--ease);
}

.btn-primary, .btn-white, .btn-orange, .btn-primary-dark {
    padding: 13px 14px 13px 26px;
    background: var(--fg);
    color: #000;
    border: none;
}
.btn-primary:hover, .btn-white:hover, .btn-orange:hover, .btn-primary-dark:hover {
    background: var(--fg-muted);
    color: #000;
    transform: none;
    box-shadow: none;
}

.btn-secondary, .btn-ghost, .btn-outline {
    padding: 13px 28px;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--line-strong);
}
.btn-secondary:hover, .btn-ghost:hover, .btn-outline:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--fg);
    color: var(--fg);
    transform: none;
}

/* ── HERO ─────────────────────────────────────────────── */
.hero {
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 80px;
}
/* A flex item sizes to its content, so the container was collapsing to the
   width of the stacked column instead of filling the viewport. */
.hero > .container { width: 100%; }

.hero-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow: visible;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 80px;
    align-items: center;
}

/* Grid children default to min-width:auto, which lets the 3D art push the
   whole hero wider than the viewport on small screens. */
.hero-inner > *,
.positioning-inner > *,
.about-inner > *,
.project > *,
.pricing-custom > * { min-width: 0; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-bottom: 32px;
    padding: 9px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.hero h1 {
    font-size: clamp(40px, 5.6vw, 76px);
    line-height: 0.98;
    letter-spacing: -0.05em;
    margin-bottom: 28px;
}

/* Social proof row above the H1 (rating badge + audit pill) */
.hero-proof {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.proof-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--fg);
    transition: border-color 0.38s var(--ease), background 0.38s var(--ease);
}
.proof-badge:hover { border-color: var(--line-strong); background: var(--surface-2); }
.proof-badge .stars { color: var(--fg); letter-spacing: 1px; font-size: 12px; }
.proof-badge .proof-src {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-dim);
    padding-left: 8px;
    border-left: 1px solid var(--line-strong);
}

.proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: var(--fg-muted);
    transition: border-color 0.38s var(--ease), color 0.38s var(--ease), background 0.38s var(--ease);
}
.proof-pill:hover { border-color: var(--line-strong); color: var(--fg); background: var(--surface-2); }
.proof-pill .proof-cta { color: var(--fg); font-weight: 500; white-space: nowrap; }

/* Split-line heading reveal */
/* The mask clips at the line box, and line-height 0.98 leaves nothing
   below the baseline — descenders on g, y and p were being cut. Pad the
   mask down and pull it back so the clip clears them without changing
   how tightly the lines sit. */
.split-lines .sl-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.2em;
    margin-bottom: -0.2em;
}
.split-lines .sl-inner {
    display: block;
    transform: translateY(115%);
    transition: transform 1.4s var(--ease-out);
}
.split-lines.sl-ready .sl-inner { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .split-lines .sl-inner { transform: none !important; transition: none !important; }
}

.hero-sub {
    font-size: 20px;
    color: var(--fg-muted);
    line-height: 1.5;
    letter-spacing: -0.02em;
    max-width: 520px;
    margin-bottom: 40px;
}

.hero-buttons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.hero-image {
    position: relative;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3D isometric hero object — retuned for black */
.iso-container { perspective: 1200px; transform-style: preserve-3d; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.iso-plane-wrapper { transform: rotateX(55deg) rotateZ(-45deg); transform-style: preserve-3d; position: relative; width: 380px; height: 380px; }

.sphere-3d {
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, #ffffff 0%, #d8d8d8 14%, #6e6e6e 48%, #202020 88%, #0a0a0a 100%);
    box-shadow: inset -10px -10px 24px rgba(0,0,0,0.85), inset 8px 8px 18px rgba(255,255,255,0.35), 20px 30px 50px -12px rgba(0,0,0,0.8);
    position: relative;
}

.sphere-cast-shadow {
    position: absolute; bottom: -15%; left: 10%; width: 80%; height: 30%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%; filter: blur(6px); transform: rotateX(60deg); z-index: -1;
}

.iso-plane-bg {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(4px);
    border-radius: 3rem;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: none;
}

.iso-plane-dashed { position: absolute; inset: -32px; border: 1px dashed rgba(255,255,255,0.14); border-radius: 4rem; }

.iso-shape { position: absolute; box-shadow: none; opacity: 0.9; }

.iso-spheres { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: rotateZ(45deg) rotateX(-55deg); }
.iso-sphere-main { position: relative; width: 140px; height: 140px; }
.iso-sphere-mid  { position: absolute; right: 10%; bottom: 20%; width: 70px; height: 70px; }
.iso-sphere-sm   { position: absolute; right: -10%; bottom: -10%; width: 56px; height: 56px; opacity: 0.8; }

.iso-bracket-tl {
    position: absolute; top: 30%; left: 30%; width: 32px; height: 32px;
    border-top: 1px solid rgba(255,255,255,0.7); border-left: 1px solid rgba(255,255,255,0.7);
    border-top-left-radius: 8px; transform: rotateX(55deg) rotateZ(-45deg) translateZ(10px);
}
.iso-bracket-br {
    position: absolute; bottom: 30%; right: 30%; width: 32px; height: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.7); border-right: 1px solid rgba(255,255,255,0.7);
    border-bottom-right-radius: 8px; transform: rotateX(55deg) rotateZ(-45deg) translateZ(10px);
}

@keyframes hero-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.anim-float         { animation: hero-float 6s ease-in-out infinite; }
.anim-float-delayed { animation: hero-float 6s ease-in-out 3s infinite; }
.anim-float-slow    { animation: hero-float 8s ease-in-out 1.4s infinite; }

/* ── HERO CHAT WIDGET ─────────────────────────────────── */
.hero-chat { display: flex; justify-content: flex-end; }

.chat-widget {
    width: 100%;
    max-width: 540px;
    height: clamp(420px, 54vh, 560px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 18px 18px 16px;
    box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9);
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 14px;
    border-bottom: 1px solid var(--line);
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.chat-status {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--fg);
    flex-shrink: 0;
    animation: chat-pulse 2.4s ease-in-out infinite;
}
@keyframes chat-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,0.35); }
    50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(255,255,255,0); }
}
.chat-live { margin-left: auto; color: var(--fg-dim); }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 6px 10px;
    scrollbar-width: thin;
    scrollbar-color: #2A2A2A transparent;
}
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-thumb { background: #2A2A2A; border-radius: 3px; }

.chat-msg {
    max-width: 86%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14.5px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    opacity: 0;
    transform: translateY(8px);
    animation: chat-in 0.7s var(--ease-out) forwards;
}
@keyframes chat-in { to { opacity: 1; transform: translateY(0); } }

.chat-msg--bot {
    align-self: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-bottom-left-radius: 6px;
    color: var(--fg-muted);
}
.chat-msg--bot strong { color: var(--fg); }
.chat-msg--user {
    align-self: flex-end;
    background: var(--fg);
    color: #000;
    border-bottom-right-radius: 6px;
    font-weight: 500;
}

.chat-typing {
    align-self: flex-start;
    display: inline-flex;
    gap: 5px;
    padding: 15px 18px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    border-bottom-left-radius: 6px;
}
.chat-typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fg-dim);
    animation: chat-dot 1.5s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.3s; }
.chat-typing span:nth-child(3) { animation-delay: 0.5s; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 6px 12px;
}
.chat-chip {
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--fg);
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    padding: 9px 16px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    animation: chat-in 0.65s var(--ease-out) forwards;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chat-chip:hover { background: var(--fg); color: #000; border-color: var(--fg); }
.chat-chip:nth-child(2) { animation-delay: 0.11s; }
.chat-chip:nth-child(3) { animation-delay: 0.28s; }

.chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 6px 6px 6px 18px;
    transition: border-color 0.38s var(--ease);
}
.chat-input-row:focus-within { border-color: var(--line-strong); }
.chat-input-row input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--fg);
    min-width: 0;
}
.chat-input-row input::placeholder { color: var(--fg-dim); }
.chat-input-row button {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: var(--fg);
    color: #000;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.chat-input-row button:hover { background: var(--fg-muted); transform: translateX(2px); }

/* ── TESTIMONIAL CARD MARQUEE (compileit-style) ───────── */
.quotes-band {
    padding: 48px 0 40px;
    overflow: hidden;
}

.quotes-marquee {
    display: flex;
    width: max-content;
    animation: marquee 72s linear infinite;
    will-change: transform;
}
.quotes-marquee.paused,
.quotes-band:hover .quotes-marquee { animation-play-state: paused; }

.quotes-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding-right: 16px;
}

.q-card {
    width: 330px;
    min-height: 260px;
    flex-shrink: 0;
    border-radius: var(--radius);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    transition: transform 0.7s var(--ease-out),
                box-shadow 0.7s var(--ease-out),
                border-color 0.5s var(--ease);
}

/* Lift and settle on hover — the marquee is already paused by then */
.q-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 50px -26px rgba(0,0,0,0.9);
}
.q-card blockquote,
.q-card .q-author { transition: transform 0.7s var(--ease-out); }
.q-card:hover .q-author { transform: translateY(-2px); }
.q-card blockquote::before,
.q-card blockquote::after { transition: color 0.5s var(--ease), opacity 0.5s var(--ease); }
.q-card:hover blockquote::before,
.q-card:hover blockquote::after { opacity: 1; }
.q-card:hover .q-name { color: var(--accent-brand); transition: color 0.5s var(--ease); }
.q-card blockquote {
    font-size: 19px;
    font-weight: 450;
    line-height: 1.45;
    letter-spacing: -0.02em;
    margin: 0;
}
.q-card blockquote::before { content: '“'; }
.q-card blockquote::after { content: '”'; }

/* Four low-saturation tints — two dark, two light — so the row has
   rhythm without breaking the monochrome system. Warm variants carry a
   trace of the studio orange; cool ones stay neutral. */
.q-card--dark {
    background: #111316;
    border: 1px solid var(--line);
    color: var(--fg);
}
.q-card--dark .q-role { color: var(--fg-dim); }

.q-card--warm {
    background: #211913;
    border: 1px solid rgba(212,98,42,0.22);
    color: #F5EFEA;
}
.q-card--warm .q-role { color: rgba(245,239,234,0.5); }

.q-card--light {
    background: var(--band);
    color: #000;
}
.q-card--light .q-role { color: rgba(0,0,0,0.55); }

.q-card--cream {
    background: #F1ECE5;
    color: #17120E;
}
.q-card--cream .q-role { color: rgba(23,18,14,0.62); }

.q-author { display: flex; flex-direction: column; gap: 3px; }
.q-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.q-role { font-size: 12.5px; line-height: 1.45; }

/* Hover borders per tint, and a darker accent on the light cards so the
   name still clears 4.5:1 (bright #D4622A only reaches 3.4:1 on cream) */
.q-card--dark:hover { border-color: var(--accent-brand-line); }
.q-card--warm:hover { border-color: rgba(212,98,42,0.45); }
.q-card--light, .q-card--cream { border: 1px solid transparent; }
.q-card--light:hover { border-color: rgba(163,69,23,0.35); }
.q-card--cream:hover { border-color: rgba(163,69,23,0.35); }
.q-card--light:hover .q-name,
.q-card--cream:hover .q-name { color: #A34517; }
.q-card--light blockquote::before, .q-card--light blockquote::after,
.q-card--cream blockquote::before, .q-card--cream blockquote::after { color: #A34517; }

/* Quote mark picks up the accent, quietly */
.q-card blockquote::before { color: var(--accent-brand); opacity: 0.55; }

.quotes-controls {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}
.quotes-pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--fg);
    cursor: pointer;
    transition: background 0.38s var(--ease), color 0.38s var(--ease);
}
.quotes-pause:hover { background: var(--fg); color: #000; }
.quotes-pause .bar { width: 3px; height: 12px; background: currentColor; border-radius: 1px; }
.quotes-pause .tri {
    width: 0; height: 0; display: none;
    border-left: 11px solid currentColor;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    margin-left: 3px;
}
.quotes-pause.is-paused .bar { display: none; }
.quotes-pause.is-paused .tri { display: block; }

@media (prefers-reduced-motion: reduce) {
    .quotes-marquee { animation: none; }
    .quotes-controls { display: none; }
}

@media (max-width: 768px) {
    .q-card { width: 280px; min-height: 230px; padding: 24px 22px; }
    .q-card blockquote { font-size: 17px; }
    .quotes-band { padding: 32px 0 28px; }
}

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── STATS BAND ───────────────────────────────────────── */
.stats-band { padding: 120px 0; border-top: 1px solid var(--line); }

.stats-header { max-width: 760px; margin-bottom: 72px; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.stat-cell {
    background: var(--bg);
    padding: 40px 32px 44px;
    transition: background 0.5s var(--ease);
}
.stat-cell:hover { background: var(--surface); }

.stat-figure {
    display: block;
    font-size: clamp(40px, 4.4vw, 60px);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--fg);
    margin-bottom: 14px;
}

.stat-label { font-size: 15px; color: var(--fg-dim); line-height: 1.5; letter-spacing: -0.01em; }

/* ── SERVICES ─────────────────────────────────────────── */
.services-header { text-align: left; max-width: 760px; margin: 0 0 72px; }
.services-header .section-intro { margin: 0; }

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

.service-card,
.why-card,
.work-card,
.pricing-card,
.process-step,
.blog-card,
.signal-card,
.decision-card,
.compare-card,
.geo-stat-card,
.pricing-tier {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    transition: background 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease);
}

.service-card:hover,
.why-card:hover,
.work-card:hover,
.pricing-card:hover,
.process-step:hover,
.blog-card:hover,
.geo-stat-card:hover,
.pricing-tier:hover {
    background: var(--surface-2);
    border-color: var(--line-strong);
    transform: translateY(-3px);
    box-shadow: none;
}

.service-card { padding: 44px; position: relative; overflow: hidden; }

.service-number,
.why-card-number {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--fg-dim);
    margin-bottom: 20px;
}

.service-card h3 { font-size: 26px; margin-bottom: 14px; }
.service-card p { font-size: 16px; color: var(--fg-muted); line-height: 1.6; }

.service-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    margin-bottom: 26px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.07);
    color: var(--fg);
    border: 1px solid var(--line);
}
.service-icon svg { width: 22px; height: 22px; }
.service-icon--brand, .service-icon--web, .service-icon--seo, .service-icon--geo {
    background: rgba(255,255,255,0.07); color: var(--fg);
}
.service-card--brand, .service-card--web, .service-card--seo, .service-card--geo { background: var(--surface); }

.service-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500; color: var(--fg);
    margin-top: 22px;
    transition: gap 0.38s var(--ease);
}
.service-cta:hover { gap: 12px; }

/* ── WORK ─────────────────────────────────────────────── */
#work > .container,
#why > .container {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 40px;
    box-shadow: none;
}

.work-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; gap: 24px; }
.work-header .section-headline { margin-bottom: 0; }

.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Full-bleed image cards with the label overlaid on a bottom scrim */
.work-card {
    position: relative;
    display: block;
    height: clamp(380px, 42vw, 560px);
    border-radius: var(--radius);
    overflow: hidden;
    border: none;
    background: var(--surface-2);
    transition: none;
}
.work-card:hover { transform: none; border: none; background: var(--surface-2); }

.work-card-image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    background: var(--surface-2);
    overflow: hidden;
}
.work-card-image img,
.work-card-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease-out);
}
.work-card:hover .work-card-image img,
.work-card:hover .work-card-image video { transform: scale(1.04); }

/* Scrim: dark at the base, clear by the halfway mark */
.work-card::after {
    content: '';
    position: absolute;
    inset: 50% 0 0 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

.work-card-info {
    position: absolute;
    z-index: 2;
    left: 28px;
    right: 28px;
    bottom: 26px;
    padding: 0;
}
.work-card-info h3 {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 2px;
}
.work-card-tag {
    order: 2;
    margin: 0;
    font-family: 'Geist', sans-serif;
    font-size: clamp(16px, 1.5vw, 21px);
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: none;
    color: rgba(255,255,255,0.62);
    transition: color 0.38s var(--ease);
}
.work-card:hover .work-card-tag { color: var(--accent-brand-soft); }
.work-card-info p:not(.work-card-tag) { display: none; }

/* Card without artwork yet */
.work-card--empty {
    background: var(--surface);
    border: 1px solid var(--line);
}
.work-card--empty::after { display: none; }
.work-card-image-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--fg-dim); font-size: 14px;
}

/* ── GEO STATS SECTION ────────────────────────────────── */
.geo-stats-section { background: var(--bg-alt); color: var(--fg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.geo-stats-header { text-align: center; margin-bottom: 64px; }
.geo-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; }

.geo-stat-card { padding: 32px 26px; display: flex; flex-direction: column; gap: 20px; }
.geo-stat-illustration svg { width: 76px; height: 76px; color: var(--fg); }

.geo-stat-number {
    display: block;
    font-family: 'Geist', sans-serif;
    font-size: 2.6rem;
    font-weight: 400;
    letter-spacing: -0.05em;
    color: var(--fg);
    line-height: 1;
    margin-bottom: 10px;
}

.geo-stat-text p { font-size: 0.875rem; line-height: 1.6; color: var(--fg-dim); margin: 0; }

.geo-comparison {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 44px;
    margin-bottom: 48px;
}

.geo-comparison-label {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Geist Mono', monospace;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fg-dim); margin-bottom: 22px;
}

.geo-comparison-items { display: flex; flex-direction: column; gap: 10px; }

.geo-comp-item { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; padding: 12px 16px; border-radius: 12px; }
.geo-comp-item--bad { background: rgba(255,255,255,0.03); color: var(--fg-dim); }
.geo-comp-item--bad::before { content: '✕'; color: rgba(255,255,255,0.28); font-size: 0.75rem; flex-shrink: 0; }
.geo-comp-item--good { background: rgba(255,255,255,0.08); color: var(--fg); border: 1px solid var(--line-strong); }
.geo-comp-item--good::before { content: '✓'; color: var(--fg); font-size: 0.75rem; flex-shrink: 0; }

.geo-comparison-divider {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--fg);
}

.geo-stats-cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.geo-stats-cta p { font-size: 0.875rem; color: var(--fg-dim); margin: 0; }

/* GEO stat SVG animations */
@keyframes drawArc { from { stroke-dashoffset: 226; } to { stroke-dashoffset: 68; } }
@keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes slideIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes sweepClockArc { from { stroke-dashoffset: 176; } to { stroke-dashoffset: 44; } }
@keyframes sweepHand { from { transform: rotate(-120deg); } to { transform: rotate(0deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.anim-arc { animation: drawArc 1.5s var(--ease) forwards paused; }
.anim-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: growBar 0.95s var(--ease-spring) var(--bar-delay, 0s) forwards paused; }
.anim-arrow { animation: fadeUp 0.65s ease 0.8s forwards paused; opacity: 0; }
.anim-slide { transform-box: fill-box; transform-origin: 0% 50%; animation: slideIn 0.8s var(--ease-spring) var(--slide-delay, 0s) forwards paused; }
.anim-clock-arc { animation: sweepClockArc 1.4s var(--ease) 0.38s forwards paused; }
.anim-clock-hand { transform-box: fill-box; transform-origin: 40px 40px; animation: sweepHand 1.4s var(--ease-spring) 0.38s forwards paused; }

.geo-stat-animate.in-view .anim-arc,
.geo-stat-animate.in-view .anim-bar,
.geo-stat-animate.in-view .anim-arrow,
.geo-stat-animate.in-view .anim-slide,
.geo-stat-animate.in-view .anim-clock-arc,
.geo-stat-animate.in-view .anim-clock-hand { animation-play-state: running; }

/* ── PROCESS ──────────────────────────────────────────── */
.process { background: var(--bg); border-top: 1px solid var(--line); }
.process .section-label { color: var(--fg-dim); }
.process .section-headline { color: var(--fg); }
.process-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.process-header .section-intro { margin: 0 auto; color: var(--fg-muted); }

.process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.process-step { padding: 36px 28px; }

.process-step-number {
    display: inline-block;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--fg-dim);
    background: transparent;
    padding: 0;
    margin-bottom: 22px;
}

.process-step h3 { font-size: 19px; margin-bottom: 12px; color: var(--fg); }
.process-step p { font-size: 14px; color: var(--fg-dim); line-height: 1.6; }

/* ── LIGHT SECTION ────────────────────────────────────────
   Inverts the palette by re-scoping the tokens, so every nested
   component (cards, badges, labels, borders) flips with it.      */
.section--light {
    background: var(--band);
    color: #000;

    --bg:          #F4F4F6;
    --bg-alt:      #EDEDF0;
    --surface:     #FFFFFF;
    --surface-2:   #FAFAFA;
    --surface-3:   #FFFFFF;
    --fg:          #000000;
    --fg-muted:    rgba(0,0,0,0.62);
    --fg-dim:      rgba(0,0,0,0.45);
    --fg-faint:    rgba(0,0,0,0.35);
    --line:        rgba(0,0,0,0.10);
    --line-strong: rgba(0,0,0,0.22);

    /* Darker accent so hover text still clears 4.5:1 on the light band */
    --accent-brand:      #A34517;
    --accent-brand-soft: #8E3B12;
    --accent-brand-tint: rgba(163,69,23,0.10);
    --accent-brand-line: rgba(163,69,23,0.45);

    /* Legacy aliases still referenced by inline styles in the markup */
    --accent:      #000000;
    --accent-pale: rgba(0,0,0,0.07);
    --teal:        #000000;
    --teal-pale:   rgba(0,0,0,0.07);
    --border:      rgba(0,0,0,0.10);
    --glass-border:rgba(0,0,0,0.10);
    --ink:         #000000;
    --ink-light:   rgba(0,0,0,0.62);
    --ink-muted:   rgba(0,0,0,0.45);
}

/* Solid buttons flip to black-on-white inside a light section */
.section--light .btn-primary,
.section--light .btn-white,
.section--light .btn-primary-dark,
.section--light .popup-close {
    background: #000;
    color: #fff;
}
.section--light .btn-primary:hover,
.section--light .btn-white:hover,
.section--light .btn-primary-dark:hover { background: #333; color: #fff; }
.section--light .btn-primary span[aria-hidden],
.section--light .btn-white span[aria-hidden],
.section--light .btn-primary-dark span[aria-hidden] { background: rgba(255,255,255,0.16); }

.section--light .btn-secondary:hover,
.section--light .btn-outline:hover { background: rgba(0,0,0,0.05); border-color: #000; }

.section--light .currency-btn.active { background: #000; color: #fff; }
.section--light .pricing-badge--popular { background: #000; color: #fff; border-color: #000; }

/* The featured card stays dark — one black anchor in the light band */
.section--light .pricing-card.featured {
    background: #0B0B0B;
    border-color: rgba(255,255,255,0.12);

    --fg:          #FFFFFF;
    --fg-muted:    rgba(255,255,255,0.66);
    --fg-dim:      rgba(255,255,255,0.45);
    --line:        rgba(255,255,255,0.12);
    --line-strong: rgba(255,255,255,0.24);

    /* Dark card inside the light band — back to the bright accent */
    --accent-brand:      #D4622A;
    --accent-brand-soft: #E8763B;
    --accent-brand-tint: rgba(212,98,42,0.14);
    --accent-brand-line: rgba(212,98,42,0.45);
}
.section--light .pricing-card.featured:hover { background: #141414; }
.section--light .pricing-card.featured .btn-primary,
.section--light .pricing-card.featured .btn-primary-dark,
.section--light .pricing-card.featured .btn-white { background: #fff; color: #000; }
.section--light .pricing-card.featured .btn-primary:hover,
.section--light .pricing-card.featured .btn-primary-dark:hover,
.section--light .pricing-card.featured .btn-white:hover { background: #D8D8D8; color: #000; }
.section--light .pricing-card.featured .btn-primary span[aria-hidden],
.section--light .pricing-card.featured .btn-primary-dark span[aria-hidden] { background: rgba(0,0,0,0.10); }
.section--light .pricing-card.featured .btn-outline { border-color: rgba(255,255,255,0.24); color: #fff; }
.section--light .pricing-card.featured .btn-outline:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
.section--light .pricing-card.featured .pricing-badge { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.8); }

/* ── PRICING ──────────────────────────────────────────── */
.pricing-header { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.pricing-header .section-intro { margin: 0 auto; }

.currency-toggle {
    display: inline-flex; align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 4px; margin-top: 24px; gap: 2px;
}
.currency-btn {
    padding: 7px 20px; border-radius: var(--radius-pill); border: none; background: transparent;
    font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
    color: var(--fg-dim); cursor: pointer; transition: all 0.38s var(--ease);
}
.currency-btn.active { background: var(--fg); color: #000; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.pricing-card { padding: 44px 38px; position: relative; }
.pricing-card.featured { background: var(--surface-3); border-color: var(--line-strong); color: var(--fg); }

.pricing-badge {
    display: inline-block;
    font-family: 'Geist Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 24px;
    background: rgba(255,255,255,0.08); color: var(--fg-muted); border: 1px solid var(--line);
}
.pricing-badge--free { background: rgba(255,255,255,0.06); color: var(--fg-muted); }
.pricing-badge--popular { background: var(--fg); color: #000; border-color: var(--fg); }
.pricing-badge--pro { background: rgba(255,255,255,0.08); color: var(--fg-muted); }

.pricing-card h3 { font-size: 22px; margin-bottom: 8px; }
.pricing-card.featured h3 { color: var(--fg); }

.pricing-price {
    font-family: 'Geist', sans-serif;
    font-size: 40px; font-weight: 400;
    letter-spacing: -0.05em; margin: 20px 0;
    color: var(--fg);
}
.pricing-price span:not(.price-val) { font-size: 15px; font-weight: 400; color: var(--fg-dim); letter-spacing: -0.01em; }
.pricing-card.featured .pricing-price span:not(.price-val) { color: var(--fg-dim); }

.pricing-card p { font-size: 15px; color: var(--fg-muted); line-height: 1.6; margin-bottom: 26px; }
.pricing-card.featured p { color: var(--fg-muted); }

.pricing-addon { font-size: 13px; color: var(--fg-dim); padding-top: 16px; border-top: 1px solid var(--line); margin-top: 16px; }
.pricing-card.featured .pricing-addon { border-top-color: var(--line); color: var(--fg-dim); }

.pricing-divider { text-align: center; margin: 80px 0; position: relative; }
.pricing-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--line); }
.pricing-divider span {
    position: relative; background: var(--bg); padding: 0 24px;
    font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim);
}

.pricing-custom {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 60px;
    box-shadow: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.pricing-custom h3 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 400; line-height: 1.05; letter-spacing: -0.045em; margin-bottom: 20px; }
.pricing-custom p { font-size: 16px; color: var(--fg-muted); line-height: 1.6; margin-bottom: 16px; }
.pricing-custom-list { list-style: none; margin: 24px 0 32px; }
.pricing-custom-list li { font-size: 15px; color: var(--fg-muted); padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.pricing-custom-list li::before { content: ''; width: 5px; height: 5px; background: var(--fg); border-radius: 50%; flex-shrink: 0; }

/* Article pricing tiers */
.pricing-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 32px 0; }
.pricing-tier { padding: 32px 28px; }
.pricing-tier.featured { background: var(--surface-3); border-color: var(--line-strong); }
.pricing-tier-label, .pricing-tier .tier-badge { margin-bottom: 14px; display: block; }
.pricing-tier-name, .pricing-tier .tier-body h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); margin-bottom: 10px; }
.pricing-tier-price, .pricing-tier .tier-price { font-size: 32px; font-weight: 400; letter-spacing: -0.05em; color: var(--fg); margin-bottom: 16px; }
.pricing-tier-price span, .pricing-tier .tier-price .price-label, .price-label { font-size: 14px; color: var(--fg-dim); letter-spacing: -0.01em; }
.pricing-tier .tier-price .price, .price { color: var(--fg); }
.pricing-tier .tier-body p { font-size: 15px; color: var(--fg-muted); }
.pricing-tier ul { list-style: none; margin-top: 16px; }
.pricing-tier ul li { font-size: 14px; color: var(--fg-muted); padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; }
.pricing-tier ul li:last-child { border-bottom: none; }
.pricing-tier ul li::before { content: '→'; color: var(--fg-dim); flex-shrink: 0; }
.pricing-tier.featured .pricing-tier-label,
.pricing-tier.featured .pricing-tier-name,
.pricing-tier.featured .pricing-tier-price,
.pricing-tier.featured .tier-body h4 { color: var(--fg); }
.pricing-tier.featured .pricing-tier-price span,
.pricing-tier.featured .tier-body p,
.pricing-tier.featured ul li { color: var(--fg-muted); }
.pricing-tier.featured ul li::before { color: var(--fg); }

/* ── WHY US ───────────────────────────────────────────── */
.why-header { margin-bottom: 56px; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.why-card { padding: 40px; }
.why-card h3 { font-size: 22px; margin-bottom: 12px; }
.why-card p { font-size: 16px; color: var(--fg-muted); line-height: 1.6; }

/* ── CONTACT FORM ─────────────────────────────────────── */
.contact-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.contact-header .section-intro { margin: 0 auto; }

.contact-form { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.contact-form label {
    display: block;
    font-family: 'Geist Mono', monospace;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fg-dim); margin-bottom: 10px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 15px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    color: var(--fg);
    transition: border-color 0.38s var(--ease), background 0.38s var(--ease);
    box-sizing: border-box;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--fg-dim); }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { outline: none; border-color: var(--fg); background: var(--surface-2); }
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form .btn-primary { align-self: flex-start; }

/* Thank-you popup */
.popup-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    z-index: 1000; align-items: center; justify-content: center;
}
.popup-overlay.active { display: flex; }
.popup-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 44px 38px; max-width: 420px; width: calc(100% - 40px);
    text-align: center; box-shadow: none;
}
.popup-box h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 12px; }
.popup-box p { font-size: 16px; color: var(--fg-muted); line-height: 1.6; margin-bottom: 26px; }
.popup-close {
    padding: 12px 28px; background: var(--fg); color: #000; border: none;
    border-radius: var(--radius-pill); font-family: inherit; font-size: 15px; font-weight: 500;
    cursor: pointer; transition: background 0.38s var(--ease);
}
.popup-close:hover { background: var(--fg-muted); }

/* ── CTA BANNER ───────────────────────────────────────── */
.cta-banner {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 88px 64px;
    text-align: center;
    color: var(--fg);
}
.cta-banner .section-label { color: var(--fg-dim); }
.cta-banner h2 { font-size: clamp(34px, 4.6vw, 60px); color: var(--fg); margin: 0 auto 16px; max-width: 16ch; }
.cta-banner .cta-sub { font-size: 19px; color: var(--fg-muted); margin-bottom: 12px; }
.cta-banner .cta-body { font-size: 16px; color: var(--fg-dim); max-width: 540px; margin: 0 auto 36px; line-height: 1.6; }
.cta-buttons { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── FOOTER ───────────────────────────────────────────── */
.footer {
    padding: 88px 0 40px;
    background-color: var(--bg);
    border-top: 1px solid var(--line);
}
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; }
.footer-brand img { height: 28px; width: auto; }
.footer-brand p { font-size: 15px; color: var(--fg-dim); line-height: 1.6; margin-top: 20px; max-width: 320px; }

.footer-col h4 {
    font-family: 'Geist Mono', monospace;
    font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fg-dim); margin-bottom: 20px;
}
.footer-col a { display: block; font-size: 15px; color: var(--fg-muted); margin-bottom: 12px; transition: color 0.3s var(--ease); }
.footer-col a:hover { color: var(--fg); }

.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 28px; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--fg-dim);
}
.footer-bottom a { color: var(--fg-dim); }
.footer-bottom a:hover { color: var(--fg); }

/* ── PAGE HEADER (inner pages) ────────────────────────── */
.page-header { padding: 180px 0 80px; }
.page-header h1 { font-size: clamp(44px, 6.4vw, 84px); margin-bottom: 24px; }
.page-header p { font-size: 20px; color: var(--fg-muted); max-width: 640px; line-height: 1.5; letter-spacing: -0.02em; }
.page-header .section-label { margin-bottom: 24px; }

/* ── ABOUT ────────────────────────────────────────────── */
.about-hero { padding: 180px 0 72px; }
.about-hero .section-label { margin-bottom: 24px; }
.about-hero h1 { margin-bottom: 28px; }
.about-hero .lead { font-size: 20px; color: var(--fg-muted); max-width: 680px; line-height: 1.5; letter-spacing: -0.02em; }
.about-content { padding-bottom: 120px; }
.about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.about-text p { font-size: 17px; color: var(--fg-muted); line-height: 1.7; margin-bottom: 20px; }
.about-text p:last-child { margin-bottom: 0; }
.about-text strong { color: var(--fg); font-weight: 500; }
.about-image, .about-image-placeholder {
    aspect-ratio: 4/5; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
}
.about-image img { width: 100%; height: 100%; object-fit: cover; }

/* ── POSITIONING ──────────────────────────────────────── */
.positioning { background: var(--bg-alt); }
.positioning-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.positioning h2 { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 30px; }
.positioning-text p { font-size: 17px; color: var(--fg-muted); line-height: 1.7; margin-bottom: 20px; }
.positioning-text p:last-child { margin-bottom: 0; }
.positioning-text strong { color: var(--fg); font-weight: 500; }
.positioning-image { aspect-ratio: 4/5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.positioning-image img { width: 100%; height: 100%; object-fit: cover; }

/* ── WORK PAGE / PROJECTS ─────────────────────────────── */
/* Kept from the old project rows: still used by the case pages */
.project-service-tag {
    font-family: 'Geist Mono', monospace;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill);
    color: var(--fg-muted); background: var(--surface);
}
.work-cta { text-align: center; padding: 100px 0 140px; }
.work-cta h2 { margin-bottom: 18px; }
.work-cta p { font-size: 18px; color: var(--fg-muted); margin-bottom: 32px; }

/* ── BLOG INDEX ───────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.blog-grid-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }

.blog-card { overflow: hidden; display: flex; flex-direction: column; }
.blog-card-illustration { aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; }
.blog-card-illustration img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.95s var(--ease-out); }
.blog-card:hover .blog-card-illustration img { transform: scale(1.04); }

.blog-card-body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

.blog-tag {
    font-family: 'Geist Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 6px 12px; border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.07); color: var(--fg-muted); border: 1px solid var(--line);
}
.blog-tag--accent, .blog-tag--teal { background: rgba(255,255,255,0.07); color: var(--fg-muted); }

.blog-card-body h2 { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.03em; margin-bottom: 12px; }
.blog-card-body h2 a { color: var(--fg); transition: color 0.3s var(--ease); }
.blog-card-body h2 a:hover { color: var(--fg-muted); }
.blog-card-excerpt { font-size: 15px; color: var(--fg-dim); line-height: 1.6; margin-bottom: 20px; flex: 1; }
.blog-card-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--fg); transition: gap 0.38s var(--ease); }
.blog-card-link:hover { gap: 12px; }

.blog-expand-row { display: flex; justify-content: center; margin-top: 40px; }
.blog-expand-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; line-height: 1;
    padding: 13px 26px; background: transparent; color: var(--fg);
    border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
    font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
    transition: background 0.38s var(--ease), border-color 0.38s var(--ease);
}
.blog-expand-btn:hover { background: rgba(255,255,255,0.06); border-color: var(--fg); }
.blog-expand-btn .chevron-icon { transition: transform 0.5s var(--ease); }
.blog-expand-btn.open .chevron-icon { transform: rotate(180deg); }

.blog-more-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.8s var(--ease-out); }
.blog-more-wrap.expanded { grid-template-rows: 1fr; }
.blog-more-inner { overflow: hidden; }

/* ── ARTICLE ──────────────────────────────────────────── */
.breadcrumb, .breadcrumb-inner { padding: 110px 0 0; }
.breadcrumb nav, .breadcrumb-inner {
    font-family: 'Geist Mono', monospace;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim);
}
.breadcrumb a, .breadcrumb-inner a { color: var(--fg-dim); transition: color 0.3s var(--ease); }
.breadcrumb a:hover, .breadcrumb-inner a:hover { color: var(--fg); }
.breadcrumb span, .breadcrumb-inner span, .breadcrumb .current, .breadcrumb-current { color: var(--fg-muted); }

.article-hero { padding: 40px 0 48px; }
.article-hero-inner { max-width: 820px; }
.article-hero h1 { font-size: clamp(38px, 5.4vw, 68px); margin-bottom: 24px; }

.category-pill, .pill, .pill-seo, .pill-geo, .article-pills .pill {
    display: inline-block;
    font-family: 'Geist Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 7px 14px; border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.07); color: var(--fg-muted);
    border: 1px solid var(--line); margin-bottom: 24px;
}
.article-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.article-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.article-meta .sep, .article-meta-divider { color: var(--line-strong); }

.article-hero-image, .article-image {
    border-radius: var(--radius); overflow: hidden; margin: 40px 0;
    border: 1px solid var(--line); background: var(--surface);
}
.article-hero-image {
    max-width: 1000px;
    width: calc(100% - 80px);
    margin: 8px auto 56px;
}
.article-hero-image img, .article-image img {
    width: 100%; height: auto; display: block;
}
.article-image figcaption { padding: 14px 20px; font-size: 13px; color: var(--fg-dim); border-top: 1px solid var(--line); }

.pexels-credit { margin: 0; padding: 12px 20px; font-size: 10px; border-top: 1px solid var(--line); }
.pexels-credit a { color: var(--fg-dim); text-decoration: underline; }

.article-body { max-width: 760px; margin: 0 auto; padding-bottom: 100px; }
.article-body p { font-size: 18px; line-height: 1.75; color: var(--fg-muted); margin-bottom: 26px; letter-spacing: -0.01em; }
.article-intro, .lead { font-size: 21px !important; line-height: 1.6 !important; color: var(--fg) !important; letter-spacing: -0.02em; }
.article-body h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 64px 0 20px; }
.article-body h3 { font-size: 22px; margin: 44px 0 16px; }
.article-body a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: text-decoration-color 0.38s var(--ease); }
.article-body a:hover { text-decoration-color: var(--fg); }
.article-body strong { color: var(--fg); font-weight: 500; }
.article-body ul, .article-body ol { margin: 0 0 26px 20px; color: var(--fg-muted); }
.article-body li { font-size: 17px; line-height: 1.7; margin-bottom: 12px; }
.article-body blockquote {
    border-left: 2px solid var(--line-strong);
    padding: 6px 0 6px 26px; margin: 36px 0;
    font-size: 21px; line-height: 1.5; letter-spacing: -0.02em; color: var(--fg);
}
.article-body blockquote cite { display: block; margin-top: 14px; font-size: 13px; font-style: normal; color: var(--fg-dim); }
.article-body blockquote strong { color: var(--fg); }
.article-body code, .code-block pre {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 14px;
}
.article-body code { background: var(--surface-2); padding: 3px 7px; border-radius: 6px; color: var(--fg); }

.code-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px 24px; margin: 28px 0; overflow-x: auto; }
.code-block-label { margin-bottom: 14px; display: block; }
.code-block pre { color: var(--fg-muted); line-height: 1.7; white-space: pre; }
.code-block pre .comment { color: var(--fg-dim); }
.code-block pre .heading { color: var(--fg); }
.code-block pre .link { color: var(--fg-muted); text-decoration: underline; }

.callout-takeaway, .callout-teal, .key-takeaway {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 2px solid var(--fg);
    border-radius: var(--radius-sm);
    padding: 28px 30px;
    margin: 36px 0;
}
.callout-takeaway p, .callout-teal p, .key-takeaway p { font-size: 17px !important; line-height: 1.65 !important; color: var(--fg) !important; margin: 0 !important; }
.callout-label, .key-takeaway-label { display: block; margin-bottom: 12px; }

.article-table-wrap, .comparison-table-wrapper { overflow-x: auto; margin: 32px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.article-table-wrap table, .comparison-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article-table-wrap thead, .comparison-table thead { background: var(--surface-2); }
.article-table-wrap th, .comparison-table thead th {
    text-align: left; padding: 16px 20px;
    font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fg-dim); font-weight: 400; white-space: nowrap;
}
.article-table-wrap td, .comparison-table tbody td { padding: 16px 20px; border-top: 1px solid var(--line); color: var(--fg-muted); }
.comparison-table tbody td:first-child { color: var(--fg); }
.comparison-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

.tag-yes, .tag-no, .tag-partial, .tag-seo, .tag-geo, .tag-both {
    display: inline-block;
    font-family: 'Geist Mono', monospace;
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); color: var(--fg-muted); background: rgba(255,255,255,0.05);
}
.tag-yes { color: var(--fg); border-color: var(--line-strong); background: rgba(255,255,255,0.10); }
.tag-no { color: var(--fg-dim); }

.article-illustration { margin: 40px 0; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.article-illustration svg { width: 100%; height: auto; color: var(--fg); }
.illustration-caption { display: block; text-align: center; margin-top: 16px; }

/* FAQ */
.faq-section { margin: 64px 0; }
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: 10px;
    padding: 22px 26px;
    transition: background 0.38s var(--ease), border-color 0.38s var(--ease);
}
.faq-item:hover { background: var(--surface-2); border-color: var(--line-strong); }
.faq-item .faq-q, .faq-question {
    font-size: 18px; font-weight: 500; color: var(--fg); letter-spacing: -0.02em;
    cursor: pointer; position: relative; padding-right: 32px; list-style: none;
}
.faq-question::after {
    content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 20px; color: var(--fg-dim); transition: transform 0.5s var(--ease);
}
.faq-item.open .faq-question::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .faq-a, .faq-answer-inner { font-size: 16px; line-height: 1.7; color: var(--fg-muted); margin-top: 14px; }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-out); }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }

/* Cards inside articles */
.signal-grid, .compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 32px 0; }
.signal-card, .compare-card, .decision-card { padding: 28px 26px; }
.signal-card .signal-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.07); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--fg); }
.signal-card h4 { font-size: 17px; margin-bottom: 10px; }
.signal-card p { font-size: 15px; color: var(--fg-muted); line-height: 1.6; }

.compare-card h3, .compare-card--seo h3, .compare-card--geo h3 { font-size: 20px; margin-bottom: 16px; color: var(--fg); }
.compare-card ul { list-style: none; margin: 0; }
.compare-card li { font-size: 15px; color: var(--fg-muted); padding: 9px 0; display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.compare-card li::before,
.compare-card--seo li::before,
.compare-card--geo li::before { content: '—'; color: var(--fg-dim); flex-shrink: 0; }

.decision-card { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 12px; }
.decision-card .decision-label { flex-shrink: 0; }
.decision-card .decision-label span { color: var(--fg); }
.decision-card .decision-body h4 { font-size: 17px; margin-bottom: 8px; }
.decision-card .decision-body p { font-size: 15px; color: var(--fg-muted); line-height: 1.6; }

.step-list, .geo-checklist { list-style: none; margin: 26px 0; }
.step-list li, .geo-checklist li {
    font-size: 16px; color: var(--fg-muted); line-height: 1.65;
    padding: 14px 0 14px 34px; border-bottom: 1px solid var(--line); position: relative;
}
.step-list li::before, .geo-checklist li::before {
    content: '→'; position: absolute; left: 0; top: 14px; color: var(--fg-dim);
}

/* Author bio, sources, related */
.author-bio {
    display: flex; gap: 20px; align-items: center;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 26px 28px; margin: 48px 0;
}
.author-bio-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-bio-text strong { display: block; font-size: 16px; color: var(--fg); }
.author-bio-text span { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); }
.author-bio-text p { font-size: 14px; color: var(--fg-muted); margin-top: 10px; line-height: 1.6; }
.author-bio-text a { color: var(--fg); text-decoration: underline; }

.sources, .article-sources { margin: 48px 0; padding-top: 32px; border-top: 1px solid var(--line); }
.sources h3, .article-sources h3 {
    font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 18px;
}
.sources ol, .article-sources ol { margin-left: 18px; }
.sources li { font-size: 14px; color: var(--fg-dim); margin-bottom: 10px; line-height: 1.6; }
.sources a, .article-sources ol a { color: var(--fg-muted); text-decoration: underline; }
.sources a:hover, .article-sources ol a:hover { color: var(--fg); }

.related-articles { margin: 48px 0; padding-top: 32px; border-top: 1px solid var(--line); }
.related-articles h2 { font-size: 24px; margin-bottom: 20px; }
.related-articles ul { list-style: none; }
.related-articles li { border-bottom: 1px solid var(--line); }
.related-articles li:last-child { border-bottom: none; }
.related-articles a { display: block; padding: 16px 0; font-size: 17px; color: var(--fg-muted); transition: color 0.3s var(--ease), padding-left 0.38s var(--ease); }
.related-articles a:hover { color: var(--fg); padding-left: 8px; }

.back-link, .article-back a {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fg-dim); transition: color 0.3s var(--ease);
}
.back-link:hover, .article-back a:hover { color: var(--fg); }
.article-back { margin: 40px 0; }

.article-cta { text-align: center; padding: 64px 0; }
.article-cta h2 { margin-bottom: 16px; }
.article-cta p { font-size: 17px; color: var(--fg-muted); margin-bottom: 28px; }

/* ── PRIVACY / POLICY ─────────────────────────────────── */
.policy-content { max-width: 760px; margin: 0 auto; padding-bottom: 100px; }
.policy-content h2 { font-size: 30px; margin: 52px 0 18px; }
.policy-content h3 { font-size: 20px; margin: 32px 0 12px; }
.policy-content p { font-size: 17px; line-height: 1.75; color: var(--fg-muted); margin-bottom: 20px; }
.policy-content ul { margin: 0 0 20px 20px; color: var(--fg-muted); }
.policy-content li { font-size: 16px; line-height: 1.7; margin-bottom: 10px; }
.policy-content a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.policy-content a:hover { text-decoration-color: var(--fg); }

/* ── 404 ──────────────────────────────────────────────── */
.error-page {
    min-height: 78vh;
    display: flex;
    align-items: center;
    padding: 180px 0 100px;
    text-align: center;
}
.error-code {
    font-family: 'Geist Mono', monospace;
    font-size: clamp(72px, 16vw, 180px);
    font-weight: 400; letter-spacing: -0.06em; line-height: 1;
    color: var(--fg); margin-bottom: 24px;
    text-transform: none;
}
.error-page h1 { font-size: clamp(34px, 5vw, 60px); margin-bottom: 18px; }
.error-text { font-size: 18px; color: var(--fg-muted); margin: 0 auto 36px; max-width: 44ch; }
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── SCROLL REVEAL ────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(5px);
    transition: opacity 1.15s var(--ease-out), transform 1.15s var(--ease-out), filter 1.15s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-delay-1 { transition-delay: 0.14s; }
.reveal-delay-2 { transition-delay: 0.32s; }
.reveal-delay-3 { transition-delay: 0.42s; }
.reveal-delay-4 { transition-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #2A2A2A; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3A3A3A; }

/* ── RESPONSIVE ───────────────────────────────────────── */
/* Widescreen: the hero breaks out of the 1320px container and runs
   edge to edge on a 50px margin, while the rest of the page stays
   contained. The headline scales up to fill the extra room. */
@media (min-width: 1440px) {
    /* A fluid gutter keeps the margin proportional: a fixed value shrinks
       from 3.5% of the viewport at 1440 to 2% at 2560 and reads as cramped. */
    .hero > .container {
        max-width: none;
        padding-left: clamp(24px, 5vw, 120px);
        padding-right: clamp(24px, 5vw, 120px);
    }
    /* the header sits directly above the hero, so it has to share its edge */
    .nav-inner {
        max-width: none;
        padding-left: clamp(24px, 5vw, 120px);
        padding-right: clamp(24px, 5vw, 120px);
    }
    .hero-inner { gap: clamp(80px, 7vw, 160px); }
    .hero h1 { font-size: clamp(76px, 5.4vw, 108px); }
    .hero-sub { font-size: clamp(20px, 1.4vw, 24px); max-width: 40ch; }
    .chat-widget { max-width: clamp(540px, 34vw, 680px); height: clamp(560px, 56vh, 660px); }
}

@media (min-width: 2000px) {
    .hero-inner { grid-template-columns: 1.15fr 0.85fr; }
    /* let the headline keep filling its column instead of leaving a hole */
    .hero h1 { font-size: clamp(108px, 6vw, 148px); }
    .hero-sub { font-size: 26px; max-width: 44ch; }
}

/* Between 900 and 1180 the split hero still fits if it tightens up */
@media (max-width: 1180px) and (min-width: 901px) {
    .hero-inner { grid-template-columns: 1fr 0.9fr; gap: 44px; }
    .chat-widget { height: clamp(400px, 50vh, 500px); }
    .hero h1 { font-size: clamp(38px, 5vw, 60px); }
    .hero-sub { font-size: 18px; margin-bottom: 32px; }
}

@media (max-width: 1024px) {
    .container { padding: 0 28px; }
    .nav-inner { padding: 0 28px; }
    #work > .container, #why > .container { padding: 0 28px; }
    .section { padding: 88px 0; }
    .hero { padding-top: 108px; min-height: 0; }
    .hero-image { max-width: 460px; }
    .iso-plane-wrapper { width: 300px; height: 300px; }
    .positioning-inner, .about-inner { grid-template-columns: 1fr; gap: 48px; }
    .positioning-image, .about-image { max-width: 460px; order: -1; }
    .process-steps { grid-template-columns: repeat(3, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .geo-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid, .blog-grid-more { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    .page-header, .about-hero { padding-top: 140px; }
    .article-body { padding-left: 0; padding-right: 0; }
}

/* Stacked hero below 900 */
@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .hero-chat { justify-content: flex-start; }
    .chat-widget { max-width: 620px; height: clamp(380px, 44vh, 440px); }

    .nav-links { display: none; }
    .nav-toggle { display: block; }
    .nav-links.open {
        display: flex; flex-direction: column; align-items: flex-start;
        position: absolute; top: 100%; left: 0; right: 0;
        background: #000;
        padding: 24px 20px 28px; gap: 18px;
        border-bottom: 1px solid var(--line);
        z-index: 120;
    }
    .nav-links.open .nav-link { font-size: 17px; color: var(--fg); }

}

@media (max-width: 768px) {
    .container { padding: 0 20px; }
    .nav-inner { padding: 0 20px; }
    #work > .container, #why > .container { padding: 0 20px; }
    .section { padding: 64px 0; }

    .services-grid, .work-grid, .why-grid, .process-steps { grid-template-columns: 1fr; }
    .work-card { height: 340px; }
    .work-card-info { left: 20px; right: 20px; bottom: 20px; }
    .blog-grid, .blog-grid-more { grid-template-columns: 1fr; }
    .stats-grid, .geo-stats-grid { grid-template-columns: 1fr; }
    .geo-comparison { grid-template-columns: 1fr; padding: 28px 22px; }
    .geo-comparison-divider { transform: rotate(90deg); margin: 8px auto; }
    .pricing-custom { grid-template-columns: 1fr; padding: 36px 26px; gap: 36px; }
    .contact-form .form-row { grid-template-columns: 1fr; }
    .work-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .cta-banner { padding: 52px 24px; border-radius: var(--radius); }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .service-card, .why-card { padding: 30px; }
    .article-body p { font-size: 17px; }
    .author-bio { flex-direction: column; align-items: flex-start; text-align: left; }
    .decision-card { flex-direction: column; gap: 12px; }
    .page-header { padding: 120px 0 56px; }
    .about-hero { padding: 120px 0 48px; }
    .hero { padding-top: 88px; padding-bottom: 56px; min-height: 0; }
    .hero-image { max-width: 100%; aspect-ratio: 1/1; }
    .hero-chat { justify-content: stretch; }
    .chat-widget { max-width: 100%; height: clamp(320px, 42vh, 400px); padding: 14px 14px 12px; }
    .chat-msg { font-size: 14px; max-width: 92%; }
    .hero-proof { gap: 8px; margin-bottom: 22px; }
    .proof-badge, .proof-pill { font-size: 12px; padding: 8px 13px; }
    .iso-plane-wrapper { width: 240px; height: 240px; }
    .iso-sphere-main { width: 104px; height: 104px; }
    .iso-sphere-mid { width: 54px; height: 54px; }
    .iso-sphere-sm { width: 42px; height: 42px; }
    .article-hero-image { width: calc(100% - 40px); }
    .cta-banner h2 { max-width: 100%; }
    .error-page { padding: 130px 0 72px; }
}

@media (max-width: 420px) {
    .iso-plane-wrapper { width: 190px; height: 190px; }
    .nav-inner { padding: 0 20px; }
    .nav-logo img { height: 26px; }
    .nav-cta { padding: 9px 10px 9px 16px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════
   ACCENT LAYER
   The studio orange appears only on hover, focus and active
   states. Nothing rests in colour, so the monochrome system
   stays intact and the accent always reads as an invitation.
   ══════════════════════════════════════════════════════════ */

/* ── Solid buttons: fill with accent, keep black label (5.58:1) ── */
.btn-primary:hover,
.btn-white:hover,
.btn-orange:hover,
.btn-primary-dark:hover,
.popup-close:hover,
.section--light .btn-primary:hover,
.section--light .btn-white:hover,
.section--light .btn-primary-dark:hover,
.section--light .pricing-card.featured .btn-primary:hover,
.section--light .pricing-card.featured .btn-primary-dark:hover,
.section--light .pricing-card.featured .btn-white:hover {
    background: var(--accent-brand);
    color: #000;
}
.section--light .btn-primary:hover,
.section--light .btn-white:hover,
.section--light .btn-primary-dark:hover {
    color: #fff;                      /* white on #A34517 = 6.14:1 */
}

/* ── Outline buttons: accent border and label ── */
.btn-secondary:hover,
.btn-ghost:hover,
.btn-outline:hover,
.blog-expand-btn:hover,
.section--light .btn-secondary:hover,
.section--light .btn-outline:hover {
    background: var(--accent-brand-tint);
    border-color: var(--accent-brand);
    color: var(--accent-brand);
}

/* ── Navigation ── */
.nav-link:hover,
.lang-option:hover,
.footer-col a:hover,
.footer-bottom a:hover { color: var(--accent-brand); }
.nav-cta:hover { background: var(--accent-brand); color: #000; }

/* ── Inline arrow links ── */
.service-cta:hover,
.blog-card-link:hover,
.project-link:hover,
.back-link:hover,
.article-back a:hover,
.blog-card-body h2 a:hover,
.related-articles a:hover,
.proof-pill:hover { color: var(--accent-brand); }
.proof-pill:hover { border-color: var(--accent-brand-line); }
.proof-pill:hover .proof-cta { color: var(--accent-brand); }

/* ── Cards: accent hairline on hover ── */
.service-card:hover,
.why-card:hover,
.work-card:hover,
.pricing-card:hover,
.process-step:hover,
.blog-card:hover,
.geo-stat-card:hover,
.pricing-tier:hover,
.faq-item:hover,
.stat-cell:hover { border-color: var(--accent-brand-line); }
.stat-cell:hover { background: var(--accent-brand-tint); }

/* ── Article body links ── */
.article-body a:hover,
.policy-content a:hover,
.sources a:hover,
.article-sources ol a:hover,
.author-bio-text a:hover {
    color: var(--accent-brand);
    text-decoration-color: var(--accent-brand);
}

/* ── Chat widget ── */
.chat-chip:hover { background: var(--accent-brand); border-color: var(--accent-brand); color: #000; }
.chat-input-row:focus-within { border-color: var(--accent-brand-line); }
.chat-input-row button:hover { background: var(--accent-brand); color: #000; }
.chat-status { background: var(--accent-brand); }
@keyframes chat-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(212,98,42,0.45); }
    50% { opacity: 0.65; box-shadow: 0 0 0 5px rgba(212,98,42,0); }
}

/* ── Carousels and controls ── */
.quotes-pause:hover { background: var(--accent-brand); border-color: var(--accent-brand); color: #000; }

/* ── Forms ── */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { border-color: var(--accent-brand); }
.currency-btn:hover:not(.active) { color: var(--accent-brand); }

/* ── Focus visibility for keyboard users ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent-brand);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: var(--accent-brand); color: #000; }

/* ══════════════════════════════════════════════════════════
   CASE STUDY PAGES
   ══════════════════════════════════════════════════════════ */

.case-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    /* Bottom-aligned so the summary sits level with the heading rather
       than floating up beside the eyebrow label. */
    align-items: end;
    padding-block: 170px 56px;
}
.case-header > :last-child { padding-bottom: 6px; }
.case-title {
    font-size: clamp(44px, 6.4vw, 76px);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1;
    margin: 0 0 6px;
}
.case-category {
    font-size: clamp(19px, 2vw, 26px);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--fg-dim);
    margin: 0;
}
.case-summary {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--fg-muted);
    margin: 0;
    max-width: 46ch;
}
.case-summary a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* Full-width media, 16:9, matching the card radius */
.case-figure {
    margin: 0 0 12px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.case-figure:last-child { margin-bottom: 0; }
.case-figure img,
.case-figure video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.case-figure--tall img { aspect-ratio: 4 / 3; }

.case-figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 12px;
}
.case-figures .case-figure { margin-bottom: 0; }
.case-figures .case-figure img { aspect-ratio: 4 / 3; }

/* Four-column fact grid, each column opening with a hairline */
.case-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 96px 0;
}
.case-meta-col {
    border-top: 1px solid var(--line-strong);
    padding-top: 24px;
}
.case-meta-label {
    font-size: 16px;
    font-weight: 400;
    color: var(--fg-dim);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.case-meta-value {
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--fg);
    margin: 0 0 28px;
}
.case-meta-col .case-meta-value:last-child { margin-bottom: 0; }
.case-meta-body {
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--fg);
    margin: 0;
}

.case-services {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 96px;
}

.case-body { margin: 96px 0; max-width: 760px; }
.case-body h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 20px; }
.case-body p { font-size: 18px; line-height: 1.7; color: var(--fg-muted); margin: 0 0 22px; }
.case-body p:last-child { margin-bottom: 0; }

.related-work { padding: 0 0 120px; }
.related-work h2 {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -0.035em;
    margin: 0 0 28px;
}

@media (max-width: 1024px) {
    .case-header { grid-template-columns: 1fr; gap: 28px; padding-block: 140px 40px; }
    .case-meta { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; margin: 64px 0; }
    .case-services { margin-bottom: 64px; }
    .case-body { margin: 64px 0; }
}

@media (max-width: 768px) {
    .case-header { padding-block: 120px 32px; }
    .case-meta { grid-template-columns: 1fr; margin: 48px 0; }
    .case-figures { grid-template-columns: 1fr; }
    .case-body { margin: 48px 0; }
    .related-work { padding-bottom: 72px; }
}

/* Source attribution under a statistic */
.geo-stat-source {
    display: block;
    margin-top: 10px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.32);
}