/* ============================================================
   ResinArt GH — site.css
   Custom animations, grain, clip-paths & non-Tailwind utilities
   Design tokens are in the Tailwind config in _Layout.cshtml
   ============================================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    background-color: #0A0806;
    color: #F2EDE6;
    margin: 0;
    overflow-x: hidden;
}

/* ── Selection ───────────────────────────────────────────── */
::selection {
    background-color: rgba(200, 146, 42, 0.35);
    color: #FAF7F2;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: #14100D; }
::-webkit-scrollbar-thumb        { background: #2C2420; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #C8922A; }

/* ── Grain overlay (pseudo) ──────────────────────────────── */
.grain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 1;
    opacity: 0.55;
    mix-blend-mode: overlay;
}

/* ── Hero blob clip-paths ────────────────────────────────── */
.blob-clip-1 {
    clip-path: polygon(0% 8%, 18% 0%, 85% 5%, 100% 22%, 96% 78%, 82% 100%, 12% 95%, 0% 72%);
}
.blob-clip-2 {
    clip-path: polygon(8% 0%, 92% 4%, 100% 18%, 97% 85%, 78% 100%, 5% 96%, 0% 75%, 3% 12%);
}
.blob-clip-3 {
    clip-path: polygon(15% 0%, 88% 0%, 100% 15%, 100% 85%, 88% 100%, 12% 100%, 0% 85%, 0% 15%);
}

/* ── Nav — transparent → solid on scroll ─────────────────── */
#site-nav {
    background: transparent;
}
#site-nav.scrolled {
    background: rgba(20, 16, 13, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(44, 36, 32, 0.6);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
}

/* ── Nav link hover underline ────────────────────────────── */
.nav-link-underline {
    text-decoration: none;
}
.nav-link-underline::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #C8922A;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 2px;
}
.nav-link-underline:hover::after { width: 100%; }

/* ── Section label decoration ────────────────────────────── */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #C8922A;
}
.section-label::before,
.section-label::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: #C8922A;
    opacity: 0.6;
}

/* ── Amber shimmer text effect ───────────────────────────── */
.text-shimmer {
    background: linear-gradient(
        120deg,
        #C8922A 0%,
        #E8B84B 30%,
        #FAF7F2 50%,
        #E8B84B 70%,
        #C8922A 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

/* ── Hero scroll indicator ───────────────────────────────── */
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.scroll-indicator__line {
    width: 1px;
    height: 64px;
    background: linear-gradient(to bottom, #C8922A, transparent);
    animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50%       { transform: scaleY(0.5); opacity: 0.4; }
}

/* ── Animated gradient border on cards ───────────────────── */
.card-glow {
    position: relative;
}
.card-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(200,146,42,0), rgba(200,146,42,0.4), rgba(200,146,42,0));
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    animation: gradientRotate 3s linear infinite;
}
.card-glow:hover::before { opacity: 1; }

@keyframes gradientRotate {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── GSAP reveal targets (initial hidden state) ───────────── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
}
.reveal-left  { opacity: 0; transform: translateX(-50px); }
.reveal-right { opacity: 0; transform: translateX(50px); }
.reveal-scale { opacity: 0; transform: scale(0.92); }

/* ── Horizontal marquee strip ────────────────────────────── */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

/* ── Product card image zoom ─────────────────────────────── */
.product-card-img {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.group:hover .product-card-img { transform: scale(1.06); }

/* ── Magnetic button wrapper ─────────────────────────────── */
.btn-magnetic { display: inline-block; }

/* ── Process section vertical line ──────────────────────── */
.process-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #C8922A 20%, #C8922A 80%, transparent);
    transform: translateX(-50%);
}

/* ── Instagram grid hover overlay ───────────────────────── */
.ig-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(200, 146, 42, 0.25);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ig-item:hover::after { opacity: 1; }

/* ── Floating ambient orbs (hero bg) ─────────────────────── */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: float 8s ease-in-out infinite;
}
.orb-amber  { background: radial-gradient(circle, rgba(200,146,42,0.18), transparent 70%); }
.orb-terra  { background: radial-gradient(circle, rgba(196,96,58,0.14), transparent 70%); }
.orb-teal   { background: radial-gradient(circle, rgba(42,123,140,0.12), transparent 70%); }

