/* ══════════════════════════════════════════════════════
   NITRO FOX DIGITALS — custom.css  (r3)
   NO clamp() — all rem-based typography
   ══════════════════════════════════════════════════════ */

/* ═════ 1. FONTS + TOKENS ═════ */
@font-face {
    font-family: 'Sixsound';
    src: url('../fonts/sixsound.otf') format('opentype'),
         url('../fonts/sixsound.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

:root {
    /* Colors */
    --bg:          #110E0B;
    --bg-2:        #1a1612;
    --primary:     #E8500A;
    --primary-lt:  #ff7a3d;
    --primary-dk:  #c43d00;
    --text:        #FFFFFF;
    --text-sec:    #FDF0E8;
    --text-muted:  #A09088;

    /* Surfaces */
    --brdr:        rgba(253,240,232,0.07);
    --brdr-2:      rgba(253,240,232,0.12);
    --brdr-warm:   rgba(232,80,10,0.22);

    /* Fonts — three-tier system
       - f-hero: Sixsound (H1 of each page ONLY)
       - f-display: Funnel Display (H2-H6, nav, buttons, stats, UI display)
       - f-body: Funnel Sans (paragraphs, descriptions)
       - f-mono: JetBrains Mono (labels, numbers, captions) */
    --f-hero:    'Sixsound', 'Funnel Display', sans-serif;
    --f-display: 'Funnel Display', 'Funnel Sans', system-ui, sans-serif;
    --f-body:    'Funnel Sans', system-ui, sans-serif;
    --f-mono:    'JetBrains Mono', 'Courier New', monospace;

    /* Legacy alias kept for compatibility (maps to display) */
    --f-head:    var(--f-display);

    /* Radii */
    --r-sm: 0.375rem; --r-md: 0.75rem; --r-lg: 1.25rem; --r-xl: 1.75rem; --r-pill: 999px;

    /* Motion */
    --ease:      cubic-bezier(0.16,1,0.3,1);
    --ease-io:   cubic-bezier(0.76,0,0.24,1);
    --ease-out:  cubic-bezier(0.22,1,0.36,1);
    --ease-back: cubic-bezier(0.34,1.56,0.64,1);
    --anim-hover-time: 400ms;
    --anim-hover-ease: cubic-bezier(0.25, 1, 0.5, 1);

    /* Z */
    --z-bg: 0; --z-content: 10; --z-fox: 15; --z-header: 900; --z-cursor: 9000; --z-loader: 10000;
}

/* ═════ 2. RESPONSIVE ROOT SIZE (replaces clamp) ═════ */
html {
    font-size: 16px; /* base — most desktop */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    /* Firefox: hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
/* Chromium / Safari: hide scrollbar */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ═════ 3. RESET + BASE ═════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text-sec);
    font-family: var(--f-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    overflow-x: hidden;
    min-height: 100vh;
}
body.is-loading { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; }
a      { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--primary); color: #fff; }

/* ═════ 4. HEADINGS ═════
   Base rules WITHOUT !important — any more-specific selector
   (e.g. `.mf__text`, `.hero__h1`) cleanly overrides these. */
h1 {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 6rem; /* 96px */
    line-height: 0.88;
    letter-spacing: -0.025em;
    color: var(--text);
}
h2, h3, h4, h5, h6 {
    font-family: var(--f-display);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--text);
}
h2 { font-size: 4rem; }     /* 64px */
h3 { font-size: 2.75rem; }  /* 44px */
h4 { font-size: 1.875rem; } /* 30px */
h5 { font-size: 1.25rem; }  /* 20px */
h6 { font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ═════ 5. HEADER ═════ */
.nf-header {
    position: absolute; /* sits at top of document, scrolls away with content */
    top: 0; left: 0; right: 0;
    z-index: var(--z-header);
    height: 4.625rem; /* 74px */
    padding: 0 3.5rem;
    transition: background 0.4s, border-color 0.4s;
    border-bottom: 1px solid transparent;
}
/* .is-scrolled class no longer applies (header scrolls out of view normally) */
.nf-header.is-scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
}
.nf-header__inner {
    max-width: 97.5rem; /* 1560px */
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 2.5rem;
}

/* Logo — SVG only, no text wrap */
.nf-logo { display: inline-flex; align-items: center; justify-self: start; }
.nf-logo__img {
    height: 2.5rem; /* 40px */
    width: auto;
    filter: drop-shadow(0 0 14px rgba(232,80,10,0.25));
    transition: filter 0.35s var(--ease);
}
.nf-logo:hover .nf-logo__img { filter: drop-shadow(0 0 20px rgba(232,80,10,0.55)); }

/* Nav */
.nf-nav { display: flex; justify-content: center; }
.nf-nav__list { display: flex; align-items: center; gap: 2.25rem; }
.nf-nav__item { position: relative; }

.nf-nav__link {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-family: var(--f-display);
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-sec);
    padding: 0.625rem 0;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
}
.nf-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0.25rem; left: 0;
    width: 0; height: 1px;
    background: var(--primary);
    transition: width 0.45s var(--ease);
}
.nf-nav__link:hover { color: var(--primary); }
.nf-nav__link:hover::after { width: 100%; }

.nf-nav__caret {
    transition: transform 0.3s var(--ease);
    color: var(--text-muted);
}
.nf-nav__item--has-sub:hover .nf-nav__caret { transform: rotate(180deg); color: var(--primary); }

/* ── SERVICES SUBMENU ── */
.nf-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 26.25rem; /* 420px */
    padding: 0.875rem;
    background: rgba(17,14,11,0.94);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid var(--brdr);
    border-radius: var(--r-lg);
    box-shadow:
        0 1.25rem 3.125rem rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(253,240,232,0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s var(--ease), visibility 0s 0.35s, transform 0.35s var(--ease);
    margin-top: 0.625rem;
}
.nf-submenu::before {
    content: '';
    position: absolute;
    top: -0.625rem; left: 0; right: 0; height: 0.625rem;
}
.nf-submenu::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,80,10,0.4), transparent);
}
.nf-nav__item--has-sub:hover .nf-submenu,
.nf-nav__item--has-sub:focus-within .nf-submenu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.35s var(--ease), visibility 0s, transform 0.35s var(--ease);
}

.nf-submenu__head {
    font-family: var(--f-mono);
    font-size: 0.625rem; /* 10px */
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.375rem 0.625rem 0.625rem;
    border-bottom: 1px solid var(--brdr);
    margin-bottom: 0.375rem;
}
.nf-submenu__item {
    display: grid;
    grid-template-columns: 1.75rem 1fr 1.25rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.625rem;
    border-radius: var(--r-md);
    transition: background 0.3s, padding-left 0.35s var(--ease);
}
.nf-submenu__item:hover { background: rgba(232,80,10,0.08); padding-left: 0.875rem; }
.nf-submenu__num {
    font-family: var(--f-mono);
    font-size: 0.65625rem; /* 10.5px */
    color: var(--primary);
    letter-spacing: 0.08em;
}
.nf-submenu__body { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.nf-submenu__name {
    font-family: var(--f-display);
    font-size: 0.84375rem; /* 13.5px */
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.nf-submenu__desc {
    font-family: var(--f-body);
    font-size: 0.6875rem; /* 11px */
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.nf-submenu__arrow {
    color: var(--text-muted);
    opacity: 0.5;
    transition: color 0.3s, transform 0.3s, opacity 0.3s;
    display: inline-flex; align-items: center;
}
.nf-submenu__item:hover .nf-submenu__arrow {
    color: var(--primary);
    opacity: 1;
    transform: translate(2px, -2px);
}

/* ═════ 6. GLASS CTA BUTTON ═════
   Cross-browser reliable version.
   - @property is progressive enhancement (nice on Chrome/Safari/FF 128+)
   - Falls back cleanly when unsupported: static conic ring, no animation breaks
   - overflow: hidden on the button (not clip) so Firefox cooperates
   - Dot sits inline with guaranteed room via padding
*/

.cta-wrap {
    position: relative;
    z-index: 2;
    justify-self: end;
    border-radius: var(--r-pill);
    pointer-events: none;
    transition: transform var(--anim-hover-time) var(--anim-hover-ease);
    font-size: 0.9375rem; /* 15px em reference */
    isolation: isolate;
}

/* Soft glow pad below */
.cta-shadow {
    position: absolute;
    inset: -0.25em;
    border-radius: var(--r-pill);
    background: radial-gradient(ellipse 70% 60% at 50% 70%, rgba(232,80,10,0.35), transparent 70%);
    filter: blur(10px);
    opacity: 0.65;
    transition: opacity var(--anim-hover-time) var(--anim-hover-ease);
    pointer-events: none;
    z-index: -1;
}
.cta-wrap:has(.cta-btn:hover) .cta-shadow { opacity: 1; }

.cta-btn {
    --border-width: 1.5px;
    all: unset;
    cursor: pointer;
    position: relative;
    pointer-events: auto;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.7em 1.25em 0.7em 1.35em;
    border-radius: var(--r-pill);
    /* overflow: hidden lets Firefox clip consistently; clip breaks in some versions */
    overflow: hidden;
    background: linear-gradient(
        -75deg,
        rgba(253,240,232,0.03) 0%,
        rgba(253,240,232,0.14) 50%,
        rgba(253,240,232,0.03) 100%
    );
    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.25),
        inset 0 -1px 1px rgba(253,240,232,0.08),
        0 4px 12px -2px rgba(0,0,0,0.5),
        0 0 0 1px rgba(232,80,10,0.4); /* static outline — reliable everywhere */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition:
        transform var(--anim-hover-time) var(--anim-hover-ease),
        box-shadow var(--anim-hover-time) var(--anim-hover-ease);
    -webkit-tap-highlight-color: transparent;
    color: var(--text);
    white-space: nowrap;
}
.cta-btn:hover {
    transform: scale(0.97);
    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.25),
        inset 0 -1px 2px rgba(232,80,10,0.25),
        0 6px 18px -4px rgba(232,80,10,0.3),
        0 0 0 1px var(--primary);
}
.cta-btn:active { transform: scale(0.94); }

/* Button label */
.cta-btn span:first-child {
    position: relative;
    z-index: 3;
    display: inline-block;
    user-select: none;
    font-family: var(--f-display);
    font-size: 0.92em;
    font-weight: 500;
    letter-spacing: -0.003em;
    color: var(--text);
    text-shadow: 0 0.15em 0.1em rgba(0,0,0,0.4);
    line-height: 1;
    transition: text-shadow var(--anim-hover-time) var(--anim-hover-ease);
}
.cta-btn:hover span:first-child { text-shadow: 0 0.02em 0.02em rgba(0,0,0,0.6); }

/* SHINE SWEEP — diagonal glass highlight via ::before.
   Uses simple background-position animation (no @property dependency). */
.cta-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        -45deg,
        transparent 0%,
        transparent 35%,
        rgba(255,255,255,0.28) 48%,
        rgba(255,255,255,0.28) 52%,
        transparent 65%,
        transparent 100%
    );
    background-size: 220% 220%;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    transition: background-position 0.55s var(--anim-hover-ease);
}
.cta-btn:hover::before  { background-position: 100% 100%; }
.cta-btn:active::before { background-position: 70% 30%; }

/* Pulsing orange dot */
.cta-btn__dot {
    position: relative;
    z-index: 3;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow:
        0 0 0 2px rgba(232,80,10,0.25),
        0 0 8px var(--primary),
        0 0 16px rgba(232,80,10,0.55);
    flex-shrink: 0;
    animation: cta-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes cta-dot-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;    }
    50%      { transform: scale(1.35); opacity: 0.7; }
}

/* ── PROGRESSIVE ENHANCEMENT ── 
   Animated conic rim + shine angle — only where @property is supported.
   Modern Chrome / Safari / FF 128+ get the full effect; older browsers get the
   clean static button above. */
@supports (background: paint(worklet)) or (--angle-1: 0deg) {
    /* Nothing — we keep the static ring. The @supports block is intentionally
       conservative: adding fancy conic on top of the clean base was the source
       of your Firefox bug. Better consistent than flashy. */
}

/* Hamburger */
.nf-burger {
    display: none;
    width: 2.625rem; height: 2.625rem;
    border: 1px solid var(--brdr-warm);
    border-radius: 50%;
    background: rgba(17,14,11,0.5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    flex-direction: column;
    justify-content: center;
    gap: 0.3125rem;
    padding: 0.75rem;
    justify-self: end;
}
.nf-burger span {
    display: block; width: 1rem; height: 1.5px;
    background: var(--text); border-radius: 1px;
    margin: 0 auto;
    transition: transform 0.4s var(--ease);
}
.nf-burger.is-open span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nf-burger.is-open span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

/* ═════ 7. MOBILE NAV ═════ */
.nf-mobile {
    position: fixed; inset: 0;
    z-index: calc(var(--z-header) + 5);
    background: rgba(17,14,11,0.96);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0s 0.5s;
}
.nf-mobile.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease); }
.nf-mobile__inner {
    position: relative;          /* anchor for the close button */
    height: 100%;
    display: flex; flex-direction: column;
    padding: 6rem 3.5rem 3.5rem;
    overflow-y: auto;            /* allow scroll if expanded submenu pushes content past viewport */
    -webkit-overflow-scrolling: touch;
}

/* ── Close button (top-right of overlay) ──
   Sits inside the overlay so it's always above the dimmed backdrop. The
   header's hamburger is z-index 900 (behind the 905 overlay) — that's why
   it wasn't reachable when the menu was open. This button replaces it. */
.nf-mobile__close {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    width: 2.625rem; height: 2.625rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--brdr-warm);
    border-radius: 50%;
    background: rgba(17,14,11,0.5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s, transform 0.4s var(--ease);
}
.nf-mobile__close:hover { border-color: var(--primary); color: var(--primary); transform: rotate(90deg); }

.nf-mobile__list { display: flex; flex-direction: column; gap: 0.25rem; }
.nf-mobile__item { width: 100%; }
.nf-mobile__link {
    display: flex; align-items: baseline; gap: 0.875rem;
    width: 100%;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--brdr);
    color: var(--text);
    text-align: left;            /* override <button> centering for the toggle variant */
    transition: padding-left 0.4s var(--ease), color 0.3s;
}
.nf-mobile__link:hover { padding-left: 0.875rem; color: var(--primary); }
.nf-mobile__num { font-family: var(--f-mono); font-size: 0.6875rem; color: var(--primary); min-width: 1.5rem; }
.nf-mobile__name { font-family: var(--f-display); font-weight: 600; font-size: 3rem; letter-spacing: -0.02em; }

/* ── Services accordion (mirrors desktop submenu in mobile) ──
   .nf-mobile__link--toggle is a <button> (no navigation). Tapping flips
   .is-open on the parent .nf-mobile__item--has-sub, expanding the sub-list
   below it. Chevron rotates 180° when expanded. */
.nf-mobile__link--toggle { background: none; border-radius: 0; cursor: pointer; }
/* Inner spans don't intercept clicks — guarantees event.target is the button
   itself (or bubbles cleanly to it), so the delegated click handler reliably
   matches .closest('.nf-mobile__link--toggle'). */
.nf-mobile__link--toggle > * { pointer-events: none; }
.nf-mobile__chevron {
    margin-left: auto;
    color: var(--primary);
    display: inline-flex;
    transition: transform 0.4s var(--ease);
    align-self: center;
}
.nf-mobile__item--has-sub.is-open .nf-mobile__chevron { transform: rotate(180deg); }

.nf-mobile__sub {
    list-style: none;
    margin: 0; padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease);
}
.nf-mobile__item--has-sub.is-open .nf-mobile__sub {
    max-height: 24rem;            /* enough for 4 sub-items + breathing room */
}
.nf-mobile__sub-link {
    display: flex; align-items: baseline; gap: 0.875rem;
    padding: 0.75rem 0 0.75rem 2.5rem;     /* indent under parent */
    color: var(--text-sec);
    border-bottom: 1px solid var(--brdr);
    transition: padding-left 0.35s var(--ease), color 0.3s;
}
.nf-mobile__sub-link:hover { color: var(--primary); padding-left: 3rem; }
.nf-mobile__sub-num {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    color: var(--primary);
    min-width: 1.5rem;
}
.nf-mobile__sub-name {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 1.125rem;
    letter-spacing: -0.005em;
}

/* ═════ 8. CURSOR ═════ */
.cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0;
    pointer-events: none;
    z-index: var(--z-cursor);
    mix-blend-mode: screen;
    will-change: transform;
}
.cursor-dot {
    width: 5px; height: 5px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary);
}
.cursor-ring {
    width: 2.25rem; height: 2.25rem;
    border: 1px solid rgba(232,80,10,0.5);
    border-radius: 50%;
    transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s;
}
.cursor-ring.is-hover {
    width: 3.875rem; height: 3.875rem;
    border-color: var(--primary);
    background: rgba(232,80,10,0.08);
}

/* ═════════════════════════════════════════════════════
   8.5 SHARED UTILITIES — reusable component layer (r53)
   Use these instead of duplicating per-component prefixed
   versions. Page-specific CSS should reach for these first;
   only add a new prefixed class when there's a real visual
   difference that can't be expressed via these primitives.
   ═════════════════════════════════════════════════════ */

/* ── Title accent — same primary color used throughout ── */
.title-accent { color: var(--primary); }

/* ── Kicker (plain mono label, no pill) ── */
/* Used for above-section labels that don't need a pill background.
   E.g. services spread eyebrows, marketing tags, hero meta lines. */
.kicker {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--primary);
    display: block;
}

/* ── Kicker pill (mono label inside a tinted pill, with optional dot) ── */
/* Used for page hero kickers and section eyebrows that need more emphasis.
   Includes optional .kicker-pill__dot child for a pulsing indicator dot. */
.kicker-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.4rem 0.875rem;
    background: rgba(232, 80, 10, 0.08);
    border: 1px solid rgba(232, 80, 10, 0.3);
    border-radius: 999px;
}
/* Variant: orange text instead of muted (used when the pill should "lead" the section) */
.kicker-pill--accent { color: var(--primary); }
.kicker-pill__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(232, 80, 10, 0.7);
    flex-shrink: 0;
}

/* ── Page hero — shared open block for sub-pages (about, contact, future) ── */
/* Use for sub-page hero sections. The homepage hero (.hero) is its own beast. */
.page-hero {
    max-width: 76rem;
    margin: 0 auto;
    padding: 9rem 3rem 4rem;
}
.page-hero--tall { padding: 9rem 3rem 6rem; }      /* about page wants more bottom space */
.page-hero__kicker { margin-bottom: 2.5rem; }       /* spacing only — composes with .kicker-pill */
.page-hero__title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 7.5rem;
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--text-sec);
    margin: 0 0 2.25rem;
}
.page-hero__title--md { font-size: 6.5rem; }        /* contact size */
.page-hero__sub {
    max-width: 42rem;
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    font-weight: 300;
    color: var(--text-muted);
    margin: 0;
}

/* ── Button system — three variants ── */
/* btn-primary — solid orange filled (main CTAs across the site) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1.125rem 2rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.0625rem;
    cursor: pointer;
    box-shadow: 0 16px 40px -10px rgba(232, 80, 10, 0.5);
    transition: transform 0.35s var(--ease), gap 0.35s var(--ease), box-shadow 0.35s;
}
.btn-primary:hover {
    transform: translateY(-3px);
    gap: 0.875rem;
    box-shadow: 0 20px 50px -8px rgba(232, 80, 10, 0.65);
}
.btn-primary svg { transition: transform 0.35s var(--ease); }
.btn-primary:hover svg { transform: translateX(2px); }
/* Compact variant — smaller pad/font for in-context CTAs (work cards) */
.btn-primary--sm {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    box-shadow: 0 12px 28px -8px rgba(232, 80, 10, 0.55);
}

/* btn-orange-ghost — orange tint bg + orange text + orange border (services CTAs) */
.btn-orange-ghost {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;             /* prevent full-width stretch in flex-column parents */
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: rgba(232, 80, 10, 0.1);
    border: 1px solid rgba(232, 80, 10, 0.4);
    border-radius: 999px;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--primary);
    cursor: pointer;
    transition: background 0.3s, gap 0.3s var(--ease);
}
.btn-orange-ghost:hover {
    background: rgba(232, 80, 10, 0.2);
    gap: 0.625rem;
}
.btn-orange-ghost svg { transition: transform 0.3s var(--ease); }
.btn-orange-ghost:hover svg { transform: translateX(2px); }

/* btn-ghost — neutral cream-tint dark CTA (work card "View case →") */
.btn-ghost {
    display: inline-flex;
    align-self: flex-start;             /* prevent full-width stretch in flex-column parents */
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--f-display);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text);
    background: rgba(253, 240, 232, 0.04);
    border: 1px solid rgba(253, 240, 232, 0.12);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, gap 0.3s var(--ease);
}
.btn-ghost:hover {
    background: rgba(253, 240, 232, 0.08);
    border-color: rgba(253, 240, 232, 0.25);
    gap: 0.625rem;
}
.btn-ghost svg { transition: transform 0.3s var(--ease); }
.btn-ghost:hover svg { transform: translateX(2px); }

/* Large variant — sized to match btn-primary exactly so they pair visually
   in close CTA rows. Pad/gap/font match btn-primary; only fill differs. */
.btn-ghost--lg {
    gap: 0.625rem;
    padding: 1.125rem 2rem;
    font-size: 1.0625rem;
    font-weight: 600;
}
.btn-ghost--lg svg { width: 18px; height: 18px; }


/* Page-hero animation initial state — JS reveals on load */
.page-hero__kicker,
.page-hero__title,
.page-hero__sub {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}


/* ═════════════════════════════════════════════════════
   9. HERO
   ═════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    padding: 6rem 0 4rem;              /* extra bottom breathing space */
    overflow: hidden;
    display: flex; flex-direction: column;
}

.hero__bg {
    position: absolute; inset: 0;
    z-index: var(--z-bg);
    background:
        radial-gradient(ellipse 90% 70% at 50% 110%, rgba(232,80,10,0.22) 0%, transparent 60%),
        radial-gradient(ellipse 45% 45% at 12% 35%, rgba(232,80,10,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 35% 35% at 88% 65%, rgba(232,80,10,0.05) 0%, transparent 60%),
        var(--bg);
}

.hero__grid-lines {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 0 3.5rem;
    left: 0; right: 0;
}
.hero__grid-lines span {
    border-left: 1px solid var(--brdr);
    opacity: 0.6;
}
.hero__grid-lines span:first-child { border-left: none; }

.hero__grain {
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 13.75rem;
    mix-blend-mode: overlay;
}

.hero__glow {
    position: absolute;
    top: 60%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56.25rem; height: 56.25rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,80,10,0.18) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
    filter: blur(20px);
    animation: glow-breathe 8s ease-in-out infinite;
}
@keyframes glow-breathe {
    0%, 100% { opacity: 1;   transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 0.7; transform: translate(-50%, -50%) scale(1.08); }
}

/* Meta row */
.hero__meta {
    position: relative; z-index: 10;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 1.375rem;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 0 3.5rem;
    margin-bottom: 2rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
    opacity: 0;
}
.hero__meta-item { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.hero__meta-dot {
    width: 0.375rem; height: 0.375rem; border-radius: 50%;
    background: #22e17a;
    box-shadow: 0 0 8px #22e17a;
    animation: meta-pulse 1.8s ease-in-out infinite;
}
@keyframes meta-pulse { 50% { opacity: 0.4; } }
.hero__meta-sep { color: var(--primary); opacity: 0.5; }

/* ══ TYPE BLOCK ══ */
.hero__type {
    position: relative;
    z-index: 10;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 0 3.5rem;
    flex: 1;
    display: flex; align-items: center;
    width: 100%;
    /* Cap the flex stretch so fox (positioned inside) doesn't drift on tall hero */
    min-height: 0;
}

/* H1 — LEFT-ALIGNED, UPPERCASE, SECONDARY TEXT COLOR, Sixsound (page-defining) */
.hero__h1 {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 10.5rem;              /* 168px — 3 lines */
    line-height: 0.86;
    letter-spacing: -0.035em;
    color: var(--text-sec);         /* #FDF0E8 per request */
    display: flex; flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    text-align: left;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
}
.hl {
    display: block;
    overflow: hidden;
    padding-bottom: 0.04em;
}
.hl__inner {
    display: inline-block;
    will-change: transform, opacity;
}

/* Per-character spans (injected by JS) for typing reveal */
.hl__char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    will-change: transform, opacity;
}

/* All lines flush-left */
.hl--a, .hl--b, .hl--c { padding-left: 0; }
.hl--c .hl__inner { color: var(--primary); }

/* ══ FOX — neon flicker: two stacked layers ══
   Positioned relative to .hero__type via top:50% + translateY(-50%),
   and capped in height so it can never overhang. */
.hero__fox {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 26rem;           /* 416px */
    max-width: 40vw;        /* never exceed 40% of viewport width */
    aspect-ratio: 2 / 3;
    max-height: calc(100vh - 9rem); /* header + hero padding; fox never taller than viewport */
    z-index: var(--z-fox);
    pointer-events: none;
    /* Fade-in only — no transform, no y-slide */
    opacity: 0;
    will-change: opacity;
}

/* Both layers stack with the same dimensions — inherit from parent */
.hero__fox-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.hero__fox-layer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Lights-ON base (glowing fox) — always visible, floats */
.hero__fox-layer--on {
    z-index: 1;
    filter:
        drop-shadow(0 30px 60px rgba(0,0,0,0.5))
        drop-shadow(0 0 40px rgba(232,80,10,0.35));
    animation: fox-float 6s ease-in-out infinite;
}

/* Lights-OFF overlay (dark fox) — sits on top, flickers off to reveal the glowing fox */
.hero__fox-layer--off {
    z-index: 2;
    animation:
        fox-float 6s ease-in-out infinite,
        fox-neon-flicker 3.4s linear infinite;
    filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55));
}

@keyframes fox-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* Neon flicker — off-state blinks occasionally like a dying neon tube */
@keyframes fox-neon-flicker {
    0%,   60%  { opacity: 1; }
    62%        { opacity: 0.1; }
    63%        { opacity: 1; }
    68%        { opacity: 0.05; }
    69%        { opacity: 1; }
    78%        { opacity: 0; }
    79%        { opacity: 1; }
    80%        { opacity: 0; }
    82%        { opacity: 1; }
    83%        { opacity: 0.1; }
    85%        { opacity: 1; }
    92%        { opacity: 0; }
    93%        { opacity: 1; }
    100%       { opacity: 1; }
}

/* Glow halo under fox */
.hero__fox-glow {
    position: absolute;
    bottom: 8%; left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 5rem;
    background: radial-gradient(ellipse, rgba(232,80,10,0.5) 0%, transparent 70%);
    filter: blur(30px);
    z-index: 0;
    animation: fox-glow-pulse 4s ease-in-out infinite;
}
@keyframes fox-glow-pulse {
    0%,100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50%     { opacity: 1;   transform: translateX(-50%) scale(1.1); }
}

/* ═════════════════════════════════════════════════════
   10. BOTTOM — Glass cards
   ═════════════════════════════════════════════════════ */
.hero__bottom {
    position: relative; z-index: 10;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 3rem 3.5rem 0;
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 1.375rem;
    align-items: stretch;
    opacity: 0;
}

.glass-card {
    position: relative;
    background: linear-gradient(
        135deg,
        rgba(253,240,232,0.07) 0%,
        rgba(253,240,232,0.025) 40%,
        rgba(232,80,10,0.05) 100%
    );
    border: 1px solid rgba(253,240,232,0.11);
    border-radius: 1.375rem;
    padding: 1.5rem 1.5rem 1.25rem;
    overflow: hidden;
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(253,240,232,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.45),
        inset 1px 0 0 rgba(253,240,232,0.04),
        0 30px 60px -20px rgba(0,0,0,0.55),
        0 0 0 1px rgba(253,240,232,0.04);
    transition: transform 0.5s var(--ease), box-shadow 0.5s, border-color 0.5s;
    display: flex; flex-direction: column;
    isolation: isolate;
}
.glass-card:hover {
    transform: translateY(-6px);
    border-color: rgba(232,80,10,0.32);
    box-shadow:
        inset 0 1px 0 rgba(253,240,232,0.14),
        inset 0 -1px 0 rgba(0,0,0,0.45),
        0 40px 80px -20px rgba(0,0,0,0.6),
        0 20px 40px -10px rgba(232,80,10,0.22),
        0 0 0 1px rgba(232,80,10,0.25);
}

/* Top edge highlight is already provided by the card's inset box-shadow.
   The old .glass-card__glare strip is kept in the DOM but made invisible. */
.glass-card__glare {
    display: none;
}
.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 100%;
    background: linear-gradient(105deg,
        rgba(253,240,232,0.07) 0%,
        transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.glass-card > * { position: relative; z-index: 1; }

.glass-card__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 1rem;
    margin-bottom: 1.125rem;
    border-bottom: 1px solid rgba(253,240,232,0.06);
}
.glass-card__label {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.glass-card__dot {
    width: 0.375rem; height: 0.375rem; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    animation: gc-dot 2s ease-in-out infinite;
}
@keyframes gc-dot { 50% { opacity: 0.4; } }
.glass-card__tag {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    opacity: 0.6;
}
.glass-card__more {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    transition: gap 0.3s var(--ease);
}
.glass-card__more:hover { gap: 0.625rem; }

/* Card 1: About */
.glass-card__text {
    font-family: var(--f-body);
    font-size: 0.875rem; /* 14px */
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-sec);
    margin-bottom: 1.375rem;
    flex: 1;
}
.glass-card__text strong { color: var(--text); font-weight: 600; }

