/* ==========================================================================
   BespokeForge Design System v3.1 — Elevated
   ========================================================================== */

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-latin.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-latin-italic.woff2') format('woff2');
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
}

/* ── Global Tokens (theme-agnostic) ──────────────────────────────────────── */
:root {
    /* Neutral grayscale palette */
    --brand-50:  #F2F2F2;
    --brand-100: #ECECEC;
    --brand-200: #E2E2E2;
    --brand-300: #CFCFCF;
    --brand-400: #B8B8B8;
    --brand-500: #9A9A9A;
    --brand-600: #7A7A7A;
    --brand-700: #5A5A5A;
    --brand-800: #3A3A3A;
    --brand-900: #1F1F1F;
    --brand-950: #0D0D0D;

    /* Near-white scale */
    --w50:  #F2F2F2;
    --w100: #ECECEC;
    --w200: #E6E6E6;
    --w300: #DEDEDE;
    --w400: #D4D4D4;
    --w500: #C8C8C8;

    /* Near-black scale */
    --b50:  #9A9A9A;
    --b100: #808080;
    --b150: #6F6F6F;
    --b200: #5A5A5A;
    --b250: #4A4A4A;
    --b300: #3A3A3A;
    --b350: #2A2A2A;
    --b400: #222222;
    --b500: #161616;
    --b600: #0D0D0D;

    /* Spacing — fluid 8pt scale (375px → 1440px) */
    --s1: clamp(0.6rem,  1vw,   0.8rem);
    --s2: clamp(1.2rem, 1.5vw, 1.6rem);
    --s3: clamp(1.8rem, 2vw,   2.4rem);
    --s4: clamp(2.4rem, 2.5vw, 3.2rem);
    --s5: clamp(3.2rem, 4vw,   4.8rem);
    --s6: clamp(4.8rem, 5.5vw, 6.4rem);
    --s7: clamp(6.4rem, 7vw,   9.6rem);
    --s8: clamp(8rem,   9vw,   12.8rem);
    --s9: clamp(10rem,  12vw,  16rem);

    /* Typography — new scale */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Outfit', sans-serif;
    --font:         'Outfit', sans-serif; /* backward compat alias */

    /* Type scale — fluid (375px → 1440px) */
    --text-xs:    clamp(1rem,   1.1vw, 1.1rem);
    --text-sm:    clamp(1.2rem, 1.3vw, 1.3rem);
    --text-base:  clamp(1.4rem, 1.5vw, 1.5rem);
    --text-md:    clamp(1.5rem, 1.7vw, 1.7rem);
    --text-lg:    clamp(1.7rem, 2vw,   2rem);
    --text-xl:    clamp(2rem,   2.2vw, 2.4rem);
    --text-2xl:   clamp(2.4rem, 3vw,   3.2rem);
    --text-3xl:   clamp(3rem,   4vw,   4.8rem);
    --text-4xl:   clamp(4rem,   5.5vw, 6.4rem);
    --text-5xl:   clamp(4.8rem, 7vw,   8rem);
    --text-6xl:   clamp(5.6rem, 8vw,   9.6rem);

    /* Backward-compat type aliases */
    --ts:    var(--text-sm);
    --tb:    var(--text-base);
    --tm:    var(--text-md);
    --th4:   var(--text-xl);
    --th3:   var(--text-2xl);
    --th2:   var(--text-3xl);
    --th1:   var(--text-4xl);
    --tdisp: var(--text-5xl);

    /* Layout */
    --wrap:       120rem;
    --wrap-wide:  144rem;
    --prose:      65ch;
    --section-v:  clamp(8rem, 9vw, 12rem);
    --nav-h:      8rem;

    /* Radius scale */
    --r-sm:  0.4rem;
    --r-md:  0.6rem;
    --r-lg:  0.8rem;
    --r-xl:  1.2rem;
    --r-2xl: 1.6rem;
    --r-pill: 9999px; /* CTAs, tags, badges — Resend-style full pill */

    /* Backward-compat radius aliases */
    --r-card: var(--r-xl);
    --r-btn:  var(--r-pill);

    /* Card */
    --card-pad:  2.8rem;
    --pad-card:  var(--card-pad); /* backward compat */
}