/* ════════════════════════════════════════════════════════════
   HERO — EDITORIAL FULL-BLEED LAYOUT
   Three-column grid: left sidebar | centre | right sidebar
   ════════════════════════════════════════════════════════════ */

/* Hero background slow Ken-Burns zoom */
.hero-bg img {
    animation: heroBgZoom 14s ease-in-out infinite alternate;
    transform-origin: center center;
}
@keyframes heroBgZoom {
    from { transform: scale(1.05); }
    to   { transform: scale(1.12); }
}

/* Three-column editorial grid */
.hero-editorial-grid {
    grid-template-columns: 80px 1fr 200px;
}
@media (min-width: 1024px) {
    .hero-editorial-grid {
        grid-template-columns: 100px 1fr 240px;
    }
}
@media (max-width: 767px) {
    .hero-editorial-grid {
        grid-template-columns: 48px 1fr 0px;
    }
    .hero-sidebar-right { display: none; }
}

/* Vertical rule lines */
.hero-rule {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(242,237,230,0.06) 20%, rgba(242,237,230,0.06) 80%, transparent);
}
.hero-rule-left  { left: 80px; }
.hero-rule-right { right: 200px; }
@media (min-width: 1024px) {
    .hero-rule-left  { left: 100px; }
    .hero-rule-right { right: 240px; }
}

/* Outline (ghost) hero text */
.hero-outline-text {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(242,237,230,0.25);
    text-stroke: 1.5px rgba(242,237,230,0.25);
}

/* Ghost echo watermark word */
.hero-ghost-word {
    color: transparent;
    -webkit-text-stroke: 1px rgba(200,146,42,0.06);
    text-stroke: 1px rgba(200,146,42,0.06);
    letter-spacing: -0.04em;
}

/* Bottom accent line animation */
.hero-bottom-line {
    animation: none; /* animated by GSAP */
}

/* ════════════════════════════════════════════════════════════
   COLLECTION — EXPANDING VERTICAL COLUMN PANELS
   Bits Kingdom DNA: tall panels that expand on hover/focus
   ════════════════════════════════════════════════════════════ */

.product-panels-container {
    display: flex;
    height: clamp(520px, 80vh, 820px);
    width: 100%;
    overflow: hidden;
}