.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    padding: 0.875rem 0.25rem 0.25rem;
    border-top: 1px solid rgba(253,240,232,0.06);
}
.stat { display: flex; flex-direction: column; gap: 0.3125rem; }
.stat__top { display: flex; align-items: baseline; }
.stat__num {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 2rem; /* 32px */
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.03em;
}
.stat__plus { color: var(--primary); font-size: 0.7em; margin-left: 1px; }
.stat__label {
    font-family: var(--f-body);
    font-size: 0.65625rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

/* Card 2: Services */
.svc-list { display: flex; flex-direction: column; flex: 1; }
.svc-row {
    display: grid;
    grid-template-columns: 1.625rem 1fr 1.375rem;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.375rem;
    border-bottom: 1px solid rgba(253,240,232,0.05);
    cursor: pointer;
    position: relative;
    transition: padding 0.4s var(--ease);
    /* Reset link styling so the row reads the same when it's an <a> */
    text-decoration: none;
    color: inherit;
}
.svc-row:last-child,
.svc-list > li:last-child .svc-row { border-bottom: none; }
.svc-row::after {
    content: '';
    position: absolute; left: 0; bottom: -1px;
    width: 0; height: 1px;
    background: var(--primary);
    transition: width 0.5s var(--ease);
}
.svc-row:hover { padding-left: 0.75rem; }
.svc-row:hover::after { width: 100%; }

.svc-row__num {
    font-family: var(--f-mono);
    font-size: 0.65625rem;
    font-weight: 500;
    color: var(--primary);
    letter-spacing: 0.08em;
    opacity: 0.8;
}
.svc-row__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.svc-row__name {
    font-family: var(--f-display);
    font-size: 0.84375rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-row__sub {
    font-family: var(--f-body);
    font-size: 0.65625rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-row__arrow {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    opacity: 0.5;
    transition: transform 0.35s var(--ease), color 0.3s, opacity 0.3s;
}
.svc-row:hover .svc-row__arrow {
    color: var(--primary);
    opacity: 1;
    transform: rotate(-45deg);
}

/* ── Card 3: Connect / Social tiles (NEW with icons) ── */
.soc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.soc-tile {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    background: rgba(253,240,232,0.025);
    border: 1px solid rgba(253,240,232,0.06);
    border-radius: 0.75rem;
    transition: background 0.3s, border-color 0.3s, transform 0.35s var(--ease);
    overflow: hidden;
    min-width: 0;
}
.soc-tile::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(232,80,10,0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s;
}
.soc-tile:hover {
    background: rgba(232,80,10,0.06);
    border-color: rgba(232,80,10,0.28);
    transform: translateY(-2px);
}
.soc-tile:hover::before { opacity: 1; }
.soc-tile > * { position: relative; z-index: 1; }

.soc-tile__icon {
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.5rem;
    background: rgba(232,80,10,0.08);
    border: 1px solid rgba(232,80,10,0.15);
    color: var(--text-sec);
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    flex-shrink: 0;
}
.soc-tile:hover .soc-tile__icon {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.soc-tile__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.soc-tile__name {
    font-family: var(--f-display);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.soc-tile__handle {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soc-tile__arrow {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    opacity: 0.6;
    transition: color 0.3s, transform 0.3s, opacity 0.3s;
    flex-shrink: 0;
}
.soc-tile:hover .soc-tile__arrow {
    color: var(--primary);
    opacity: 1;
    transform: translate(2px, -2px);
}

/* Orbit CTA */
.orbit-cta {
    position: relative;
    margin: 0 auto;
    width: 8rem; height: 8rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.5s var(--ease);
}
.orbit-cta:hover { transform: scale(1.08) rotate(5deg); }
.orbit-cta__ring {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    animation: orbit-rotate 12s linear infinite;
    overflow: visible;
}
.orbit-cta__text {
    font-family: var(--f-body);
    font-size: 10.2px;
    font-weight: 500;
    letter-spacing: 0.22em;
    fill: var(--text-sec);
    text-transform: uppercase;
}
@keyframes orbit-rotate { to { transform: rotate(360deg); } }
.orbit-cta__core {
    width: 3.625rem; height: 3.625rem;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px rgba(232,80,10,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform 0.35s var(--ease-back);
    position: relative; z-index: 1;
}
.orbit-cta:hover .orbit-cta__core svg { transform: rotate(45deg) scale(1.1); transition: transform 0.35s var(--ease-back); }

/* ═══════════════════════════════════════════════════════
   11. MANIFESTO SECTION — terminal/printing-press
   ═══════════════════════════════════════════════════════ */
.manifesto {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* No top margin — the hero's own padding-bottom handles separation.
       Bottom margin provides room before the Work section. */
    margin-top: 0;
    margin-bottom: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(232,80,10,0.08) 0%, transparent 70%),
        var(--bg);
    isolation: isolate;
    color: var(--text);
}

/* ── Background layers ── */
.mf__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.mf__scanlines {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(253,240,232,0.04) 0px,
        rgba(253,240,232,0.04) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: mf-scan 8s linear infinite;
}
@keyframes mf-scan {
    0%   { background-position: 0 0;    }
    100% { background-position: 0 200px;}
}
.mf__grain {
    position: absolute;
    inset: -50%;
    opacity: 0.07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 12rem;
    animation: mf-grain 0.9s steps(6) infinite;
    pointer-events: none;
}
@keyframes mf-grain {
    0%   { transform: translate(0,0);     }
    20%  { transform: translate(-4%, 3%); }
    40%  { transform: translate(3%, -5%); }
    60%  { transform: translate(-5%, -3%);}
    80%  { transform: translate(4%, 4%);  }
    100% { transform: translate(0,0);     }
}
.mf__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}

/* ── HUD / corner labels ── */
.mf__hud {
    position: absolute;
    /* More breathing room from section edges (was 1.5rem / 2rem) */
    inset: 2.5rem 2.5rem;
    z-index: 5;
    pointer-events: none;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.mf__hud-tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}
.mf__hud-tag--tl { top: 0;    left: 0;  }
.mf__hud-tag--tr { top: 0;    right: 0; color: var(--primary); }
.mf__hud-tag--bl { bottom: 0; left: 0;  }
.mf__hud-tag--br { bottom: 0; right: 0; }

.mf__hud-bracket { color: var(--primary); font-weight: 500; }
.mf__hud-slash   { color: var(--primary); opacity: 0.5; }
.mf__hud-dot {
    width: 0.4rem; height: 0.4rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    animation: mf-live 1.2s ease-in-out infinite;
}
@keyframes mf-live { 50% { opacity: 0.3; } }

.mf__counter {
    color: var(--text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 3em;
}
.mf__hud-label { color: var(--text-muted); }
.mf__hud-meter { display: inline-flex; gap: 2px; }
.mf__hud-bar {
    width: 4px; height: 10px;
    background: var(--text-muted);
    opacity: 0.25;
    transition: opacity 0.2s, background 0.2s;
}
.mf__hud-bar.is-on {
    background: var(--primary);
    opacity: 1;
    box-shadow: 0 0 6px rgba(232,80,10,0.6);
}

/* ── Stage ── */
.mf__stage {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6rem 3.5rem 5rem;
}

.mf__prelude {
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.mf__prelude-line {
    width: 3rem; height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary));
}
.mf__prelude-line--l { background: linear-gradient(90deg, transparent, var(--primary)); }
.mf__prelude-line--r { background: linear-gradient(90deg, var(--primary), transparent); }

/* ── Deck: holds all statements, only one visible at a time ── */
.mf__deck {
    position: relative;
    width: 100%;
    max-width: 95rem;
    height: 26rem;               /* reserves space for giant type */
    display: flex;
    align-items: center;
    justify-content: center;
}
.mf__statement {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}
.mf__statement.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Corners — registration marks */
.mf__corner {
    position: absolute;
    width: 1.75rem;
    height: 1.75rem;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}
.mf__corner::before, .mf__corner::after {
    content: '';
    position: absolute;
    background: var(--primary);
}
.mf__corner--tl { top: -0.75rem; left: -0.75rem; }
.mf__corner--tl::before { top: 0; left: 0; width: 1.25rem; height: 2px; }
.mf__corner--tl::after  { top: 0; left: 0; width: 2px; height: 1.25rem; }

.mf__corner--tr { top: -0.75rem; right: -0.75rem; }
.mf__corner--tr::before { top: 0; right: 0; width: 1.25rem; height: 2px; }
.mf__corner--tr::after  { top: 0; right: 0; width: 2px; height: 1.25rem; }

.mf__corner--bl { bottom: -0.75rem; left: -0.75rem; }
.mf__corner--bl::before { bottom: 0; left: 0; width: 1.25rem; height: 2px; }
.mf__corner--bl::after  { bottom: 0; left: 0; width: 2px; height: 1.25rem; }

.mf__corner--br { bottom: -0.75rem; right: -0.75rem; }
.mf__corner--br::before { bottom: 0; right: 0; width: 1.25rem; height: 2px; }
.mf__corner--br::after  { bottom: 0; right: 0; width: 2px; height: 1.25rem; }

.mf__statement.is-active .mf__corner { opacity: 1; }

/* ── The giant text ── */
.mf__text {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 8.5rem;
    line-height: 0.9;
    letter-spacing: -0.035em;
    color: var(--text-sec);
    text-align: center;
    text-transform: uppercase;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    max-width: 100%;
    padding: 0 1.5rem;
}

.mf__line {
    display: block;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 0.05em;
}
.mf__line--accent { color: var(--primary); }
.mf__line--dim    { color: var(--text-muted); opacity: 0.55; }

/* Per-character spans injected by JS */
.mf__char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.3em);
    will-change: transform, opacity;
    position: relative;
}
/* Chromatic split on reveal — printing press misregistration */
.mf__char::before, .mf__char::after {
    content: attr(data-c);
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}
.mf__char::before { color: #ff3860; transform: translate(-1.5px, 0.5px); mix-blend-mode: screen; }
.mf__char::after  { color: #22d3ee; transform: translate( 1.5px,-0.5px); mix-blend-mode: screen; }
.mf__statement.is-glitching .mf__char::before,
.mf__statement.is-glitching .mf__char::after { opacity: 0.85; }

/* Blinking cursor at the end of current line during type-in */
.mf__cursor {
    display: inline-block;
    width: 0.08em;
    height: 0.75em;
    background: var(--primary);
    margin-left: 0.08em;
    vertical-align: baseline;
    animation: mf-cursor 0.55s steps(2) infinite;
    box-shadow: 0 0 10px var(--primary);
}
@keyframes mf-cursor { 50% { opacity: 0; } }

/* ── Tear mode: split statement horizontally ── */
.mf__half {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.15em;
    text-transform: uppercase;
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 8.5rem;
    line-height: 0.9;
    letter-spacing: -0.035em;
    text-align: center;
    background-image: inherit;
}
.mf__half--top    { clip-path: inset(0 0 50% 0); }
.mf__half--bottom { clip-path: inset(50% 0 0 0); }

/* A subtle torn edge illusion via border */
.mf__statement[data-mode="tear"].is-tearing .mf__line {
    visibility: hidden;
}
.mf__statement[data-mode="tear"].is-tearing .mf__half {
    opacity: 1;
}

/* ── Progress bar ── */
.mf__progress {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(40rem, 70vw);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 4;
}
.mf__progress-track {
    width: 100%;
    height: 1px;
    background: rgba(253,240,232,0.1);
    position: relative;
    overflow: hidden;
}
.mf__progress-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(90deg, transparent, var(--primary));
    transition: width 0.3s var(--ease);
    box-shadow: 0 0 8px var(--primary);
}
.mf__progress-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
}
.mf__progress-labels span {
    transition: color 0.3s, transform 0.3s;
}
.mf__progress-labels span.is-done {
    color: var(--text);
}
.mf__progress-labels span.is-current {
    color: var(--primary);
    transform: translateY(-2px);
    text-shadow: 0 0 8px rgba(232,80,10,0.5);
}

/* ── Crumple mode: faster, snappier ── */
.mf__statement.is-crumpling .mf__text {
    animation: mf-crumple 0.36s var(--ease-io) forwards;
}
@keyframes mf-crumple {
    0%   { transform: scale(1)    skew(0,0)    rotate(0);   filter: blur(0);   opacity: 1; }
    30%  { transform: scale(1.02) skew(-2deg,0) rotate(-1deg); filter: blur(1px); }
    60%  { transform: scale(0.9)  skew(4deg,2deg) rotate(2deg); filter: blur(2px); opacity: 0.5; }
    100% { transform: scale(0.7)  skew(-2deg,-2deg) rotate(-2deg); filter: blur(6px); opacity: 0; }
}

/* Tear horizontal fly-apart — faster */
.mf__statement.is-tearing .mf__half--top {
    animation: mf-tear-top 0.34s var(--ease-io) forwards;
}
.mf__statement.is-tearing .mf__half--bottom {
    animation: mf-tear-bot 0.34s var(--ease-io) forwards;
}
@keyframes mf-tear-top {
    0%   { transform: translate(0,0)      rotate(0);     filter: blur(0);   opacity: 1; }
    100% { transform: translate(-3%,-55%) rotate(-2deg); filter: blur(3px); opacity: 0; }
}
@keyframes mf-tear-bot {
    0%   { transform: translate(0,0)     rotate(0);    filter: blur(0);   opacity: 1; }
    100% { transform: translate( 3%,55%) rotate(2deg); filter: blur(3px); opacity: 0; }
}

/* Fallback half rendering — JS clones the real text into halves */
.mf__half-line { display: block; line-height: 0.9; padding: 0 0.05em; }
.mf__half-line--accent { color: var(--primary); }
.mf__half-line--dim    { color: var(--text-muted); opacity: 0.55; }

/* ═══════════════════════════════════════════════════════
   12. WORK SECTION — horizontal scroll case studies
   ═══════════════════════════════════════════════════════ */
.work {
    position: relative;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    /* Single value, no redundancy. Space above the section comes from
       inside-the-section padding, not external margin. */
    padding-top: 6rem;
}

/* ── Section header (before the pin) ── */
.work__head {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 0 3.5rem 5rem;
    z-index: 2;
}

/* 2-column: left content + right decorative SVG */
.work__head-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.work__head-left {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
}

.work__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.work__eyebrow-dot {
    width: 0.375rem; height: 0.375rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
}
.work__eyebrow-count { color: var(--primary); }

.work__title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 5.5rem;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--text);
    margin: 0;
}
.work__title span { display: block; }
/* ── Meta panel (replaces old paragraph) ── */
.work__head-meta {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(253,240,232,0.08);
    max-width: 32rem;
}
.work__meta-item {
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap: 0.875rem;
    align-items: start;
}
.work__meta-arrow {
    font-family: var(--f-mono);
    font-size: 0.875rem;
    color: var(--primary);
    line-height: 1.25;
    opacity: 0.8;
}
.work__meta-item > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.work__meta-label {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.work__meta-value {
    font-family: var(--f-body);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-sec);
}

/* ══ RIGHT: animated signal wave composition ══ */
.work__head-visual {
    position: relative;
    color: var(--primary);
    padding: 0.5rem;
}
.work__signal {
    width: 100%;
    height: auto;
    max-height: 28rem;
    overflow: visible;
    display: block;
}

/* Main active wave — draws itself on load, then subtly breathes */
.work__signal-wave {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation:
        work-wave-draw 2.6s cubic-bezier(0.65,0,0.35,1) 0.3s forwards,
        work-wave-breathe 5s ease-in-out 3s infinite;
    filter: drop-shadow(0 0 12px rgba(232,80,10,0.5));
}
@keyframes work-wave-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes work-wave-breathe {
    0%, 100% { opacity: 1;   filter: drop-shadow(0 0 12px rgba(232,80,10,0.5)); }
    50%      { opacity: 0.75;filter: drop-shadow(0 0 22px rgba(232,80,10,0.7)); }
}

/* Background white-ish wave — slow sway */
.work__signal-bg-wave {
    animation: work-wave-sway 9s ease-in-out infinite;
    transform-origin: 260px 190px;
}
@keyframes work-wave-sway {
    0%, 100% { transform: translateY(0);  }
    50%      { transform: translateY(-4px);}
}

/* Peak dot + glow */
.work__signal-dot,
.work__signal-dot-glow {
    animation: work-dot-ride 7s ease-in-out infinite;
    transform-origin: 280px 80px;
}
.work__signal-dot-glow {
    animation-name: work-dot-ride, work-dot-pulse;
    animation-duration: 7s, 1.8s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-iteration-count: infinite, infinite;
}
@keyframes work-dot-ride {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(80px, 110px); }
    50%      { transform: translate(-40px, 30px); }
    75%      { transform: translate(120px, 100px); }
}
@keyframes work-dot-pulse {
    0%, 100% { opacity: 0.25; r: 12; }
    50%      { opacity: 0.55; r: 18; }
}

/* Scanning vertical line — sweeps left to right forever */
.work__signal-scan {
    animation: work-scan 4.5s linear infinite;
}
@keyframes work-scan {
    0%   { transform: translateX(20px);  opacity: 0;   }
    10%  { opacity: 0.55; }
    90%  { opacity: 0.55; }
    100% { transform: translateX(500px); opacity: 0;   }
}

/* Rotating circular badge top-right: "CASE STUDIES · 06" spinning */
.work__signal-badge {
    opacity: 0;
    animation: work-frame-in 0.7s ease-out 0.9s forwards;
}
.work__signal-badge-ring {
    transform-origin: 0 0;
    animation: work-badge-spin 18s linear infinite;
}
@keyframes work-badge-spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* Wordmark bottom-left: studio signature */
.work__signal-mark {
    opacity: 0;
    animation: work-frame-in 0.8s ease-out 1.1s forwards;
}

/* Frame + labels fade in first (kept) */
.work__signal-frame,
.work__signal-labels {
    opacity: 0;
    animation: work-frame-in 0.8s ease-out 0.1s forwards;
}
@keyframes work-frame-in {
    to { opacity: 1; }
}

/* ── Pinned viewport (JS handles the pin with ScrollTrigger) ── */
.work__pin {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--bg);
}

/* ── Horizontal track (moved by JS) ── */
.work__track {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    display: flex;
    gap: 2.5rem;
    padding: 3rem 4rem;
    will-change: transform;
}

/* ── A single frame ── */
.work__frame {
    position: relative;
    flex-shrink: 0;
    width: 76rem;
    max-width: calc(100vw - 8rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem 2.5rem 2.25rem;
    border-radius: 1.75rem;
    background: linear-gradient(
        135deg,
        rgba(253,240,232,0.04) 0%,
        rgba(253,240,232,0.015) 50%,
        rgba(232,80,10,0.04) 100%
    );
    border: 1px solid rgba(253,240,232,0.07);
    overflow: hidden;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(253,240,232,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.45),
        0 40px 60px -25px rgba(0,0,0,0.55);
}

/* Top meta row: number + year */
.work__frame-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(253,240,232,0.06);
}
.work__frame-num  { color: var(--primary); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.16em; }
.work__frame-sep  { color: var(--text-muted); margin: 0 0.25rem; }
.work__frame-year { font-size: 0.6875rem; }

/* Body: flex with text on left (flex-grow) and visual on right (fixed size) */
.work__frame-body {
    flex: 1;
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

/* ── Left: text block ── */
.work__frame-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.work__frame-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.work__frame-tags span {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-sec);
    padding: 0.3rem 0.625rem;
    border: 1px solid rgba(253,240,232,0.12);
    border-radius: 999px;
    background: rgba(253,240,232,0.025);
}

.work__frame-name {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 5rem;                 /* fits 7-char names like METARUN without overflow */
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--text-sec);
    text-transform: uppercase;
    margin: 0;
}
.work__frame-name em {
    font-style: normal;
    color: var(--primary);
}

.work__frame-outcome {
    font-family: var(--f-body);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 28rem;
    margin: 0;
}
.work__frame-outcome strong {
    color: var(--text);
    font-weight: 500;
}

/* ── Right: visual ── */
/* ── Unified visual container — same size across all frames.
   Fixed dimensions so it NEVER resizes based on left-side content.
   Holds a placeholder now; drop in <img> later and they'll all match. */
.work__frame-visual {
    position: relative;
    flex-shrink: 0;                  /* key: don't shrink based on grid-auto */
    width: 38rem;                    /* width only — height is set by the inner media's natural aspect ratio */
    border-radius: 1.25rem;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(135deg, rgba(232,80,10,0.12) 0%, rgba(253,240,232,0.03) 100%),
        rgba(17,14,11,0.55);
    border: 1px solid rgba(253,240,232,0.06);
    box-shadow:
        inset 0 1px 0 rgba(253,240,232,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.35);
}

/* Placeholder label — sits centered inside the container.
   Swap this <div> for an <img> / <picture> when you have real imagery. */
.work__frame-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.4;
    pointer-events: none;
}
/* Grid texture so the empty state doesn't feel flat */
.work__frame-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(253,240,232,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(253,240,232,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Media inside .work__frame-visual displays at its natural aspect ratio.
   Width fills the container; height is computed from the source's intrinsic ratio
   (set via HTML width/height attrs on <img> and <video>). No cropping, no stretching. */
.work__frame-visual > img,
.work__frame-visual > picture,
.work__frame-visual > picture > img,
.work__frame-visual > video {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}
/* Hide placeholder when real media is present */
.work__frame-visual:has(> img),
.work__frame-visual:has(> picture),
.work__frame-visual:has(> video) {
    background: #110E0B;       /* fall-through bg behind transparent areas of media */
}
.work__frame-visual:has(> img) > .work__frame-placeholder,
.work__frame-visual:has(> picture) > .work__frame-placeholder,
.work__frame-visual:has(> video) > .work__frame-placeholder {
    display: none;
}
/* Video card — subtle dark overlay so the orange brand frame still reads on top */
.work__frame-video {
    background: #0A0807;       /* dark fallback while frame loads */
}

/* ── 3-image crossfade slider (used by Noor Al Tijara case study) ──────
   The .work__frame-slider sits inside .work__frame-visual--slider and
   stacks all 3 images absolutely. Container takes its height from the
   16:9 aspect-ratio. Each image fades in/out on a 9s loop, staggered
   by 3s so one is always fully visible while the others wait their turn.
   Pure CSS — no JS dependency. */
.work__frame-visual--slider {
    background: #110E0B;       /* dark fallback while images load */
}
.work__frame-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: inherit;
}
.work__frame-slider > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: wfSliderFade 9s infinite ease-in-out;
    border-radius: inherit;
}
.work__frame-slider > img:nth-child(1) { animation-delay: 0s; }
.work__frame-slider > img:nth-child(2) { animation-delay: 3s; }
.work__frame-slider > img:nth-child(3) { animation-delay: 6s; }

@keyframes wfSliderFade {
    0%   { opacity: 0; }
    4%   { opacity: 1; }    /* fade in over ~0.4s */
    33%  { opacity: 1; }    /* hold for ~2.6s */
    37%  { opacity: 0; }    /* fade out over ~0.4s */
    100% { opacity: 0; }
}

/* ── 5-image variant (used by WashX case study) ─────────────────
   Same crossfade feel as the 3-image slider but on a 15-second loop
   so each of the 5 images gets a proper ~3s in the spotlight.
   Delays for nth-child(1)/(2)/(3) inherit from the base rule above;
   we just add (4) and (5), and override the animation to the longer
   keyframe. */
.work__frame-slider--5 > img {
    animation: wfSliderFade5 15s infinite ease-in-out;
}
.work__frame-slider--5 > img:nth-child(4) { animation-delay: 9s; }
.work__frame-slider--5 > img:nth-child(5) { animation-delay: 12s; }

@keyframes wfSliderFade5 {
    0%   { opacity: 0; }
    3%   { opacity: 1; }    /* fade in over ~0.45s */
    20%  { opacity: 1; }    /* hold for ~2.55s */
    23%  { opacity: 0; }    /* fade out over ~0.45s */
    100% { opacity: 0; }    /* wait 11.55s while the other 4 take turns */
}

/* Respect reduced-motion: hold the first image, no animation */
@media (prefers-reduced-motion: reduce) {
    .work__frame-slider > img {
        animation: none;
        opacity: 0;
    }
    .work__frame-slider > img:nth-child(1) {
        opacity: 1;
    }
}

/* ── Closing "number 43" frame ── */
.work__frame--end {
    width: 44rem;
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232,80,10,0.18) 0%, transparent 70%),
        linear-gradient(135deg, rgba(253,240,232,0.04), rgba(232,80,10,0.05));
    border: 1px solid rgba(232,80,10,0.25);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.work__frame-end {
    display: flex; flex-direction: column; align-items: center; gap: 1.75rem;
    padding: 2rem;
}
.work__frame-end-eyebrow {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.work__frame-end-title {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 5.5rem;
    line-height: 0.92;
    letter-spacing: -0.035em;
    color: var(--text-sec);
    text-transform: uppercase;
    margin: 0;
}
.work__frame-end-accent { color: var(--primary); }

/* ── HUD inside pinned area ── */
.work__hud {
    position: absolute;
    top: 2rem;
    right: 2.5rem;
    z-index: 10;
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    font-family: var(--f-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.5rem 0.875rem;
    background: rgba(17,14,11,0.7);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.625rem;
    pointer-events: none;
}
.work__hud-num {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--text);
    letter-spacing: -0.01em;
    min-width: 1.5em;
    text-align: center;
}
.work__hud-sep   { color: var(--primary); }
.work__hud-total { color: var(--text-muted); }

/* Progress bar at bottom of pin */
.work__progress {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(40rem, 70vw);
    height: 1px;
    background: rgba(253,240,232,0.08);
    overflow: hidden;
    z-index: 10;
}
.work__progress-fill {
    position: absolute; inset: 0;
    width: 0%;
    background: linear-gradient(90deg, transparent, var(--primary));
    box-shadow: 0 0 8px var(--primary);
}

/* ═══════════════════════════════════════════════════════
   13. SERVICES — magazine-spread diagonal layout
   ═══════════════════════════════════════════════════════ */
.services {
    position: relative;
    background: var(--bg);
    color: var(--text);
    padding-top: 2rem;             /* small buffer; sticky nav provides the visual entry */
    isolation: isolate;
}

/* ── Sticky nav strip ── */
.services__nav {
    position: sticky;
    top: 1.5rem;
    z-index: 20;
    margin: 0 auto 2rem;
    width: fit-content;
    pointer-events: auto;
}
.services__nav-inner {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    background: rgba(17,14,11,0.75);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 999px;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.6);
}
.services__nav-label {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-right: 0.5rem;
    border-right: 1px solid rgba(253,240,232,0.08);
}
.services__nav-items {
    display: inline-flex;
    gap: 0.25rem;
}
.services__nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: background 0.3s, color 0.3s;
}
.services__nav-item:hover { color: var(--text-sec); }
.services__nav-item.is-current {
    background: rgba(232,80,10,0.15);
    color: var(--primary);
}
.services__nav-num {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    opacity: 0.6;
}
.services__nav-item.is-current .services__nav-num { opacity: 1; }
.services__nav-count {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    padding-left: 0.75rem;
    border-left: 1px solid rgba(253,240,232,0.08);
}
.services__nav-count span { color: var(--primary); }

/* ══════ COVER SPREAD ══════ */
.services__cover {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 3.5rem 6rem;
}
.services__cover-frame {
    position: absolute;
    inset: 3rem 3rem;
    pointer-events: none;
}
.services__cover-corner {
    position: absolute;
    width: 3rem; height: 3rem;
    border-color: var(--primary);
    opacity: 0.5;
}
.services__cover-corner--tl { top: 0;    left: 0;    border-top: 1px solid; border-left: 1px solid; }
.services__cover-corner--tr { top: 0;    right: 0;   border-top: 1px solid; border-right: 1px solid; }
.services__cover-corner--bl { bottom: 0; left: 0;    border-bottom: 1px solid; border-left: 1px solid; }
.services__cover-corner--br { bottom: 0; right: 0;   border-bottom: 1px solid; border-right: 1px solid; }

.services__cover-inner {
    max-width: 68rem;
    position: relative;
    z-index: 2;
    text-align: left;
}
.services__cover-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2rem;
}
.services__cover-dot {
    width: 0.375rem; height: 0.375rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
}
.services__cover-title {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 9.5rem;
    line-height: 0.88;
    letter-spacing: -0.04em;
    color: var(--text-sec);
    text-transform: uppercase;
    margin: 0 0 2.5rem;
}
.services__cover-accent { color: var(--primary); }
.services__cover-sub {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 36rem;
    font-weight: 300;
    margin: 0 0 3rem;
}
.services__cover-index {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(253,240,232,0.08);
    max-width: 38rem;
}
.services__cover-idx-item {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 1.0625rem;
    color: var(--text-sec);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(253,240,232,0.04);
}
.services__cover-idx-item span {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    color: var(--primary);
    min-width: 2rem;
}
.services__cover-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.services__cover-hint-line {
    width: 2.5rem; height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary));
}
.services__cover-hint-arrow {
    color: var(--primary);
    font-size: 0.875rem;
    animation: svc-hint-bounce 1.8s ease-in-out infinite;
}
@keyframes svc-hint-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* ══════ INDIVIDUAL SPREAD ══════ */
.svc-spread {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    overflow: hidden;     /* CRITICAL: contain wipe so it doesn't bleed upward */
    isolation: isolate;
}

/* Diagonal wipe overlay — sits within spread bounds.
   Starts covering spread, slides out right when .is-revealed added by JS. */
.svc-spread__wipe {
    position: absolute;
    inset: 0;
    background: var(--primary);
    transform-origin: top left;
    transform: skewY(-7deg) translateX(0);
    z-index: 10;
    transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: none;
}
.svc-spread.is-revealed .svc-spread__wipe {
    transform: skewY(-7deg) translateX(120%);
}

/* LEFT column — text block */
.svc-spread__left {
    position: relative;
    z-index: 2;
    padding: 7rem 4rem 5rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    justify-content: center;
    /* Diagonal bottom edge — crops the block with a 7° upward slant on the right */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.svc-spread__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.svc-spread__meta-dot {
    color: var(--primary);
    font-size: 0.5rem;
    animation: svc-pulse 2s ease-in-out infinite;
}
@keyframes svc-pulse {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.3; }
}

.svc-spread__num-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    line-height: 0.85;
}
.svc-spread__num {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 7rem;              /* reduced 50% from 14rem per request */
    letter-spacing: -0.05em;
    color: var(--primary);
    line-height: 0.85;
}
.svc-spread__num-slash {
    font-family: var(--f-mono);
    font-size: 1.5rem;
    color: var(--text-muted);
    padding-bottom: 1.25rem;
}
.svc-spread__num-total {
    font-family: var(--f-mono);
    font-size: 1rem;
    color: var(--text-muted);
    padding-bottom: 1.5rem;
    letter-spacing: 0.12em;
}

.svc-spread__name {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 5rem;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
    max-width: 32rem;
}
.svc-spread__name em {
    font-style: normal;
    color: var(--primary);
    font-weight: 400;
}

.svc-spread__copy {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    font-weight: 300;
    color: var(--text-muted);
    max-width: 30rem;
    margin: 0;
}
.svc-spread__copy strong {
    color: var(--text);
    font-weight: 500;
}

/* Deliverables block */
.svc-spread__deliver,
.svc-spread__stack {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 32rem;
}
.svc-spread__deliver-label,
.svc-spread__stack-label {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
}
.svc-spread__deliver-list {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
}
.svc-spread__deliver-list li {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    color: var(--text-sec);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(253,240,232,0.06);
    position: relative;
    padding-left: 1.25rem;
}
.svc-spread__deliver-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.5rem; height: 1px;
    background: var(--primary);
    transform: translateY(-50%);
}

.svc-spread__stack-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.svc-spread__stack-items span {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-sec);
    padding: 0.3rem 0.625rem;
    border: 1px solid rgba(253,240,232,0.12);
    border-radius: 999px;
    background: rgba(253,240,232,0.02);
}