/* ── Light Mode (default) ────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
    /* Surfaces — sage-tinted for subconscious warmth */
    --bg:          oklch(91% 0.008 155);
    --bg-surface:  oklch(93% 0.008 155);
    --bg-soft:     oklch(88% 0.008 155);
    --bg-lift:     oklch(85% 0.008 155);
    --bg-brand:    oklch(89% 0.008 155);
    --bg-brand-d:  oklch(86% 0.008 155);
    --bg-glass:    rgba(238,238,238,.86);

    --t1: #1F1F1F;
    --t2: #3C3C3C;
    --t3: #686868;
    --t4: #8A8A8A;

    /* Accent — slightly deeper sage in light for better contrast */
    --accent:      #7BA387;
    --accent-h:    #8FB69B;
    --accent-d:    #659071;
    --accent-ink:  #203127;
    --accent-sub:  rgba(123,163,135,.12);
    --accent-br:   rgba(123,163,135,.28);
    --accent-glow: rgba(143,182,155,.08);
    --success:     #7BA387;
    --success-h:   #8FB69B;
    --success-sub: rgba(123,163,135,.12);
    --success-br:  rgba(123,163,135,.24);
    --earth:       #A75F34;
    --earth-h:     #BB7447;
    --earth-sub:   rgba(167,95,52,.10);
    --earth-br:    rgba(167,95,52,.22);

    --br:        #D0D0D0;
    --br-s:      #D8D8D8;
    --br-accent: rgba(36,36,36,.16);

    --card-bg:  oklch(93% 0.008 155);
    --card-br:  #D2D2D2;
    --card-h:   oklch(91% 0.008 155);
    --card-hbr: #C2C2C2;

    /* Crisp cascade shadows — no color tint */
    --sh-xs:      0 1px 2px rgba(13,13,13,.05);
    --sh-sm:      0 2px 4px rgba(13,13,13,.06), 0 1px 2px rgba(13,13,13,.04);
    --sh-md:      0 4px 12px rgba(13,13,13,.07), 0 2px 4px rgba(13,13,13,.05);
    --sh-lg:      0 8px 24px rgba(13,13,13,.09), 0 4px 8px rgba(13,13,13,.05);
    --sh-xl:      0 16px 40px rgba(13,13,13,.10), 0 8px 16px rgba(13,13,13,.06);
    --sh-glow:    0 0 0 1px var(--accent-br);
    --sh-glow-lg: 0 0 32px rgba(13,13,13,.06);
}