.product-panel {
    position: relative;
    flex: 1;
    cursor: pointer;
    overflow: hidden;
    /* smooth width transition */
    transition:
        flex 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.65s ease;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.product-panel:last-child { border-right: none; }

/* Hover / active state — widen this panel */
.product-panels-container:hover .product-panel,
.product-panels-container:focus-within .product-panel {
    flex: 0.4; /* narrow siblings */
}
.product-panels-container:hover .product-panel:hover,
.product-panels-container:focus-within .product-panel:focus,
.product-panel.is-active {
    flex: 3.5; /* expanded panel */
}

/* Overlay darkens on hover of container, brightens on hovered panel */
.panel-overlay {
    background: linear-gradient(
        to bottom,
        rgba(10,8,6,0.15) 0%,
        rgba(10,8,6,0.45) 50%,
        rgba(10,8,6,0.85) 100%
    );
}
.product-panel:hover .panel-overlay,
.product-panel.is-active .panel-overlay {
    background: linear-gradient(
        to bottom,
        rgba(10,8,6,0.05) 0%,
        rgba(10,8,6,0.25) 45%,
        rgba(10,8,6,0.88) 100%
    );
}

/* Image scale on hover */
.product-panel .panel-bg img {
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-panel:hover .panel-bg img,
.product-panel.is-active .panel-bg img {
    transform: scale(1.08);
}

/* Collapsed state: always visible, fades out when expanded */
.panel-collapsed {
    transition: opacity 0.4s ease;
}
.product-panel:hover .panel-collapsed,
.product-panel.is-active .panel-collapsed {
    opacity: 0;
    pointer-events: none;
}

/* Expanded state: hidden by default, shown when expanded */
.panel-expanded {
    transition: opacity 0.45s ease 0.2s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
    transform: translateY(16px);
}
.product-panel:hover .panel-expanded,
.product-panel.is-active .panel-expanded {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Accent bottom bar */
.panel-accent-bar {
    transition: opacity 0.4s ease, height 0.4s ease;
}
.product-panel:hover .panel-accent-bar,
.product-panel.is-active .panel-accent-bar {
    opacity: 1;
    height: 3px;
}

/* Mobile: stack panels vertically with accordion behavior */
@media (max-width: 767px) {
    .product-panels-container {
        flex-direction: column;
        height: auto;
        gap: 0;
    }

    .product-panel {
        flex: none;
        height: 80px;
        min-height: 80px;
        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s ease,
                    border-color 0.3s ease;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        overflow: hidden;
        cursor: pointer;
    }

    .product-panel:last-child {
        border-bottom: none;
    }

    /* Completely disable hover effects on mobile */
    .product-panels-container:hover .product-panel,
    .product-panels-container:focus-within .product-panel,
    .product-panel:hover,
    .product-panel:focus {
        flex: none;
        height: 80px;
    }

    /* Only .is-active class expands - accordion style */
    .product-panel.is-active { 
        height: 420px !important;
        min-height: 420px;
        border-bottom-color: rgba(200, 146, 42, 0.3);
        box-shadow: 0 4px 20px rgba(200, 146, 42, 0.12),
                    inset 0 1px 0 rgba(200, 146, 42, 0.1);
    }

    /* Collapsed state - always visible unless active */
    .panel-collapsed {
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: opacity 0.3s ease;
    }

    .product-panel.is-active .panel-collapsed {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Expanded state - only visible when active */
    .panel-expanded {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(20px);
        transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
    }

    .product-panel.is-active .panel-expanded {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0);
    }

    /* Disable hover-based image scaling on mobile */
    .product-panel:hover .panel-bg img {
        transform: scale(1);
    }

    .product-panel.is-active .panel-bg img {
        transform: scale(1.05);
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    }

    /* Mobile collapsed state layout - horizontal */
    .panel-cat-label {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        font-size: 0.75rem;
        letter-spacing: 0.15em;
    }

    .panel-collapsed { 
        flex-direction: row !important; 
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1.25rem 1.5rem !important;
    }

    /* Number and arrow styling on mobile */
    .panel-collapsed > span:first-child {
        font-size: 0.7rem;
        opacity: 0.4;
    }

    .panel-collapsed i {
        transition: transform 0.3s ease, color 0.3s ease;
    }

    .product-panel.is-active .panel-collapsed i {
        transform: rotate(45deg);
        color: rgba(200, 146, 42, 0.8);
    }

    /* Accent bar on mobile */
    .panel-accent-bar {
        opacity: 0;
        transition: opacity 0.3s ease, height 0.3s ease;
    }

    .product-panel.is-active .panel-accent-bar {
        opacity: 1;
        height: 2px;
    }

    /* Overlay adjustments for mobile */
    .panel-overlay {
        background: linear-gradient(
            to bottom,
            rgba(10,8,6,0.7) 0%,
            rgba(10,8,6,0.85) 100%
        );
    }

    .product-panel.is-active .panel-overlay {
        background: linear-gradient(
            to bottom,
            rgba(10,8,6,0.3) 0%,
            rgba(10,8,6,0.75) 60%,
            rgba(10,8,6,0.92) 100%
        );
    }
}

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

/* Reverse marquee — second track runs opposite direction */
@keyframes marquee-reverse {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.marquee-track-reverse {
    display: flex;
    width: max-content;
    animation: marquee-reverse 38s linear infinite;
}
.marquee-track-reverse:hover { animation-play-state: paused; }

/* ── Premium panel tint — colour wash on expand ──────────── */
.product-panel:hover .panel-tint,
.product-panel.is-active .panel-tint {
    opacity: 1;
}

/* ── Body-level grain overlay ────────────────────────────── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.4;
    mix-blend-mode: overlay;
}

/* ── Marquee strip — dual-band border ────────────────────── */
.marquee-strip {
    border-top: 1px solid rgba(200,146,42,0.15);
    border-bottom: 1px solid rgba(200,146,42,0.08);
}

/* ── Section entry divider glow ──────────────────────────── */
.section-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,146,42,0.18), transparent);
    width: 100%;
}

/* ── Instagram mosaic — rounded corners upgrade ──────────── */
.ig-item {
    border-radius: 1rem;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

.leading-tight{
    line-height: 0.9 !important;
}

/* ════════════════════════════════════════════════════════════
   SECTION BLEED CARD — Featured piece card at base of collection
   Image left, content right — overlaps into the About section.
   ════════════════════════════════════════════════════════════ */
.section-bleed-card {
    position: relative;
    z-index: 20;
    padding: 0 clamp(1.5rem, 5vw, 5rem);
    margin-top: 3rem;
    margin-bottom: -5rem;
}

.bleed-card-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #1E1814;
    border: 1px solid rgba(200,146,42,0.18);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 20px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,146,42,0.08);
}