/* RIGHT column — visual (above the diagonal) */
.svc-spread__right {
    position: relative;
    z-index: 1;
    padding: 4rem 4rem 4rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Transparent — no diagonal bg, keep page bg showing through */
    background: transparent;
    clip-path: none;
}

/* ── Visual container — holds the animated SVG composition.
   Aspect 5/4 = slightly wider than tall (height reduced from previous square).
   Dark bg with soft orange anchor; SVG visuals composed on top. */
.svc-spread__visual {
    position: relative;
    width: 100%;
    max-width: 34rem;
    aspect-ratio: 5 / 4;                /* slightly shorter than square — user-requested height reduction */
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(17,14,11,0.85), rgba(17,14,11,0.5)),
        var(--bg);
    border: 1px solid rgba(253,240,232,0.08);
    box-shadow:
        inset 0 1px 0 rgba(253,240,232,0.06),
        0 30px 60px -20px rgba(0,0,0,0.6);
}

/* ── Common visual frame ── */
.svc-visual {
    position: absolute; inset: 0;
    overflow: hidden;
    isolation: isolate;
    color: var(--primary);
}
.svc-visual__frame-corner {
    position: absolute;
    width: 1.25rem; height: 1.25rem;
    border-color: var(--primary);
    opacity: 0.7;
    z-index: 3;
}
.svc-visual__frame-corner.tl { top: 1rem;    left: 1rem;    border-top: 1.5px solid; border-left: 1.5px solid; }
.svc-visual__frame-corner.tr { top: 1rem;    right: 1rem;   border-top: 1.5px solid; border-right: 1.5px solid; }
.svc-visual__frame-corner.bl { bottom: 1rem; left: 1rem;    border-bottom: 1.5px solid; border-left: 1.5px solid; }
.svc-visual__frame-corner.br { bottom: 1rem; right: 1rem;   border-bottom: 1.5px solid; border-right: 1.5px solid; }

.svc-visual__label {
    position: absolute;
    top: 1.25rem; left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--f-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
    color: rgba(253,240,232,0.55);
    z-index: 3;
}
.svc-visual__label-dot {
    color: var(--primary);
    animation: svc-pulse 2s ease-in-out infinite;
}

/* ── 01 Web: Code rain visual ── */
.svc-visual__code-rain {
    position: absolute;
    inset: 3rem 1.5rem;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.svc-visual__code-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: rgba(232,80,10,0.8);
    animation: svc-code-fall 12s linear infinite;
}
.svc-visual__code-col:nth-child(1) { animation-duration: 11s; }
.svc-visual__code-col:nth-child(2) { animation-duration: 14s; animation-delay: -3s; color: rgba(253,240,232,0.4); }
.svc-visual__code-col:nth-child(3) { animation-duration:  9s; animation-delay: -1s; }
.svc-visual__code-col:nth-child(4) { animation-duration: 13s; animation-delay: -5s; color: rgba(253,240,232,0.4); }
.svc-visual__code-col:nth-child(5) { animation-duration: 10s; animation-delay: -2s; }
.svc-visual__code-col:nth-child(6) { animation-duration: 15s; animation-delay: -4s; color: rgba(253,240,232,0.4); }
.svc-visual__code-col span {
    white-space: nowrap;
    opacity: 0.85;
}
.svc-visual__code-col span:first-child { color: #fff; opacity: 1; }
@keyframes svc-code-fall {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(50%); }
}

.svc-visual__code-caption {
    position: absolute;
    bottom: 1.25rem; left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 0.875rem;
    padding: 0.5rem 0.875rem;
    background: rgba(17,14,11,0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(253,240,232,0.1);
    border-radius: 999px;
    z-index: 3;
}
.svc-visual__code-kv {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    color: var(--text-sec);
}
.svc-visual__code-kv em {
    font-style: normal;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

/* ── 02 Brand: geometric shapes rotating ── */
.svc-visual__brand-stage {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 14rem; height: 14rem;
}
.svc-visual__brand-shape {
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: center;
}
.svc-visual__brand-shape--circle {
    width: 12rem; height: 12rem;
    transform: translate(-50%, -50%);
    border: 2.5px solid var(--primary);
    border-radius: 50%;
    animation: svc-brand-rotate-cw 22s linear infinite,
               svc-brand-breathe 5s ease-in-out infinite;
}
.svc-visual__brand-shape--square {
    width: 7.5rem; height: 7.5rem;
    transform: translate(-50%, -50%) rotate(0deg);
    background: rgba(232,80,10,0.12);
    border: 1.5px solid rgba(232,80,10,0.5);
    animation: svc-brand-rotate-ccw 18s linear infinite;
}
.svc-visual__brand-shape--triangle {
    width: 8.5rem; height: 8.5rem;
    transform: translate(-50%, -50%);
    color: #FDF0E8;
    opacity: 0.55;
    animation: svc-brand-rotate-cw 14s linear infinite;
}
.svc-visual__brand-center {
    position: absolute;
    top: 50%; left: 50%;
    width: 0.875rem; height: 0.875rem;
    transform: translate(-50%, -50%);
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 24px var(--primary);
    animation: svc-pulse 2.4s ease-in-out infinite;
}
@keyframes svc-brand-rotate-cw {
    from { transform: translate(-50%, -50%) rotate(0deg);   }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes svc-brand-rotate-ccw {
    from { transform: translate(-50%, -50%) rotate(0deg);    }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes svc-brand-breathe {
    0%, 100% { border-color: rgba(232,80,10,1);   }
    50%      { border-color: rgba(232,80,10,0.4); }
}

.svc-visual__brand-caption {
    position: absolute;
    bottom: 1.25rem; left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 0.875rem;
    padding: 0.5rem 0.875rem;
    background: rgba(17,14,11,0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(253,240,232,0.1);
    border-radius: 999px;
    z-index: 3;
}
.svc-visual__brand-kv {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    color: var(--text-sec);
}

/* ── 03 Marketing: line chart drawing + pulsing dots ── */
.svc-visual__growth-chart {
    position: absolute;
    inset: 3rem 1.5rem 3.5rem;
    width: auto; height: auto;
}
.svc-visual__growth-line {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: svc-growth-draw 3.2s cubic-bezier(0.65, 0, 0.35, 1) forwards,
               svc-growth-redraw 14s linear 3.5s infinite;
    filter: drop-shadow(0 0 6px rgba(232,80,10,0.4));
}
@keyframes svc-growth-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes svc-growth-redraw {
    0%   { stroke-dashoffset: 0;   }
    45%  { stroke-dashoffset: 0;   }
    55%  { stroke-dashoffset: 700; }
    100% { stroke-dashoffset: 0;   }
}
.svc-visual__growth-dots circle {
    opacity: 0;
    animation: svc-growth-dot-in 0.4s ease-out forwards;
}
.svc-visual__growth-dots circle:nth-child(1) { animation-delay: 1.2s; }
.svc-visual__growth-dots circle:nth-child(2) { animation-delay: 1.8s; }
.svc-visual__growth-dots circle:nth-child(3) { animation-delay: 2.4s; }
.svc-visual__growth-dots circle:nth-child(4) { animation-delay: 3.0s; }
@keyframes svc-growth-dot-in {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
}
.svc-visual__growth-peak {
    animation: svc-growth-peak-pulse 2s ease-in-out 3.2s infinite;
}
@keyframes svc-growth-peak-pulse {
    0%, 100% { r: 12; opacity: 0.25; }
    50%      { r: 18; opacity: 0.05; }
}
.svc-visual__growth-caption {
    position: absolute;
    bottom: 1.25rem; left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 0.875rem;
    padding: 0.5rem 0.875rem;
    background: rgba(17,14,11,0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(253,240,232,0.1);
    border-radius: 999px;
    z-index: 3;
}
.svc-visual__growth-kv {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    color: var(--text-sec);
}
.svc-visual__growth-kv em {
    font-style: normal;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

/* ── 04 Web3: hexagonal node network ── */
.svc-visual__web3-net {
    position: absolute;
    inset: 3rem 1.5rem 3.5rem;
    width: auto; height: auto;
}
.svc-visual__web3-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: svc-web3-pulse 3s ease-in-out infinite;
}
.svc-visual__web3-node--1 { animation-delay: 0s;   }
.svc-visual__web3-node--2 { animation-delay: 0.4s; }
.svc-visual__web3-node--3 { animation-delay: 0.8s; }
.svc-visual__web3-node--4 { animation-delay: 1.2s; }
.svc-visual__web3-node--5 { animation-delay: 1.6s; }
.svc-visual__web3-node--6 { animation-delay: 2.0s; }
@keyframes svc-web3-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1;   }
}
.svc-visual__web3-lines line {
    stroke-dasharray: 4 3;
    animation: svc-web3-flow 8s linear infinite;
}
@keyframes svc-web3-flow {
    from { stroke-dashoffset: 0;    }
    to   { stroke-dashoffset: -100; }
}
.svc-visual__web3-packet--1 {
    animation: svc-web3-packet-1 6s linear infinite;
    filter: drop-shadow(0 0 4px #FDF0E8);
}
.svc-visual__web3-packet--2 {
    animation: svc-web3-packet-2 7s linear infinite;
    animation-delay: 2s;
    filter: drop-shadow(0 0 4px #FDF0E8);
}
@keyframes svc-web3-packet-1 {
    0%   { transform: translate(200px, 80px);  opacity: 0; }
    5%   { opacity: 1; }
    30%  { transform: translate(120px, 170px); opacity: 1; }
    35%  { opacity: 0; }
    55%  { transform: translate(200px, 260px); opacity: 1; }
    60%  { opacity: 0; }
    80%  { transform: translate(320px, 300px); opacity: 1; }
    100% { transform: translate(280px, 170px); opacity: 0; }
}
@keyframes svc-web3-packet-2 {
    0%   { transform: translate(280px, 170px); opacity: 0; }
    5%   { opacity: 1; }
    25%  { transform: translate(200px, 80px);  opacity: 1; }
    30%  { opacity: 0; }
    50%  { transform: translate(120px, 170px); opacity: 1; }
    55%  { opacity: 0; }
    75%  { transform: translate(80px, 300px);  opacity: 1; }
    100% { transform: translate(200px, 260px); opacity: 0; }
}
.svc-visual__web3-caption {
    position: absolute;
    bottom: 1.25rem; left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 0.875rem;
    padding: 0.5rem 0.875rem;
    background: rgba(17,14,11,0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(253,240,232,0.1);
    border-radius: 999px;
    z-index: 3;
}
.svc-visual__web3-kv {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    color: var(--text-sec);
}
.svc-visual__web3-kv em {
    font-style: normal;
    color: var(--text-muted);
    margin-right: 0.25rem;
}


/* ═══════════════════════════════════════════════════════
   14. OPERATIONS — interactive globe + service tabs
   Real 3D globe (globe.gl). Click tabs to swap markers + arcs.
   ═══════════════════════════════════════════════════════ */
.ops {
    position: relative;
    background: #181410;            /* slightly lighter than page bg #110E0B */
    color: var(--text);
    overflow: hidden;
    isolation: isolate;
    padding: 6rem 0 6rem;
    min-height: 100vh;
}
/* Top + bottom soft fades so the lighter section bleeds into the page bg
   instead of hard-cutting. Layered over content; pointer-events: none. */
.ops::before,
.ops::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 6rem;
    pointer-events: none;
    z-index: 6;
}
.ops::before {
    top: 0;
    background: linear-gradient(to bottom, var(--bg) 0%, rgba(24,20,16,0) 100%);
}
.ops::after {
    bottom: 0;
    background: linear-gradient(to top, var(--bg) 0%, rgba(24,20,16,0) 100%);
}

.ops__inner {
    position: relative;
    max-width: 110rem;
    margin: 0 auto;
    padding: 0 3rem;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
    align-items: start;            /* align globe & panel to top, not centered */
    min-height: calc(100vh - 12rem);
}

/* ── Globe wrap ── */
.ops__globe-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 80vh;
    margin-top: -2rem;             /* nudge up to align with title baseline */
    /* Soft radial glow behind globe */
    background-image: radial-gradient(
        circle at 50% 50%,
        rgba(232, 80, 10, 0.15) 0%,
        rgba(232, 80, 10, 0.04) 40%,
        transparent 75%
    );
}

/* The Three.js canvas mount point — globe.gl writes a canvas inside */
.ops__globe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ops__globe canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Loader fallback if globe.gl hasn't booted yet */
.ops__globe::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px dashed rgba(253,240,232,0.15);
    animation: ops-globe-fallback 8s linear infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes ops-globe-fallback {
    from { transform: translate(-50%, -50%) rotate(0); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── HUD overlay on globe ── */
.ops__hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(253,240,232,0.55);
}
.ops__hud-corner {
    position: absolute;
    padding: 0.5rem 0.875rem;
}
.ops__hud-corner--tl { top: 1rem;    left: 1rem;   }
.ops__hud-corner--tr { top: 1rem;    right: 1rem;  }
.ops__hud-corner--bl { bottom: 1rem; left: 1rem;   }
.ops__hud-corner--br { bottom: 1rem; right: 1rem;  }

.ops__hud-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgba(17,14,11,0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 999px;
}
.ops__hud-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 6px var(--primary);
    animation: svc-pulse 1.8s ease-in-out infinite;
}

/* ── Right panel ── */
.ops__panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 0;
}

.ops__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ops__eyebrow-bracket { color: var(--primary); }

.ops__title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 6rem;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--text-sec);
    text-transform: none;
    margin: 0;
}
.ops__sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    font-weight: 300;
    color: var(--text-muted);
    max-width: 32rem;
    margin: 0;
}
.ops__sub strong {
    color: var(--text-sec);
    font-weight: 500;
}

/* Inline stat strip */
.ops__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0.5rem 0;
    border-top: 1px solid rgba(253,240,232,0.08);
    border-bottom: 1px solid rgba(253,240,232,0.08);
    background: rgba(253,240,232,0.06);
}
.ops__stat {
    padding: 1rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--bg);
}
.ops__stat-num {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 2rem;
    line-height: 0.9;
    color: var(--text-sec);
    letter-spacing: -0.03em;
    display: flex;
    align-items: baseline;
}
.ops__stat-num i {
    font-style: normal;
    color: var(--primary);
    font-size: 0.7em;
    margin-left: 0.05em;
}
.ops__stat-label {
    font-family: var(--f-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Service tabs (horizontal row) ── */
.ops__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.ops__tab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 0.625rem;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
    color: var(--text-sec);
    text-align: left;
    font-family: inherit;
    position: relative;
}
.ops__tab:hover {
    border-color: rgba(232,80,10,0.4);
    background: rgba(232,80,10,0.04);
}
.ops__tab.is-active {
    border-color: var(--primary);
    background: rgba(232,80,10,0.08);
}
.ops__tab-num {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}
.ops__tab.is-active .ops__tab-num { color: var(--primary); }
.ops__tab-name {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--text-sec);
    line-height: 1.2;
}
.ops__tab-arrow {
    position: absolute;
    top: 0.875rem;
    right: 1rem;
    font-family: var(--f-display);
    color: var(--text-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.3s, transform 0.3s, color 0.3s;
    font-size: 0.875rem;
}
.ops__tab.is-active .ops__tab-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--primary);
}

/* ── Detail panel ── */
.ops__detail {
    position: relative;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(253,240,232,0.1);
    min-height: 13rem;
}
.ops__detail-pane {
    position: absolute;
    inset: 1rem 0 0 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s;
}
.ops__detail-pane.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.ops__detail-desc {
    font-family: var(--f-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-muted);
    font-weight: 300;
    margin: 0 0 1rem;
    max-width: 30rem;
}
.ops__detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
}
.ops__detail-list li {
    font-family: var(--f-body);
    font-size: 0.875rem;
    color: var(--text-sec);
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(253,240,232,0.05);
    position: relative;
    padding-left: 1rem;
}
.ops__detail-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.5rem;
    height: 1px;
    background: var(--primary);
    transform: translateY(-50%);
}


}


/* ═══════════════════════════════════════════════════════
   15. PROCESS — 4-card grid with rich dual-tone SVGs (r34)
   Section title: Funnel Display (system rule).
   Each card: SVG art on top, name + copy below, numeral + week tag.
   ═══════════════════════════════════════════════════════ */
.proc {
    position: relative;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    isolation: isolate;
    padding: 9rem 0 9rem;
}

/* Subtle dot grid texture (very faint, masked at edges) */
.proc::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(253,240,232,0.04) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom,
        transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* ── Header ── */
.proc__head {
    position: relative;
    z-index: 1;
    max-width: 60rem;
    margin: 0 auto 5rem;
    padding: 0 3rem;
    text-align: center;
}
.proc__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
}
.proc__eyebrow-bracket { color: var(--primary); }

/* TITLE — Funnel Display, NOT Sixsound (system rule) */
.proc__title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 5.5rem;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--text-sec);
    margin: 0 0 2rem;
}
.proc__sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    font-weight: 300;
    color: var(--text-muted);
    max-width: 38rem;
    margin: 0 auto;
}

/* ── 4-card grid ── */
.proc__grid {
    position: relative;
    z-index: 1;
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 3rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.proc__card {
    position: relative;
    padding: 1.75rem 1.75rem 1.75rem;
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(253,240,232,0.04), rgba(253,240,232,0.01)),
        rgba(17,14,11,0.55);
    border: 1px solid rgba(253,240,232,0.08);
    box-shadow:
        inset 0 1px 0 rgba(253,240,232,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 20px 40px -20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.proc__card:hover {
    transform: translateY(-6px);
    border-color: rgba(232,80,10,0.45);
    box-shadow:
        inset 0 1px 0 rgba(253,240,232,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.4),
        0 30px 60px -20px rgba(232,80,10,0.25),
        0 30px 60px -20px rgba(0,0,0,0.6);
}

/* Top-of-card meta row: numeral + week tag */
.proc__card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.proc__card-num {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    font-weight: 500;
}
.proc__card-week {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 0.3rem 0.625rem;
    background: rgba(253,240,232,0.04);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 999px;
}

/* The SVG icon container — minimal frame, lots of breathing room */
.proc__card-art {
    position: relative;
    width: 100%;
    aspect-ratio: 200 / 140;
    margin: 0.75rem 0 1.75rem;
    border-radius: 0.875rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(232,80,10,0.08), transparent 60%),
        rgba(17,14,11,0.5);
    border: 1px solid rgba(253,240,232,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}
.proc__card-art svg {
    width: 80%;
    height: 80%;
    display: block;
}
/* On hover, intensify the radial glow behind the icon */
.proc__card:hover .proc__card-art {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(232,80,10,0.16), transparent 60%),
        rgba(17,14,11,0.5);
    border-color: rgba(232,80,10,0.25);
}

.proc__card-name {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 0.75rem;
}

.proc__card-desc {
    font-family: var(--f-body);
    font-size: 0.9rem;
    line-height: 1.55;
    font-weight: 300;
    color: var(--text-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════
   16. FINAL CTA — massive marquee text (r38)
   3 rows scrolling opposite directions, pause on hover.
   Below: button + contact strip.
   ═══════════════════════════════════════════════════════ */
.cta {
    position: relative;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    isolation: isolate;
    padding: 8rem 0 6rem;
}

/* Subtle dot grid texture (matches process/bpo) */
.cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(253,240,232,0.04) 1.2px, transparent 1.2px);
    background-size: 36px 36px;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom,
        transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* Eyebrow above the marquee */
.cta__eyebrow {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4rem;
}
.cta__eyebrow-bracket { color: var(--primary); }

/* ── Marquee container ── */
.cta__marquees {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 -2vw;            /* slight bleed so edges feel "off screen" */
    user-select: none;
}

.cta__marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Side fade masks so the marquee fades into the page edges */
    mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.cta__marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    white-space: nowrap;
    will-change: transform;
}

/* Repeat strategy: track has 8 phrase units (4 phrase + 4 sep, doubled).
   We tween the track from translateX(0) to translateX(-50%) so the seam falls
   between unit 4 and unit 5 — invisible because they're identical. */
.cta__marquee--ltr .cta__marquee-track {
    animation: cta-marquee-ltr 38s linear infinite;
}
.cta__marquee--rtl .cta__marquee-track {
    animation: cta-marquee-rtl 44s linear infinite;
}
.cta__marquee:hover .cta__marquee-track {
    animation-play-state: paused;
}

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

/* Marquee item typography — Sixsound at huge size */
.cta__marquee-item {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 9rem;
    line-height: 1;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Outline style (rows 1 and 3) */
.cta__marquee--outline .cta__marquee-item {
    color: transparent;
    -webkit-text-stroke: 1.5px #E8500A;
    text-stroke: 1.5px #E8500A;
}

/* Solid style (row 2 — hero) */
.cta__marquee--solid .cta__marquee-item {
    color: var(--text-sec);
    font-size: 11rem;          /* even bigger — the hero row */
}


/* ── Action row below the marquees ── */
.cta__action {
    position: relative;
    z-index: 1;
    margin-top: 4.5rem;
    padding: 0 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1.125rem 2rem;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.005em;
    box-shadow: 0 16px 40px -10px rgba(232, 80, 10, 0.5);
    transition: transform 0.35s var(--ease), gap 0.35s var(--ease), box-shadow 0.35s;
    flex-shrink: 0;
}
.cta__btn:hover {
    transform: translateY(-3px);
    gap: 0.875rem;
    box-shadow: 0 20px 50px -8px rgba(232, 80, 10, 0.65);
}
.cta__btn svg { transition: transform 0.35s var(--ease); }
.cta__btn:hover svg { transform: translateX(2px); }

.cta__meta {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.cta__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cta__meta-label {
    font-family: var(--f-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cta__meta-value {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--text-sec);
}


/* ═══════════════════════════════════════════════════════
   CTA marquee separators (SVG marks) + alignment fix (r39)
   ═══════════════════════════════════════════════════════ */

/* Track aligns items by baseline so cap-heights match across rows */
.cta__marquee-track {
    align-items: baseline;
}

/* Marquee item line-height tightened so baseline alignment is precise */
.cta__marquee-item {
    line-height: 0.85;
    padding-bottom: 0.05em;
}

/* SVG separator wrapper — sized and aligned to mid-cap-height */
.cta__marquee-sep {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    width: 4.5rem;
    height: 4.5rem;
    color: rgba(232, 80, 10, 0.7);            /* orange, slightly muted for outline rows */
    transform: translateY(-1.5rem);            /* visual centering against text mid-line */
}
.cta__marquee-sep svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Hero-row separator: solid orange diamond, larger */
.cta__marquee-sep--orange {
    color: var(--primary);
    width: 3.25rem;
    height: 3.25rem;
    transform: translateY(-2rem);              /* nudge for the bigger 11rem text row */
}

/* Row 3 sep (arrow-tick) needs wider aspect */
.cta__marquee--ltr:not(:first-child):last-child .cta__marquee-sep,
.cta__marquee:nth-of-type(3) .cta__marquee-sep {
    width: 5rem;
}


/* ═══════════════════════════════════════════════════════
   17. SITE FOOTER — orange, no oversized branding (r40)
   Starts straight at the columns. Live time chip top-right,
   decorative rotating asterisk corner mark, 4 columns,
   minimal bottom band.
   ═══════════════════════════════════════════════════════ */
.nf-footer {
    position: relative;
    background: var(--primary);                /* solid orange */
    color: var(--text-sec);                    /* cream type on orange */
    padding: 4rem 0 1.75rem;
    overflow: hidden;
    isolation: isolate;
    border-top: 4px solid #110E0B;             /* clean dark divider line */
}

/* Subtle diagonal grain texture — printed-paper feel */
.nf-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(135deg,
            rgba(253,240,232,0.04) 0%,
            transparent 30%,
            rgba(17,14,11,0.05) 100%),
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 4px,
            rgba(253,240,232,0.025) 4px,
            rgba(253,240,232,0.025) 5px);
    pointer-events: none;
    z-index: 0;
}

/* Decorative giant asterisk — bottom-right corner, very low opacity, rotates slowly */
.nf-footer__mark {
    position: absolute;
    bottom: -10rem;
    right: -10rem;
    width: 36rem;
    height: 36rem;
    color: rgba(253, 240, 232, 0.07);
    z-index: 0;
    pointer-events: none;
    animation: nf-footer-mark-spin 90s linear infinite;
}
@keyframes nf-footer-mark-spin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}
.nf-footer__mark svg { width: 100%; height: 100%; }

/* Inner wrapper */
.nf-footer__inner {
    position: relative;
    z-index: 2;
    max-width: 110rem;
    margin: 0 auto;
    padding: 0 3rem;
}

/* ── Live time chip — sits at the top, mono pill ── */
.nf-footer__live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(17, 14, 11, 0.85);
    color: var(--text-sec);
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 3.5rem;
}
.nf-footer__live-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(232, 80, 10, 0.8);
    animation: svc-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
.nf-footer__live-loc { color: var(--text-sec); }
.nf-footer__live-tz  { color: rgba(253, 240, 232, 0.6); }
.nf-footer__live-clock {
    color: var(--primary);
    font-feature-settings: "tnum";   /* tabular numerals so digits don't jitter */
    min-width: 5.5em;
    text-align: left;
}
.nf-footer__live-sep {
    color: rgba(253, 240, 232, 0.4);
}

/* ── 4-column grid ── */
.nf-footer__cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr 1fr;
    gap: 3rem;
    padding-bottom: 3.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid rgba(17, 14, 11, 0.25);
}

/* Column title with numeral prefix */
.nf-footer__col-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(17, 14, 11, 0.85);
    margin: 0 0 1.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed rgba(17, 14, 11, 0.3);
    font-weight: 500;
}
.nf-footer__col-num {
    color: var(--text-sec);
    background: rgba(17, 14, 11, 0.85);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
}
.nf-footer__col-name {
    flex: 1;
}

/* Standard list (Reach us details) */
.nf-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.nf-footer__list li {
    font-family: var(--f-body);
    font-size: 0.95rem;
    color: var(--text-sec);
    line-height: 1.4;
}
.nf-footer__list a {
    color: var(--text-sec);
    text-decoration: none;
    transition: color 0.3s, padding-left 0.3s var(--ease);
    display: inline-flex;
    align-items: center;
}
.nf-footer__list a:hover {
    color: #110E0B;
    padding-left: 0.4rem;
}

/* "Big" list — Primary nav (display type with underline-on-hover) */
.nf-footer__list--big li {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.3;
}
.nf-footer__list--big a {
    position: relative;
}
.nf-footer__list--big a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.1em;
    height: 1.5px;
    width: 0;
    background: #110E0B;
    transition: width 0.4s var(--ease);
}
.nf-footer__list--big a:hover::after { width: 100%; }
.nf-footer__list--big a:hover {
    padding-left: 0;
    color: #110E0B;
}

/* Services list with numeric prefix */
.nf-footer__list--svc li {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.35;
}
.nf-footer__list--svc a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
    transition: color 0.3s, gap 0.3s var(--ease);
}
.nf-footer__list--svc a:hover {
    color: #110E0B;
    padding-left: 0;
    gap: 0.875rem;
}
.nf-footer__svc-num {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    color: rgba(17, 14, 11, 0.7);
    min-width: 1.5em;
}

/* Email — large clickable link in Reach us column */
.nf-footer__email {
    display: inline-block;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-sec);
    text-decoration: none;
    margin-bottom: 1.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1.5px solid rgba(17, 14, 11, 0.3);
    transition: color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
    word-break: break-word;
}
.nf-footer__email:hover {
    color: #110E0B;
    border-color: #110E0B;
    transform: translateX(4px);
}

/* Social icon row — sits at the bottom of the "Reach us" column.
   Replaces the old "Tail us" column. Filled dark pills (matches the
   col-num badge colour) with the icon almost filling the circle.
   Hover = subtle zoom only, no colour shift. */
.nf-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
}
.nf-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(17, 14, 11, 0.85);  /* same as .nf-footer__col-num */
    color: var(--text-sec);
    transition: transform 0.3s var(--ease);
}
.nf-footer__social a:hover {
    transform: scale(1.1);             /* 10% zoom — no colour change */
}
.nf-footer__social svg {
    width: 1.25rem;                    /* fills more of the 2.25rem pill */
    height: 1.25rem;
}

/* ── Bottom band ── */
.nf-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(17, 14, 11, 0.75);
}
.nf-footer__copy { color: rgba(17, 14, 11, 0.85); }

.nf-footer__top-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    color: var(--text-sec);
    background: rgba(17, 14, 11, 0.9);
    border: 1px solid rgba(17, 14, 11, 0.95);
    border-radius: 999px;
    transition: background 0.3s, transform 0.3s var(--ease), gap 0.3s var(--ease);
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    text-transform: inherit;
}
.nf-footer__top-btn:hover {
    background: #110E0B;
    transform: translateY(-3px);
    gap: 0.75rem;
}
.nf-footer__top-btn svg { color: var(--primary); }

/* ═══════════════════════════════════════════════════════
   18. ABOUT — Q&A interview transcript (r45)
   Single-column editorial layout. No section eyebrows,
   no numbered headers. Just the transcript reading well.
   ═══════════════════════════════════════════════════════ */
.qa {
    position: relative;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    isolation: isolate;
}

/* ── Fixed scroll progress (1px vertical line on right edge) ── */
.qa-progress {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: rgba(253, 240, 232, 0.06);
    z-index: 60;
    pointer-events: none;
}
.qa-progress__bar {
    display: block;
    width: 100%;
    height: 0%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(232, 80, 10, 0.6);
    transition: height 0.18s linear;
}

/* H1 — Funnel Display (system rule) */
/* ─────────────────────────────────────────────
   TRANSCRIPT — single reading column
   ───────────────────────────────────────────── */
.qa-transcript {
    counter-reset: qa-counter;
    max-width: 64rem;
    margin: 0 auto;
    padding: 3rem 3rem 5rem;
}

/* Each Q&A pair — frosted block with subtle definition */
.qa-pair {
    margin: 0 0 4rem;
    padding: 2.5rem 2.5rem 2.25rem;
    background: linear-gradient(180deg,
        rgba(253, 240, 232, 0.025) 0%,
        rgba(253, 240, 232, 0.012) 100%);
    border: 1px solid rgba(253, 240, 232, 0.07);
    border-radius: 1.125rem;
    box-shadow:
        inset 0 1px 0 rgba(253, 240, 232, 0.04),
        0 24px 50px -25px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: border-color 0.5s, box-shadow 0.5s, transform 0.5s var(--ease);
}
.qa-pair:hover {
    border-color: rgba(232, 80, 10, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(253, 240, 232, 0.06),
        0 30px 70px -25px rgba(232, 80, 10, 0.18),
        0 24px 50px -25px rgba(0, 0, 0, 0.5);
}
/* Top-left mono tag — feels like a transcript timestamp */
.qa-pair::before {
    content: 'Q&middot;0' counter(qa-counter);
    counter-increment: qa-counter;
    position: absolute;
    top: -0.625rem;
    left: 1.5rem;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg);
    padding: 0 0.5rem;
}