/* ── Dark Mode — warm sage-tinted surfaces ───────────────────────────────── */
[data-theme="dark"] {
    /* Surfaces — sage-warm near-blacks, not pure cool gray */
    --bg:          oklch(11% 0.010 155);
    --bg-surface:  oklch(13% 0.010 155);
    --bg-soft:     oklch(15% 0.010 155);
    --bg-lift:     oklch(18% 0.010 155);
    --bg-brand:    oklch(14% 0.010 155);
    --bg-brand-d:  oklch(10% 0.010 155);
    --bg-glass:    rgba(28,28,28,.84);

    --t1: #EAEAEA;
    --t2: #CDCDCD;
    --t3: #AAAAAA;
    --t4: #828282;

    --accent:      #A9CCB3;
    --accent-h:    #BDD9C4;
    --accent-d:    #8DB198;
    --accent-ink:  #18261D;
    --accent-sub:  rgba(169,204,179,.10);
    --accent-br:   rgba(169,204,179,.22);
    --accent-glow: rgba(169,204,179,.11);
    --success:     #A9CCB3;
    --success-h:   #BDD9C4;
    --success-sub: rgba(169,204,179,.12);
    --success-br:  rgba(169,204,179,.24);
    --earth:       #CF8A5B;
    --earth-h:     #DEA173;
    --earth-sub:   rgba(207,138,91,.12);
    --earth-br:    rgba(207,138,91,.24);

    --br:        rgba(230,230,230,.14);
    --br-s:      rgba(230,230,230,.08);
    --br-accent: rgba(230,230,230,.18);

    --card-bg:  oklch(13% 0.010 155);
    --card-br:  rgba(230,230,230,.12);
    --card-h:   oklch(16% 0.010 155);
    --card-hbr: rgba(230,230,230,.18);

    --sh-xs:      0 1px 2px rgba(0,0,0,.50);
    --sh-sm:      0 2px 4px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.28);
    --sh-md:      0 6px 18px rgba(0,0,0,.46), 0 2px 6px rgba(0,0,0,.30);
    --sh-lg:      0 12px 28px rgba(0,0,0,.52), 0 5px 10px rgba(0,0,0,.32);
    --sh-xl:      0 20px 48px rgba(0,0,0,.58), 0 8px 20px rgba(0,0,0,.36);
    --sh-glow:    0 0 0 1px rgba(230,230,230,.16), 0 4px 12px rgba(0,0,0,.40);
    --sh-glow-lg: 0 0 0 1px rgba(230,230,230,.20), 0 6px 24px rgba(0,0,0,.44);
}

/* ── Page transition ──────────────────────────────────────────────────────── */
@keyframes pageFadeIn {
    /* opacity only — transform on body creates a containing block for
       position:fixed children, which breaks the nav island and scroll FAB */
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

html.theme-switching body,
html.theme-switching .site-nav,
html.theme-switching .site-footer,
html.theme-switching .section-brand,
html.theme-switching .card,
html.theme-switching .card::before,
html.theme-switching .btn,
html.theme-switching .btn::before,
html.theme-switching .theme-toggle,
html.theme-switching .nav-burger,
html.theme-switching .mobile-menu,
html.theme-switching .mobile-close,
html.theme-switching .mobile-mode-pill,
html.theme-switching .mobile-cta-pill,
html.theme-switching .faq-icon,
html.theme-switching .glass,
html.theme-switching input,
html.theme-switching textarea,
html.theme-switching select,
html.theme-switching a,
html.theme-switching p,
html.theme-switching h1,
html.theme-switching h2,
html.theme-switching h3,
html.theme-switching h4,
html.theme-switching .headline-craft,
html.theme-switching .headline-craft-sub,
html.theme-switching .label,
html.theme-switching .section-num {
    transition:
        background-color 640ms cubic-bezier(.22,1,.36,1),
        color 640ms cubic-bezier(.22,1,.36,1),
        border-color 640ms cubic-bezier(.22,1,.36,1),
        box-shadow 640ms cubic-bezier(.22,1,.36,1),
        opacity 420ms ease !important;
}

html {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--t1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    font-size: 62.5%; /* 1rem = 10px */
}

html { overflow-x: clip; }

body {
    background: var(--bg);
    color: var(--t1);
    font-size: 1.6rem; /* restore 16px equivalent after 62.5% html base */
    padding-top: var(--nav-h);
    line-height: 1.5;
    animation: pageFadeIn 220ms ease both;
}

img, svg  { display: block; max-width: 100%; height: auto; }
a         { color: inherit; text-decoration: none; }
ul, ol    { list-style: none; }
button    { font-family: var(--font-body); cursor: pointer; background: none; border: none; padding: 0; }
input, textarea, select { font-family: var(--font-body); }

/* ── Typography ───────────────────────────────────────────────────────────── */
h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; color: var(--t1); }
h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; color: var(--t1); }
h2 em { font-style: italic; font-weight: 300; color: var(--t3); }
h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.14; letter-spacing: -.03em; color: var(--t1); }
h4 { font-family: var(--font-display); font-size: var(--text-xl);  font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--t1); }
p  { font-size: var(--text-md);  line-height: 1.75; color: var(--t2); max-width: var(--prose); }