.bleed-card-img {
    flex: 0 0 38%;
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

.bleed-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bleed-card-inner:hover .bleed-card-img img {
    transform: scale(1.05);
}

.bleed-card-content {
    flex: 1;
    padding: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 640px) {
    .section-bleed-card {
        padding: 0 1.25rem;
        margin-bottom: -3rem;
    }
    .bleed-card-inner {
        flex-direction: column;
    }
    .bleed-card-img {
        flex: 0 0 auto;
        height: 220px;
        min-height: unset;
    }
}

/* ════════════════════════════════════════════════════════════
   READABILITY — contrast lift
   ════════════════════════════════════════════════════════════ */
p.font-sans { color: rgba(242, 237, 230, 0.82); }
section h2.font-display { font-weight: 600; }
.text-ash { color: #9A8878 !important; }

/* ════════════════════════════════════════════════════════════
   §4.5  COLOR SPLIT  (personaltrainer3 DNA)
   Hard amber / dark two-column layout.
   Hero-language: grain grain texture, amber hairline rule,
   ambient radial glow — no diagonal blade.
   ════════════════════════════════════════════════════════════ */

.color-split {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 90vh;
    overflow: hidden;
    /* Hero-language: amber hairline rule on both edges */
    border-top:    1px solid rgba(200,146,42,0.18);
    border-bottom: 1px solid rgba(200,146,42,0.18);
}

/* LEFT — pure amber block */
.color-split__left {
    position: relative;
    background: #C8922A;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 5vw, 4.5rem);
    z-index: 2;
    overflow: hidden;
}

/* Ghost number — half off-screen left edge */
.color-split__ghost {
    position: absolute;
    top: -0.15em;
    left: -0.35em;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(10rem, 22vw, 20rem);
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(10,8,6,0.12);
    text-stroke: 2px rgba(10,8,6,0.12);
    user-select: none;
    pointer-events: none;
    letter-spacing: -0.04em;
}

/* Vertical label on the right edge of left block */
.color-split__label {
    position: absolute;
    right: -1.2rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(10,8,6,0.4);
    white-space: nowrap;
    z-index: 3;
}

.color-split__text { position: relative; z-index: 2; }

.color-split__eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(10,8,6,0.55);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.color-split__eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: rgba(10,8,6,0.4);
}

.color-split__heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3.5rem, 6.5vw, 6.5rem);
    font-weight: 700;
    line-height: 0.88;
    letter-spacing: -0.03em;
    color: #0A0806;
    margin-bottom: 1.75rem;
}
.color-split__heading em {
    font-style: italic;
    color: #FAF7F2;
}
.color-split__heading--outline {
    color: transparent;
    -webkit-text-stroke: 2px #0A0806;
    text-stroke: 2px #0A0806;
    font-style: normal;
}