/* Q — mono, smaller, muted with prefix marker */
.qa-q {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed rgba(253, 240, 232, 0.12);
}
.qa-q__mark {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-sec);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0;
    transform: translateY(-2px);
}
.qa-q__text {
    font-family: var(--f-mono);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-sec);
    letter-spacing: -0.005em;
    font-weight: 400;
}

/* A — editorial body type */
.qa-a {
    padding-left: 2.75rem;       /* aligns with Q text after Q-mark indent */
}
.qa-a p {
    font-family: var(--f-body);
    font-size: 1.1875rem;
    line-height: 1.65;
    font-weight: 300;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.005em;
}

/* Words wrapped by JS for word-stagger animation */
.qa-a .qa-word {
    display: inline-block;
    will-change: transform, opacity;
}

/* ─────────────────────────────────────────────
   PULL QUOTES — interspersed
   ───────────────────────────────────────────── */
.qa-quote {
    position: relative;
    margin: 6rem -2rem 6rem;     /* slightly extrudes past column */
    padding: 3rem 1rem 3rem;
    text-align: center;
}

.qa-quote__mark {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    opacity: 0.7;
}
.qa-quote__mark svg { width: 100%; height: 100%; }

.qa-quote p {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 3rem;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--primary);
    margin: 0;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
}

/* ─────────────────────────────────────────────
   SIGN-OFF — end of transcript
   ───────────────────────────────────────────── */
.qa-end {
    max-width: 50rem;
    margin: 0 auto;
    padding: 4rem 3rem 9rem;
    text-align: center;
    border-top: 1px dashed rgba(253, 240, 232, 0.12);
}

.qa-end__mark {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    color: var(--primary);
    margin: 3rem 0 2rem;
    opacity: 0.7;
}
.qa-end__mark svg { width: 100%; height: 100%; }

.qa-end__signoff {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 3rem;
    line-height: 1.8;
}
.qa-end__signoff em {
    font-style: italic;
    color: var(--primary);
    font-weight: 400;
}

/* ─────────────────────────────────────────────
   ANIMATION INITIAL STATES
   (JS triggers reveals; CSS sets the from-state)
   ───────────────────────────────────────────── */
/* Hero opacity init now handled by .page-hero (see shared utilities) */
.qa-q,
.qa-quote,
.qa-end__mark,
.qa-end__signoff,
.qa-end__cta {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

/* Words inside answers start invisible — JS reveals each one */
.qa-a .qa-word {
    opacity: 0;
    transform: translateY(8px);
}

/* ═══════════════════════════════════════════════════════
   ABOUT — Why-us section: 2x2 liquid glass grid (r47)
   Frosted glass cards with backdrop-blur, top-edge highlight,
   ambient orange glow on hover. Out-of-the-box, not a list.
   ═══════════════════════════════════════════════════════ */
.qa-why {
    max-width: 86rem;
    margin: 4rem auto 4rem;
    padding: 5rem 3rem 3rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.12);
}

.qa-why__head {
    text-align: center;
    margin-bottom: 4.5rem;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}
.qa-why__title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 4.5rem;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--text-sec);
    margin: 0;
}
/* 2x2 grid — liquid glass cards */
.qa-why__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

/* The liquid glass card itself */
.qa-why__row {
    position: relative;
    padding: 2.5rem 2.25rem 2.25rem;
    border-radius: 1.5rem;
    /* Frosted layered background — multiple gradients build depth */
    background:
        linear-gradient(135deg,
            rgba(253, 240, 232, 0.075) 0%,
            rgba(253, 240, 232, 0.03) 35%,
            rgba(232, 80, 10, 0.04) 100%),
        rgba(17, 14, 11, 0.4);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(253, 240, 232, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(253, 240, 232, 0.15),       /* top-edge highlight (glass) */
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),            /* bottom-edge dark */
        inset 1px 0 0 rgba(253, 240, 232, 0.04),       /* left-edge faint highlight */
        0 30px 60px -25px rgba(0, 0, 0, 0.7),          /* drop shadow */
        0 0 0 1px rgba(232, 80, 10, 0) inset;          /* ambient orange (transitions on hover) */
    transition:
        transform 0.5s var(--ease),
        box-shadow 0.5s var(--ease),
        border-color 0.5s;
    overflow: hidden;
    isolation: isolate;
}
/* Inner gradient overlay — adds depth, subtle */
.qa-why__row::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(253, 240, 232, 0.08) 0%,
        rgba(253, 240, 232, 0) 65%);
    pointer-events: none;
    z-index: 0;
}
/* Bottom-corner orange ambient glow */
.qa-why__row::after {
    content: '';
    position: absolute;
    bottom: -3rem;
    right: -3rem;
    width: 12rem;
    height: 12rem;
    background: radial-gradient(circle,
        rgba(232, 80, 10, 0.12) 0%,
        rgba(232, 80, 10, 0) 70%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s, transform 0.5s var(--ease);
    opacity: 0.6;
}
.qa-why__row:hover {
    transform: translateY(-6px);
    border-color: rgba(232, 80, 10, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(253, 240, 232, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 40px 80px -25px rgba(232, 80, 10, 0.3),
        0 30px 60px -25px rgba(0, 0, 0, 0.7);
}
.qa-why__row:hover::after {
    opacity: 1;
    transform: scale(1.3) translate(-1rem, -1rem);
}

/* All inner content sits above the gradient layers */
.qa-why__row > * { position: relative; z-index: 1; }

/* Numeral pill — top-right corner of card */
.qa-why__num {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    color: var(--text-sec);
    background: rgba(232, 80, 10, 0.85);
    padding: 0.3rem 0.625rem;
    border-radius: 999px;
    z-index: 2;
}

/* Icon — sits at the top-left of card content */
.qa-why__icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(232, 80, 10, 0.15), rgba(232, 80, 10, 0.04) 70%),
        rgba(17, 14, 11, 0.45);
    border: 1px solid rgba(253, 240, 232, 0.06);
}
.qa-why__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.qa-why__body {
    /* No max-width — let the card breathe */
}
.qa-why__name {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-sec);
    margin: 0 0 0.875rem;
}
.qa-why__desc {
    font-family: var(--f-body);
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 300;
    color: var(--text-muted);
    margin: 0;
}

/* Animation initial state */
.qa-why__head,
.qa-why__row {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}


/* ═══════════════════════════════════════════════════════
   19. CONTACT — postal envelope concept (r52)
   Cream paper letter on dark page bg. Postmark + studio
   stamp anchor it. Form is the "letter content."
   Visual-only submit (success state, no backend yet).
   ═══════════════════════════════════════════════════════ */
.ct {
    position: relative;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}
/* Global accessibility utility — hides text visually but keeps it
   readable to screen readers. Used wherever pages declare an H2 for
   accessibility under an aria-labelledby region. */
.visually-hidden,
.ct .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────
   THE LETTER — cream paper on dark bg
   ───────────────────────────────────────────── */
/* Outer container — width matches .page-hero (76rem) so envelope's left edge
   aligns with the H1's left edge above it. */
.ct-letter {
    max-width: 76rem;
    margin: 0 auto;
    padding: 3rem 3rem 5rem;
    position: relative;
}

/* The cream paper letter — width capped at 64rem so the form doesn't sprawl too
   wide on big screens; left-aligned within .ct-letter so its left edge sits
   under the hero H1 start. */
.ct-letter__paper {
    position: relative;
    max-width: 64rem;
    margin: 0;                          /* left-align with .ct-letter padding edge */
    background: #FDF0E8;                /* cream — matches design system */
    color: #110E0B;                     /* dark ink */
    border-radius: 0.75rem;
    padding: 4rem 3.5rem 3rem;
    box-shadow:
        0 1px 0 rgba(253, 240, 232, 0.04),
        0 30px 80px -20px rgba(0, 0, 0, 0.65),
        0 60px 120px -40px rgba(232, 80, 10, 0.18);
    background-image:
        radial-gradient(ellipse at top left, rgba(232, 80, 10, 0.04), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(232, 80, 10, 0.03), transparent 50%);
}

/* ── Postmark (top-left, faded — like a real cancellation stamp) ── */
.ct-letter__postmark {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 6.5rem;
    height: 6.5rem;
    color: #110E0B;
    opacity: 0.18;
    transform: rotate(-12deg);
    pointer-events: none;
}
.ct-letter__postmark svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Custom Nitro Fox studio stamp (top-right) ── */
.ct-letter__stamp {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    transform: rotate(4deg);
    pointer-events: none;
}
/* Cleaner studio-mark stamp — single clean orange tile with fine cream border,
   subtle inset second border. No perforated edges, no currency chip. */
.ct-letter__stamp-inner {
    background: var(--primary);
    color: #FDF0E8;
    width: 6rem;
    padding: 0.75rem 0.5rem 0.625rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    /* Double-border effect via inset shadows — feels like an embossed studio mark */
    box-shadow:
        inset 0 0 0 1px rgba(253, 240, 232, 0.85),
        inset 0 0 0 2px var(--primary),
        inset 0 0 0 3px rgba(253, 240, 232, 0.35),
        0 6px 18px -4px rgba(232, 80, 10, 0.55);
}
.ct-letter__stamp-top,
.ct-letter__stamp-bottom {
    font-family: var(--f-mono);
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #FDF0E8;
    font-weight: 500;
    text-align: center;
    line-height: 1;
}
.ct-letter__stamp-bottom { font-size: 0.5rem; }
.ct-letter__stamp-mark {
    width: 2.5rem;
    height: 2.5rem;
    color: #FDF0E8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.125rem 0;
}
.ct-letter__stamp-mark svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Thin horizontal rule above & below the mark — sells the "stamped" feeling */
.ct-letter__stamp-rule {
    width: 70%;
    height: 1px;
    background: rgba(253, 240, 232, 0.5);
}
.ct-letter__stamp-divider {
    width: 50%;
    height: 1px;
    background: rgba(253, 240, 232, 0.4);
}

/* ── Field: shared label + value pattern ── */
.ct-letter__field {
    display: grid;
    grid-template-columns: 5rem 1fr;
    align-items: baseline;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px dashed rgba(17, 14, 11, 0.18);
    position: relative;
    z-index: 2;
}
.ct-letter__field-label {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(17, 14, 11, 0.5);
    padding-top: 0.25rem;
}
.ct-letter__field-sep { color: rgba(17, 14, 11, 0.3); padding: 0 0.25rem; }

/* TO block — locked, pre-filled */
.ct-letter__to {
    /* Push down a bit so postmark+stamp don't visually crash into TO */
    margin-top: 5.5rem;
}
.ct-letter__field-value {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.ct-letter__to-name {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.375rem;
    color: #110E0B;
    letter-spacing: -0.015em;
}
.ct-letter__to-city {
    font-family: var(--f-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    color: rgba(17, 14, 11, 0.65);
}

/* FROM block — name + email side-by-side */
.ct-letter__from-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Inputs: invisible borders, just a thin orange underline as you type */
.ct-letter__input {
    flex: 1;
    min-width: 12rem;
    padding: 0.5rem 0.25rem;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(17, 14, 11, 0.18);
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 1.125rem;
    color: #110E0B;
    letter-spacing: -0.005em;
    outline: none;
    transition: border-color 0.3s, color 0.3s;
}
.ct-letter__input::placeholder {
    color: rgba(17, 14, 11, 0.3);
    font-weight: 400;
    font-style: italic;
}
.ct-letter__input:focus {
    border-bottom-color: var(--primary);
}
.ct-letter__input:not(:placeholder-shown) {
    border-bottom-color: var(--primary);
}
.ct-letter__input--full { width: 100%; }

/* SUBJECT line — single full-width input */
.ct-letter__subject .ct-letter__input { font-size: 1.25rem; }

/* ── Letter body — greeting + textarea ── */
.ct-letter__body {
    padding: 2rem 0 1.5rem;
    border-bottom: 1px dashed rgba(17, 14, 11, 0.18);
}
.ct-letter__greeting {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.25rem;
    color: #110E0B;
    margin: 0 0 0.75rem;
}
.ct-letter__message {
    width: 100%;
    min-height: 10rem;
    background: transparent;
    border: none;
    outline: none;
    resize: vertical;
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #110E0B;
    padding: 0.5rem 0;
}
.ct-letter__message::placeholder {
    color: rgba(17, 14, 11, 0.4);
    font-style: italic;
}

/* ── Footer row ── */
.ct-letter__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.ct-letter__count {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    color: rgba(17, 14, 11, 0.5);
}
.ct-letter__count.is-near-limit { color: var(--primary); }

/* Send button — looks like a "wax seal" treatment */
.ct-letter__send {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 12px 28px -8px rgba(232, 80, 10, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.35s var(--ease), gap 0.35s var(--ease), box-shadow 0.35s;
}
.ct-letter__send:hover {
    transform: translateY(-2px);
    gap: 0.875rem;
    box-shadow:
        0 16px 36px -8px rgba(232, 80, 10, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ct-letter__send:active { transform: translateY(0); }
.ct-letter__send-text { position: relative; z-index: 2; }
.ct-letter__send svg { position: relative; z-index: 2; transition: transform 0.35s var(--ease); }
.ct-letter__send:hover svg { transform: translateX(2px); }
/* The "seal" shape — circle that grows on hover behind text */
.ct-letter__send-seal {
    position: absolute;
    top: 50%;
    left: 0;
    width: 2.5rem;
    height: 2.5rem;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.45s var(--ease);
    z-index: 1;
}
.ct-letter__send:hover .ct-letter__send-seal {
    transform: translate(0%, -50%) scale(1.4);
}

/* ── Sent (success) state ── */
.ct-letter__sent {
    background: #FDF0E8;
    color: #110E0B;
    border-radius: 0.75rem;
    padding: 5rem 3.5rem 4rem;
    text-align: center;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.65),
        0 60px 120px -40px rgba(232, 80, 10, 0.18);
}
.ct-letter__sent-mark {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.75rem;
    color: var(--primary);
}
.ct-letter__sent-mark svg { width: 100%; height: 100%; display: block; }
.ct-letter__sent-title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.025em;
    color: #110E0B;
    margin: 0 0 1rem;
}
.ct-letter__sent-copy {
    max-width: 32rem;
    margin: 0 auto 2.5rem;
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    font-weight: 300;
    color: rgba(17, 14, 11, 0.7);
}
.ct-letter__sent-copy a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.ct-letter__sent-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: transparent;
    color: #110E0B;
    border: 1.5px solid rgba(17, 14, 11, 0.2);
    border-radius: 999px;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: border-color 0.3s, gap 0.35s var(--ease), background 0.3s;
}
.ct-letter__sent-back:hover {
    border-color: var(--primary);
    background: rgba(232, 80, 10, 0.06);
    gap: 0.75rem;
}

/* ─────────────────────────────────────────────
   REACH STRIP — below envelope
   ───────────────────────────────────────────── */
.ct-reach {
    max-width: 64rem;
    margin: 0 auto;
    padding: 2rem 3rem 6rem;
}
.ct-reach__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.75rem 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.12);
}
.ct-reach__item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.ct-reach__label {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
}
.ct-reach__value {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ct-reach__time-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(232, 80, 10, 0.7);
    animation: ct-pulse 1.6s ease-in-out infinite;
}
@keyframes ct-pulse {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.4; }
}
.ct-reach__email {
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-sec);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(232, 80, 10, 0.4);
    padding-bottom: 1px;
    transition: color 0.3s, border-color 0.3s;
    align-self: flex-start;
}
.ct-reach__email:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* ─────────────────────────────────────────────
   ANIMATION INITIAL STATES — JS reveals on load
   ───────────────────────────────────────────── */
/* Hero opacity init now handled by .page-hero (see shared utilities) */
.ct-letter__paper,
.ct-letter__postmark,
.ct-letter__stamp,
.ct-reach__row {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}
.ct-letter__postmark { transform: translateY(20px) rotate(-12deg) scale(0.85); }
.ct-letter__stamp    { transform: translateY(20px) rotate(4deg) scale(0.85);   }


/* ═══════════════════════════════════════════════════════
   20. WEB DESIGN — service page (chaptered book layout) (r58)
   ═══════════════════════════════════════════════════════ */
.wd {
    position: relative;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

/* ── Chapter open: chapterbar above the kicker ── */
.wd-open__chapterbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1.25rem;
    margin-bottom: 2rem;
    border-bottom: 1px dashed rgba(253, 240, 232, 0.12);
}
.wd-open__chaptermark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
}
.wd-open__chaptermark-num {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
}
.wd-open__chaptermark-name {
    font-family: var(--f-display);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-sec);
}
.wd-open__chaptermark-meta {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Three project figures section ── */
/* ── Featured work marquee — full-width, auto-scrolls, speeds up on user scroll ── */
.wd-marquee {
    width: 100%;
    padding: 3rem 0 5rem;
    overflow: hidden;                  /* clip overflowing track at viewport edges */
    /* Soft fade masks at left + right edges so figures fade in/out instead of hard-cutting */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
/* Track: GSAP drives the translation via xPercent tween (set in JS).
   No CSS animation — that approach caused position resets when speed changed. */
.wd-marquee__track {
    display: flex;
    gap: 1.5rem;
    width: max-content;                /* grow to fit all duplicated children */
    will-change: transform;
}

.wd-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-shrink: 0;
    width: 32rem;                      /* fixed width per card — larger landscape format */
}
.wd-figure__plate {
    aspect-ratio: 16 / 9;              /* landscape — actual website screenshots are this shape */
    background:
        linear-gradient(135deg, rgba(232, 80, 10, 0.04), rgba(253, 240, 232, 0.02)),
        rgba(17, 14, 11, 0.6);
    border: 1px dashed rgba(253, 240, 232, 0.15);
    border-radius: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Subtle dot grid texture */
    background-image:
        radial-gradient(circle, rgba(253, 240, 232, 0.04) 1px, transparent 1px),
        linear-gradient(135deg, rgba(232, 80, 10, 0.04), rgba(253, 240, 232, 0.02)),
        rgba(17, 14, 11, 0.6);
    background-size: 22px 22px, auto, auto;
}
.wd-figure__label {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
}
.wd-figure__hint {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    color: rgba(253, 240, 232, 0.35);
}
.wd-figure__cap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.wd-figure__cap-name {
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-sec);
}
.wd-figure__cap-meta {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Image-only project plate variant ────────────────────────────
   Used by web-design.php featured-projects marquee. Each project
   screenshot has its own native aspect ratio — we do NOT force 16:9
   or crop. Plate sizes itself to whatever the image is, full bleed,
   no trimming. */
.wd-figure__plate--img {
    aspect-ratio: auto;
    height: auto;
    border: 1px solid rgba(253, 240, 232, 0.08);
    background: rgba(17, 14, 11, 0.6);
    background-image: none;
    padding: 0;
    overflow: hidden;
    display: block;
}
.wd-figure__plate--img img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Table of contents ── */
.wd-toc {
    max-width: 76rem;
    margin: 0 auto;
    padding: 4rem 3rem 5rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.1);
}
.wd-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wd-toc__item {
    border-bottom: 1px dashed rgba(253, 240, 232, 0.08);
}
.wd-toc__item:last-child {
    border-bottom: none;
}
.wd-toc__link {
    display: grid;
    grid-template-columns: 3rem 1fr auto auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.5rem 0;
    color: var(--text);
    text-decoration: none;
    transition: padding 0.4s var(--ease);
}
.wd-toc__link:hover {
    padding-left: 1rem;
}
.wd-toc__num {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}
.wd-toc__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.wd-toc__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-sec);
    letter-spacing: -0.015em;
    transition: color 0.3s;
}
.wd-toc__link:hover .wd-toc__name {
    color: var(--primary);
}
.wd-toc__desc {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    color: var(--text-muted);
}
.wd-toc__leader {
    height: 1px;
    background: rgba(253, 240, 232, 0.12);
    border-bottom: 1px dotted rgba(253, 240, 232, 0.2);
    background: none;
    border-bottom-width: 0;
    border-image: none;
    /* Render as dots — repeat-x of a dot */
    background-image: radial-gradient(circle, rgba(253, 240, 232, 0.25) 1px, transparent 1px);
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-position: bottom;
    align-self: end;
    min-width: 4rem;
    margin-bottom: 0.5rem;
}
.wd-toc__page {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 80, 10, 0.6);
    align-self: end;
    padding-bottom: 0.25rem;
}
.wd-toc__scrollhint {
    text-align: center;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 3rem 0 0;
}

/* ── Part / sub-service section ── */
.wd-part {
    padding: 6rem 0;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.wd-part--alt {
    background:
        linear-gradient(180deg, rgba(232, 80, 10, 0.025), transparent 60%),
        var(--bg);
}
.wd-part__head {
    max-width: 76rem;
    margin: 0 auto 3rem;
    padding: 0 3rem;
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 3rem;
    align-items: baseline;
}
.wd-part__num {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    align-self: center;             /* vertically center against the title row, not baseline */
}
.wd-part__title {
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
    grid-column: 2;
}
.wd-part__lede {
    grid-column: 2;
    font-family: var(--f-body);
    font-size: 1.375rem;
    line-height: 1.4;
    font-weight: 300;
    color: var(--text-muted);
    margin: 0;
    max-width: 40rem;
}
.wd-part__body {
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 3rem;
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 3rem;
}
.wd-part__body > * {
    grid-column: 2;
    max-width: 42rem;
}
.wd-part__body p {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.wd-part__body p strong {
    color: var(--text);
    font-weight: 500;
}
.wd-part__h3 {
    font-family: var(--f-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
    margin: 2.5rem 0 1.25rem;
    letter-spacing: -0.005em;
}

/* Deliverables list */
.wd-deliverables {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}
.wd-deliverables li {
    padding: 0.875rem 1rem 0.875rem 1.25rem;
    background: rgba(253, 240, 232, 0.025);
    border-left: 2px solid var(--primary);
    border-radius: 0 0.375rem 0.375rem 0;
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
    transition: background 0.3s, padding-left 0.3s var(--ease);
}
.wd-deliverables li:hover {
    background: rgba(253, 240, 232, 0.05);
    padding-left: 1.5rem;
}
.wd-deliverables li strong {
    color: var(--text);
    font-weight: 500;
}

/* "Pairs well with" footer */
.wd-part__pairs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: baseline;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.1);
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.wd-part__pairs-label {
    color: var(--text-muted);
    margin-right: 0.5rem;
}
.wd-part__pairs a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px dashed rgba(232, 80, 10, 0.4);
    padding-bottom: 1px;
    transition: border-color 0.3s;
}
.wd-part__pairs a:hover {
    border-bottom-color: var(--primary);
    border-bottom-style: solid;
}
.wd-part__pairs span {
    color: rgba(253, 240, 232, 0.35);
}

/* Stack chips */
.wd-stacks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}
.wd-stack-chip {
    padding: 0.5rem 0.875rem;
    background: rgba(232, 80, 10, 0.06);
    border: 1px solid rgba(232, 80, 10, 0.2);
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    transition: background 0.3s, border-color 0.3s;
}
.wd-stack-chip:hover {
    background: rgba(232, 80, 10, 0.15);
    border-color: rgba(232, 80, 10, 0.5);
}

/* ── Process section ── */
.wd-process {
    max-width: 86rem;
    margin: 0 auto;
    padding: 6rem 3rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.wd-process__head {
    text-align: center;
    margin-bottom: 4rem;
}
.wd-process__head .kicker {
    margin-bottom: 1.25rem;
}
.wd-process__title {
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.wd-process__sub {
    max-width: 36rem;
    margin: 0 auto;
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.wd-process__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.wd-process__step {
    padding: 2rem 1.75rem;
    background: rgba(253, 240, 232, 0.03);
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 0.875rem;
    transition: border-color 0.3s, background 0.3s;
    position: relative;
    overflow: hidden;
}
.wd-process__step:hover {
    border-color: rgba(232, 80, 10, 0.3);
    background: rgba(232, 80, 10, 0.04);
}
.wd-process__num {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    margin-bottom: 1rem;
}
.wd-process__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.625rem;
    letter-spacing: -0.015em;
}
.wd-process__desc {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* ── Why us section ── */
.wd-why {
    max-width: 86rem;
    margin: 0 auto;
    padding: 6rem 3rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.wd-why__head {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 4rem;
}
.wd-why__head .kicker-pill {
    margin-bottom: 1.5rem;
}
.wd-why__title {
    font-family: var(--f-display);
    font-size: 4.25rem;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.wd-why__sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.wd-why__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.wd-why__card {
    padding: 2.25rem 2rem;
    background:
        linear-gradient(135deg, rgba(253, 240, 232, 0.05), rgba(253, 240, 232, 0.01));
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 1.25rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease), border-color 0.3s;
}
.wd-why__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(232, 80, 10, 0.12), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.wd-why__card:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 80, 10, 0.25);
}
.wd-why__card:hover::before {
    opacity: 1;
}
.wd-why__num {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    margin-bottom: 1.25rem;
}
.wd-why__name {
    font-family: var(--f-display);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--text);
    margin: 0 0 0.875rem;
    letter-spacing: -0.02em;
}
.wd-why__desc {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* ── FAQ ── */
.wd-faq {
    max-width: 76rem;
    margin: 0 auto;
    padding: 6rem 3rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.wd-faq__head {
    margin-bottom: 3rem;
}
.wd-faq__head .kicker {
    margin-bottom: 1rem;
}
.wd-faq__title {
    font-family: var(--f-display);
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--text-sec);
    margin: 0;
}
.wd-faq__list {
    display: flex;
    flex-direction: column;
}
.wd-faq__item {
    border-bottom: 1px dashed rgba(253, 240, 232, 0.12);
    transition: background 0.3s;
}
.wd-faq__item:hover {
    background: rgba(253, 240, 232, 0.02);
}
.wd-faq__item[open] {
    background: rgba(232, 80, 10, 0.03);
}
.wd-faq__q {
    display: grid;
    grid-template-columns: 4rem 1fr 2rem;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.5rem 1rem;
    cursor: pointer;
    list-style: none;
    transition: padding 0.3s;
}
.wd-faq__q::-webkit-details-marker {
    display: none;
}
.wd-faq__q-num {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.wd-faq__q-text {
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-sec);
    letter-spacing: -0.015em;
}
.wd-faq__q-icon {
    font-family: var(--f-mono);
    font-size: 1.5rem;
    color: var(--primary);
    text-align: right;
    transition: transform 0.3s var(--ease);
    line-height: 1;
}
.wd-faq__item[open] .wd-faq__q-icon {
    transform: rotate(45deg);
}
.wd-faq__a {
    padding: 0 1rem 1.5rem 6.5rem;
}
.wd-faq__a p {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
    max-width: 42rem;
}

/* ── Closing CTA ── */
.wd-end {
    padding: 6rem 0;
    background:
        radial-gradient(ellipse at center, rgba(232, 80, 10, 0.08), transparent 60%),
        var(--bg);
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
    text-align: center;
}
.wd-end__inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 3rem;
}
.wd-end__chapter {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.5rem;
    padding: 0.4rem 0.875rem;
    background: rgba(232, 80, 10, 0.08);
    border: 1px solid rgba(232, 80, 10, 0.3);
    border-radius: 999px;
}
.wd-end__title {
    font-family: var(--f-display);
    font-size: 5rem;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.wd-end__sub {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 auto 2.5rem;
    max-width: 38rem;
}
.wd-end__row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Animation initial states — JS reveals on scroll */
.wd-toc__item,
.wd-part__head,
.wd-part__body > *,
.wd-process__step,
.wd-why__card,
.wd-faq__item,
.wd-end__inner > * {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

/* ═══════════════════════════════════════════════════════
   21. BRANDING — service page (r62)
   Layout: chapter open + asymmetric masonry cases +
   horizontal scroll-pin sub-services + prose deep-dive +
   process + why-us + FAQ + CTA. Same dark aesthetic, but
   different visual rhythm than web-design.php.
   ═══════════════════════════════════════════════════════ */
.br {
    position: relative;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

/* ── Chapter open header (matches web-design pattern) ── */
.br-open__chapterbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1.25rem;
    margin-bottom: 2rem;
    border-bottom: 1px dashed rgba(253, 240, 232, 0.12);
}
.br-open__chaptermark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
}
.br-open__chaptermark-num {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
}
.br-open__chaptermark-name {
    font-family: var(--f-display);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-sec);
}
.br-open__chaptermark-meta {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Featured work marquee — full-width auto-scroll, 4:3 figures
   Same engine as web-design's marquee but with 4:3 aspect (vs 16:9). */
.br-marquee {
    width: 100%;
    padding: 3rem 0 5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.br-marquee__track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    will-change: transform;
}
.br-figure {
    margin: 0;
    flex-shrink: 0;
    width: 30rem;                       /* sized to host real 16:9 brand mockups (img + mp4) */
}
.br-figure__plate {
    aspect-ratio: 16 / 9;               /* matches all 5 mockup assets — no distortion */
    background: rgba(17, 14, 11, 0.6);
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 0.875rem;
    overflow: hidden;                   /* clip any minute sub-pixel rounding inside corners */
    position: relative;
}
/* Media (img + video) fills the plate exactly. Plate is 16:9, assets are 16:9,
   so 'cover' is just a safety net — no actual cropping happens. */
.br-figure__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Pin section ──
   Mirrors homepage .work section structure exactly:
   .br-pin            ← outer wrapper, padding-top for separation, no fixed height
   .br-pin__head      ← sits OUTSIDE the pin, like .work__head
   .br-pin__viewport  ← position:relative, height:100vh, overflow:hidden — like .work__pin
   .br-pin__track     ← position:absolute, JS translates X — like .work__track */
.br-pin {
    position: relative;
    background: var(--bg);
    overflow: hidden;
    padding-top: 6rem;                  /* explicit separation from marquee above */
}
/* Head: matches work__head spacing exactly — sits OUTSIDE the pinned viewport */
.br-pin__head {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 0 3.5rem 5rem;             /* 5rem padding-bottom = breathing room before slides */
    z-index: 2;
}
.br-pin__head .kicker {
    margin-bottom: 1rem;
}
.br-pin__head-title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 5.5rem;                  /* matches .work__title */
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--text);
    max-width: 52rem;                   /* wraps naturally to ~2 lines on desktop */
    margin: 0 0 1.5rem;
}
/* Progress bar */
.br-pin__progress {
    width: 100%;
    max-width: 32rem;
    height: 2px;
    background: rgba(253, 240, 232, 0.1);
    border-radius: 1px;
    overflow: hidden;
}
.br-pin__progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: var(--primary);
    transition: width 0.1s linear;
}

/* Pinned viewport — mirrors .work__pin exactly */
.br-pin__viewport {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--bg);
}

/* Horizontal track — mirrors .work__track exactly. JS translates this on X. */
.br-pin__track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    gap: 2.5rem;
    padding: 4rem 4rem 5rem;            /* 4rem top, 5rem bottom — more breathing room around cards */
    will-change: transform;
}