/* Display headline — Playfair bold + italic combo treatment */
.headline-craft {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.045em;
    color: var(--t1);
}
.headline-craft-sub {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 600;
    font-style: italic;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--t2);
}

/* Metric / stat text */
.text-stat {
    font-size: clamp(4rem, 5vw, 6rem);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--t1);
}

/* Testimonial style */
.text-quote {
    font-size: var(--text-lg);
    font-weight: 300;
    font-style: italic;
    line-height: 1.65;
    color: var(--t1);
    letter-spacing: -.01em;
}

/* Text reveal for GSAP — outer overflow:hidden, inner slides up */
.text-reveal-wrap  { overflow: hidden; display: block; }
.text-reveal-inner { display: block; transform: translateY(100%); }

/* ── Label & Section Number System ───────────────────────────────────────── */
.section-num {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--t4);
    margin-bottom: var(--s3);
}
.section-num::after {
    content: '';
    flex: 1;
    max-width: 4rem;
    height: 1px;
    background: var(--earth);
    opacity: .5;
}

.label {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--t3) 74%, var(--accent) 26%);
    margin-bottom: var(--s3);
}
.label::before {
    content: '';
    width: 2.4rem;
    height: 1.5px;
    background: var(--earth);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Brand section text overrides ────────────────────────────────────────── */
.section-brand {
    background: var(--bg-brand);
    position: relative;
    --brand-text-strong: var(--t1);
    --brand-text-body: var(--t2);
    --brand-text-soft: var(--t3);
    --brand-text-subtle: var(--t3);
    --brand-text-note: var(--t4);
    --brand-card-bg: var(--card-bg);
    --brand-card-br: var(--card-br);
}
.section-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    border-top: 1px solid color-mix(in srgb, var(--br-s) 68%, var(--accent-br) 32%);
    border-bottom: 1px solid color-mix(in srgb, var(--br-s) 68%, var(--accent-br) 32%);
    pointer-events: none;
    opacity: .55;
}
.section-brand h1,
.section-brand h2,
.section-brand h3,
.section-brand h4,
.section-brand .headline-craft     { color: var(--brand-text-strong); }
.section-brand .headline-craft-sub { color: var(--brand-text-soft); }
.section-brand p                   { color: var(--brand-text-body); }
.section-brand .label,
.section-brand .section-num        { color: var(--brand-text-soft); }
.section-brand .label::before,
.section-brand .section-num::after { background: var(--earth); opacity: .45; }
.section-brand .brand-text-strong  { color: var(--brand-text-strong); }
.section-brand .brand-text-body    { color: var(--brand-text-body); }
.section-brand .brand-text-soft    { color: var(--brand-text-soft); }
.section-brand .brand-text-subtle  { color: var(--brand-text-subtle); }
.section-brand .brand-text-note    { color: var(--brand-text-note); }
.section-brand .brand-card         { background: var(--brand-card-bg); border-color: var(--brand-card-br); }
.section-brand .brand-card-stat .cs-val,
.section-brand .brand-card-stat .stat-val { color: var(--brand-text-strong); }
.section-brand .brand-card-stat .cs-lbl,
.section-brand .brand-card-stat .stat-lbl { color: var(--brand-text-soft); }

/* ── Background Textures ─────────────────────────────────────────────────── */

/* Dot grid — fades at edges */
.bg-grid {
    position: relative;
}
.bg-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--br) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
    opacity: .45;
    pointer-events: none;
    z-index: 0;
}
/* Keep old .dot-grid name working */
.dot-grid { background-image: radial-gradient(circle, var(--br) 1px, transparent 1px); background-size: 28px 28px; }

/* Radial glow for brand sections */
.bg-glow {
    position: relative;
    overflow: hidden;
}
.bg-glow::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 50rem;
    height: 32rem;
    background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* Glassmorphism — nav on scroll, featured card */