.color-split__body {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(10,8,6,0.7);
    max-width: 34ch;
    margin-bottom: 2.25rem;
}

.color-split__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #0A0806;
    color: #C8922A;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.85rem 1.75rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    width: fit-content;
}
.color-split__cta:hover {
    background: #1E1814;
    color: #E8B84B;
    box-shadow: 0 0 30px rgba(200,146,42,0.3);
}

/* Stat bar — pinned to bottom of left block */
.color-split__stats {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(10,8,6,0.15);
}
.color-split__stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.color-split__stat-val {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #0A0806;
}
.color-split__stat-val sup { font-size: 0.6em; }
.color-split__stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(10,8,6,0.5);
}
.color-split__stat-divider {
    width: 1px;
    height: 2.5rem;
    background: rgba(10,8,6,0.15);
    flex-shrink: 0;
}

/* RIGHT — image bled to edge, no frame, no blade */
.color-split__right {
    position: relative;
    overflow: hidden;
    background: #0A0806;
}
.color-split__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94);
}
.color-split__right:hover .color-split__img { transform: scale(1.04); }

.color-split__right-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, transparent 40%, rgba(10,8,6,0.45) 100%);
    z-index: 1;
}

/* Floating quote card — sits across the image/left boundary */
.color-split__quote {
    position: absolute;
    bottom: clamp(2rem, 5vw, 3.5rem);
    left: -2rem;
    z-index: 10;
    background: #14100D;
    border: 1px solid rgba(200,146,42,0.25);
    border-radius: 1.25rem;
    padding: 1.5rem 1.75rem;
    max-width: 280px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 4px 20px rgba(200,146,42,0.1);
}

/* Mobile: stack vertically */
@media (max-width: 1023px) {
    .color-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .color-split__left  { min-height: 80vw; }
    .color-split__right { min-height: 70vw; }
    .color-split__label { display: none; }
    .color-split__quote {
        position: static;
        margin: 1.5rem;
        max-width: none;
    }
    .color-split__ghost { font-size: 8rem; }
}

/* ════════════════════════════════════════════════════════════
   §5  CRAFT CHAPTERS  (swabtheworld DNA, hero language)
   Three alternating full-bleed chapters.
   Chapter images contained with overflow:hidden — no edge bleed.
   Hero-language transitions: amber gradient hairline + radial
   ambient glow between chapters.
   ════════════════════════════════════════════════════════════ */

.craft-chapters { overflow: hidden; }

/* ── Chapter separator — hero language ───────────────────── */
/* Applied as ::before pseudo on all chapters except the first */
.craft-chapter + .craft-chapter::before,
.craft-chapter + .craft-quote-banner::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,146,42,0.35) 30%, rgba(200,146,42,0.35) 70%, transparent);
    z-index: 20;
    pointer-events: none;
}

/* Radial amber glow wash at the top of each dark chapter
   — identical language to hero's top-of-section ambient glow */