/* ── Slide cards ──
   Mirrors .work__frame structure exactly:
   - 76rem fixed width, max-width calc(100vw - 8rem)
   - same glass morphism (blur 18px saturate 140%)
   - same border, same box-shadow stack
   - flex column: meta row (top) + body (flex 1) */
.br-pin__slide {
    position: relative;
    flex-shrink: 0;
    width: 76rem;
    max-width: calc(100vw - 8rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 3rem 3.5rem 3.5rem;
    border-radius: 1.75rem;
    background: linear-gradient(
        135deg,
        rgba(253, 240, 232, 0.04) 0%,
        rgba(253, 240, 232, 0.015) 50%,
        rgba(232, 80, 10, 0.04) 100%
    );
    border: 1px solid rgba(253, 240, 232, 0.07);
    overflow: hidden;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(253, 240, 232, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45),
        0 40px 60px -25px rgba(0, 0, 0, 0.55);
}

/* Top meta row: number + category — mirrors .work__frame-meta */
.br-pin__slide-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(253, 240, 232, 0.06);
}
.br-pin__slide-num { color: var(--primary); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.16em; }
.br-pin__slide-sep { color: var(--text-muted); margin: 0 0.25rem; }
.br-pin__slide-cat { font-size: 0.6875rem; }

/* Body: flex with text on left + visual on right — mirrors .work__frame-body */
.br-pin__slide-body {
    flex: 1;
    display: flex;
    gap: 3rem;
    align-items: center;                /* visual sits vertically centered when shorter than text column */
    justify-content: space-between;
    min-width: 0;
}

/* Left: text block — mirrors .work__frame-text */
.br-pin__slide-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Huge hero title — mirrors .work__frame-name (Sixsound, 5rem, uppercase) */
.br-pin__slide-name {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 4.25rem;                 /* trimmed from 4.5rem so 2-word titles like "PACKAGING & PRINT" fit on one line */
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--text-sec);
    text-transform: uppercase;
    margin: 0;
}

/* Outcome paragraph — mirrors .work__frame-outcome */
.br-pin__slide-outcome {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 32rem;
    margin: 0;
}
.br-pin__slide-outcome strong {
    color: var(--text);
    font-weight: 500;
}

/* Right: visual — mirrors .work__frame-visual sizing pattern.
   Width fixed; height fills the body row (align-items: stretch) so it
   never looks empty at the bottom. Treated as a studio specimen plate
   with grid texture + large centered icon + small mono label. */
.br-pin__slide-visual {
    position: relative;
    flex-shrink: 0;
    width: 19rem;                       /* 40% smaller — keeps visual compact, vertically centered */
    aspect-ratio: 4 / 3;
    border-radius: 1.25rem;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(rgba(253, 240, 232, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(253, 240, 232, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse at 30% 30%, rgba(232, 80, 10, 0.1), transparent 55%),
        linear-gradient(135deg, rgba(17, 14, 11, 0.75), rgba(17, 14, 11, 0.45));
    background-size: 32px 32px, 32px 32px, auto, auto;
    border: 1px solid rgba(253, 240, 232, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
/* Small mono label bottom-left — reads as intentional studio specimen */
.br-pin__slide-visual::after {
    content: 'Project visual';
    position: absolute;
    left: 1.5rem;
    bottom: 1.25rem;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(253, 240, 232, 0.3);
}
/* Iconplate — large centered SVG icon, no decorative frame.
   The icon IS the visual element. Will be replaced with real imagery later. */
.br-pin__slide-iconplate {
    width: 9rem;
    height: 9rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.br-pin__slide-iconplate svg {
    width: 100%;
    height: 100%;
}

/* Tone modifiers — accent the visual block based on slide */
.br-pin__slide[data-tone="amber"] .br-pin__slide-visual {
    background:
        linear-gradient(rgba(253, 240, 232, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(253, 240, 232, 0.04) 1px, transparent 1px),
        radial-gradient(ellipse at 30% 30%, rgba(253, 240, 232, 0.08), transparent 55%),
        linear-gradient(135deg, rgba(17, 14, 11, 0.75), rgba(17, 14, 11, 0.45));
    background-size: 32px 32px, 32px 32px, auto, auto;
}
.br-pin__slide[data-tone="amber"] .br-pin__slide-iconplate {
    color: var(--text-sec);
}

/* Deliverables list — clean rows with orange tick marker */
.br-pin__slide-deliverables {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;     /* 2-column grid — fits 5 items in 3 rows, prevents bottom-trim */
    column-gap: 2rem;
    max-width: 100%;
}
.br-pin__slide-deliverables li {
    position: relative;
    padding: 0.75rem 0 0.75rem 1.75rem;
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--text-sec);
    border-bottom: 1px dashed rgba(253, 240, 232, 0.08);
}
.br-pin__slide-deliverables li:last-child {
    border-bottom: none;
}
.br-pin__slide-deliverables li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.125rem;
    width: 0.5rem;
    height: 0.5rem;
    border-left: 1.5px solid var(--primary);
    border-bottom: 1.5px solid var(--primary);
    transform: rotate(-45deg);
}

/* ── Process section ── */
.br-process {
    max-width: 86rem;
    margin: 0 auto;
    padding: 10rem 3rem 6rem;            /* extra padding-top for separation from pin */
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.br-process__head {
    text-align: center;
    margin-bottom: 4rem;
}
.br-process__head .kicker {
    margin-bottom: 1.25rem;
}
.br-process__title {
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.br-process__sub {
    max-width: 38rem;
    margin: 0 auto;
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.br-process__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.br-process__step {
    padding: 2rem 1.75rem;
    background: rgba(253, 240, 232, 0.03);
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 0.875rem;
    transition: border-color 0.3s, background 0.3s;
}
.br-process__step:hover {
    border-color: rgba(232, 80, 10, 0.3);
    background: rgba(232, 80, 10, 0.04);
}
.br-process__num {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    margin-bottom: 1rem;
}
.br-process__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.625rem;
    letter-spacing: -0.015em;
}
.br-process__desc {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* ── Why us ── */
.br-why {
    max-width: 86rem;
    margin: 0 auto;
    padding: 6rem 3rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.br-why__head {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 4rem;
}
.br-why__head .kicker-pill {
    margin-bottom: 1.5rem;
}
.br-why__title {
    font-family: var(--f-display);
    font-size: 4.25rem;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.br-why__sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.br-why__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.br-why__card {
    padding: 2.25rem 2rem;
    background:
        linear-gradient(135deg, rgba(253, 240, 232, 0.05), rgba(253, 240, 232, 0.01));
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 1.25rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease), border-color 0.3s;
}
.br-why__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(232, 80, 10, 0.12), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.br-why__card:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 80, 10, 0.25);
}
.br-why__card:hover::before {
    opacity: 1;
}
.br-why__num {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    margin-bottom: 1.25rem;
}
.br-why__name {
    font-family: var(--f-display);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--text);
    margin: 0 0 0.875rem;
    letter-spacing: -0.02em;
}
.br-why__desc {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}
.br-why__desc strong {
    color: var(--text-sec);
    font-weight: 500;
}

/* ── FAQ ── */
.br-faq {
    max-width: 76rem;
    margin: 0 auto;
    padding: 6rem 3rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.br-faq__head {
    margin-bottom: 3rem;
}
.br-faq__head .kicker {
    margin-bottom: 1rem;
}
.br-faq__title {
    font-family: var(--f-display);
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--text-sec);
    margin: 0;
}
.br-faq__list {
    display: flex;
    flex-direction: column;
}
.br-faq__item {
    border-bottom: 1px dashed rgba(253, 240, 232, 0.12);
    transition: background 0.3s;
}
.br-faq__item:hover {
    background: rgba(253, 240, 232, 0.02);
}
.br-faq__item[open] {
    background: rgba(232, 80, 10, 0.03);
}
.br-faq__q {
    display: grid;
    grid-template-columns: 4rem 1fr 2rem;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.5rem 1rem;
    cursor: pointer;
    list-style: none;
}
.br-faq__q::-webkit-details-marker {
    display: none;
}
.br-faq__q-num {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.br-faq__q-text {
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-sec);
    letter-spacing: -0.015em;
}
.br-faq__q-icon {
    font-family: var(--f-mono);
    font-size: 1.5rem;
    color: var(--primary);
    text-align: right;
    transition: transform 0.3s var(--ease);
    line-height: 1;
}
.br-faq__item[open] .br-faq__q-icon {
    transform: rotate(45deg);
}
.br-faq__a {
    padding: 0 1rem 1.5rem 6.5rem;
}
.br-faq__a p {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
    max-width: 42rem;
}

/* ── Closing CTA ── */
.br-end {
    padding: 6rem 0;
    background:
        radial-gradient(ellipse at center, rgba(232, 80, 10, 0.08), transparent 60%),
        var(--bg);
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
    text-align: center;
}
.br-end__inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 3rem;
}
.br-end__chapter {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.5rem;
    padding: 0.4rem 0.875rem;
    background: rgba(232, 80, 10, 0.08);
    border: 1px solid rgba(232, 80, 10, 0.3);
    border-radius: 999px;
}
.br-end__title {
    font-family: var(--f-display);
    font-size: 5rem;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.br-end__sub {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 auto 2.5rem;
    max-width: 38rem;
}
.br-end__row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Animation initial states — JS reveals on scroll */
.br-process__step,
.br-why__card,
.br-faq__item,
.br-end__inner > * {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}


/* ════════════════════════════════════════════════════════════════════════════
   ░ SECTION 22 — DIGITAL MARKETING (.dm-*)
   ░ Live operations console layout. Chaptered hero with animated graph,
   ░ sticky-nav 5 channels, dashboard mockup with counters, process loop.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 22.1 Chapter open ──
   Top padding 9rem to clear the absolute-positioned 4.625rem header.
   Wider container (97.5rem) so the chart fits comfortably alongside the
   title. Chapter bar full-width on top with single bottom border.
   Layout below: 2-col grid, text on left, chart on right. */
.dm-open {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 9rem 3.5rem 4rem;
}
.dm-open__chapterbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1.25rem;
    margin-bottom: 3rem;
    border-bottom: 1px dashed rgba(253, 240, 232, 0.12);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.dm-open__chaptermark {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
}
.dm-open__chaptermark-num { color: var(--primary); }
.dm-open__chaptermark-name { color: var(--text-sec); }
.dm-open__chaptermark-meta { color: rgba(253, 240, 232, 0.4); }

/* 2-col layout: title text on left, animated chart on right */
.dm-open__layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
    align-items: center;
}
.dm-open__text {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
}
/* kicker-pill is inline-flex; prevent flex-column parent stretching it to full width */
.dm-open__text .page-hero__kicker { align-self: flex-start; margin-bottom: 0; }
.dm-open__text .page-hero__title  { margin: 0; }
.dm-open__text .page-hero__sub    { margin: 0; max-width: 36rem; }

/* Chart container on the right */
.dm-open__chart {
    position: relative;
    width: 100%;
    aspect-ratio: 13 / 9;
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(232, 80, 10, 0.08), transparent 60%),
        linear-gradient(135deg, rgba(17, 14, 11, 0.6), rgba(17, 14, 11, 0.3));
    border: 1px solid rgba(253, 240, 232, 0.06);
}
.dm-open__chart > svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Chart line draw-in animation */
.dm-open__chart-line {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: dmChartDraw 2.4s ease-out 0.4s forwards;
}
@keyframes dmChartDraw {
    to { stroke-dashoffset: 0; }
}

/* Area fill fade-in after the line draws */
.dm-open__chart-area {
    opacity: 0;
    animation: dmChartFade 1.2s ease-out 2.2s forwards;
}
@keyframes dmChartFade {
    to { opacity: 1; }
}

/* Data nodes pop in along the line */
.dm-open__chart-nodes circle {
    opacity: 0;
    animation: dmChartFade 0.4s ease-out forwards;
}
.dm-open__chart-nodes circle:nth-child(1) { animation-delay: 0.6s; }
.dm-open__chart-nodes circle:nth-child(2) { animation-delay: 1.0s; }
.dm-open__chart-nodes circle:nth-child(3) { animation-delay: 1.4s; }
.dm-open__chart-nodes circle:nth-child(4) { animation-delay: 1.8s; }
.dm-open__chart-nodes circle:nth-child(5) { animation-delay: 2.2s; }

/* Pulsing leading-edge dot */
.dm-open__chart-pulse {
    opacity: 0;
    animation: dmChartFade 0.6s ease-out 2.6s forwards;
    transform-origin: 470px 80px;
}
.dm-open__chart-pulse circle:first-child {
    animation: dmChartPulse 1.8s ease-in-out infinite;
    transform-origin: 470px 80px;
}
@keyframes dmChartPulse {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.4); }
}

/* Chart callout box */
.dm-open__chart-callout {
    opacity: 0;
    animation: dmChartFade 0.5s ease-out 2.8s forwards;
}

/* Frame + labels appear first */
.dm-open__chart-frame,
.dm-open__chart-labels,
.dm-open__chart-mark {
    opacity: 0;
    animation: dmChartFade 0.7s ease-out 0.1s forwards;
}

/* ── 22.2 Sticky-nav channels section ── */
.dm-channels {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 6rem 3.5rem 7rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.dm-channels__head {
    max-width: 52rem;
    margin: 0 auto 5rem;
    text-align: center;
}
.dm-channels__head .kicker {
    margin-bottom: 1rem;
    display: inline-flex;
}
.dm-channels__title {
    font-family: var(--f-display);
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 1.5rem;
}
.dm-channels__sub {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* 2-col grid: sticky nav left, panels right */
.dm-channels__grid {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 6rem;
    align-items: start;
}

/* Left: sticky nav */
.dm-channels__nav {
    position: sticky;
    top: 6rem;
    align-self: start;
}
.dm-channels__navlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.dm-channels__navitem {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: 0.875rem;
    row-gap: 0.125rem;
    align-items: baseline;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.dm-channels__navitem:hover {
    background: rgba(253, 240, 232, 0.025);
}
.dm-channels__navitem.is-active {
    background: rgba(232, 80, 10, 0.06);
}
.dm-channels__nav-num {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    transition: color 0.35s var(--ease);
}
.dm-channels__navitem.is-active .dm-channels__nav-num {
    color: var(--primary);
}
.dm-channels__nav-name {
    font-family: var(--f-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-muted);
    transition: color 0.35s var(--ease);
}
.dm-channels__navitem.is-active .dm-channels__nav-name {
    color: var(--text);
}
.dm-channels__nav-cat {
    grid-column: 2;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(253, 240, 232, 0.3);
    transition: color 0.35s var(--ease);
}
.dm-channels__navitem.is-active .dm-channels__nav-cat {
    color: rgba(232, 80, 10, 0.7);
}

/* Right: stacked channel panels */
.dm-channels__panels {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    min-width: 0;
}
.dm-channel {
    scroll-margin-top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.dm-channel__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(253, 240, 232, 0.06);
}
.dm-channel__num { color: var(--primary); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.16em; }
.dm-channel__sep { color: var(--text-muted); margin: 0 0.25rem; }
.dm-channel__title {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 4.5rem;
    line-height: 0.92;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: var(--text-sec);
    margin: 0;
}
.dm-channel__lede {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 36rem;
}
.dm-channel__lede strong {
    color: var(--text);
    font-weight: 500;
}
.dm-channel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    max-width: 40rem;
}
.dm-channel__list li {
    position: relative;
    padding: 0.75rem 0 0.75rem 1.5rem;
    font-family: var(--f-body);
    font-size: 0.9375rem;
    color: var(--text-sec);
    border-bottom: 1px dashed rgba(253, 240, 232, 0.08);
}
.dm-channel__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.125rem;
    width: 0.5rem;
    height: 0.5rem;
    border-left: 1.5px solid var(--primary);
    border-bottom: 1.5px solid var(--primary);
    transform: rotate(-45deg);
}

/* Inline channel-specific accent SVG */
.dm-channel__accent {
    margin-top: 1rem;
    padding: 1.5rem 1.75rem;
    border-radius: 1rem;
    background: rgba(253, 240, 232, 0.02);
    border: 1px solid rgba(253, 240, 232, 0.06);
    overflow: hidden;
}
.dm-channel__accent > svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Channel-specific accent styles ── */

/* SEO accent — search bar with typewriter effect + rank pills */
.dm-seo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
}
.dm-seo__searchbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 26rem;
    padding: 0.625rem 1rem;
    background: rgba(253, 240, 232, 0.04);
    border: 1px solid rgba(253, 240, 232, 0.12);
    border-radius: 999px;
    min-height: 2.5rem;
    overflow: hidden;
}
.dm-seo__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: rgba(253, 240, 232, 0.5);
}
.dm-seo__query {
    font-family: var(--f-mono);
    font-size: 0.875rem;
    color: rgba(253, 240, 232, 0.7);
    white-space: nowrap;
    flex: 0 0 auto;                     /* shrink to content so cursor sits right after the text */
    min-height: 1.25rem;                /* prevent collapse during empty state */
}
.dm-seo__caret {
    width: 1px;
    height: 1rem;
    background: var(--primary);
    flex-shrink: 0;
    animation: dmSeoBlink 1s steps(2) infinite;
}
@keyframes dmSeoBlink {
    50% { opacity: 0; }
}
.dm-seo__results {
    display: flex;
    flex-direction: row;                /* side-by-side, not stacked */
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: center;
}
.dm-seo__rank {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    transform: translateX(0.5rem);
    opacity: 0;
}
.dm-seo__rank.is-in {
    animation: dmSeoSlide 0.5s var(--ease) forwards;
}
.dm-seo__rank.is-in:nth-of-type(2) { animation-delay: 0.15s; }
@keyframes dmSeoSlide {
    to { transform: translateX(0); opacity: 1; }
}
.dm-seo__rank--up {
    background: rgba(232, 80, 10, 0.12);
    border: 1px solid rgba(232, 80, 10, 0.5);
    color: var(--primary);
}
.dm-seo__rank--prev {
    background: rgba(253, 240, 232, 0.04);
    border: 1px solid rgba(253, 240, 232, 0.12);
    color: rgba(253, 240, 232, 0.5);
}
.dm-seo__rank-lbl { font-weight: 500; }
.dm-seo__rank-val { font-weight: 600; }
.dm-seo__rank-arrow { display: inline-block; margin-left: 0.125rem; }

/* Performance accent — Chart.js canvas */
.dm-perf {
    padding: 1.25rem 1.5rem 1.25rem;
}
.dm-perf__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.875rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.dm-perf__lbl { color: var(--text-muted); }
.dm-perf__roas { color: var(--text-sec); }
.dm-perf__roas strong { color: var(--primary); font-weight: 600; }
.dm-perf__chart {
    position: relative;
    height: 9rem;
}