.glass {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid color-mix(in srgb, var(--br-s) 72%, var(--accent-br) 28%);
    box-shadow: inset 0 1px 0 var(--accent-glow);
}
[data-theme="light"] .glass {
    background: color-mix(in srgb, var(--bg-glass) 90%, var(--accent-sub) 10%);
    border-color: color-mix(in srgb, var(--br-s) 70%, var(--accent-br) 30%);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .mobile-menu,
    .toggle-icon-wrap .icon-sun,
    .toggle-icon-wrap .icon-moon,
    .stat-strip-val,
    .pts-connector {
        transition: none !important;
        animation: none !important;
    }

    html.theme-switching body,
    html.theme-switching .site-nav,
    html.theme-switching .site-footer,
    html.theme-switching .section-brand,
    html.theme-switching .card,
    html.theme-switching .card::before,
    html.theme-switching .btn,
    html.theme-switching .theme-toggle,
    html.theme-switching .nav-burger,
    html.theme-switching .mobile-menu,
    html.theme-switching .mobile-close,
    html.theme-switching .mobile-mode-pill,
    html.theme-switching .mobile-cta-pill,
    html.theme-switching .faq-icon,
    html.theme-switching .glass,
    html.theme-switching input,
    html.theme-switching textarea,
    html.theme-switching select,
    html.theme-switching a,
    html.theme-switching p,
    html.theme-switching h1,
    html.theme-switching h2,
    html.theme-switching h3,
    html.theme-switching h4,
    html.theme-switching .headline-craft,
    html.theme-switching .headline-craft-sub,
    html.theme-switching .label,
    html.theme-switching .section-num {
        transition: none !important;
    }
}

/* ── Scroll Indicator ────────────────────────────────────────────────────── */
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    opacity: .35;
    animation: scrollPulse 2s ease-in-out infinite;
}
.scroll-indicator span {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--t3);
}
.scroll-line {
    width: 1px;
    height: 3.2rem;
    background: linear-gradient(to bottom, var(--accent), transparent);
}

@keyframes scrollPulse {
    0%, 100% { opacity: .35; transform: translateY(0); }
    50%       { opacity: .6;  transform: translateY(4px); }
}

/* ── Horizontal rule wipe target ─────────────────────────────────────────── */
.rule-wipe {
    height: 1px;
    background: var(--br);
    transform-origin: left center;
}

/* ==========================================================================
   Layout — Containers, Grids, Spacing (merged from layout.css)
   ========================================================================== */
/* ==========================================================================
   BespokeForge Layout v3.1 — Seamless
   ========================================================================== */

/* ── Containers ──────────────────────────────────────────────────────────── */
.wrap        { max-width: var(--wrap);       margin: 0 auto; padding: 0 clamp(2rem, 5vw, 4.8rem); }
.wrap-wide   { max-width: var(--wrap-wide);  margin: 0 auto; padding: 0 clamp(2rem, 5vw, 4.8rem); }
.wrap-narrow { max-width: 80rem;             margin: 0 auto; padding: 0 clamp(2rem, 5vw, 4.8rem); }

/* ── Sections — tonal transitions without hard stops ─────────────────────── */
/*
   Philosophy: the page uses a restrained grayscale ladder.
   Sections define visual zones through spacing and surface shifts.
   Brand sections are explicit surfaces; transition helpers handle
   the softer handoff between neighboring tones.
*/
.section {
    padding: var(--section-v) 0;
    position: relative;
}

/* Brand sections — explicit bg, glow handled via .bg-glow class */
.section-brand  { padding: var(--section-v) 0; }
.section-alt    { background: var(--bg-surface); }   /* kept for compat */
.section-soft   { background: var(--bg-soft); }      /* kept for compat */
.bg-soft        { background: var(--bg-soft); }
.bg-lift        { background: var(--bg-lift); }