.craft-chapter--dark::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 380px;
    background: radial-gradient(ellipse at top center, rgba(200,146,42,0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── Single chapter ──────────────────────────────────────── */
.craft-chapter {
    position: relative;
    display: grid;
    /*grid-template-columns: 50fr 50fr !important;*/
    min-height: 95vh;
    /* Critical: overflow:hidden keeps images inside the chapter rectangle */
    overflow: hidden;
}
/*.craft-chapter--amber { grid-template-columns: 45fr 55fr; }*/

/* Giant ghost number — bleeds off the appropriate edge */
.craft-chapter__ghost {
    position: absolute;
    top: -0.1em;
    right: -0.25em;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(12rem, 28vw, 26rem);
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(200,146,42,0.07);
    text-stroke: 1.5px rgba(200,146,42,0.07);
    user-select: none;
    pointer-events: none;
    letter-spacing: -0.04em;
    z-index: 1;
}
.craft-chapter__ghost--dark {
    right: auto;
    left: -0.25em;
    -webkit-text-stroke-color: rgba(10,8,6,0.09);
}

/* ── Image half ──────────────────────────────────────────── */
.craft-chapter__img {
    position: relative;
    /* overflow:hidden here is the fix — image can never escape this box */
    overflow: hidden;
}
.craft-chapter__img img {
    /* Fill the grid cell completely */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1s cubic-bezier(0.25,0.46,0.45,0.94);
    will-change: transform;
}
.craft-chapter:hover .craft-chapter__img img { transform: scale(1.04); }

/* Edge shadow — dark chapters: shadow faces content on the right */
.craft-chapter__img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10,8,6,0) 55%, rgba(10,8,6,0.6) 100%);
    z-index: 1;
}
/* Amber chapter: shadow faces content on the left */
.craft-chapter__img--left .craft-chapter__img-overlay {
    background: linear-gradient(to left, rgba(200,146,42,0) 55%, rgba(200,146,42,0.4) 100%);
}
.craft-chapter__img-overlay--light {
    background: linear-gradient(to left, transparent 55%, rgba(200,146,42,0.3) 100%);
}

/* ── Content half ────────────────────────────────────────── */
.craft-chapter__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 5vw, 5rem);
    background: #0A0806;
}
.craft-chapter--amber .craft-chapter__content {
    background: #C8922A;
}

/* Step badge */
.craft-chapter__step-badge {
    display: inline-flex;
    align-items: baseline;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    color: rgba(200,146,42,0.7);
    letter-spacing: 0.2em;
    margin-bottom: 2rem;
    background: rgba(200,146,42,0.08);
    border: 1px solid rgba(200,146,42,0.2);
    border-radius: 0.5rem;
    padding: 0.4rem 0.85rem;
    width: fit-content;
}
.craft-chapter__step-badge--dark {
    color: rgba(10,8,6,0.6);
    background: rgba(10,8,6,0.1);
    border-color: rgba(10,8,6,0.2);
}