/* Social accent — clean horizontal row of brand icons */
.dm-social {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dm-social svg {
    width: 100%;
    max-width: 28rem;
    height: auto;
    max-height: 5.5rem;
}
/* Subtle scale-pulse on icons (no floating Y movement that misaligns row) */
.dm-social__icon {
    transform-origin: center;
    transform-box: fill-box;
    animation: dmSocialPulse 3s ease-in-out infinite;
}
.dm-social__icon--ig { animation-delay: 0s; }
.dm-social__icon--fb { animation-delay: 0.4s; }
.dm-social__icon--tt { animation-delay: 0.8s; }
.dm-social__icon--x  { animation-delay: 1.2s; }
.dm-social__icon--li { animation-delay: 1.6s; }
@keyframes dmSocialPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* Content accent — mock article preview cards (HTML) */
.dm-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
}
.dm-content__card {
    position: relative;
    padding: 1.25rem 1.25rem 1rem;
    background: rgba(253, 240, 232, 0.025);
    border: 1px solid rgba(253, 240, 232, 0.1);
    border-radius: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    overflow: hidden;
}
.dm-content__card--featured {
    background: rgba(232, 80, 10, 0.05);
    border-color: rgba(232, 80, 10, 0.3);
}
.dm-content__cat {
    font-family: var(--f-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.dm-content__card--featured .dm-content__cat { color: var(--primary); }
.dm-content__line {
    display: block;
    height: 0.375rem;
    background: rgba(253, 240, 232, 0.18);
    border-radius: 2px;
    width: 100%;
}
.dm-content__line--head {
    height: 0.5rem;
    background: rgba(253, 240, 232, 0.4);
    margin-bottom: 0.125rem;
}
.dm-content__card--featured .dm-content__line { background: rgba(232, 80, 10, 0.35); }
.dm-content__card--featured .dm-content__line--head { background: var(--primary); }
.dm-content__line--short { width: 60%; }
.dm-content__meta {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.625rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.1);
}
.dm-content__card--featured .dm-content__meta {
    border-top-color: rgba(232, 80, 10, 0.25);
}
.dm-content__meta-num {
    font-family: var(--f-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}
.dm-content__card--featured .dm-content__meta-num { color: var(--primary); }
.dm-content__meta-lbl {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Email accent — animated envelopes + open-rate ring */
.dm-email {
    padding: 1rem;
}
.dm-email svg {
    width: 100%;
    height: auto;
    max-height: 9rem;
}
.dm-email__envelope {
    transform-origin: center;
    transform-box: fill-box;
}
.dm-email__envelope--1 {
    animation: dmEmailFloat 3s ease-in-out 0s infinite;
}
.dm-email__envelope--2 {
    animation: dmEmailFloat 3s ease-in-out 0.5s infinite;
}
.dm-email__envelope--active {
    animation: dmEmailPulse 2s ease-in-out infinite;
}
@keyframes dmEmailFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes dmEmailPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.04); }
}
.dm-email__trail circle {
    animation: dmEmailDots 1.6s ease-in-out infinite;
}
.dm-email__trail circle:nth-child(2) { animation-delay: 0.2s; }
.dm-email__trail circle:nth-child(3) { animation-delay: 0.4s; }
@keyframes dmEmailDots {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* ── 22.3 Dashboard mockup ── */
.dm-dash {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 6rem 3.5rem 7rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.dm-dash__head {
    max-width: 52rem;
    margin: 0 auto 4rem;
    text-align: center;
}
.dm-dash__head .kicker {
    margin-bottom: 1rem;
    display: inline-flex;
}
.dm-dash__title {
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 1.25rem;
}
.dm-dash__sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* Console: dark frame holding tiles + strip */
.dm-dash__console {
    background: linear-gradient(160deg, rgba(232, 80, 10, 0.04), rgba(17, 14, 11, 0.4));
    border: 1px solid rgba(253, 240, 232, 0.07);
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow:
        inset 0 1px 0 rgba(253, 240, 232, 0.05),
        0 50px 80px -30px rgba(0, 0, 0, 0.6);
}

/* 6 metric tiles */
.dm-dash__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.dm-dash__tile {
    position: relative;
    padding: 1.75rem 1.5rem;
    border-radius: 1rem;
    background: rgba(253, 240, 232, 0.025);
    border: 1px solid rgba(253, 240, 232, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
}
.dm-dash__tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3rem;
    height: 1px;
    background: var(--primary);
}
.dm-dash__tile-lbl {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.dm-dash__tile-num {
    font-family: var(--f-display);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    font-feature-settings: "tnum" 1;     /* tabular numerals so counter doesn't jitter */
}
.dm-dash__tile-trend {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: rgba(232, 80, 10, 0.85);
    margin-top: 0.25rem;
}

/* Performance strip */
.dm-dash__strip {
    padding: 1.75rem 1.5rem;
    border-radius: 1rem;
    background: rgba(17, 14, 11, 0.3);
    border: 1px solid rgba(253, 240, 232, 0.06);
}
.dm-dash__strip-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.dm-dash__strip-lbl { color: var(--text-sec); }
.dm-dash__strip-meta { color: var(--text-muted); }
.dm-dash__strip-bars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    height: 8rem;
    align-items: end;
}
.dm-dash__bar {
    position: relative;
    width: 100%;
    height: var(--h, 50%);
    background: linear-gradient(to top, var(--primary), rgba(232, 80, 10, 0.4));
    border-radius: 0.5rem 0.5rem 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform-origin: bottom;
    transform: scaleY(0);
    animation: dmBarStripRise 0.8s var(--ease) forwards;
}
.dm-dash__bar:nth-child(1) { animation-delay: 0.05s; }
.dm-dash__bar:nth-child(2) { animation-delay: 0.15s; }
.dm-dash__bar:nth-child(3) { animation-delay: 0.25s; }
.dm-dash__bar:nth-child(4) { animation-delay: 0.35s; }
.dm-dash__bar:nth-child(5) { animation-delay: 0.45s; }
@keyframes dmBarStripRise {
    to { transform: scaleY(1); }
}
.dm-dash__bar em {
    font-style: normal;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    padding-bottom: 0.5rem;
}

/* ── 22.4 Process loop ── */
.dm-loop {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 6rem 3.5rem 7rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.dm-loop__head {
    max-width: 52rem;
    margin: 0 auto 4rem;
    text-align: center;
}
.dm-loop__head .kicker {
    margin-bottom: 1rem;
    display: inline-flex;
}
.dm-loop__title {
    font-family: var(--f-display);
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 1.5rem;
}
.dm-loop__sub {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* Diagram + steps grid */
.dm-loop__diagram-wrap {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 5rem;
    align-items: center;
}
.dm-loop__diagram {
    width: 100%;
    max-width: 32rem;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
/* Orbiting dot — uses motion-path (modern browsers) */
.dm-loop__orbit {
    offset-path: path('M 240,80 A 160,160 0 1,1 239.99,80');
    offset-rotate: 0deg;
    animation: dmLoopOrbit 8s linear infinite;
}
@keyframes dmLoopOrbit {
    to { offset-distance: 100%; }
}

/* Phase nodes pulse subtly */
.dm-loop__nodes g {
    transform-origin: center;
    transform-box: fill-box;
}
.dm-loop__nodes g:nth-child(1) circle { animation: dmNodePop 2.4s ease-in-out 0s infinite; }
.dm-loop__nodes g:nth-child(2) circle { animation: dmNodePop 2.4s ease-in-out 0.6s infinite; }
.dm-loop__nodes g:nth-child(3) circle { animation: dmNodePop 2.4s ease-in-out 1.2s infinite; }
.dm-loop__nodes g:nth-child(4) circle { animation: dmNodePop 2.4s ease-in-out 1.8s infinite; }
@keyframes dmNodePop {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* Steps prose alongside the diagram */
.dm-loop__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.dm-loop__step {
    display: grid;
    grid-template-columns: 3rem 1fr;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    padding: 1.5rem 1.5rem 1.5rem 0;
    border-bottom: 1px solid rgba(253, 240, 232, 0.06);
}
.dm-loop__step:last-child { border-bottom: none; }
.dm-loop__step-num {
    grid-row: span 2;
    font-family: var(--f-mono);
    font-size: 0.875rem;
    letter-spacing: 0.18em;
    color: var(--primary);
    padding-top: 0.25rem;
}
.dm-loop__step-name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0;
}
.dm-loop__step-desc {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* ── 22.5 Why us, FAQ, CTA close (mirror branding's structure for system consistency) ── */
.dm-why {
    max-width: 86rem;
    margin: 0 auto;
    padding: 6rem 3.5rem 5rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.dm-why__head {
    text-align: center;
    margin-bottom: 4rem;
}
.dm-why__head .kicker {
    margin-bottom: 1.25rem;
    display: inline-flex;
}
.dm-why__title {
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
}
.dm-why__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.dm-why__card {
    padding: 2.5rem 2.25rem;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, rgba(253, 240, 232, 0.03), rgba(253, 240, 232, 0.005));
    border: 1px solid rgba(253, 240, 232, 0.07);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dm-why__num {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.dm-why__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0;
}
.dm-why__desc {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

.dm-faq {
    max-width: 72rem;
    margin: 0 auto;
    padding: 6rem 3.5rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.dm-faq__head {
    text-align: center;
    margin-bottom: 3.5rem;
}
.dm-faq__head .kicker {
    margin-bottom: 1.25rem;
    display: inline-flex;
}
.dm-faq__title {
    font-family: var(--f-display);
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
}
.dm-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dm-faq__item {
    border-top: 1px solid rgba(253, 240, 232, 0.08);
}
.dm-faq__item:last-child {
    border-bottom: 1px solid rgba(253, 240, 232, 0.08);
}
.dm-faq__q {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    display: grid;
    grid-template-columns: 4rem 1fr 2.5rem;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1rem;
    text-align: left;
    transition: background 0.3s var(--ease);
}
.dm-faq__q:hover { background: rgba(253, 240, 232, 0.02); }
.dm-faq__q-num {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.dm-faq__q-text {
    font-family: var(--f-display);
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--text-sec);
}
.dm-faq__q-icon {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--text-muted);
    text-align: center;
    transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.dm-faq__item.is-open .dm-faq__q-icon {
    transform: rotate(45deg);
    color: var(--primary);
}
.dm-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
    padding: 0 1rem 0 6.25rem;
}
.dm-faq__item.is-open .dm-faq__a {
    max-height: 16rem;
    padding-bottom: 1.5rem;
}
.dm-faq__a p {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 52rem;
}

.dm-end {
    padding: 6rem 0 7rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
    background: radial-gradient(ellipse at center top, rgba(232, 80, 10, 0.05), transparent 60%);
}
.dm-end__inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}
.dm-end__inner .kicker {
    margin-bottom: 1.25rem;
    display: inline-flex;
}
.dm-end__title {
    font-family: var(--f-display);
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.dm-end__sub {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 auto 2.5rem;
    max-width: 38rem;
}
.dm-end__row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Animation initial states for JS reveals */
.dm-channels__head > *,
.dm-dash__head > *,
.dm-loop__head > *,
.dm-why__card,
.dm-faq__item,
.dm-end__inner > * {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}


/* ════════════════════════════════════════════════════════════════════════════
   ░ SECTION 23 — WEB3 (.w3-*)
   ░ Sticky-nav layout mirroring digital-marketing's .dm- structure but with
   ░ Web3-themed accents: code preview, mint counter, TVL chart, wallet modal,
   ░ signature verification. Live ledger dashboard with tx feed and counters.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 23.1 Chapter open ──
   Same shape as .dm-open: chapter bar full-width on top + 2-col layout
   (text left, animated network visualization right). */
.w3-open {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 9rem 3.5rem 4rem;
}
.w3-open__chapterbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1.25rem;
    margin-bottom: 3rem;
    border-bottom: 1px dashed rgba(253, 240, 232, 0.12);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.w3-open__chaptermark {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
}
.w3-open__chaptermark-num { color: var(--primary); }
.w3-open__chaptermark-name { color: var(--text-sec); }
.w3-open__chaptermark-meta { color: rgba(253, 240, 232, 0.4); }

.w3-open__layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
    align-items: center;
}
.w3-open__text {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
}
/* Same kicker-pill stretch fix as .dm-open__text — flex column would otherwise
   stretch the inline-flex pill to full row width. */
.w3-open__text .page-hero__kicker { align-self: flex-start; margin-bottom: 0; }
.w3-open__text .page-hero__title  { margin: 0; }
.w3-open__text .page-hero__sub    { margin: 0; max-width: 36rem; }

/* ── Network visualization container ── */
.w3-open__net {
    position: relative;
    width: 100%;
    aspect-ratio: 13 / 9;
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(232, 80, 10, 0.08), transparent 60%),
        linear-gradient(135deg, rgba(17, 14, 11, 0.6), rgba(17, 14, 11, 0.3));
    border: 1px solid rgba(253, 240, 232, 0.06);
}
.w3-open__net > svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Frame/labels fade in on load */
.w3-open__net-frame,
.w3-open__net-labels {
    opacity: 0;
    animation: w3NetFade 0.7s ease-out 0.1s forwards;
}
@keyframes w3NetFade {
    to { opacity: 1; }
}

/* Connecting lines flow with animated dash offset */
.w3-open__net-lines line {
    stroke-dasharray: 4 3;
    animation: w3NetFlow 8s linear infinite;
    opacity: 0;
    animation: w3NetFade 0.6s ease-out 0.5s forwards, w3NetFlow 8s linear infinite 0.5s;
}
@keyframes w3NetFlow {
    from { stroke-dashoffset: 0;    }
    to   { stroke-dashoffset: -100; }
}

/* Hex nodes pulse (staggered) */
.w3-open__net-node {
    transform-origin: center;
    transform-box: fill-box;
    opacity: 0;
    animation: w3NetFade 0.6s ease-out forwards;
}
.w3-open__net-node--1 { animation-delay: 0.7s; }
.w3-open__net-node--2 { animation-delay: 0.85s; }
.w3-open__net-node--3 { animation-delay: 1.0s; }
.w3-open__net-node--4 { animation-delay: 1.15s; }
.w3-open__net-node--5 { animation-delay: 1.3s; }
.w3-open__net-node--6 { animation-delay: 1.45s; }

.w3-open__net-node circle:last-child {
    animation: w3NetNodePulse 2.4s ease-in-out infinite;
}
.w3-open__net-node--2 circle:last-child { animation-delay: 0.4s; }
.w3-open__net-node--3 circle:last-child { animation-delay: 0.8s; }
.w3-open__net-node--4 circle:last-child { animation-delay: 1.2s; }
.w3-open__net-node--5 circle:last-child { animation-delay: 1.6s; }
.w3-open__net-node--6 circle:last-child { animation-delay: 2.0s; }
@keyframes w3NetNodePulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.6); opacity: 0.5; }
}

/* Two travelling packets along arcs (each follows a different path) */
.w3-open__net-packet--1 {
    animation: w3NetPacket1 6s linear infinite;
    filter: drop-shadow(0 0 4px #FDF0E8);
}
.w3-open__net-packet--2 {
    animation: w3NetPacket2 7s linear infinite;
    animation-delay: 2.5s;
    filter: drop-shadow(0 0 4px #FDF0E8);
}
@keyframes w3NetPacket1 {
    0%   { transform: translate(120px, 100px); opacity: 0; }
    5%   { opacity: 1; }
    25%  { transform: translate(260px, 60px);  opacity: 1; }
    30%  { opacity: 0; }
    45%  { transform: translate(400px, 120px); opacity: 1; }
    50%  { opacity: 0; }
    65%  { transform: translate(320px, 270px); opacity: 1; }
    70%  { opacity: 0; }
    85%  { transform: translate(200px, 220px); opacity: 1; }
    100% { transform: translate(120px, 100px); opacity: 0; }
}
@keyframes w3NetPacket2 {
    0%   { transform: translate(75px, 200px); opacity: 0; }
    5%   { opacity: 1; }
    25%  { transform: translate(200px, 220px); opacity: 1; }
    30%  { opacity: 0; }
    50%  { transform: translate(320px, 270px); opacity: 1; }
    55%  { opacity: 0; }
    75%  { transform: translate(400px, 120px); opacity: 1; }
    80%  { opacity: 0; }
    100% { transform: translate(260px, 60px); opacity: 0; }
}

.w3-open__net-callout {
    opacity: 0;
    animation: w3NetFade 0.5s ease-out 1.6s forwards;
}


/* ── 23.2 Featured projects marquee ──
   Same engine as web-design's marquee. JS drives the xPercent translation. */
.w3-marquee {
    width: 100%;
    padding: 3rem 0 5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.w3-marquee__track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    will-change: transform;
}
.w3-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-shrink: 0;
    width: 32rem;
}
.w3-figure__plate {
    aspect-ratio: 16 / 9;                  /* dApp UI shape — same as web-design */
    background:
        linear-gradient(135deg, rgba(232, 80, 10, 0.04), rgba(253, 240, 232, 0.02)),
        rgba(17, 14, 11, 0.6);
    border: 1px dashed rgba(253, 240, 232, 0.15);
    border-radius: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-image:
        radial-gradient(circle, rgba(253, 240, 232, 0.04) 1px, transparent 1px),
        linear-gradient(135deg, rgba(232, 80, 10, 0.04), rgba(253, 240, 232, 0.02)),
        rgba(17, 14, 11, 0.6);
    background-size: 22px 22px, auto, auto;
}
.w3-figure__label {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
}
.w3-figure__hint {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    color: rgba(253, 240, 232, 0.35);
}
.w3-figure__cap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.w3-figure__cap-name {
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-sec);
}
.w3-figure__cap-meta {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Real-project image variant of the plate ───────────────────────
   Used by w3.php featured-projects marquee. The .w3-figure__plate
   keeps its 16:9 aspect-ratio + border-radius; .w3-figure__plate--img
   swaps the dashed placeholder look for a solid frame and lets the
   <img> cover the full area. */
.w3-figure__plate--img {
    border: 1px solid rgba(253, 240, 232, 0.08);
    background: rgba(17, 14, 11, 0.6);
    background-image: none;
    padding: 0;
    overflow: hidden;
}
.w3-figure__plate--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Description line that sits under name + meta in the caption */
.w3-figure__cap-desc {
    font-family: var(--f-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin-top: 0.375rem;
    display: block;
}


/* ── 23.3 Sticky-nav disciplines ──
   Mirrors .dm-channels structure: 18rem sticky nav left + stacked panels right.
   On tablet, single-column with horizontal scroll nav.
   On mobile, vertical full-width nav + accents hidden. */
.w3-disciplines {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 6rem 3.5rem 7rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.w3-disciplines__head {
    max-width: 52rem;
    margin: 0 auto 5rem;
    text-align: center;
}
.w3-disciplines__head .kicker {
    margin-bottom: 1rem;
    display: inline-flex;
}
.w3-disciplines__title {
    font-family: var(--f-display);
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 1.5rem;
}
.w3-disciplines__sub {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

.w3-disciplines__grid {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 6rem;
    align-items: start;
}

/* Sticky nav (left column) */
.w3-disciplines__nav {
    position: sticky;
    top: 6rem;
    align-self: start;
}
.w3-disciplines__navlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.w3-disciplines__navitem {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: 0.875rem;
    row-gap: 0.125rem;
    align-items: baseline;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.w3-disciplines__navitem:hover {
    background: rgba(253, 240, 232, 0.025);
}
.w3-disciplines__navitem.is-active {
    background: rgba(232, 80, 10, 0.06);
}
.w3-disciplines__nav-num {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    transition: color 0.35s var(--ease);
}
.w3-disciplines__navitem.is-active .w3-disciplines__nav-num {
    color: var(--primary);
}
.w3-disciplines__nav-name {
    font-family: var(--f-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-muted);
    transition: color 0.35s var(--ease);
}
.w3-disciplines__navitem.is-active .w3-disciplines__nav-name {
    color: var(--text);
}
.w3-disciplines__nav-cat {
    grid-column: 2;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(253, 240, 232, 0.3);
    transition: color 0.35s var(--ease);
}
.w3-disciplines__navitem.is-active .w3-disciplines__nav-cat {
    color: rgba(232, 80, 10, 0.7);
}

/* Stacked discipline panels (right column) */
.w3-disciplines__panels {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    min-width: 0;
}
.w3-discipline {
    scroll-margin-top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.w3-discipline__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(253, 240, 232, 0.06);
}
.w3-discipline__num { color: var(--primary); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.16em; }
.w3-discipline__sep { color: var(--text-muted); margin: 0 0.25rem; }
.w3-discipline__title {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 4.5rem;
    line-height: 0.92;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: var(--text-sec);
    margin: 0;
}
.w3-discipline__lede {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 36rem;
}
.w3-discipline__lede strong {
    color: var(--text);
    font-weight: 500;
}
.w3-discipline__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    max-width: 40rem;
}
.w3-discipline__list li {
    position: relative;
    padding: 0.75rem 0 0.75rem 1.5rem;
    font-family: var(--f-body);
    font-size: 0.9375rem;
    color: var(--text-sec);
    border-bottom: 1px dashed rgba(253, 240, 232, 0.08);
}
.w3-discipline__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.125rem;
    width: 0.5rem;
    height: 0.5rem;
    border-left: 1.5px solid var(--primary);
    border-bottom: 1.5px solid var(--primary);
    transform: rotate(-45deg);
}

/* Discipline accent (hidden below 767px — same convention as .dm-channel__accent) */
.w3-discipline__accent {
    margin-top: 1rem;
    padding: 1.5rem 1.75rem;
    border-radius: 1rem;
    background: rgba(253, 240, 232, 0.02);
    border: 1px solid rgba(253, 240, 232, 0.06);
    overflow: hidden;
}


/* ── 23.4 Discipline-specific accent designs ── */

/* 01 Smart Contracts — Solidity code preview block */
.w3-code {
    border-radius: 0.625rem;
    overflow: hidden;
    background: #0c0a08;
    border: 1px solid rgba(253, 240, 232, 0.06);
}
.w3-code__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(232, 80, 10, 0.04);
    border-bottom: 1px solid rgba(253, 240, 232, 0.06);
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.w3-code__filename { color: var(--text-sec); font-weight: 500; }
.w3-code__status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(232, 80, 10, 0.85);
}
.w3-code__status-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(232, 80, 10, 0.7);
    animation: svc-pulse 1.8s ease-in-out infinite;
}
.w3-code__pre {
    margin: 0;
    padding: 1.25rem 1rem;
    font-family: var(--f-mono);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-sec);
    overflow-x: auto;
}
.w3-code__line { display: block; }
.w3-code__ln {
    display: inline-block;
    width: 2.5rem;
    color: rgba(253, 240, 232, 0.25);
    user-select: none;
}
.w3-code__c { color: rgba(253, 240, 232, 0.4); font-style: italic; }       /* comments */
.w3-code__k { color: var(--primary); }                                       /* keywords */
.w3-code__t { color: #FDF0E8; }                                              /* type names */
.w3-code__f { color: #FDF0E8; }                                              /* function names */
.w3-code__n { color: rgba(232, 80, 10, 0.75); }                              /* numbers */

/* 02 Tokens & NFTs — Mint counter ring + label */
.w3-mint {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.w3-mint__visual {
    position: relative;
    width: 7rem;
    height: 7rem;
    flex-shrink: 0;
}
.w3-mint__ring {
    width: 100%;
    height: 100%;
}
.w3-mint__ring circle:nth-child(2) {
    animation: w3MintFill 1.6s var(--ease-out) forwards;
}
@keyframes w3MintFill {
    from { stroke-dashoffset: 326.7; }
    to   { stroke-dashoffset: 62; }
}
.w3-mint__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
}
.w3-mint__num {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text);
    letter-spacing: -0.02em;
}
.w3-mint__total {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}
.w3-mint__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.w3-mint__label {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.w3-mint__value {
    font-family: var(--f-display);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--text-sec);
}
.w3-mint__meta {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(232, 80, 10, 0.7);
}

/* 03 DeFi — TVL header + mini area chart */
.w3-tvl {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.w3-tvl__head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.w3-tvl__head-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.w3-tvl__head-block--right { text-align: right; }
.w3-tvl__head-lbl {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.w3-tvl__head-num {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.875rem;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--text);
    display: inline-flex;
    align-items: baseline;
}
.w3-tvl__head-num em {
    font-style: normal;
    font-size: 0.625em;
    color: var(--text-muted);
    margin-left: 0.15em;
}
.w3-tvl__head-num--accent { color: var(--primary); }
.w3-tvl__chart {
    width: 100%;
    height: 4.5rem;
}
.w3-tvl__chart svg { width: 100%; height: 100%; display: block; }
.w3-tvl__chart-line {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: w3TvlDraw 1.8s var(--ease-out) forwards;
}
@keyframes w3TvlDraw {
    to { stroke-dashoffset: 0; }
}
.w3-tvl__chart-area {
    opacity: 0;
    animation: w3NetFade 0.8s ease-out 1.2s forwards;
}

/* 04 dApps — Wallet-connect modal mockup */
.w3-wc {
    background: rgba(17, 14, 11, 0.6);
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 0.875rem;
    overflow: hidden;
    max-width: 22rem;
    margin: 0 auto;
}
.w3-wc__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid rgba(253, 240, 232, 0.06);
}
.w3-wc__title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-sec);
}
.w3-wc__close {
    font-family: var(--f-display);
    font-size: 1.25rem;
    color: var(--text-muted);
    line-height: 1;
}
.w3-wc__list {
    list-style: none;
    margin: 0;
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.w3-wc__item {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.5rem;
    background: rgba(253, 240, 232, 0.025);
    transition: background 0.3s, border-color 0.3s;
    border: 1px solid transparent;
}
.w3-wc__item--featured {
    background: rgba(232, 80, 10, 0.07);
    border-color: rgba(232, 80, 10, 0.3);
}
.w3-wc__icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    background: rgba(232, 80, 10, 0.1);
    color: var(--primary);
}
.w3-wc__name {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--text-sec);
    letter-spacing: -0.005em;
}
.w3-wc__hint {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.w3-wc__item--featured .w3-wc__hint { color: var(--primary); }

/* 05 Wallets — Address + signature row */
.w3-sig {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 28rem;
    margin: 0 auto;
}
.w3-sig__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(253, 240, 232, 0.03);
    border: 1px solid rgba(253, 240, 232, 0.07);
    border-radius: 0.5rem;
}
.w3-sig__lbl {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.w3-sig__addr {
    font-family: var(--f-mono);
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    color: var(--text-sec);
}
.w3-sig__addr-prefix,
.w3-sig__addr-suffix { color: var(--text); }
.w3-sig__addr-mid    { color: var(--text-muted); margin: 0 0.125rem; }
.w3-sig__check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.625rem;
    border-radius: 999px;
    background: rgba(232, 80, 10, 0.1);
    border: 1px solid rgba(232, 80, 10, 0.4);
    color: var(--primary);
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.w3-sig__chains {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}
.w3-sig__chain {
    padding: 0.3rem 0.625rem;
    border-radius: 999px;
    background: rgba(253, 240, 232, 0.04);
    border: 1px solid rgba(253, 240, 232, 0.1);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-sec);
}


/* ── 23.5 Live ledger dashboard ──
   Mirrors .dm-dash structure: console frame + 6 metric tiles + tx feed strip.
   Counters animate from 0 to data-count-to when section enters viewport. */
.w3-ledger {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 6rem 3.5rem 7rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.w3-ledger__head {
    max-width: 52rem;
    margin: 0 auto 4rem;
    text-align: center;
}
.w3-ledger__head .kicker {
    margin-bottom: 1rem;
    display: inline-flex;
}
.w3-ledger__title {
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 1.25rem;
}
.w3-ledger__sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

.w3-ledger__console {
    background: linear-gradient(160deg, rgba(232, 80, 10, 0.04), rgba(17, 14, 11, 0.4));
    border: 1px solid rgba(253, 240, 232, 0.07);
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow:
        inset 0 1px 0 rgba(253, 240, 232, 0.05),
        0 50px 80px -30px rgba(0, 0, 0, 0.6);
}

/* 6 metric tiles (3 cols × 2 rows) */
.w3-ledger__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.w3-ledger__tile {
    position: relative;
    padding: 1.75rem 1.5rem;
    border-radius: 1rem;
    background: rgba(253, 240, 232, 0.025);
    border: 1px solid rgba(253, 240, 232, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
}
.w3-ledger__tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3rem;
    height: 1px;
    background: var(--primary);
}
.w3-ledger__tile-lbl {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.w3-ledger__tile-num {
    font-family: var(--f-display);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    font-feature-settings: "tnum" 1;
}
.w3-ledger__tile-trend {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: rgba(232, 80, 10, 0.85);
    margin-top: 0.25rem;
}

/* Live tx feed strip */
.w3-ledger__feed {
    padding: 1.75rem 1.5rem;
    border-radius: 1rem;
    background: rgba(17, 14, 11, 0.4);
    border: 1px solid rgba(253, 240, 232, 0.06);
}
.w3-ledger__feed-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.w3-ledger__feed-lbl {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-sec);
}
.w3-ledger__feed-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(232, 80, 10, 0.7);
    animation: svc-pulse 1.8s ease-in-out infinite;
}
.w3-ledger__feed-meta { color: var(--text-muted); }
.w3-ledger__feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.w3-ledger__feed-row {
    display: grid;
    grid-template-columns: 7rem 10rem 1fr 6rem;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 0;
    border-bottom: 1px dashed rgba(253, 240, 232, 0.06);
    font-family: var(--f-mono);
    font-size: 0.8125rem;
}
.w3-ledger__feed-row:last-child { border-bottom: none; }
.w3-ledger__feed-status {
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-align: center;
    font-weight: 500;
}
.w3-ledger__feed-status--ok {
    background: rgba(232, 80, 10, 0.1);
    border: 1px solid rgba(232, 80, 10, 0.4);
    color: var(--primary);
}
.w3-ledger__feed-status--pending {
    background: rgba(253, 240, 232, 0.04);
    border: 1px solid rgba(253, 240, 232, 0.18);
    color: rgba(253, 240, 232, 0.6);
    animation: svc-pulse 1.6s ease-in-out infinite;
}
.w3-ledger__feed-hash { color: var(--text-sec); letter-spacing: 0.04em; }
.w3-ledger__feed-action { color: var(--primary); }
.w3-ledger__feed-gas { color: var(--text-muted); text-align: right; font-size: 0.75rem; }


/* ── 23.6 Process — 6 phases, audit highlighted ── */
.w3-process {
    max-width: 86rem;
    margin: 0 auto;
    padding: 6rem 3rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.w3-process__head {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}
.w3-process__head .kicker {
    margin-bottom: 1.25rem;
    display: inline-flex;
}
.w3-process__title {
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.w3-process__sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}
.w3-process__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.w3-process__step {
    padding: 2rem 1.75rem;
    background: rgba(253, 240, 232, 0.03);
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 0.875rem;
    transition: border-color 0.3s, background 0.3s;
}
.w3-process__step:hover {
    border-color: rgba(232, 80, 10, 0.3);
    background: rgba(232, 80, 10, 0.04);
}
/* Pivot variant — Audit phase. Subtle orange tint to mark the centre of the process. */
.w3-process__step--pivot {
    background: rgba(232, 80, 10, 0.06);
    border-color: rgba(232, 80, 10, 0.3);
}
.w3-process__step--pivot:hover {
    background: rgba(232, 80, 10, 0.1);
    border-color: rgba(232, 80, 10, 0.5);
}
.w3-process__num {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    margin-bottom: 1rem;
}
.w3-process__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.625rem;
    letter-spacing: -0.015em;
}
.w3-process__desc {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}


/* ── 23.7 Why us ── */
.w3-why {
    max-width: 86rem;
    margin: 0 auto;
    padding: 6rem 3rem 5rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.w3-why__head {
    text-align: center;
    margin-bottom: 4rem;
}
.w3-why__head .kicker {
    margin-bottom: 1.25rem;
    display: inline-flex;
}
.w3-why__title {
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
}
.w3-why__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.w3-why__card {
    padding: 2.5rem 2.25rem;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, rgba(253, 240, 232, 0.03), rgba(253, 240, 232, 0.005));
    border: 1px solid rgba(253, 240, 232, 0.07);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.w3-why__num {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.w3-why__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0;
}
.w3-why__desc {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}


/* ── 23.8 FAQ — same accordion pattern as .dm-faq ── */
.w3-faq {
    max-width: 72rem;
    margin: 0 auto;
    padding: 6rem 3.5rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.w3-faq__head {
    text-align: center;
    margin-bottom: 3.5rem;
}
.w3-faq__head .kicker {
    margin-bottom: 1.25rem;
    display: inline-flex;
}
.w3-faq__title {
    font-family: var(--f-display);
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
}
.w3-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.w3-faq__item {
    border-top: 1px solid rgba(253, 240, 232, 0.08);
}
.w3-faq__item:last-child {
    border-bottom: 1px solid rgba(253, 240, 232, 0.08);
}
.w3-faq__q {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    display: grid;
    grid-template-columns: 4rem 1fr 2.5rem;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1rem;
    text-align: left;
    transition: background 0.3s var(--ease);
}
.w3-faq__q:hover { background: rgba(253, 240, 232, 0.02); }
.w3-faq__q-num {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.w3-faq__q-text {
    font-family: var(--f-display);
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--text-sec);
}
.w3-faq__q-icon {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--text-muted);
    text-align: center;
    transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.w3-faq__item.is-open .w3-faq__q-icon {
    transform: rotate(45deg);
    color: var(--primary);
}
.w3-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
    padding: 0 1rem 0 6.25rem;
}
.w3-faq__item.is-open .w3-faq__a {
    max-height: 22rem;
    padding-bottom: 1.5rem;
}
.w3-faq__a p {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 52rem;
}


/* ── 23.9 End CTA ── */
.w3-end {
    padding: 6rem 0 7rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
    background: radial-gradient(ellipse at center top, rgba(232, 80, 10, 0.05), transparent 60%);
}
.w3-end__inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}
.w3-end__inner .kicker {
    margin-bottom: 1.25rem;
    display: inline-flex;
}
.w3-end__title {
    font-family: var(--f-display);
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.w3-end__sub {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 auto 2.5rem;
    max-width: 38rem;
}
.w3-end__row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}


/* ── 23.10 Animation initial states (JS reveals on scroll) ── */
.w3-disciplines__head > *,
.w3-ledger__head > *,
.w3-process__head > *,
.w3-process__step,
.w3-why__card,
.w3-faq__item,
.w3-end__inner > * {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}


/* ════════════════════════════════════════════════════════════════════════════
   ░ SECTION 24 — BPO (.bpo-*)
   ░ Globe centerpiece + sticky-nav 6 disciplines + ops dashboard with shift
   ░ coverage bar. Mirrors .w3- sticky-nav patterns where the structure
   ░ overlaps; the .bpo-globe section is unique to this page.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 24.1 Chapter open ── */
.bpo-open {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 9rem 3.5rem 4rem;
}
.bpo-open__chapterbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1.25rem;
    margin-bottom: 3rem;
    border-bottom: 1px dashed rgba(253, 240, 232, 0.12);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bpo-open__chaptermark { display: inline-flex; align-items: center; gap: 0.875rem; }
.bpo-open__chaptermark-num  { color: var(--primary); }
.bpo-open__chaptermark-name { color: var(--text-sec); }
.bpo-open__chaptermark-meta { color: rgba(253, 240, 232, 0.4); }

.bpo-open__layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
    align-items: center;
}
.bpo-open__text {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
}
.bpo-open__text .page-hero__kicker { align-self: flex-start; margin-bottom: 0; }
.bpo-open__text .page-hero__title  { margin: 0; }
.bpo-open__text .page-hero__sub    { margin: 0; max-width: 36rem; }

/* ── Sketch on right of hero (static decorative SVG) ── */
.bpo-open__sketch {
    position: relative;
    width: 100%;
    aspect-ratio: 13 / 9;
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(232, 80, 10, 0.06), transparent 60%),
        linear-gradient(135deg, rgba(17, 14, 11, 0.6), rgba(17, 14, 11, 0.3));
    border: 1px solid rgba(253, 240, 232, 0.06);
}
.bpo-open__sketch > svg {
    width: 100%; height: 100%; display: block;
}
/* ── Animated support agent on right of hero ──
   Figure wearing a headset; CSS keyframes drive blink, LED pulse, sound
   waves, and mic glow halo. All purely SVG-class animations — no JS. */
.bpo-open__sketch-agent {
    transform-origin: 260px 200px;
    transform-box: fill-box;
    animation: bpoAgentBreath 5s ease-in-out infinite;
}
@keyframes bpoAgentBreath {
    0%, 100% { transform: scale(1)    translateY(0); }
    50%      { transform: scale(1.01) translateY(-1px); }
}

/* Eyes blink — quick scaleY pulse every ~4.5s */
.bpo-open__sketch-eye {
    transform-origin: center;
    transform-box: fill-box;
    animation: bpoAgentBlink 4.5s linear infinite;
}
@keyframes bpoAgentBlink {
    0%, 92%, 100% { transform: scaleY(1);   }
    94%, 96%      { transform: scaleY(0.1); }
}

/* LED indicator on left earpiece — pulses to signal active call */
.bpo-open__sketch-led {
    transform-origin: center;
    transform-box: fill-box;
    animation: bpoAgentLed 1.4s ease-in-out infinite;
}
@keyframes bpoAgentLed {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%      { opacity: 0.5; transform: scale(1.45); }
}

/* Mic-area glow halo — soft breathing brightness */
.bpo-open__sketch-glow {
    animation: bpoAgentGlow 2s ease-in-out infinite;
}
@keyframes bpoAgentGlow {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1;    }
}

/* Sound waves — three arcs that pulse opacity in sequence to read as
   audio emanating outward from the microphone. */
.bpo-open__sketch-wave           { opacity: 0.2; }
.bpo-open__sketch-wave--1 { animation: bpoAgentWave 1.5s ease-in-out infinite;        }
.bpo-open__sketch-wave--2 { animation: bpoAgentWave 1.5s ease-in-out infinite 0.3s;   }
.bpo-open__sketch-wave--3 { animation: bpoAgentWave 1.5s ease-in-out infinite 0.6s;   }
@keyframes bpoAgentWave {
    0%, 100% { opacity: 0.18; }
    50%      { opacity: 1;    }
}


/* ── 24.2 GLOBE SECTION — full-width centerpiece ──
   Big globe (~70vh), HUD overlays at four corners, city list below. */
.bpo-globe {
    position: relative;
    padding: 6rem 2rem 5rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
    overflow: hidden;
}
.bpo-globe__head {
    max-width: 56rem;
    margin: 0 auto 4rem;
    text-align: center;
}
.bpo-globe__head .kicker {
    margin-bottom: 1rem;
    display: inline-flex;
}
.bpo-globe__title {
    font-family: var(--f-display);
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 1.25rem;
}
.bpo-globe__sub {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* The stage — globe canvas + 4 corner HUDs */
.bpo-globe__stage {
    position: relative;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    aspect-ratio: 16 / 11;                   /* roomy, slightly portrait-ish — gives globe space */
    border-radius: 1.5rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(232, 80, 10, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(17, 14, 11, 0.4), rgba(17, 14, 11, 0.7));
    border: 1px solid rgba(253, 240, 232, 0.07);
    box-shadow:
        inset 0 1px 0 rgba(253, 240, 232, 0.04),
        0 50px 80px -30px rgba(0, 0, 0, 0.6);
}
.bpo-globe__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* globe.gl will paint a canvas in here once libs load */
}

/* Static fallback — visible until globe.gl renders. Concentric rings + core
   give the slot a "globe-like" feel even if the lib never loads. */
.bpo-globe__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.bpo-globe__fallback-ring {
    position: absolute;
    width: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid rgba(232, 80, 10, 0.3);
    animation: bpoFallbackPulse 4s ease-in-out infinite;
}
.bpo-globe__fallback-ring--2 {
    width: 70%;
    border-color: rgba(232, 80, 10, 0.15);
    animation-delay: -2s;
}
.bpo-globe__fallback-core {
    width: 28%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(232, 80, 10, 0.4), rgba(17, 14, 11, 0.8) 70%);
    border: 1px solid rgba(232, 80, 10, 0.5);
}
@keyframes bpoFallbackPulse {
    0%, 100% { transform: scale(1);    opacity: 0.6; }
    50%      { transform: scale(1.05); opacity: 1;   }
}

/* HUD overlays — corner-anchored info chips */
.bpo-globe__hud {
    position: absolute;
    z-index: 5;
    padding: 0.875rem 1.125rem;
    background: rgba(17, 14, 11, 0.78);
    border: 1px solid rgba(253, 240, 232, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 0.625rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-sec);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 9rem;
    pointer-events: none;
}
.bpo-globe__hud--tl { top: 1.25rem; left: 1.25rem; }
.bpo-globe__hud--tr { top: 1.25rem; right: 1.25rem; align-items: flex-end; text-align: right; }
.bpo-globe__hud--bl { bottom: 1.25rem; left: 1.25rem; }
.bpo-globe__hud--br { bottom: 1.25rem; right: 1.25rem; align-items: flex-end; text-align: right; }

.bpo-globe__hud-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-weight: 500;
}
.bpo-globe__hud-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(232, 80, 10, 0.7);
    animation: svc-pulse 1.8s ease-in-out infinite;
}
.bpo-globe__hud-meta {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}
.bpo-globe__hud-lbl  { color: rgba(253, 240, 232, 0.4); font-size: 0.625rem; }
.bpo-globe__hud-val  {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    color: var(--text);
    text-transform: none;
    line-height: 1.1;
}
/* Highlight inside hud-val (e.g. "Islamabad, <em>Pakistan</em>") in orange */
.bpo-globe__hud-val em {
    font-style: normal;
    color: var(--primary);
}
.bpo-globe__hud-num {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.625rem;
    letter-spacing: -0.02em;
    color: var(--primary);
    text-transform: none;
    line-height: 1;
    margin-top: 0.125rem;
}
.bpo-globe__hud-meta-line {
    color: rgba(253, 240, 232, 0.4);
    font-size: 0.625rem;
    margin-top: 0.125rem;
}