/* ── Surface Blending ───────────────────────────────────────────────────── */
.section-brand,
.site-footer,
.section-alt,
.section-soft,
.bg-soft,
.bg-lift,
.section[style*="background:var(--bg-soft)"],
.section[style*="background: var(--bg-soft)"],
.section[style*="background:var(--bg-lift)"],
.section[style*="background: var(--bg-lift)"],
.section[style*="background:var(--bg-surface)"],
.section[style*="background: var(--bg-surface)"] {
    position: relative;
    isolation: isolate;
    --section-base-pad-top: var(--section-v);
    --section-blend-height: clamp(7.2rem, 9vw, 12.8rem);
    --section-blend-overlap: clamp(4rem, 5vw, 7.2rem);
}

.site-footer {
    --section-base-pad-top: var(--s6);
}

main > * + .section-brand,
main > * + .section-alt,
main > * + .section-soft,
main > * + .bg-soft,
main > * + .bg-lift,
main > * + .section[style*="background:var(--bg-soft)"],
main > * + .section[style*="background: var(--bg-soft)"],
main > * + .section[style*="background:var(--bg-lift)"],
main > * + .section[style*="background: var(--bg-lift)"],
main > * + .section[style*="background:var(--bg-surface)"],
main > * + .section[style*="background: var(--bg-surface)"],
main > * + .site-footer,
main + .site-footer,
.section + .site-footer,
.section-brand + .site-footer,
.section-soft + .site-footer,
.section-alt + .site-footer {
    margin-top: calc(var(--section-blend-overlap) * -1);
    padding-top: calc(var(--section-base-pad-top) + var(--section-blend-overlap));
}

.section-brand::before,
.site-footer::before,
.section-alt::before,
.section-soft::before,
.bg-soft::before,
.bg-lift::before,
.section[style*="background:var(--bg-soft)"]::before,
.section[style*="background: var(--bg-soft)"]::before,
.section[style*="background:var(--bg-lift)"]::before,
.section[style*="background: var(--bg-lift)"]::before,
.section[style*="background:var(--bg-surface)"]::before,
.section[style*="background: var(--bg-surface)"]::before {
    content: '';
    position: absolute;
    top: calc(var(--section-blend-overlap, 0px) * -1);
    left: 0;
    right: 0;
    height: calc(var(--section-blend-height) + var(--section-blend-overlap, 0px));
    background:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--section-blend-color, transparent) 0%, transparent) 0%,
            color-mix(in srgb, var(--section-blend-color, transparent) 18%, transparent) 28%,
            color-mix(in srgb, var(--section-blend-color, transparent) 52%, transparent) 64%,
            var(--section-blend-color, transparent) 100%
        );
    pointer-events: none;
    z-index: 0;
}

.section-brand,
.section-brand::before {
    --section-blend-color: var(--bg-brand);
}

.section-alt,
.section-alt::before,
.section[style*="background:var(--bg-surface)"],
.section[style*="background:var(--bg-surface)"]::before,
.section[style*="background: var(--bg-surface)"],
.section[style*="background: var(--bg-surface)"]::before,
.site-footer,
.site-footer::before {
    --section-blend-color: var(--bg-surface);
}

.section-soft,
.section-soft::before,
.bg-soft,
.bg-soft::before,
.section[style*="background:var(--bg-soft)"],
.section[style*="background:var(--bg-soft)"]::before,
.section[style*="background: var(--bg-soft)"],
.section[style*="background: var(--bg-soft)"]::before {
    --section-blend-color: var(--bg-soft);
}

.bg-lift,
.bg-lift::before,
.section[style*="background:var(--bg-lift)"],
.section[style*="background:var(--bg-lift)"]::before,
.section[style*="background: var(--bg-lift)"],
.section[style*="background: var(--bg-lift)"]::before {
    --section-blend-color: var(--bg-lift);
}