/* Chapter heading */
.craft-chapter__heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3rem, 5.5vw, 5.5rem);
    font-weight: 700;
    line-height: 0.88;
    letter-spacing: -0.03em;
    color: #FAF7F2;
    margin-bottom: 1.5rem;
}
.craft-chapter__heading em {
    font-style: italic;
    color: #C8922A;
}
.craft-chapter__heading--dark { color: #0A0806; }
.craft-chapter__heading--dark em { color: #FAF7F2; }

/* Amber rule */
.craft-chapter__rule {
    width: 3rem;
    height: 2px;
    background: #C8922A;
    margin-bottom: 1.75rem;
    border-radius: 2px;
}
.craft-chapter__rule--dark { background: rgba(10,8,6,0.3); }

/* Body copy */
.craft-chapter__body {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(242,237,230,0.82);
    max-width: 38ch;
    margin-bottom: 2rem;
}
.craft-chapter__body--dark { color: rgba(10,8,6,0.72); }

/* Icon + label row */
.craft-chapter__detail {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.craft-chapter__detail--dark { color: rgba(10,8,6,0.55); }
.craft-chapter__icon {
    font-size: 1.4rem;
    color: #C8922A;
    flex-shrink: 0;
}
.craft-chapter__detail--dark .craft-chapter__icon { color: rgba(10,8,6,0.45); }

/* ── Closing quote banner — full-width amber ─────────────── */
.craft-quote-banner {
    position: relative;
    background: #C8922A;
    overflow: hidden;
    /* Hero-language top rule */
    border-top: 1px solid rgba(10,8,6,0.12);
}
.craft-quote-banner__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(4rem, 8vw, 7rem) clamp(2rem, 6vw, 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}
.craft-quote-banner__mark {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(5rem, 10vw, 8rem);
    line-height: 0.7;
    color: rgba(10,8,6,0.1);
    user-select: none;
}
.craft-quote-banner__text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 4rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0A0806;
    max-width: 22ch;
}
.craft-quote-banner__text em {
    font-style: italic;
    color: #FAF7F2;
}
.craft-quote-banner__attr {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* ── Mobile: stack chapters vertically ───────────────────── */
@media (max-width: 1023px) {
    .craft-chapter,
    .craft-chapter--amber {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .craft-chapter__img--right { order: -1; }
    /* Fixed height container — image fills it, cannot escape */
    .craft-chapter__img {
        height: 65vw;
        min-height: 260px;
        position: relative;
    }
    .craft-chapter__ghost { font-size: 6rem; opacity: 0.4; }
}

.color-split {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 90vh;
    overflow: hidden;
}

/* LEFT — pure amber block */
.color-split__left {
    position: relative;
    background: #C8922A;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 5vw, 4.5rem);
    z-index: 2;
    overflow: hidden;
}

/* Ghost number — half off-screen left edge */
.color-split__ghost {
    position: absolute;
    top: -0.15em;
    left: -0.35em;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(10rem, 22vw, 20rem);
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(10,8,6,0.12);
    text-stroke: 2px rgba(10,8,6,0.12);
    user-select: none;
    pointer-events: none;
    letter-spacing: -0.04em;
}

/* Vertical label on the right edge of left block */
.color-split__label {
    position: absolute;
    right: -1.2rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(10,8,6,0.4);
    white-space: nowrap;
    z-index: 3;
}

.color-split__text { position: relative; z-index: 2; }

.color-split__eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(10,8,6,0.55);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.color-split__eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: rgba(10,8,6,0.4);
}

.color-split__heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3.5rem, 6.5vw, 6.5rem);
    font-weight: 700;
    line-height: 0.88;
    letter-spacing: -0.03em;
    color: #0A0806;
    margin-bottom: 1.75rem;
}
.color-split__heading em {
    font-style: italic;
    color: #FAF7F2;
}
.color-split__heading--outline {
    color: transparent;
    -webkit-text-stroke: 2px #0A0806;
    text-stroke: 2px #0A0806;
    font-style: normal;
}

.color-split__body {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(10,8,6,0.7);
    max-width: 34ch;
    margin-bottom: 2.25rem;
}

.color-split__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #0A0806;
    color: #C8922A;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.85rem 1.75rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    width: fit-content;
}
.color-split__cta:hover {
    background: #1E1814;
    color: #E8B84B;
    box-shadow: 0 0 30px rgba(200,146,42,0.3);
}

/* Stat bar — pinned to bottom of left block */
.color-split__stats {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(10,8,6,0.15);
}
.color-split__stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.color-split__stat-val {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #0A0806;
}
.color-split__stat-val sup { font-size: 0.6em; }
.color-split__stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(10,8,6,0.5);
}
.color-split__stat-divider {
    width: 1px;
    height: 2.5rem;
    background: rgba(10,8,6,0.15);
    flex-shrink: 0;
}

/* RIGHT — image bled to edge, no frame */
.color-split__right {
    position: relative;
    overflow: hidden;
    background: #0A0806;
}
.color-split__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94);
}
.color-split__right:hover .color-split__img { transform: scale(1.04); }

.color-split__right-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, transparent 40%, rgba(10,8,6,0.5) 100%);
    z-index: 1;
}

/* Floating quote card — sits across the image/left boundary */
.color-split__quote {
    position: absolute;
    bottom: clamp(2rem, 5vw, 3.5rem);
    left: -2rem;
    z-index: 10;
    background: #14100D;
    border: 1px solid rgba(200,146,42,0.25);
    border-radius: 1.25rem;
    padding: 1.5rem 1.75rem;
    max-width: 280px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 4px 20px rgba(200,146,42,0.1);
}

/* Mobile: stack vertically, blade hidden */
@media (max-width: 1023px) {
    .color-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .color-split__left  { min-height: 80vw; }
    .color-split__right { min-height: 70vw; }
    .color-split__blade { display: none; }
    .color-split__label { display: none; }
    .color-split__quote {
        position: static;
        margin: 1.5rem;
        max-width: none;
    }

    .color-split__ghost { font-size: 8rem; }
}