/* Cities list under globe */
.bpo-globe__cities {
    list-style: none;
    margin: 3rem auto 0;
    max-width: 80rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;                              /* hairline divider effect via gap+bg */
    background: rgba(253, 240, 232, 0.06);
    border: 1px solid rgba(253, 240, 232, 0.06);
    border-radius: 0.875rem;
    overflow: hidden;
}
.bpo-globe__city {
    background: rgba(17, 14, 11, 0.7);
    padding: 1.25rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: background 0.3s;
}
.bpo-globe__city:hover { background: rgba(232, 80, 10, 0.06); }
.bpo-globe__city-num {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.bpo-globe__city-name {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.015em;
    color: var(--text);
    line-height: 1.1;
}
.bpo-globe__city-meta {
    font-family: var(--f-body);
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.bpo-globe__city-tz {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    color: rgba(253, 240, 232, 0.4);
    margin-top: 0.125rem;
}


/* ── 24.3 Sticky-nav 6 disciplines ──
   Same layout pattern as .w3-disciplines. Different prefix, otherwise
   structurally identical (so JS init can be near-clone). */
.bpo-disciplines {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 6rem 3.5rem 7rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.bpo-disciplines__head {
    max-width: 52rem;
    margin: 0 auto 5rem;
    text-align: center;
}
.bpo-disciplines__head .kicker { margin-bottom: 1rem; display: inline-flex; }
.bpo-disciplines__title {
    font-family: var(--f-display);
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 1.5rem;
}
.bpo-disciplines__sub {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

.bpo-disciplines__grid {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 6rem;
    align-items: start;
}
.bpo-disciplines__nav {
    position: sticky;
    top: 6rem;
    align-self: start;
}
.bpo-disciplines__navlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.bpo-disciplines__navitem {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: 0.875rem;
    row-gap: 0.125rem;
    align-items: baseline;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.bpo-disciplines__navitem:hover { background: rgba(253, 240, 232, 0.025); }
.bpo-disciplines__navitem.is-active { background: rgba(232, 80, 10, 0.06); }
.bpo-disciplines__nav-num {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    transition: color 0.35s var(--ease);
}
.bpo-disciplines__navitem.is-active .bpo-disciplines__nav-num { color: var(--primary); }
.bpo-disciplines__nav-name {
    font-family: var(--f-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-muted);
    transition: color 0.35s var(--ease);
}
.bpo-disciplines__navitem.is-active .bpo-disciplines__nav-name { color: var(--text); }
.bpo-disciplines__nav-cat {
    grid-column: 2;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(253, 240, 232, 0.3);
    transition: color 0.35s var(--ease);
}
.bpo-disciplines__navitem.is-active .bpo-disciplines__nav-cat { color: rgba(232, 80, 10, 0.7); }

.bpo-disciplines__panels {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    min-width: 0;
}
.bpo-discipline {
    scroll-margin-top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.bpo-discipline__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(253, 240, 232, 0.06);
}
.bpo-discipline__num { color: var(--primary); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.16em; }
.bpo-discipline__sep { color: var(--text-muted); margin: 0 0.25rem; }
.bpo-discipline__title {
    font-family: var(--f-hero);
    font-weight: 400;
    font-size: 4.5rem;
    line-height: 0.92;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: var(--text-sec);
    margin: 0;
}
.bpo-discipline__lede {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 36rem;
}
.bpo-discipline__lede strong { color: var(--text); font-weight: 500; }
.bpo-discipline__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    max-width: 40rem;
}
.bpo-discipline__list li {
    position: relative;
    padding: 0.75rem 0 0.75rem 1.5rem;
    font-family: var(--f-body);
    font-size: 0.9375rem;
    color: var(--text-sec);
    border-bottom: 1px dashed rgba(253, 240, 232, 0.08);
}
.bpo-discipline__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.125rem;
    width: 0.5rem;
    height: 0.5rem;
    border-left: 1.5px solid var(--primary);
    border-bottom: 1.5px solid var(--primary);
    transform: rotate(-45deg);
}


/* ── 24.4 Operations dashboard (.bpo-ops) ──
   Mirrors .w3-ledger structure: console frame + 6 metric tiles + a custom
   "shift coverage bar" instead of a tx feed. */
.bpo-ops {
    position: relative;
    max-width: 97.5rem;
    margin: 0 auto;
    padding: 6rem 3.5rem 7rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.bpo-ops__head {
    max-width: 52rem;
    margin: 0 auto 4rem;
    text-align: center;
}
.bpo-ops__head .kicker { margin-bottom: 1rem; display: inline-flex; }
.bpo-ops__title {
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 1.25rem;
}
.bpo-ops__sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}
.bpo-ops__console {
    background: linear-gradient(160deg, rgba(232, 80, 10, 0.04), rgba(17, 14, 11, 0.4));
    border: 1px solid rgba(253, 240, 232, 0.07);
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow:
        inset 0 1px 0 rgba(253, 240, 232, 0.05),
        0 50px 80px -30px rgba(0, 0, 0, 0.6);
}
.bpo-ops__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.bpo-ops__tile {
    position: relative;
    padding: 1.75rem 1.5rem;
    border-radius: 1rem;
    background: rgba(253, 240, 232, 0.025);
    border: 1px solid rgba(253, 240, 232, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
}
.bpo-ops__tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3rem;
    height: 1px;
    background: var(--primary);
}
.bpo-ops__tile-lbl {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bpo-ops__tile-num {
    font-family: var(--f-display);
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    font-feature-settings: "tnum" 1;
}
.bpo-ops__tile-trend {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: rgba(232, 80, 10, 0.85);
    margin-top: 0.25rem;
}

/* Shift coverage bar — three overlapping bars across a 24h timeline */
.bpo-ops__shifts {
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: 1rem;
    background: rgba(17, 14, 11, 0.4);
    border: 1px solid rgba(253, 240, 232, 0.06);
}
.bpo-ops__shifts-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.bpo-ops__shifts-lbl {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-sec);
}
.bpo-ops__shifts-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(232, 80, 10, 0.7);
    animation: svc-pulse 1.8s ease-in-out infinite;
}
.bpo-ops__shifts-meta { color: var(--text-muted); }
.bpo-ops__shifts-bar {
    position: relative;
    height: 2.75rem;
    border-radius: 0.5rem;
    background: rgba(253, 240, 232, 0.03);
    overflow: hidden;
}
.bpo-ops__shift {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    padding: 0 0.875rem;
}
.bpo-ops__shift em {
    font-style: normal;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text);
    font-weight: 500;
}
.bpo-ops__shift--a { background: rgba(232, 80, 10, 0.5);  z-index: 1; border: 1px solid rgba(232, 80, 10, 0.7); }
.bpo-ops__shift--b { background: rgba(232, 80, 10, 0.32); z-index: 2; border: 1px solid rgba(232, 80, 10, 0.55); }
.bpo-ops__shift--c { background: rgba(232, 80, 10, 0.18); z-index: 3; border: 1px solid rgba(232, 80, 10, 0.4);  }

.bpo-ops__shifts-axis {
    margin-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    color: rgba(253, 240, 232, 0.35);
}


/* ── 24.5 Process — 6 phases, pilot highlighted ── */
.bpo-process {
    max-width: 86rem;
    margin: 0 auto;
    padding: 6rem 3rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.bpo-process__head {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}
.bpo-process__head .kicker { margin-bottom: 1.25rem; display: inline-flex; }
.bpo-process__title {
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.bpo-process__sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}
.bpo-process__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.bpo-process__step {
    padding: 2rem 1.75rem;
    background: rgba(253, 240, 232, 0.03);
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 0.875rem;
    transition: border-color 0.3s, background 0.3s;
}
.bpo-process__step:hover {
    border-color: rgba(232, 80, 10, 0.3);
    background: rgba(232, 80, 10, 0.04);
}
.bpo-process__step--pivot {
    background: rgba(232, 80, 10, 0.06);
    border-color: rgba(232, 80, 10, 0.3);
}
.bpo-process__step--pivot:hover {
    background: rgba(232, 80, 10, 0.1);
    border-color: rgba(232, 80, 10, 0.5);
}
.bpo-process__num {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    margin-bottom: 1rem;
}
.bpo-process__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.625rem;
    letter-spacing: -0.015em;
}
.bpo-process__desc {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}


/* ── 24.6 Why us ── */
.bpo-why {
    max-width: 86rem;
    margin: 0 auto;
    padding: 6rem 3rem 5rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.bpo-why__head { text-align: center; margin-bottom: 4rem; }
.bpo-why__head .kicker { margin-bottom: 1.25rem; display: inline-flex; }
.bpo-why__title {
    font-family: var(--f-display);
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
}
.bpo-why__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.bpo-why__card {
    padding: 2.5rem 2.25rem;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, rgba(253, 240, 232, 0.03), rgba(253, 240, 232, 0.005));
    border: 1px solid rgba(253, 240, 232, 0.07);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.bpo-why__num {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.bpo-why__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0;
}
.bpo-why__desc {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}


/* ── 24.7 FAQ — same accordion pattern as .w3-faq ── */
.bpo-faq {
    max-width: 72rem;
    margin: 0 auto;
    padding: 6rem 3.5rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.bpo-faq__head { text-align: center; margin-bottom: 3.5rem; }
.bpo-faq__head .kicker { margin-bottom: 1.25rem; display: inline-flex; }
.bpo-faq__title {
    font-family: var(--f-display);
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
}
.bpo-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.bpo-faq__item { border-top: 1px solid rgba(253, 240, 232, 0.08); }
.bpo-faq__item:last-child { border-bottom: 1px solid rgba(253, 240, 232, 0.08); }
.bpo-faq__q {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    display: grid;
    grid-template-columns: 4rem 1fr 2.5rem;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1rem;
    text-align: left;
    transition: background 0.3s var(--ease);
}
.bpo-faq__q:hover { background: rgba(253, 240, 232, 0.02); }
.bpo-faq__q-num {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.bpo-faq__q-text {
    font-family: var(--f-display);
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--text-sec);
}
.bpo-faq__q-icon {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--text-muted);
    text-align: center;
    transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.bpo-faq__item.is-open .bpo-faq__q-icon {
    transform: rotate(45deg);
    color: var(--primary);
}
.bpo-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
    padding: 0 1rem 0 6.25rem;
}
.bpo-faq__item.is-open .bpo-faq__a {
    max-height: 22rem;
    padding-bottom: 1.5rem;
}
.bpo-faq__a p {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 52rem;
}


/* ── 24.8 End CTA ── */
.bpo-end {
    padding: 6rem 0 7rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
    background: radial-gradient(ellipse at center top, rgba(232, 80, 10, 0.05), transparent 60%);
}
.bpo-end__inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}
.bpo-end__inner .kicker { margin-bottom: 1.25rem; display: inline-flex; }
.bpo-end__title {
    font-family: var(--f-display);
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
}
.bpo-end__sub {
    font-family: var(--f-body);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 auto 2.5rem;
    max-width: 38rem;
}
.bpo-end__row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}


/* ════════════════════════════════════════════════════════════════════════════
   ░ SECTION 25 — BLOG (.blog-*)
   ░ Listing: clean header + uniform 4-card grid (image-on-top 16:9, no crop).
   ░ Detail: wide article column matching hero image width (~80rem), generous
   ░ top-spacing under the site header, no service-tag pill.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 25.1 Listing page header ── */
.blog-head {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    padding: 9rem 1.5rem 3rem;
}
.blog-head__layout {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    align-items: flex-start;
    max-width: 56rem;
    margin-bottom: 3.5rem;
}
.blog-head__layout .page-hero__kicker { margin-bottom: 0; }
.blog-head__layout .page-hero__title  { margin: 0; }
.blog-head__layout .page-hero__sub    { margin: 0; max-width: 42rem; }


/* Filter chips */
.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding-top: 2rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
}
.blog-filter__chip {
    background: rgba(253, 240, 232, 0.03);
    border: 1px solid rgba(253, 240, 232, 0.1);
    color: var(--text-muted);
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.625rem 1.125rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.blog-filter__chip:hover {
    background: rgba(253, 240, 232, 0.06);
    color: var(--text-sec);
}
.blog-filter__chip.is-active {
    background: rgba(232, 80, 10, 0.12);
    border-color: rgba(232, 80, 10, 0.5);
    color: var(--primary);
}
.blog-filter__chip-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(232, 80, 10, 0.7);
}
.blog-filter__chip-count {
    color: rgba(253, 240, 232, 0.4);
    font-size: 0.625rem;
    margin-left: 0.25rem;
}
.blog-filter__chip.is-active .blog-filter__chip-count { color: rgba(232, 80, 10, 0.8); }


/* ── 25.2 Posts grid — uniform 2-col on desktop, all cards same layout ── */
.blog-list {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem 7rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}
.blog-list__empty {
    grid-column: 1 / -1;
    font-family: var(--f-body);
    font-size: 1rem;
    color: var(--text-muted);
    text-align: center;
    padding: 3rem 1rem;
    border: 1px dashed rgba(253, 240, 232, 0.1);
    border-radius: 1rem;
}

/* Single uniform card style — image on top, body below */
.blog-card {
    position: relative;
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 1.25rem;
    overflow: hidden;
    background: rgba(253, 240, 232, 0.02);
    transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.blog-card:hover {
    border-color: rgba(232, 80, 10, 0.4);
    transform: translateY(-3px);
}
.blog-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.blog-card__media {
    /* 16:9 matches the source PNG aspect exactly — no cropping. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(17, 14, 11, 0.4);
}
.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease);
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }

.blog-card__body {
    padding: 2rem 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1;
}
.blog-card__meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.blog-card__tag { color: var(--primary); }
.blog-card__sep { color: rgba(253, 240, 232, 0.3); }
.blog-card__title {
    font-family: var(--f-display);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}
.blog-card__excerpt {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}
.blog-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-top: auto;
    padding-top: 0.5rem;
    transition: gap 0.3s var(--ease);
}
.blog-card:hover .blog-card__cta { gap: 0.875rem; }


/* ── 25.3 Detail page — reading progress bar (sticky top) ── */
.blog-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(253, 240, 232, 0.04);
    z-index: 90;
    pointer-events: none;
}
.blog-progress__bar {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), rgba(232, 80, 10, 0.6));
    transition: width 0.1s linear;
}


/* ── 25.4 Article head ──
   All head content sits in a 72rem container, matching the body
   container width below — keeps title, dek, byline, and prose all
   aligned to the same edges. Top padding ~12rem gives generous
   breathing room under the sticky site header. */
.blog-article__head {
    max-width: 72rem;
    margin: 0 auto;
    padding: 12rem 1.5rem 3rem;
}
.blog-article__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2rem;
}
.blog-article__crumbs a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s var(--ease);
}
.blog-article__crumbs a:hover { color: var(--primary); }
.blog-article__crumbs-sep { color: rgba(253, 240, 232, 0.3); }

.blog-article__title {
    font-family: var(--f-display);
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 1.5rem;
}

.blog-article__dek {
    font-family: var(--f-body);
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 0 2.5rem;
}

.blog-article__byline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(253, 240, 232, 0.08);
}
.blog-article__byline-author { color: var(--text-sec); }
.blog-article__byline-sep    { color: rgba(253, 240, 232, 0.3); }


/* ── 25.5 Hero figure ── */
.blog-article__hero {
    max-width: 80rem;
    margin: 1rem auto 4rem;
    padding: 0 1.5rem;
}
.blog-article__hero img {
    width: 100%;
    height: auto;
    border-radius: 1.25rem;
    display: block;
}


/* ── 25.6 Article body ──
   Body container is 72rem (same as head). All inner elements fill
   the container edge-to-edge — no individual max-widths, no auto
   margins. This guarantees prose, H2s, lists, pull quotes, tip
   cards, and CTA all share the same left and right edges. */
.blog-article__body {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem 5rem;
    position: relative;
}

.blog-article__lede {
    font-family: var(--f-body);
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-sec);
    margin: 0 0 2rem;
    font-weight: 400;
}

.blog-article__body > p {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}
.blog-article__body > p strong { color: var(--text-sec); font-weight: 500; }
.blog-article__body > p em     { color: var(--text-sec); font-style: italic; }
.blog-article__body code {
    font-family: var(--f-mono);
    font-size: 0.9em;
    background: rgba(232, 80, 10, 0.08);
    color: var(--primary);
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(232, 80, 10, 0.2);
}

/* Numbered H2 sections */
.blog-article__h2 {
    font-family: var(--f-display);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 4rem 0 1.75rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
.blog-article__h2-num {
    font-family: var(--f-mono);
    font-size: 0.875rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    flex-shrink: 0;
}
.blog-article__h2 em {
    font-style: italic;
    color: var(--primary);
}

/* Pull quote — same edges as prose, distinguished by left bar + bg */
.blog-article__pullquote {
    margin: 3rem 0;
    padding: 2.5rem 3rem;
    background: linear-gradient(135deg, rgba(232, 80, 10, 0.05), rgba(232, 80, 10, 0.01));
    border-left: 3px solid var(--primary);
    border-radius: 0 1rem 1rem 0;
    font-family: var(--f-display);
    font-size: 1.625rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--text-sec);
}

/* Lists — same edges as prose */
.blog-article__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.blog-article__list li {
    position: relative;
    padding: 0.875rem 0 0.875rem 2rem;
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-muted);
    border-bottom: 1px dashed rgba(253, 240, 232, 0.08);
}
.blog-article__list li:last-child { border-bottom: 0; }
.blog-article__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.4rem;
    width: 0.6rem;
    height: 0.6rem;
    border-left: 1.5px solid var(--primary);
    border-bottom: 1.5px solid var(--primary);
    transform: rotate(-45deg);
}
.blog-article__list li strong { color: var(--text-sec); font-weight: 500; }
.blog-article__list--ordered { counter-reset: oli; }
.blog-article__list--ordered li {
    counter-increment: oli;
    padding-left: 2.5rem;
}
.blog-article__list--ordered li::before {
    content: counter(oli, decimal-leading-zero);
    border: 0;
    transform: none;
    width: auto;
    height: auto;
    top: 1rem;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--primary);
}

/* Numbered tip cards — same edges as prose */
.blog-tips {
    list-style: none;
    margin: 2rem 0 3rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.blog-tip {
    padding: 1.75rem 2rem;
    background: rgba(253, 240, 232, 0.03);
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 0.875rem;
    transition: border-color 0.3s, background 0.3s;
}
.blog-tip:hover {
    border-color: rgba(232, 80, 10, 0.3);
    background: rgba(232, 80, 10, 0.03);
}
.blog-tip__num {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    margin-bottom: 0.625rem;
}
.blog-tip__name {
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 0.625rem;
}
.blog-tip__desc {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}
.blog-tip__desc strong { color: var(--text-sec); font-weight: 500; }
.blog-tip__desc code {
    font-family: var(--f-mono);
    font-size: 0.85em;
    background: rgba(232, 80, 10, 0.08);
    color: var(--primary);
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(232, 80, 10, 0.2);
}


/* ── 25.7 End CTA inside article — same edges as everything else ── */
.blog-article__cta {
    margin: 4rem 0 0;
    padding: 3.5rem 3rem;
    background: radial-gradient(ellipse at top, rgba(232, 80, 10, 0.08), rgba(17, 14, 11, 0.4));
    border: 1px solid rgba(232, 80, 10, 0.3);
    border-radius: 1.25rem;
    text-align: center;
}
.blog-article__cta-kicker {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1rem;
}
.blog-article__cta-title {
    font-family: var(--f-display);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 1rem;
}
.blog-article__cta-sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 auto 2rem;
    max-width: 38rem;
}
.blog-article__cta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}


/* ── 25.8 Initial reveal states (JS animates these in)
   Note: .blog-related rules removed — section no longer rendered. */
.page-blog-index .blog-card,
.page-blog-post .blog-article__body > p,
.page-blog-post .blog-article__h2,
.page-blog-post .blog-article__list,
.page-blog-post .blog-article__pullquote,
.page-blog-post .blog-tip,
.page-blog-post .blog-article__cta {
    opacity: 0;
    transform: translateY(20px);
}


/* ════════════════════════════════════════════════════════════════════════════
   ░ SECTION 26 — BUSINESS PAGES
   ░ Pitch Deck, Company Profile, Startup Consultation, Crypto Advisory.
   ░ Shared utilities + four unique central visuals.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 26.0 Shared page chrome (used by all 4) ── */
.page-business {
    overflow-x: hidden;
}


.page-business .page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 1.75rem;
    border-top: 1px dashed rgba(253,240,232,0.08);
}
.page-business .page-hero__meta-item strong { color: var(--primary); font-weight: 500; }
.page-business .page-hero__meta-sep { color: rgba(253,240,232,0.2); }


/* Section heads (shared pattern across all 4 pages) */
.pd-frame__head, .pd-types__head, .pd-process__head, .pd-why__head, .pd-faq__head,
.cp-blueprint__head, .cp-formats__head, .cp-process__head, .cp-why__head, .cp-faq__head,
.sc-roadmap__head, .sc-models__head, .sc-areas__head, .sc-why__head, .sc-faq__head,
.cba-stack__head, .cba-coverage__head, .cba-process__head, .cba-why__head, .cba-faq__head {
    max-width: 72rem;
    margin: 0 auto 4rem;
    padding: 0 1.5rem;
    text-align: center;
}
.pd-frame__kicker, .pd-types__kicker, .pd-process__kicker, .pd-why__kicker, .pd-faq__kicker,
.cp-blueprint__kicker, .cp-formats__kicker, .cp-process__kicker, .cp-why__kicker, .cp-faq__kicker,
.sc-roadmap__kicker, .sc-models__kicker, .sc-areas__kicker, .sc-why__kicker, .sc-faq__kicker,
.cba-stack__kicker, .cba-coverage__kicker, .cba-process__kicker, .cba-why__kicker, .cba-faq__kicker {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1rem;
}
.pd-frame__title, .pd-types__title, .pd-process__title, .pd-why__title, .pd-faq__title,
.cp-blueprint__title, .cp-formats__title, .cp-process__title, .cp-why__title, .cp-faq__title,
.sc-roadmap__title, .sc-models__title, .sc-areas__title, .sc-why__title, .sc-faq__title,
.cba-stack__title, .cba-coverage__title, .cba-process__title, .cba-why__title, .cba-faq__title {
    font-family: var(--f-display);
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 1.25rem;
}
.pd-frame__title em, .cp-blueprint__title em, .sc-roadmap__title em, .cba-stack__title em {
    font-style: italic;
    color: var(--primary);
}
.pd-frame__sub, .pd-types__sub, .pd-process__sub,
.cp-blueprint__sub, .cp-formats__sub, .cp-process__sub,
.sc-roadmap__sub, .sc-models__sub,
.cba-stack__sub, .cba-coverage__sub, .cba-process__sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 auto;
    max-width: 44rem;
}


/* ════════════════════════════════════════════════════════════════════════════
   26.1 — PITCH DECK · 12-slide framework grid (UNIQUE VISUAL)
   ════════════════════════════════════════════════════════════════════════════ */
.pd-frame {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
}
.pd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 76rem;
    margin: 0 auto 3rem;
}
.pd-card {
    position: relative;
    background: rgba(253,240,232,0.025);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 0.875rem;
    padding: 1.5rem 1.25rem 1.5rem;
    transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease);
    overflow: hidden;
}
.pd-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(232,80,10,0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}
.pd-card:hover {
    border-color: rgba(232,80,10,0.4);
    background: rgba(232,80,10,0.04);
    transform: translateY(-3px);
}
.pd-card:hover::before { opacity: 1; }
.pd-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.pd-card__num {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.pd-card__dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px rgba(232,80,10,0.6);
}
.pd-card__wire {
    display: block;
    width: 100%;
    height: auto;
    margin: 0.25rem 0 1rem;
    border-radius: 0.375rem;
    background: rgba(17,14,11,0.4);
}
.pd-card__name {
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 0.4rem;
}
.pd-card__check {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 0;
    text-transform: uppercase;
}
.pd-frame__foot {
    max-width: 56rem;
    margin: 3rem auto 0;
    padding: 0 1.5rem;
    text-align: center;
}
.pd-frame__foot p {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}


/* 26.1.b Pitch Deck — types section */
.pd-types {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    border-top: 1px dashed rgba(253,240,232,0.08);
}
.pd-types__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
}
.pd-type {
    padding: 2.5rem 2rem;
    background: rgba(253,240,232,0.025);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 1rem;
    transition: border-color 0.3s, background 0.3s;
}
.pd-type:hover {
    border-color: rgba(232,80,10,0.3);
    background: rgba(232,80,10,0.03);
}
.pd-type__num {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    margin-bottom: 0.875rem;
}
.pd-type__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 0.875rem;
}
.pd-type__desc {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}
.pd-type__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pd-type__items li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.25rem;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    border-top: 1px dashed rgba(253,240,232,0.08);
    text-transform: uppercase;
}
.pd-type__items li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary);
}


/* 26.1.c Pitch Deck — process steps (also reused across the other 3 pages) */
.pd-process, .cp-process, .cba-process {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    border-top: 1px dashed rgba(253,240,232,0.08);
}
.pd-steps, .cp-steps, .cba-steps {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 64rem;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pd-step, .cp-step, .cba-step {
    position: relative;
    display: grid;
    grid-template-columns: 4rem 1fr 8rem;
    gap: 2rem;
    align-items: start;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(253,240,232,0.06);
}
.pd-step:last-child, .cp-step:last-child, .cba-step:last-child {
    border-bottom: 1px solid rgba(253,240,232,0.06);
}
.pd-step__num, .cp-step__num, .cba-step__num {
    font-family: var(--f-mono);
    font-size: 0.875rem;
    letter-spacing: 0.18em;
    color: var(--primary);
    padding-top: 0.4rem;
}
.pd-step__name, .cp-step__name, .cba-step h3 {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 0.625rem;
}
.pd-step__desc, .cp-step__desc, .cba-step p {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
    max-width: 38rem;
}
.pd-step__time, .cp-step__time, .cba-step__time {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: right;
    padding-top: 0.6rem;
}


/* 26.1.d Why us cards (shared pattern) */
.pd-why, .cp-why, .sc-why, .cba-why {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    border-top: 1px dashed rgba(253,240,232,0.08);
}
.pd-why__grid, .cp-why__grid, .sc-why__grid, .cba-why__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 64rem;
    margin: 0 auto;
}
.pd-why-card {
    padding: 2rem 1.75rem;
    background: rgba(253,240,232,0.025);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 1rem;
    transition: border-color 0.3s, background 0.3s;
}
.pd-why-card:hover {
    border-color: rgba(232,80,10,0.3);
    background: rgba(232,80,10,0.03);
}
.pd-why-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}
.pd-why-card__name {
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 0.625rem;
}
.pd-why-card__desc {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}

.cp-why-card, .sc-why-card, .cba-why-card {
    padding: 2rem 1.75rem;
    background: rgba(253,240,232,0.025);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 1rem;
    transition: border-color 0.3s, background 0.3s;
}
.cp-why-card:hover, .sc-why-card:hover, .cba-why-card:hover {
    border-color: rgba(232,80,10,0.3);
    background: rgba(232,80,10,0.03);
}
.cp-why-card h3, .sc-why-card h3, .cba-why-card h3 {
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex-wrap: wrap;
}
.cp-why-card h3 span, .sc-why-card h3 span, .cba-why-card h3 span {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    flex-shrink: 0;
}
.cp-why-card p, .sc-why-card p, .cba-why-card p {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}


/* 26.1.e FAQ accordion (shared) */
.pd-faq, .cp-faq, .sc-faq, .cba-faq {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    border-top: 1px dashed rgba(253,240,232,0.08);
}
.pd-faq__list, .cp-faq__list, .sc-faq__list, .cba-faq__list {
    max-width: 60rem;
    margin: 0 auto;
}
.pd-faq__item, .cp-faq__item, .sc-faq__item, .cba-faq__item {
    border-top: 1px solid rgba(253,240,232,0.06);
}
.pd-faq__item:last-child, .cp-faq__item:last-child, .sc-faq__item:last-child, .cba-faq__item:last-child {
    border-bottom: 1px solid rgba(253,240,232,0.06);
}
.pd-faq__item summary, .cp-faq__item summary, .sc-faq__item summary, .cba-faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.5rem 2.5rem 1.5rem 0;
    font-family: var(--f-display);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-sec);
    position: relative;
    transition: color 0.3s var(--ease);
}
.pd-faq__item summary::-webkit-details-marker, .cp-faq__item summary::-webkit-details-marker,
.sc-faq__item summary::-webkit-details-marker, .cba-faq__item summary::-webkit-details-marker { display: none; }
.pd-faq__item summary::after, .cp-faq__item summary::after, .sc-faq__item summary::after, .cba-faq__item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--f-mono);
    font-size: 1.25rem;
    color: var(--primary);
    transition: transform 0.3s var(--ease);
}
.pd-faq__item[open] summary::after, .cp-faq__item[open] summary::after,
.sc-faq__item[open] summary::after, .cba-faq__item[open] summary::after {
    content: '−';
    transform: translateY(-50%) rotate(180deg);
}
.pd-faq__item:hover summary, .cp-faq__item:hover summary, .sc-faq__item:hover summary, .cba-faq__item:hover summary {
    color: var(--text);
}
.pd-faq__item p, .cp-faq__item p, .sc-faq__item p, .cba-faq__item p {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    padding-right: 2rem;
}


/* ════════════════════════════════════════════════════════════════════════════
   26.2 — COMPANY PROFILE · stacked blueprint (UNIQUE VISUAL)
   ════════════════════════════════════════════════════════════════════════════ */