/* ── Seamless Gradient Transition Classes ────────────────────────────────── */
/*
   Add to ANY section to fade smoothly into the NEXT section's bg.
   The section itself stays transparent; only the fade strip changes.
   CSS fallback for when GSAP isn't available.
*/
.fade-to-soft::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 16rem;
    background: linear-gradient(to bottom, transparent, var(--bg-soft));
    pointer-events: none; z-index: 0;
}
.fade-to-base::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 16rem;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none; z-index: 0;
}
.fade-to-brand::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 20rem;
    background: linear-gradient(to bottom, transparent, var(--bg-brand));
    pointer-events: none; z-index: 0;
}
.fade-from-brand {
    background: linear-gradient(to bottom, var(--bg-surface) 0%, var(--bg) 100%);
}

/* Ensure section content sits above fade overlays */
.fade-to-soft > .wrap,
.fade-to-base > .wrap,
.fade-to-brand > .wrap,
.fade-from-brand > .wrap,
.section-brand > .wrap,
.site-footer > .wrap,
.section-alt > .wrap,
.section-soft > .wrap,
.bg-soft > .wrap,
.bg-lift > .wrap,
.section[style*="background:var(--bg-soft)"] > .wrap,
.section[style*="background: var(--bg-soft)"] > .wrap,
.section[style*="background:var(--bg-lift)"] > .wrap,
.section[style*="background: var(--bg-lift)"] > .wrap,
.section[style*="background:var(--bg-surface)"] > .wrap,
.section[style*="background: var(--bg-surface)"] > .wrap,
.bg-glow > .wrap,
.bg-grid > .wrap { position: relative; z-index: 1; }

/* ── Grid System ─────────────────────────────────────────────────────────── */
.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }

/* Auto-responsive grids (don't need breakpoint classes) */
.grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 2rem; }
.grid-auto-md { display: grid; grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr)); gap: 2rem; }

/* Bento/masonry grids */
.bento   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.bento-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }
.row-2   { grid-row: span 2; }

/* ── Asymmetric Splits ───────────────────────────────────────────────────── */
.split-65 { display: grid; grid-template-columns: 1.8fr 1fr;   gap: var(--s6); align-items: start; }
.split-60 { display: grid; grid-template-columns: 1.5fr 1fr;   gap: var(--s6); align-items: center; }
.split-50 { display: grid; grid-template-columns: 1fr 1fr;     gap: var(--s5); align-items: center; }

/* ── Flex Utilities ──────────────────────────────────────────────────────── */
.flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
.flex-center  { display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.flex-start   { display: flex; align-items: flex-start; gap: var(--s3); }
.flex-col     { display: flex; flex-direction: column; gap: var(--s2); }

/* ── Spacing Utilities ───────────────────────────────────────────────────── */
.mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); } .mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); } .mb-5 { margin-bottom: var(--s5); }
.mx-auto   { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-center p { margin-left: auto; margin-right: auto; }
.text-center .label,
.text-center .section-num { justify-content: center; }
.text-right  { text-align: right; }
.max-prose   { max-width: var(--prose); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .grid-4, .bento-4       { grid-template-columns: repeat(2, 1fr); }
    .grid-3, .bento         { grid-template-columns: repeat(2, 1fr); }
    .split-65, .split-60, .split-50 { grid-template-columns: 1fr; gap: var(--s4); }
    .span-2, .span-3        { grid-column: span 1; }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4, .bento, .bento-4 { grid-template-columns: 1fr; }
}

/* ── Footer Grid ─────────────────────────────────────────────────────────── */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--s5);
    margin-bottom: var(--s6);
}
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: var(--s3); text-align: center; }
}

/* ==========================================================================
   Animation Initial States — GSAP targets (merged from animations.css)
   ========================================================================== */
/* ==========================================================================
   BespokeForge Animations v3.1
   ========================================================================== */

/* ── Initial hidden states for GSAP ──────────────────────────────────────── */
.anim-up    { opacity: 0; transform: translateY(20px); }
.anim-in    { opacity: 0; }
.anim-scale { opacity: 0; transform: scale(0.96); }
.anim-left  { opacity: 0; transform: translateX(-20px); }
.anim-right { opacity: 0; transform: translateX(20px); }