.cp-blueprint {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
}
.cp-blueprint__stage {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    padding: 4rem 2rem;
    min-height: 36rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Central document mockup — 3 stacked pages, slight rotation per page */
.cp-doc {
    position: relative;
    width: 18rem;
    height: 24rem;
    z-index: 2;
}
.cp-doc__page {
    position: absolute;
    inset: 0;
    background: rgba(253,240,232,0.95);
    border-radius: 0.5rem;
    box-shadow: 0 12px 40px rgba(17,14,11,0.4);
}
.cp-doc__page--3 {
    transform: rotate(-3deg) translate(-1rem, 0.6rem);
    background: rgba(253,240,232,0.6);
}
.cp-doc__page--2 {
    transform: rotate(2deg) translate(0.6rem, 0.3rem);
    background: rgba(253,240,232,0.78);
}
.cp-doc__page--1 {
    transform: rotate(0);
    background: linear-gradient(160deg, #FDF0E8 0%, #F5E2D5 100%);
    overflow: hidden;
}
.cp-doc__cover {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cp-doc__cover-kicker {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    color: rgba(17,14,11,0.5);
    text-transform: uppercase;
}
.cp-doc__cover-brand {
    font-family: var(--f-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: #110E0B;
}
.cp-doc__cover-year {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    color: var(--primary);
    letter-spacing: 0.12em;
}
.cp-doc__cover-mark {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(232,80,10,0.15);
}

/* Annotation cards arranged radially around document */
.cp-notes {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cp-note {
    position: absolute;
    width: 13rem;
    z-index: 3;
}
.cp-note__line {
    display: none;
}
.cp-note__dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(232,80,10,0.15);
    margin-bottom: 0.625rem;
}
.cp-note__body {
    background: rgba(17,14,11,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(253,240,232,0.1);
    border-radius: 0.625rem;
    padding: 0.875rem 1rem;
}
.cp-note__num {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.22em;
    color: var(--primary);
    margin-bottom: 0.4rem;
}
.cp-note__name {
    font-family: var(--f-display);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 0.3rem;
}
.cp-note__hint {
    font-family: var(--f-body);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin: 0;
}

/* Position each annotation around the central document.
   Sections 01-03 sit on the left, 04-07 on the right. */
.cp-note--1 { top: 1rem;     left: 0;          }
.cp-note--2 { top: 9rem;     left: 0;          }
.cp-note--3 { top: 18rem;    left: 0;          }
.cp-note--4 { top: 1rem;     right: 0;         }
.cp-note--5 { top: 9rem;     right: 0;         }
.cp-note--6 { top: 18rem;    right: 0;         }
.cp-note--7 {
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 16rem;
    text-align: center;
}

.cp-blueprint__foot {
    max-width: 56rem;
    margin: 4rem auto 0;
    padding: 0 1.5rem;
    text-align: center;
}
.cp-blueprint__foot p {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}


/* 26.2.b Company profile — formats grid */
.cp-formats {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    border-top: 1px dashed rgba(253,240,232,0.08);
}
.cp-formats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
}
.cp-format {
    padding: 2.5rem 2rem;
    background: rgba(253,240,232,0.025);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 1rem;
    transition: border-color 0.3s, background 0.3s;
    position: relative;
}
.cp-format:hover {
    border-color: rgba(232,80,10,0.3);
    background: rgba(232,80,10,0.03);
}
.cp-format__num {
    font-family: var(--f-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 1rem;
}
.cp-format__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 0.875rem;
}
.cp-format__desc {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 1rem;
}
.cp-format__tag {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    padding: 0.4rem 0.75rem;
    background: rgba(232,80,10,0.1);
    border: 1px solid rgba(232,80,10,0.3);
    border-radius: 999px;
}


/* ════════════════════════════════════════════════════════════════════════════
   26.3 — STARTUP CONSULTATION · founder roadmap (UNIQUE VISUAL)
   ════════════════════════════════════════════════════════════════════════════ */
.sc-roadmap {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
}
.sc-track {
    position: relative;
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 1rem;
}
.sc-track__line {
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    z-index: 0;
}
.sc-stations {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    position: relative;
    z-index: 1;
}
.sc-station {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sc-station__marker {
    position: relative;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.sc-station__dot {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--primary);
    z-index: 2;
}
.sc-station__ring {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1.5px dashed rgba(232,80,10,0.4);
    animation: sc-ring-spin 12s linear infinite;
}
.sc-station:nth-child(odd) .sc-station__ring { animation-direction: reverse; }
@keyframes sc-ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.sc-station__card {
    background: rgba(253,240,232,0.025);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 0.875rem;
    padding: 1.25rem 1rem;
    width: 100%;
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.sc-station:hover .sc-station__card {
    border-color: rgba(232,80,10,0.4);
    background: rgba(232,80,10,0.04);
    transform: translateY(-3px);
}
.sc-station__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}
.sc-station__num {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    color: var(--primary);
}
.sc-station__meta {
    font-family: var(--f-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-align: right;
    line-height: 1.3;
}
.sc-station__name {
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 0.625rem;
}
.sc-station__items {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px dashed rgba(253,240,232,0.08);
    padding-top: 0.625rem;
}
.sc-station__items li {
    font-family: var(--f-body);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-muted);
    padding: 0.2rem 0;
}
.sc-roadmap__foot {
    max-width: 56rem;
    margin: 4rem auto 0;
    padding: 0 1.5rem;
    text-align: center;
}
.sc-roadmap__foot p {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}

/* 26.3.b Models grid */
.sc-models {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    border-top: 1px dashed rgba(253,240,232,0.08);
}
.sc-models__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 76rem;
    margin: 0 auto;
}
.sc-model {
    padding: 2rem 1.75rem;
    background: rgba(253,240,232,0.025);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 1rem;
    transition: border-color 0.3s, background 0.3s;
    display: flex;
    flex-direction: column;
}
.sc-model:hover {
    border-color: rgba(232,80,10,0.3);
    background: rgba(232,80,10,0.03);
}
.sc-model__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.sc-model__num {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--primary);
}
.sc-model__tag {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.3rem 0.625rem;
    background: rgba(232,80,10,0.12);
    color: var(--primary);
    border-radius: 999px;
}
.sc-model__name {
    font-family: var(--f-display);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 0.875rem;
}
.sc-model__desc {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
    flex-grow: 1;
}
.sc-model__meta {
    padding-top: 1rem;
    border-top: 1px dashed rgba(253,240,232,0.08);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}

/* 26.3.c Areas grid */
.sc-areas {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    border-top: 1px dashed rgba(253,240,232,0.08);
}
.sc-areas__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
}
.sc-area {
    padding: 1.75rem 1.5rem;
    background: rgba(253,240,232,0.025);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 0.875rem;
}
.sc-area h3 {
    font-family: var(--f-display);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 0.625rem;
}
.sc-area p {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   26.4 — CRYPTO/BLOCKCHAIN ADVISORY · 7-block launch stack (UNIQUE VISUAL)
   ════════════════════════════════════════════════════════════════════════════ */
.cba-stack {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
}
.cba-tower {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 56rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    counter-reset: block;
}
.cba-block {
    position: relative;
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 1.5rem;
    align-items: stretch;
    background: rgba(253,240,232,0.025);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem;
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.cba-block:hover {
    border-color: rgba(232,80,10,0.4);
    background: rgba(232,80,10,0.04);
    transform: translateX(4px);
}
.cba-block__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px dashed rgba(253,240,232,0.1);
    padding-right: 1.25rem;
}
.cba-block__height {
    font-family: var(--f-mono);
    font-size: 0.875rem;
    color: var(--primary);
    margin-bottom: 0.4rem;
}
.cba-block__hash {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    letter-spacing: 0;
    word-break: break-all;
}
.cba-block__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cba-block__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}
.cba-block__tag {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    padding: 0.3rem 0.625rem;
    background: rgba(232,80,10,0.1);
    border: 1px solid rgba(232,80,10,0.3);
    border-radius: 999px;
}
.cba-block__pulse {
    display: inline-flex;
    gap: 0.2rem;
}
.cba-block__pulse span {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.4;
    animation: cba-pulse 1.6s ease-in-out infinite;
}
.cba-block__pulse span:nth-child(2) { animation-delay: 0.3s; }
.cba-block__pulse span:nth-child(3) { animation-delay: 0.6s; }
@keyframes cba-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50%      { opacity: 1;   transform: scale(1.2); }
}
.cba-block__name {
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 0.5rem;
}
.cba-block__note {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}
.cba-block__connector {
    position: absolute;
    bottom: -0.875rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 0.875rem;
    background: linear-gradient(to bottom, rgba(232,80,10,0.5), rgba(232,80,10,0));
    z-index: 0;
}
.cba-stack__foot {
    max-width: 56rem;
    margin: 4rem auto 0;
    padding: 0 1.5rem;
    text-align: center;
}
.cba-stack__foot p {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}

/* 26.4.b Coverage grid */
.cba-coverage {
    padding: 5rem 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    border-top: 1px dashed rgba(253,240,232,0.08);
}
.cba-coverage__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 72rem;
    margin: 0 auto;
}
.cba-cov {
    padding: 1.75rem 1.75rem;
    background: rgba(253,240,232,0.025);
    border: 1px solid rgba(253,240,232,0.08);
    border-radius: 0.875rem;
    transition: border-color 0.3s, background 0.3s;
}
.cba-cov:hover {
    border-color: rgba(232,80,10,0.3);
    background: rgba(232,80,10,0.03);
}
.cba-cov h3 {
    font-family: var(--f-display);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 0.625rem;
}
.cba-cov p {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   ░ SECTION 26.5 — BUSINESS PAGES POLISH PASS (r97 fixes)
   ░ Addresses: process step grid sparsity, missing area icons, misplaced
   ░ blueprint dots, doc animation, CTA button sanity.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 26.5.A · Process steps redesign ─────────────────────────
   The 4rem | 1fr | 8rem grid left a wide visual gap between the
   step name and its description. Tightening the rhythm and adding
   a vertical orange thread on the left ties all 5 steps together.   */
.pd-steps, .cp-steps, .cba-steps {
    position: relative;
    padding-left: 2.25rem;
    max-width: 60rem;
}
.pd-steps::before, .cp-steps::before, .cba-steps::before {
    content: '';
    position: absolute;
    left: 0.625rem;
    top: 1rem;
    bottom: 1rem;
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(232,80,10,0) 0%,
        rgba(232,80,10,0.5) 8%,
        rgba(232,80,10,0.5) 92%,
        rgba(232,80,10,0) 100%);
    pointer-events: none;
}
.pd-step, .cp-step, .cba-step {
    position: relative;
    grid-template-columns: 1fr 7rem;        /* 3-col → 2-col, kill the dead middle */
    gap: 2rem;
    padding: 1.75rem 0;
    border-top: 1px solid rgba(253,240,232,0.06);
}
.pd-step:last-child, .cp-step:last-child, .cba-step:last-child {
    border-bottom: 1px solid rgba(253,240,232,0.06);
}
/* Step number now sits AS a marker on the orange thread, left-edge */
.pd-step__num, .cp-step__num, .cba-step__num {
    position: absolute;
    left: -2.25rem;
    top: 1.875rem;
    width: 1.25rem;
    height: 1.25rem;
    padding-top: 0;
    background: var(--bg, #110E0B);
    color: var(--primary);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(232,80,10,0.5);
    border-radius: 50%;
    z-index: 1;
}
/* Step body now full-width on the left, time on the right */
.pd-step > h3, .cp-step > h3, .cba-step > h3,
.pd-step__name, .cp-step__name {
    grid-column: 1;
    margin: 0 0 0.5rem;
    font-size: 1.375rem;
}
.pd-step > p, .cp-step > p, .cba-step > p,
.pd-step__desc, .cp-step__desc {
    grid-column: 1;
    margin: 0;
    max-width: 44rem;
    font-size: 0.9375rem;
}
.pd-step__time, .cp-step__time, .cba-step__time {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    text-align: right;
    padding-top: 0.625rem;
    color: var(--primary);
    opacity: 0.7;
}


/* ── 26.5.B · Startup Consultation · area-card icons ─────────  */
.sc-area {
    padding: 2rem 1.75rem;
}
.sc-area__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--primary);
    margin-bottom: 1rem;
    background: rgba(232,80,10,0.08);
    border: 1px solid rgba(232,80,10,0.25);
    border-radius: 0.5rem;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.sc-area:hover .sc-area__icon {
    background: rgba(232,80,10,0.15);
    transform: translateY(-2px);
}


/* ── 26.5.C · Company Profile blueprint · cleaner notes + doc animation ─── */
/* Drop the floating orange dot/line — they read as misplaced. The number
   badge inside the card is now the visual anchor. */
.cp-note__dot, .cp-note__line { display: none; }
.cp-note__body {
    position: relative;
    padding: 1rem 1.125rem 1rem 1.125rem;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cp-note__body::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.875rem;
    bottom: 0.875rem;
    width: 2px;
    background: var(--primary);
    border-radius: 0 1px 1px 0;
}
.cp-note:hover .cp-note__body {
    border-color: rgba(232,80,10,0.4);
    background: rgba(17,14,11,0.85);
}
/* Subtle floating animation on the central document — gentle, 6s loop */
.cp-doc {
    animation: cp-doc-float 6s ease-in-out infinite;
}
@keyframes cp-doc-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
/* Stagger the back-page rotation slightly so they breathe with the front */
.cp-doc__page--3 {
    animation: cp-page-3 6s ease-in-out infinite;
}
.cp-doc__page--2 {
    animation: cp-page-2 6s ease-in-out infinite;
}
@keyframes cp-page-3 {
    0%, 100% { transform: rotate(-3deg) translate(-1rem, 0.6rem); }
    50%      { transform: rotate(-3.4deg) translate(-1.1rem, 0.4rem); }
}
@keyframes cp-page-2 {
    0%, 100% { transform: rotate(2deg) translate(0.6rem, 0.3rem); }
    50%      { transform: rotate(2.4deg) translate(0.7rem, 0.1rem); }
}



/* ════════════════════════════════════════════════════════════════════════════
   ░ SECTION 27 — SHARED CLOSING CTA (.svc-cta)
   ░ Used by all 4 Business pages. Identical pattern to .wd-end on the
   ░ existing service pages so visual rhythm matches across the site.
   ░ Buttons: .btn-primary + .btn-ghost.btn-ghost--lg (existing globals).
   ════════════════════════════════════════════════════════════════════════════ */
.svc-cta {
    padding: 6rem 0;
    background:
        radial-gradient(ellipse at center, rgba(232, 80, 10, 0.08), transparent 60%),
        var(--bg);
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
    text-align: center;
}
.svc-cta__inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 3rem;
}
.svc-cta__chapter {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.5rem;
}
.svc-cta__title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 1.5rem;
}
.svc-cta__title .title-accent { color: var(--primary); }
.svc-cta__sub {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 42rem;
    margin: 0 auto 2.25rem;
}
.svc-cta__row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
/* Make sure the two buttons in this row read the same height — both
   are inline-flex pills with matching padding via global .btn rules,
   but force consistency just in case. */
.svc-cta__row > a {
    white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════════════════════
   ░ SECTION 28 — FREE AUDIT page form
   ░ Multi-step audit request. 3 step pills at top, fade between steps,
   ░ review panel before submit. Inputs styled to match site's dark palette.
   ════════════════════════════════════════════════════════════════════════════ */

.page-audit__main {
    padding-bottom: 6rem;
}

/* ── Form section wrapper ──────────────────────────────────────── */
.fa-section {
    max-width: 68rem;             /* wider container so paired fields breathe */
    margin: 4.5rem auto 0;         /* generous gap below the hero/dek */
    padding: 0 1.5rem;
}

/* ── Step progress pills (1 · 2 · 3) ──────────────────────────── */
.fa-steps {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    counter-reset: fa-step;
}
.fa-step-pill {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.fa-step-pill::before {
    content: '';
    position: absolute;
    top: 1.0625rem;
    left: 50%;
    width: 100%;
    height: 1px;
    background: rgba(253, 240, 232, 0.12);
    z-index: 0;
}
.fa-step-pill:last-child::before {
    display: none;
}
.fa-step-pill__num {
    position: relative;
    z-index: 1;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(17, 14, 11, 0.85);
    border: 1px solid rgba(253, 240, 232, 0.12);
    font-family: var(--f-mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: background 0.3s var(--ease),
                border-color 0.3s var(--ease),
                color 0.3s var(--ease);
}
.fa-step-pill__label {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}
.fa-step-pill.is-active .fa-step-pill__num {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg);
    box-shadow: 0 0 0 4px rgba(232, 80, 10, 0.18);
}
.fa-step-pill.is-active .fa-step-pill__label {
    color: var(--primary);
}
.fa-step-pill.is-done .fa-step-pill__num {
    background: rgba(232, 80, 10, 0.12);
    border-color: rgba(232, 80, 10, 0.45);
    color: var(--primary);
}

/* ── Form container ───────────────────────────────────────────── */
.fa-form {
    background: linear-gradient(
        180deg,
        rgba(232, 80, 10, 0.03),
        rgba(17, 14, 11, 0.4)
    );
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 1.25rem;
    padding: 2.5rem;
    position: relative;
}

/* ── Step container — fade transitions handled by JS adding/removing `.is-current` ── */
.fa-step {
    opacity: 1;
    transition: opacity 0.35s var(--ease);
}
.fa-step__head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 0 0 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed rgba(253, 240, 232, 0.08);
}
.fa-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.4375rem;
    background: rgba(232, 80, 10, 0.1);
    border: 1px solid rgba(232, 80, 10, 0.3);
    color: var(--primary);
    flex-shrink: 0;
}
.fa-step__icon svg {
    width: 1.125rem;
    height: 1.125rem;
}
.fa-step__title {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

/* ── Grid for paired fields ───────────────────────────────────── */
.fa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.fa-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.fa-field--span2 {
    grid-column: 1 / -1;
}
.fa-field--full {
    margin-bottom: 1.5rem;
}

/* ── Labels + hint text ───────────────────────────────────────── */
.fa-label {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-sec);
    font-weight: 500;
}
.fa-req {
    color: var(--primary);
    margin-left: 0.125rem;
}
.fa-opt {
    color: rgba(253, 240, 232, 0.4);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    margin-left: 0.375rem;
    font-style: italic;
}
.fa-hint {
    font-family: var(--f-body);
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0 0 0.625rem;
    line-height: 1.5;
}

/* ── Inputs / selects / textareas ─────────────────────────────── */
.fa-input,
.fa-select,
.fa-textarea {
    width: 100%;
    background: rgba(17, 14, 11, 0.5);
    border: 1px solid rgba(253, 240, 232, 0.1);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    font-family: var(--f-body);
    font-size: 0.9375rem;
    color: var(--text);
    transition: border-color 0.2s var(--ease),
                background 0.2s var(--ease);
}
.fa-input::placeholder,
.fa-textarea::placeholder {
    color: rgba(253, 240, 232, 0.3);
}
.fa-input:focus,
.fa-select:focus,
.fa-textarea:focus {
    outline: none;
    border-color: rgba(232, 80, 10, 0.5);
    background: rgba(17, 14, 11, 0.7);
}
.fa-textarea {
    resize: vertical;
    min-height: 4rem;
    line-height: 1.5;
}
.fa-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A09088' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}
.fa-select option {
    background: var(--bg);
    color: var(--text);
}

/* Invalid-state highlight (added by JS when field fails validation) */
.fa-input.is-invalid,
.fa-select.is-invalid,
.fa-textarea.is-invalid {
    border-color: rgba(232, 80, 10, 0.7);
    background: rgba(232, 80, 10, 0.05);
}

/* ── Checkbox group ───────────────────────────────────────────── */
.fa-checkgroup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem 1.25rem;
    margin-top: 0.25rem;
}
.fa-check {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    padding: 0.625rem 0.875rem;
    background: rgba(17, 14, 11, 0.4);
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 0.5rem;
    transition: border-color 0.2s var(--ease),
                background 0.2s var(--ease);
}
.fa-check:hover {
    border-color: rgba(232, 80, 10, 0.3);
    background: rgba(17, 14, 11, 0.55);
}
.fa-check input {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}
.fa-check span {
    font-family: var(--f-body);
    font-size: 0.875rem;
    color: var(--text);
}
.fa-check:has(input:checked) {
    border-color: rgba(232, 80, 10, 0.5);
    background: rgba(232, 80, 10, 0.06);
}
.fa-check--inline {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    align-self: flex-start;
    width: max-content;
}
.fa-check--inline span {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ── Navigation row (prev / next, prev / submit) ──────────────── */
.fa-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px dashed rgba(253, 240, 232, 0.08);
    flex-wrap: wrap;
}
.fa-nav > span { display: inline-block; }

/* ── Review panel on step 3 ────────────────────────────────────── */
.fa-review {
    margin-top: 2.5rem;
    padding: 1.75rem;
    background: rgba(17, 14, 11, 0.55);
    border: 1px dashed rgba(232, 80, 10, 0.25);
    border-radius: 0.875rem;
}
.fa-review__title {
    font-family: var(--f-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0 0 0.375rem;
}
.fa-review__sub {
    font-family: var(--f-body);
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}
.fa-review__list {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.625rem 1rem;
    margin: 0;
}
.fa-review__list dt {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    padding-top: 0.125rem;
}
.fa-review__list dd {
    font-family: var(--f-body);
    font-size: 0.875rem;
    color: var(--text);
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
}
.fa-review__list dd.is-empty {
    color: rgba(253, 240, 232, 0.3);
    font-style: italic;
}

/* ── Submit-error slot ─────────────────────────────────────────── */
.fa-error {
    margin: 1.5rem 0 0;
    padding: 0.875rem 1rem;
    background: rgba(232, 80, 10, 0.08);
    border: 1px solid rgba(232, 80, 10, 0.35);
    border-radius: 0.5rem;
    font-family: var(--f-body);
    font-size: 0.875rem;
    color: var(--primary);
}

/* ── Thank-you panel (replaces form on success) ───────────────── */
.fa-thanks {
    background: linear-gradient(
        180deg,
        rgba(232, 80, 10, 0.05),
        rgba(17, 14, 11, 0.4)
    );
    border: 1px solid rgba(232, 80, 10, 0.2);
    border-radius: 1.25rem;
    padding: 4rem 2.5rem;
    text-align: center;
}
.fa-thanks__inner {
    max-width: 36rem;
    margin: 0 auto;
}
.fa-thanks__icon {
    display: inline-flex;
    width: 4rem;
    height: 4rem;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin: 0 auto 1.5rem;
}
.fa-thanks__title {
    font-family: var(--f-display);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.75rem;
}
.fa-thanks__title span {
    color: var(--primary);
}
.fa-thanks__sub {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 2rem;
}
.fa-thanks__back {
    align-self: center;
}

/* ── CTA button — dotless variant (Free Audit) ────────────────── */
.cta-btn--no-dot {
    /* Equalize horizontal padding now that the orange dot is gone */
    padding: 0.7em 1.35em;
    gap: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   ░ SECTION 29 — 404 PAGE
   ░ Branded "page not found" with hero, ghosted 404 backdrop, popular-paths grid
   ════════════════════════════════════════════════════════════════════════════ */

.page-404__main {
    padding-bottom: 6rem;
}

/* ── Hero — ghosted "404" sits behind the kicker pill + title ── */
.err-hero {
    position: relative;
    overflow: hidden;       /* clip the ghost text if it overflows the column */
}
.err-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 28rem;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(232, 80, 10, 0.05);   /* barely-there orange */
    user-select: none;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
}
.err-hero > .kicker-pill,
.err-hero > h1,
.err-hero > p,
.err-hero > .page-hero__meta,
.err-hero > .err-cta-row {
    position: relative;
    z-index: 1;             /* keep content above the ghost backdrop */
}

/* ── Meta line under hero — center it so it aligns with the centered ghost
      and CTA row. Without this it would inherit left-alignment from the base
      .page-hero block and feel detached from the rest of the 404 layout. ── */
.err-hero > .page-hero__meta {
    text-align: center;
}

/* ── CTA row under the hero ── */
.err-cta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2.25rem;
    flex-wrap: wrap;
}

/* ── Popular-paths grid ── */
.err-paths {
    max-width: 76rem;
    margin: 5rem auto 0;
    padding: 0 1.5rem;
}
.err-paths__head {
    text-align: center;
    margin-bottom: 2.5rem;
}
.err-paths__title {
    font-family: var(--f-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text);
    margin: 0.75rem 0 0;
    letter-spacing: -0.01em;
}
.err-paths__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* ── Tile (single popular destination) ── */
.err-tile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(232, 80, 10, 0.025), rgba(17, 14, 11, 0.45));
    border: 1px solid rgba(253, 240, 232, 0.08);
    border-radius: 0.875rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s var(--ease),
                border-color 0.3s var(--ease),
                background 0.3s var(--ease);
}
.err-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(232, 80, 10, 0.35);
    background: linear-gradient(180deg, rgba(232, 80, 10, 0.05), rgba(17, 14, 11, 0.55));
}
.err-tile__num {
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--primary);
    flex-shrink: 0;
    padding-top: 0.125rem;
}
.err-tile__body {
    flex: 1;
    min-width: 0;
}
.err-tile__name {
    font-family: var(--f-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.375rem;
}
.err-tile__desc {
    font-family: var(--f-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}
.err-tile__arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 0.125rem;
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.err-tile:hover .err-tile__arrow {
    color: var(--primary);
    transform: translate(2px, -2px);
}

/* Small variant of the kicker pill — used inside the paths-grid header */
.kicker-pill--sm {
    padding: 0.4rem 0.875rem;
    font-size: 0.625rem;
}

/* ═══════════════════════════════════════════════════════════
   CAREERS PAGE (r132)
   Hero · Role cards · Why-work · General-apply strip · Apply modal
   ═══════════════════════════════════════════════════════════ */

/* ── Hero spacing — slightly tighter than the about hero ── */
.careers-hero {
    padding: 8rem 3rem 4rem;
}
.careers-hero .page-hero__sub {
    max-width: 44rem;
    margin-top: 1.25rem;
}

/* ── Roles section ─────────────────────────────────────── */
.careers-roles {
    padding: 4rem 3rem 6rem;
    max-width: 76rem;
    margin: 0 auto;
}
.careers-roles__head {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 2.5rem;
}
.careers-roles__title {
    font-family: var(--f-display);
    font-size: 2.75rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}
.careers-roles__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* ── Role card ─────────────────────────────────────────── */
/* ── Reveal initial state ──
   JS triggers reveals on scroll; CSS sets the from-state. Mirrors the
   about-page pattern. No JS = the fallback path in the careers IIFE
   resets these to visible. */
.careers-roles__title,
.careers-card {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}
.careers-card {
    background: var(--bg-2);
    border: 1px solid var(--brdr);
    border-radius: var(--r-lg);
    padding: 2.25rem 2.25rem 2rem;
}
.careers-card__head {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.careers-card__kicker {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}
.careers-card__title {
    font-family: var(--f-display);
    font-size: 1.625rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.careers-card__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem 1.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed var(--brdr-2);
}
.careers-card__meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.careers-card__meta-label {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.careers-card__meta-value {
    font-family: var(--f-body);
    font-size: 0.875rem;
    color: var(--text-sec);
    font-weight: 500;
}
.careers-card__summary {
    font-family: var(--f-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-sec);
    margin: 0 0 1.5rem;
    max-width: 52rem;
}
.careers-card__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    margin-bottom: 1.75rem;
}
.careers-card__col-title {
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}
.careers-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.careers-card__list li {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-sec);
    padding-left: 1.125rem;
    position: relative;
}
.careers-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.625rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
}
.careers-card__cta {
    display: flex;
    justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════
   APPLY MODAL — shared across roles
   ═══════════════════════════════════════════════════════════ */
.apply-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease);
}
.apply-modal[hidden] { display: none; }
.apply-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Backdrop */
.apply-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 4, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Panel */
.apply-modal__panel {
    position: relative;
    width: min(680px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: var(--bg-2);
    border: 1px solid var(--brdr-2);
    border-radius: var(--r-lg);
    padding: 2.5rem 2.5rem 2.25rem;
    transform: translateY(20px);
    transition: transform 0.4s var(--ease);
    scrollbar-width: thin;
    scrollbar-color: var(--brdr-2) transparent;
}
.apply-modal.is-open .apply-modal__panel {
    transform: translateY(0);
}
.apply-modal__panel::-webkit-scrollbar { width: 6px; }
.apply-modal__panel::-webkit-scrollbar-track { background: transparent; }
.apply-modal__panel::-webkit-scrollbar-thumb { background: var(--brdr-2); border-radius: 999px; }

/* Close button */
.apply-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(253,240,232,0.04);
    border: 1px solid var(--brdr);
    border-radius: 50%;
    color: var(--text-sec);
    cursor: pointer;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.apply-modal__close:hover {
    background: rgba(253,240,232,0.08);
    border-color: var(--brdr-2);
    color: var(--text);
}

/* Modal head */
.apply-modal__head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
/* Pill needs explicit align-self in a flex column parent — otherwise the
   parent stretches the inline-flex child to full row width. */
.apply-modal__head .kicker-pill { align-self: flex-start; }
.apply-modal__title {
    font-family: var(--f-display);
    font-size: 1.625rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.apply-modal__title #applyModalRole {
    color: var(--primary);
}
.apply-modal__sub {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Form ──────────────────────────────────────────────── */
.apply-form {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}
.apply-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.125rem;
}
.apply-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.apply-form__field--full { grid-column: 1 / -1; }
.apply-form__label {
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.apply-form__req {
    color: var(--primary);
    margin-left: 0.125rem;
}
.apply-form__hint {
    font-family: var(--f-body);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}
.apply-form__hint-inline {
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--f-body);
    font-size: 0.6875rem;
    margin-left: 0.5rem;
}
.apply-form__input,
.apply-form__textarea {
    background: var(--bg);
    border: 1px solid var(--brdr);
    border-radius: var(--r-sm);
    padding: 0.8125rem 0.9375rem;
    font-family: var(--f-body);
    font-size: 0.9375rem;
    color: var(--text);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
    width: 100%;
}
.apply-form__input::placeholder,
.apply-form__textarea::placeholder {
    color: rgba(253,240,232,0.25);
}
.apply-form__input:focus,
.apply-form__textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(232,80,10,0.04);
}
.apply-form__textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.55;
    font-family: var(--f-body);
}

/* File upload */
.apply-form__file {
    position: relative;
}
.apply-form__file-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}
.apply-form__file-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.8125rem 1rem;
    background: var(--bg);
    border: 1px dashed var(--brdr-2);
    border-radius: var(--r-sm);
    color: var(--text-sec);
    font-family: var(--f-body);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
    width: 100%;
}
.apply-form__file-trigger:hover {
    border-color: var(--primary);
    background: rgba(232,80,10,0.04);
    color: var(--text);
}
.apply-form__file-trigger svg { flex-shrink: 0; color: var(--text-muted); transition: color 0.3s var(--ease); }
.apply-form__file-trigger:hover svg { color: var(--primary); }
.apply-form__file.has-file .apply-form__file-trigger {
    border-style: solid;
    border-color: var(--brdr-warm);
    color: var(--text);
}
.apply-form__file.has-file .apply-form__file-trigger svg { color: var(--primary); }

/* Submit row */
.apply-form__submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
}
.apply-form__error {
    font-family: var(--f-body);
    font-size: 0.8125rem;
    color: #ff6b6b;
    margin: 0;
    flex: 1;
}
.apply-form__submit { margin-left: auto; }
.apply-form__submit.is-busy { opacity: 0.6; pointer-events: none; }
.apply-form__submit.is-busy .apply-form__submit-label::after {
    content: '…';
}

/* Thanks panel */
.apply-modal__thanks { padding: 1.25rem 0; }
.apply-modal__thanks-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.apply-modal__thanks-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(232,80,10,0.1);
    border: 1px solid var(--brdr-warm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}
.apply-modal__thanks-title {
    font-family: var(--f-display);
    font-size: 1.625rem;
    font-weight: 500;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}
.apply-modal__thanks-title #applyThanksName { color: var(--primary); }
.apply-modal__thanks-sub {
    font-family: var(--f-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-sec);
    margin: 0;
    max-width: 32rem;
}
.apply-modal__thanks-sub strong { color: var(--primary); font-weight: 500; }
.apply-modal__thanks-close { margin-top: 0.5rem; }

/* Thanks panel close button — centered in the flex-column. .btn-ghost has
   `align-self: flex-start` baked into its base rule (to prevent stretching
   in column parents); override here so it lands in the middle of the
   thanks card alongside the icon, title and copy. */
.apply-modal__thanks .btn-ghost { align-self: center; }

/* Lock scroll when modal open */
body.is-applying { overflow: hidden; }