/* --- 🎨 VISUAL IDENTITY & STRUCTURAL RESET --- */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* HERO */
.advanced-identity-stage {
    position: relative;
    padding: 12rem 6% 8rem 6%;
}

.identity-floating-label {
    margin-bottom: 2rem;
}

.identity-floating-label span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--vivid-orange);
}

/* META STRIP */
.identity-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;

    margin-top: 5rem;
}

.identity-meta-item {
    min-width: 180px;
}

.identity-meta-index {
    display: block;

    font-size: 2rem;
    font-weight: 800;

    color: rgba(255,255,255,0.18);

    margin-bottom: 0.75rem;
}

/* GRID SECTION */
.advanced-grid-system {
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    gap: 3rem;

    padding: 6rem 6% 10rem 6%;
}

.identity-editorial-column {
    grid-column: 1 / span 5;
}

.identity-editorial-column h3 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;

    margin-bottom: 2rem;

    text-transform: uppercase;
}

.identity-editorial-column p {
    margin-bottom: 1.8rem;
    line-height: 1.95;
}

.micro-label {
    display: inline-block;

    margin-bottom: 1.5rem;

    color: var(--vivid-orange);

    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.editorial-divider-line {
    width: 120px;
    height: 1px;

    background: rgba(255,255,255,0.12);

    margin-bottom: 2rem;
}

/* IMAGE PANEL */
.identity-large-image-panel {
    grid-column: 7 / span 6;

    position: relative;
    min-height: 720px;

    overflow: hidden;

    border-radius: 24px;
}

.identity-large-image-panel img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: grayscale(1) contrast(1.1) brightness(0.65);

    transition: transform 1.2s ease;
}

.identity-large-image-panel:hover img {
    transform: scale(1.05);
}

.image-overlay-gradient {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.8),
        rgba(0,0,0,0.15)
    );
}

.floating-caption-box {
    position: absolute;

    left: 2rem;
    bottom: 2rem;

    max-width: 420px;

    backdrop-filter: blur(16px);

    background: rgba(0,0,0,0.35);

    padding: 2rem;

    border: 1px solid rgba(255,255,255,0.08);
}

.floating-caption-box span {
    display: block;

    margin-bottom: 1rem;

    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: var(--vivid-orange);
}

/* SHOWCASE */
.identity-layered-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6rem;

    padding: 10rem 6%;

    border-top: 1px solid rgba(255,255,255,0.06);
}

.identity-showcase-left h2 {
    font-size: 3.4rem;
    line-height: 1.05;

    margin: 1rem 0 2rem 0;
}

.identity-showcase-left p {
    margin-bottom: 1.8rem;
    line-height: 1.95;
}

.serif-accent {
    font-family: var(--font-serif);
    font-style: italic;

    color: var(--vivid-orange);

    font-size: 1.6rem;
}

/* STACKED CARDS */
.identity-showcase-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stacked-identity-card {
    padding: 2rem;

    background: rgba(255,255,255,0.03);

    border: 1px solid rgba(255,255,255,0.06);

    transition: 0.4s ease;
}

.stacked-identity-card:hover {
    transform: translateX(10px);

    background: rgba(255,255,255,0.05);
}

.stacked-identity-card span {
    display: block;

    margin-bottom: 1rem;

    color: var(--vivid-orange);

    font-size: 0.8rem;
    letter-spacing: 0.2em;
}

.stacked-identity-card h4 {
    margin-bottom: 1rem;

    font-size: 1.3rem;
}

/* GALLERY */
.identity-horizontal-gallery {
    padding: 10rem 0 12rem 0;

    border-top: 1px solid rgba(255,255,255,0.06);
}

.gallery-intro-block {
    padding: 0 6% 5rem 6%;
}

.gallery-intro-block h2 {
    font-size: 3rem;
    line-height: 1.05;

    margin: 1rem 0 2rem 0;
}

.gallery-intro-block p {
    max-width: 720px;
    line-height: 1.9;
}

.identity-gallery-strip {
    display: flex;
    gap: 2rem;

    overflow-x: auto;

    padding: 0 6%;
}

.identity-gallery-strip::-webkit-scrollbar {
    height: 6px;
}

.identity-gallery-strip::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
}

.gallery-frame {
    min-width: 540px;
    height: 680px;

    overflow: hidden;

    border-radius: 20px;

    flex-shrink: 0;
}

.gallery-frame img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: grayscale(1) brightness(0.72);

    transition: transform 1s ease;
}

.gallery-frame:hover img {
    transform: scale(1.04);
}

/* MOBILE */
@media (max-width: 980px) {

    .advanced-grid-system,
    .identity-layered-showcase {
        grid-template-columns: 1fr;
    }

    .identity-editorial-column,
    .identity-large-image-panel {
        grid-column: auto;
    }

    .identity-large-image-panel {
        min-height: 480px;
    }

    .gallery-frame {
        min-width: 85vw;
        height: 520px;
    }

    .identity-showcase-left h2,
    .gallery-intro-block h2,
    .identity-editorial-column h3 {
        font-size: 2.4rem;
    }

}

        :root {
            --violet-mist: #916DB3;
            --editorial-plum: #331D2C;
            --frost-blue: #CEE6F3;
            --golden-signal: #E7B10A;
            --pure-white: #FFFFFF;
            
            --font-serif: "Lora", serif;
            --font-display: "Syne", sans-serif;
            --transition-fluid: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        html {
            scroll-behavior: smooth;
            background-color: var(--frost-blue);
        }

        body {
            font-family: var(--font-serif);
            color: var(--editorial-plum);
            overflow-x: hidden;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        /* --- 🌐 FIXED FLOATING PANEL HEADER SYSTEM --- */
        .editorial-nav-panel {
            position: fixed;
            top: 2rem;
            right: 2rem;
            left: 2rem;
            z-index: 2000;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            pointer-events: none;
        }

.nav-logo-anchor {
    display: inline-flex;
    align-items: center;
    gap: 1rem;

    font-family: var(--font-display);
    font-weight: 800;

    color: var(--editorial-plum);
    text-decoration: none;

    cursor: pointer;
    pointer-events: auto;


    padding: 0.8rem 1.2rem;

    border: 1px solid rgba(255,255,255,0.08);



    position: relative;
    overflow: hidden;
}

/* subtle glow layer */
.nav-logo-anchor::before {
    content: "";

    position: absolute;
    inset: 0;


    opacity: 0;

    transition: 0.5s ease;
}

.nav-logo-anchor:hover::before {
    opacity: 1;
}

.nav-logo-anchor:hover {
    color: var(--violet-mist);

    transform: translateY(-2px);

    background: rgba(206, 230, 243, 0.55);

    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}

/* logo image */
.nav-logo-image {
    width: 152px;
    height: 152px;

    object-fit: contain;

    flex-shrink: 0;

    transition: var(--transition-fluid);
}

.nav-logo-anchor:hover .nav-logo-image {
    transform: scale(1.05) rotate(-2deg);
}

/* text wrapper */
.nav-logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

/* main title */
.nav-logo-title {
    font-size: 1.45rem;
    font-weight: 800;

    letter-spacing: -0.05em;

    color: inherit;
}

/* subtitle */
.nav-logo-subtitle {
    margin-top: 0.4rem;

    font-size: 0.62rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.22em;

    color: rgba(36, 19, 30, 0.65);
}

/* glass edge */
.nav-logo-anchor::after {
    content: "";

    position: absolute;
    inset: 0;

    border: 1px solid rgba(255,255,255,0.08);

    pointer-events: none;
}

/* mobile */
@media (max-width: 768px) {

    .nav-logo-anchor {
        padding: 0.7rem 1rem;
        gap: 0.8rem;
    }

    .nav-logo-image {
        width: 150px;
        height: 150px;
    }

    .nav-logo-title {
        font-size: 1.15rem;
    }

    .nav-logo-subtitle {
        font-size: 0.52rem;
        letter-spacing: 0.18em;
    }

}
        /* Vertical Navigation Menu Stack */
        .nav-vertical-stack {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.4rem;
            list-style: none;
            pointer-events: auto;
            background: rgba(255, 255, 255, 0.4);
            padding: 1.5rem;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-right: 2px solid var(--editorial-plum);
        }

        .nav-vertical-stack li a {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--editorial-plum);
            text-decoration: none;
            cursor: pointer;
            display: inline-block;
            transition: var(--transition-fluid);
            position: relative;
            padding-bottom: 2px;
        }

        .nav-vertical-stack li a::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 1px;
            background-color: var(--golden-signal);
            transition: var(--transition-fluid);
        }

        /* Hover Interaction Design Physics */
        .nav-vertical-stack li a:hover {
            letter-spacing: 0.22em;
            color: var(--golden-signal);
        }

        .nav-vertical-stack li a:hover::after {
            width: 100%;
            left: 0;
        }

        .nav-vertical-stack li a.active-route {
            color: var(--violet-mist);
            border-bottom: 1px solid var(--violet-mist);
        }

        /* Responsive Navigation Architecture Trigger */
        .mobile-hamburger-trigger {
            display: none;
            background: var(--editorial-plum);
            border: none;
            width: 50px;
            height: 50px;
            pointer-events: auto;
            cursor: pointer;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 6px;
        }

        .mobile-hamburger-trigger span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--frost-blue);
            transition: var(--transition-fluid);
        }

        /* --- APPLICATION MULTIPAGE SIMULATION VIEW ENGINE --- */
        .view-canvas-segment {
            display: none;
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .view-canvas-segment.active-segment {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        /* --- 🏠 VIEW: HOME PAGE ("THE CREATIVE WALL") --- */
        .canvas-hero-wrapper {
            background-color: var(--frost-blue);
            min-height: 140vh;
            position: relative;
            padding: 12rem 4% 4rem 4%;
            overflow: hidden;
        }

        .canvas-label-tiny {
            font-family: var(--font-display);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--violet-mist);
            position: absolute;
            top: 14rem;
            left: 4%;
        }

        /* Massive Disconnected Typography Architecture */
        .hero-disconnected-type-box {
            display: flex;
            flex-direction: column;
            margin-top: 4rem;
            position: relative;
            z-index: 10;
            pointer-events: none;
        }

        .hero-disconnected-type-box h1 {
            font-family: var(--font-display);
            font-weight: 800;
            font-size: clamp(4rem, 14vw, 15rem);
            line-height: 0.8;
            text-transform: uppercase;
            letter-spacing: -0.05em;
            color: var(--editorial-plum);
        }

        .hero-word-1 { align-self: flex-start; margin-left: 2rem; transform: translateY(-20px); }
        .hero-word-2 { align-self: center; color: transparent !important; -webkit-text-stroke: 2px var(--editorial-plum); transform: translateY(10px); }
        .hero-word-3 { align-self: flex-end; margin-right: 6vw; transform: translateY(40px); }

        /* Rotated Vertical Layout Components */
        .hero-rotated-paragraph-block {
            position: absolute;
            right: 2%;
            top: 45%;
            transform: rotate(90deg) translateY(-50%);
            transform-origin: right center;
            width: 380px;
            font-size: 1.05rem;
            text-align: justify;
            color: var(--editorial-plum);
            font-weight: 400;
        }

        /* Layered Image Overlap Beyond Viewport boundaries */
        .hero-asymmetric-cutout-lens {
            position: absolute;
            bottom: -5%;
            left: -5%;
            width: 45vw;
            height: 65vh;
            min-width: 320px;
            overflow: hidden;
            z-index: 5;
            box-shadow: 40px -40px 100px rgba(51, 29, 44, 0.15);
        }

        .hero-asymmetric-cutout-lens img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Floating Golden Signal Node circle */
        .hero-golden-signal-badge {
            position: absolute;
            top: 10rem;
            right: 25vw;
            width: 140px;
            height: 140px;
            background-color: var(--golden-signal);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            text-align: center;
            z-index: 12;
            box-shadow: 0 30px 60px rgba(231, 177, 10, 0.3);
            animation: deliberateDrift 20s infinite ease-in-out alternate;
        }

        .hero-golden-signal-badge span {
            font-family: var(--font-display);
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--editorial-plum);
        }

        @keyframes deliberateDrift {
            0% { transform: translateY(0) scale(1); }
            100% { transform: translateY(-40px) scale(1.05); }
        }

        /* --- SECTION 2: "THE IDEA STREAM" (HORIZONTAL MOTION RAIL) --- */
        .idea-stream-viewport-outer {
            background-color: var(--pure-white);
            width: 100%;
            overflow: hidden;
            position: relative;
            padding: 8rem 0;
            border-top: 1px solid rgba(51, 29, 44, 0.1);
        }

        .idea-stream-rail {
            display: flex;
            width: 350vw; /* Wide track housing fragmented content sheets */
            gap: 10vw;
            padding-left: 10vw;
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .stream-magazine-panel {
            width: 55vw;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 4rem;
            align-items: center;
        }

        .stream-panel-text-block h3 {
            font-family: var(--font-display);
            font-size: clamp(3rem, 6vw, 6.5rem);
            font-weight: 800;
            text-transform: uppercase;
            line-height: 0.9;
            letter-spacing: -0.04em;
            color: var(--editorial-plum);
            margin-bottom: 2rem;
        }

        .stream-panel-text-block p {
            font-size: 1.1rem;
            color: rgba(51, 29, 44, 0.8);
            max-width: 400px;
        }

        .stream-fragmented-media-lens {
            height: 65vh;
            background-color: var(--frost-blue);
            position: relative;
            overflow: hidden;
            border: 1px solid var(--editorial-plum);
        }

        .stream-fragmented-media-lens img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%);
            transition: var(--transition-fluid);
        }

        .stream-magazine-panel:hover .stream-fragmented-media-lens img {
            filter: grayscale(0%);
            transform: scale(1.04);
        }

        /* Interactive Interface track navigation overlay buttons */
        .stream-track-ui-navigation {
            padding: 2rem 4%;
            display: flex;
            gap: 2rem;
            background-color: var(--pure-white);
        }

        .stream-ui-btn {
            background: transparent;
            border: 1px solid var(--editorial-plum);
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            padding: 1rem 2rem;
            cursor: pointer;
            transition: var(--transition-fluid);
        }

        .stream-ui-btn:hover {
            background-color: var(--editorial-plum);
            color: var(--pure-white);
        }

        /* --- SECTION 3: "TYPOGRAPHIC CHAOS" OVERLAP --- */
        .typographic-chaos-canvas {
            background-color: var(--editorial-plum);
            color: var(--frost-blue);
            padding: 14rem 4%;
            position: relative;
            overflow: hidden;
        }

        .chaos-word-installation {
            font-family: var(--font-display);
            font-weight: 800;
            font-size: clamp(5rem, 16vw, 18rem);
            line-height: 0.75;
            text-transform: uppercase;
            letter-spacing: -0.06em;
            opacity: 0.15;
            white-space: nowrap;
            user-select: none;
            margin-bottom: 2rem;
        }

        .chaos-float-narrative-node {
            position: absolute;
            max-width: 320px;
            background: rgba(145, 109, 179, 0.2);
            padding: 2.5rem;
            border-left: 2px solid var(--golden-signal);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 10;
        }

        /* --- SECTION 4: "CAMPAIGN WALL" EXHIBITION --- */
        .campaign-wall-canvas {
            background-color: var(--pure-white);
            padding: 12rem 4%;
        }

        .campaign-wall-title-box {
            margin-bottom: 6rem;
        }

        .campaign-asymmetric-collage-matrix {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            row-gap: 12rem;
            position: relative;
        }

        .collage-poster-card {
            position: relative;
            cursor: pointer;
            transition: var(--transition-fluid);
        }

        .collage-poster-card .poster-lens-wrapper {
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 4;
            overflow: hidden;
            background-color: var(--frost-blue);
            border: 1px solid rgba(51, 29, 44, 0.1);
            transition: var(--transition-fluid);
        }

        .collage-poster-card .poster-lens-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-fluid);
        }

        .collage-poster-card p {
            font-family: var(--font-display);
            font-size: 0.8rem;
            text-transform: uppercase;
            margin-top: 1rem;
            opacity: 0;
            transition: var(--transition-fluid);
            color: var(--editorial-plum);
        }

        /* Irregular spatial placement configs */
        .poster-node-1 { grid-column: 1 / span 5; }
        .poster-node-2 { grid-column: 8 / span 4; transform: translateY(140px); }
        .poster-node-3 { grid-column: 3 / span 4; transform: translateY(40px); }
        .poster-node-4 { grid-column: 8 / span 5; transform: translateY(-60px); }

        /* Interactive Collaging Hover Dynamics */
        .collage-poster-card:hover {
            z-index: 50;
        }

        .collage-poster-card:hover .poster-lens-wrapper {
            transform: scale(1.05);
            box-shadow: 0 40px 80px rgba(145, 109, 179, 0.3);
            border-color: var(--violet-mist);
        }

        .collage-poster-card:hover p {
            opacity: 1;
        }

        /* --- SECTION 5: "THE GOLD THREAD" VERTICAL SPINE --- */
        .gold-thread-container {
            background-color: var(--golden-signal);
            color: var(--editorial-plum);
            padding: 14rem 4%;
            position: relative;
        }

        .gold-central-spine-line {
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 100%;
            background-color: var(--editorial-plum);
            transform: translateX(-50%);
        }

        .gold-thread-module-node {
            width: 40%;
            margin-bottom: 10rem;
            position: relative;
            background: rgba(255, 255, 255, 0.3);
            padding: 3rem;
            border: 1px solid var(--editorial-plum);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .gold-thread-module-node:nth-child(even) {
            margin-left: auto;
            transform: translateX(10%);
        }

        .gold-thread-module-node:nth-child(odd) {
            margin-right: auto;
            transform: translateX(-10%);
        }

        .gold-thread-module-node h4 {
            font-family: var(--font-display);
            font-size: 1.8rem;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        /* --- SECTION 6: "THE MOTION ROOM" DRIFT LAYER --- */
        .motion-room-canvas {
            background-color: var(--editorial-plum);
            min-height: 120vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .motion-room-bg-text-outlined {
            font-family: var(--font-display);
            font-size: clamp(6rem, 24vw, 28rem);
            font-weight: 800;
            text-transform: uppercase;
            color: transparent;
            -webkit-text-stroke: 1px rgba(206, 230, 243, 0.15);
            line-height: 1;
            user-select: none;
            z-index: 1;
        }

        .motion-drifting-lens {
            position: absolute;
            width: 300px;
            height: 400px;
            background-color: var(--violet-mist);
            z-index: 2;
            overflow: hidden;
            opacity: 0.6;
            transition: transform 1.5s ease-out;
        }

        .drift-lens-1 { top: 10%; left: 8%; transform: translate(10px, 20px); }
        .drift-lens-2 { bottom: 15%; right: 12%; transform: translate(-30px, -10px); }

        .motion-drifting-lens img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .motion-foreground-narrative-container {
            position: absolute;
            bottom: 10%;
            left: 6%;
            max-width: 450px;
            color: var(--frost-blue);
            z-index: 5;
        }

        /* --- SECTION 7: EDITORIAL SUBSCRIPTION CANVAS --- */
        .subscription-fragmented-stage {
            background-color: var(--frost-blue);
            padding: 14rem 4%;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 2rem;
            align-items: start;
        }

        .sub-floating-paper-panel-left {
            grid-column: 2 / span 4;
            background-color: var(--pure-white);
            padding: 4rem 3rem;
            border: 1px solid var(--editorial-plum);
            box-shadow: 30px 30px 0px var(--violet-mist);
        }

        .sub-floating-paper-panel-right {
            grid-column: 7 / span 5;
            background-color: var(--pure-white);
            padding: 5rem 4rem;
            border: 1px solid var(--editorial-plum);
            transform: translateY(60px);
        }

        .editorial-line-input-node {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 2px solid var(--editorial-plum);
            padding: 1rem 0.5rem;
            font-family: var(--font-serif);
            font-size: 1.2rem;
            outline: none;
            margin-bottom: 3rem;
            color: var(--editorial-plum);
            transition: var(--transition-fluid);
        }

        .editorial-line-input-node:focus {
            border-bottom-color: var(--violet-mist);
            padding-left: 1rem;
        }

        .detached-action-trigger-btn {
            background-color: var(--violet-mist);
            color: var(--pure-white);
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            padding: 1.2rem 3rem;
            border: none;
            cursor: pointer;
            transition: var(--transition-fluid);
        }

        .detached-action-trigger-btn:hover {
            background-color: var(--golden-signal);
            color: var(--editorial-plum);
            transform: translateY(-5px);
        }

        /* --- 🌐 SCATTERED ASYMMETRIC GLOBAL FOOTER --- */
        .asymmetric-scattered-footer {
            background-color: var(--editorial-plum);
            color: var(--frost-blue);
            padding: 8rem 4% 4rem 4%;
            position: relative;
        }

        .footer-asymmetric-positional-grid {
            min-height: 40vh;
            position: relative;
        }

        .footer-scattered-node {
            position: absolute;
        }

        .f-node-1 { top: 0; left: 0; max-width: 400px; }
        .f-node-2 { top: 2rem; left: 45%; }
        .f-node-3 { top: 8rem; right: 5%; }
        .f-node-4 { bottom: 2rem; left: 30%; }

        .footer-scattered-node h5 {
            font-family: var(--font-display);
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.2em;
            color: var(--golden-signal);
            margin-bottom: 1rem;
        }

        .footer-scattered-node ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .footer-scattered-node ul li a {
            color: var(--frost-blue);
            text-decoration: none;
            font-size: 0.95rem;
            cursor: pointer;
            transition: var(--transition-fluid);
        }

        .footer-scattered-node ul li a:hover {
            color: var(--golden-signal);
            padding-left: 8px;
        }

        .footer-regulatory-strip {
            margin-top: 8rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(206, 230, 243, 0.1);
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: rgba(206, 230, 243, 0.5);
            flex-wrap: wrap;
            gap: 1.5rem;
        }

        /* --- 📄 SEPARATE PAGES: INTERNAL ULTRA EDITORIAL CORE LAYOUTS --- */
        .interior-magazine-hero-stage {
            background-color: var(--editorial-plum);
            color: var(--frost-blue);
            padding: 16rem 4% 8rem 4%;
            position: relative;
        }

        .interior-massive-header-wall {
            font-family: var(--font-display);
            font-weight: 800;
            font-size: clamp(3.5rem, 10vw, 11rem);
            line-height: 0.85;
            text-transform: uppercase;
            letter-spacing: -0.04em;
            margin-bottom: 6rem;
        }

        .interior-fragmented-composite-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 2rem;
            padding: 8rem 4%;
            background-color: var(--pure-white);
        }

        /* --- 📄 REGULATORY CONTEXT ENCLAVE SYSTEM --- */
        .regulatory-modal-curtain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(51, 29, 44, 0.98);
            z-index: 5000;
            display: none;
            overflow-y: auto;
            padding: 6rem 4%;
        }

        .regulatory-paper-document {
            max-width: 800px;
            margin: 0 auto;
            background-color: var(--frost-blue);
            padding: 4rem;
            border: 2px solid var(--editorial-plum);
            color: var(--editorial-plum);
            position: relative;
        }

        .regulatory-document-close-btn {
            position: absolute;
            top: 2rem;
            right: 2rem;
            background: var(--editorial-plum);
            color: var(--frost-blue);
            border: none;
            padding: 0.5rem 1rem;
            font-family: var(--font-display);
            font-size: 0.75rem;
            cursor: pointer;
            text-transform: uppercase;
        }

        /* --- 🧠 METRIC GRAPHIC RESPONSIVE ADAPTATION ENGINE --- */
        @media (max-width: 1100px) {
            .nav-vertical-stack {
                display: none;
            }
            
            .nav-vertical-stack.mobile-open-state {
                display: flex;
                position: fixed;
                top: 6rem;
                right: 2rem;
                left: 2rem;
                background: var(--pure-white);
                border: 1px solid var(--editorial-plum);
                align-items: center;
                padding: 3rem;
                z-index: 2500;
            }

            .mobile-hamburger-trigger {
                display: flex;
            }

            .stream-magazine-panel {
                width: 80vw;
                grid-template-columns: 1fr;
            }

            .idea-stream-rail {
                width: 500vw;
            }

            .campaign-asymmetric-collage-matrix {
                grid-template-columns: 1fr;
                row-gap: 6rem;
            }

            .collage-poster-card {
                grid-column: auto !important;
                transform: none !important;
            }

            .gold-thread-module-node {
                width: 90% !important;
                transform: none !important;
                margin: 0 auto 4rem auto !important;
            }

            .gold-central-spine-line {
                left: 4%;
            }

            .subscription-fragmented-stage {
                grid-template-columns: 1fr;
            }

            .sub-floating-paper-panel-left,
            .sub-floating-paper-panel-right {
                grid-column: auto;
                transform: none;
                margin-bottom: 2rem;
            }

            .footer-asymmetric-positional-grid {
                display: flex;
                flex-direction: column;
                gap: 4rem;
            }

            .footer-scattered-node {
                position: static !important;
            }
        }
        /* Scrollable text panel */
.scrollable-panel-text {
    position: relative;
    height: 420px;
    overflow-y: auto;
    padding-right: 1rem;

    scrollbar-width: thin;
    scrollbar-color: rgb(240, 9, 9) transparent;
}

/* Webkit scrollbar */
.scrollable-panel-text::-webkit-scrollbar {
    width: 6px;
}


.scrollable-panel-text::-webkit-scrollbar-thumb {
    background: rgba(255, 37, 37, 0.617);
    border-radius: 20px;
}

.scrollable-panel-text::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 0, 0, 0.4);
}

.scrollable-inner-content {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.scrollable-inner-content h3 {
    position: sticky;
    top: 0;

    background: rgb(210, 31, 31);
    backdrop-filter: blur(10px);

    padding-bottom: 1rem;
    margin-bottom: 0.5rem;

    z-index: 3;
}

.scrollable-inner-content p {
    line-height: 1.9;
    color: rgba(255, 41, 41, 0.946);
}

/* Optional cinematic fade effect */
.scrollable-panel-text::after {
    content: "";

    position: sticky;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 80px;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0)
    );

    pointer-events: none;
}

/* Mobile optimization */
@media (max-width: 768px) {

    .scrollable-panel-text {
        height: 320px;
    }

    .scrollable-inner-content p {
        font-size: 0.95rem;
        line-height: 1.8;
    }

}

/* HERO */
.campaigns-hero-stage {
    position: relative;
    padding: 12rem 6% 8rem 6%;
}

.campaigns-floating-index span {
    display: inline-block;

    margin-bottom: 2rem;

    color: rgba(255,255,255,0.8);

    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

/* META RIBBON */
.campaigns-meta-ribbon {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;

    margin-top: 5rem;
}

.campaign-meta-unit span {
    display: block;

    margin-bottom: 0.75rem;

    font-size: 2rem;
    font-weight: 800;

    color: rgba(255,255,255,0.2);
}

.campaign-meta-unit p {
    color: rgba(255,255,255,0.82);
}

/* MAIN STAGE */
.campaign-editorial-stage {
    padding: 10rem 6%;
}

.campaign-editorial-card {
    grid-column: 2 / span 10;

    background: var(--pure-white);

    padding: 6rem;

    border: 1px solid rgba(0,0,0,0.08);

    box-shadow: 0 40px 120px rgba(0,0,0,0.08);
}

.campaign-micro-label {
    display: inline-block;

    margin-bottom: 1.5rem;

    color: var(--editorial-plum);

    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.campaign-editorial-card h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 3.2rem;

    line-height: 1;
    text-transform: uppercase;

    margin-bottom: 2rem;

    color: var(--luxury-black);
}

.campaign-divider-line {
    width: 120px;
    height: 1px;

    background: rgba(0,0,0,0.1);

    margin-bottom: 2rem;
}

.campaign-editorial-card p {
    color: rgba(0,0,0,0.78);

    line-height: 1.95;

    margin-bottom: 1.8rem;

    font-size: 1.05rem;
}

/* FEATURE GRID */
.campaign-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 2rem;

    margin-top: 5rem;
    margin-bottom: 5rem;
}

.campaign-feature-block {
    padding: 2rem;

    background: rgba(0,0,0,0.025);

    border: 1px solid rgba(0,0,0,0.05);
}

.campaign-feature-block span {
    display: block;

    margin-bottom: 1rem;

    color: var(--editorial-plum);

    font-size: 0.8rem;
    letter-spacing: 0.2em;
}

.campaign-feature-block h4 {
    margin-bottom: 1rem;

    font-size: 1.3rem;

    color: var(--luxury-black);
}

/* MEDIA FRAME */
.campaign-large-media-frame {
    position: relative;

    width: 100%;
    height: 520px;

    overflow: hidden;

    margin-top: 3rem;
}

.campaign-large-media-frame img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: grayscale(1) contrast(1.05) brightness(0.7);

    transition: transform 1.2s ease;
}

.campaign-large-media-frame:hover img {
    transform: scale(1.04);
}

.campaign-media-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.78),
        rgba(0,0,0,0.15)
    );
}

.campaign-floating-caption {
    position: absolute;

    left: 2rem;
    bottom: 2rem;

    max-width: 420px;

    padding: 2rem;

    backdrop-filter: blur(14px);

    background: rgba(0,0,0,0.28);

    border: 1px solid rgba(255,255,255,0.08);
}

.campaign-floating-caption span {
    display: block;

    margin-bottom: 1rem;

    color: var(--frost-blue);

    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.campaign-floating-caption p {
    color: rgba(255,255,255,0.85);

    margin: 0;
}

/* SECONDARY SECTION */
.campaigns-secondary-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6rem;

    padding: 10rem 6%;

    background: var(--luxury-black);

    border-top: 1px solid rgba(255,255,255,0.05);
}

.campaign-serif-accent {
    font-family: var(--font-serif);
    font-style: italic;

    color: var(--vivid-orange);

    font-size: 1.5rem;
}

.campaigns-secondary-left h2 {
    font-size: 3.2rem;
    line-height: 1.05;

    margin: 1rem 0 2rem 0;
}

.campaigns-secondary-left p {
    line-height: 1.95;

    margin-bottom: 1.8rem;

    color: rgba(255,255,255,0.78);
}

/* STACKED CARDS */
.campaigns-secondary-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.campaign-stack-card {
    padding: 2rem;

    background: rgba(255,255,255,0.03);

    border: 1px solid rgba(255,255,255,0.06);

    transition: 0.4s ease;
}

.campaign-stack-card:hover {
    transform: translateX(10px);

    background: rgba(255,255,255,0.05);
}

.campaign-stack-card span {
    display: block;

    margin-bottom: 1rem;

    color: var(--vivid-orange);

    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.campaign-stack-card h4 {
    margin-bottom: 1rem;

    font-size: 1.3rem;
}

/* GALLERY */
.campaign-horizontal-gallery {
    padding: 10rem 0 12rem 0;

    background: var(--luxury-black);

    border-top: 1px solid rgba(255,255,255,0.05);
}

.campaign-gallery-heading {
    padding: 0 6% 5rem 6%;
}

.campaign-gallery-heading h2 {
    font-size: 3rem;
    line-height: 1.05;

    margin: 1rem 0 2rem 0;
}

.campaign-gallery-heading p {
    max-width: 700px;

    line-height: 1.9;

    color: rgba(255,255,255,0.76);
}

.campaign-gallery-scroll {
    display: flex;
    gap: 2rem;

    overflow-x: auto;

    padding: 0 6%;
}

.campaign-gallery-scroll::-webkit-scrollbar {
    height: 6px;
}

.campaign-gallery-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
}

.campaign-gallery-panel {
    min-width: 560px;
    height: 700px;

    overflow: hidden;

    flex-shrink: 0;
}

.campaign-gallery-panel img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: grayscale(1) brightness(0.72);

    transition: transform 1s ease;
}

.campaign-gallery-panel:hover img {
    transform: scale(1.05);
}

/* MOBILE */
@media (max-width: 980px) {

    .campaign-editorial-card {
        grid-column: 1 / -1;

        padding: 3rem 2rem;
    }

    .campaign-feature-grid,
    .campaigns-secondary-stage {
        grid-template-columns: 1fr;
    }

    .campaign-gallery-panel {
        min-width: 85vw;
        height: 520px;
    }

    .campaign-editorial-card h3,
    .campaigns-secondary-left h2,
    .campaign-gallery-heading h2 {
        font-size: 2.4rem;
    }

}

/* HERO */
.strategy-hero-stage {
    position: relative;
    padding: 12rem 6% 8rem 6%;
}

.strategy-floating-index span {
    display: inline-block;

    margin-bottom: 2rem;

    color: rgba(255,255,255,0.75);

    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

/* META RIBBON */
.strategy-meta-ribbon {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;

    margin-top: 5rem;
}

.strategy-meta-unit span {
    display: block;

    margin-bottom: 0.75rem;

    font-size: 2rem;
    font-weight: 800;

    color: rgba(255,255,255,0.15);
}

.strategy-meta-unit p {
    color: rgba(255,255,255,0.82);
}

/* MAIN GRID */
.strategy-intelligence-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);

    gap: 4rem;

    padding: 10rem 6%;
}

/* METRIC COLUMN */
.strategy-metric-column {
    grid-column: 1 / span 4;

    border-top: 2px solid var(--editorial-plum);

    padding-top: 2rem;
}

.strategy-micro-label {
    display: inline-block;

    margin-bottom: 1.5rem;

    color: var(--editorial-plum);

    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.strategy-metric-number {
    font-family: var(--font-display);
    font-size: 5.5rem;
    font-weight: 800;

    line-height: 0.95;

    color: var(--violet-mist);

    margin-bottom: 1rem;
}

.strategy-metric-title {
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;

    color: rgba(92, 208, 25, 0.78);

    margin-bottom: 2rem;
}

.strategy-divider-line {
    width: 120px;
    height: 1px;

    background: rgba(255,255,255,0.12);

    margin-bottom: 2rem;
}

.strategy-metric-column p {
    line-height: 1.9;

    color: rgba(227, 15, 15, 0.72);
}

/* MINI STATS */
.strategy-mini-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    margin-top: 4rem;
}

.mini-stat-block {
    padding: 1.5rem;

    background: rgba(255,255,255,0.03);

    border: 1px solid rgba(255,255,255,0.05);
}

.mini-stat-block span {
    display: block;

    margin-bottom: 0.5rem;

    color: var(--golden-signal);

    font-size: 2rem;
    font-weight: 700;
}

.mini-stat-block p {
    margin: 0;

    color: aqua;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* EDITORIAL COLUMN */
.strategy-editorial-column {
    grid-column: 7 / span 5;
}

.strategy-editorial-column h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 3rem;

    line-height: 1;
    text-transform: uppercase;

    margin-bottom: 2rem;
}

.strategy-editorial-column p {
    line-height: 1.95;

    margin-bottom: 1.8rem;

    color: rgba(255, 43, 43, 0.76);
}

/* SECONDARY STAGE */
.strategy-secondary-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6rem;

    padding: 10rem 6%;

    border-top: 1px solid rgba(255,255,255,0.05);
}

.strategy-serif-accent {
    font-family: var(--font-serif);
    font-style: italic;

    color: var(--golden-signal);

    font-size: 1.6rem;
}

.strategy-secondary-left h2 {
    font-size: 3.2rem;
    line-height: 1.05;

    margin: 1rem 0 2rem 0;
}

.strategy-secondary-left p {
    line-height: 1.95;

    margin-bottom: 1.8rem;

    color: rgba(255,255,255,0.76);
}

/* STACK CARDS */
.strategy-secondary-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.strategy-stack-card {
    padding: 2rem;

    background: rgba(255,255,255,0.03);

    border: 1px solid rgba(255,255,255,0.06);

    transition: 0.4s ease;
}

.strategy-stack-card:hover {
    transform: translateX(10px);

    background: rgba(255,255,255,0.05);
}

.strategy-stack-card span {
    display: block;

    margin-bottom: 1rem;

    color: var(--golden-signal);

    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.strategy-stack-card h4 {
    margin-bottom: 1rem;

    font-size: 1.3rem;
}

/* SHOWCASE */
.strategy-visual-showcase {
    padding: 10rem 0 12rem 0;

    border-top: 1px solid rgba(255,255,255,0.05);
}

.strategy-showcase-heading {
    padding: 0 6% 5rem 6%;
}

.strategy-showcase-heading h2 {
    font-size: 3rem;
    line-height: 1.05;

    margin: 1rem 0 2rem 0;
}

.strategy-showcase-heading p {
    max-width: 720px;

    line-height: 1.9;

    color: rgba(255,255,255,0.74);
}

/* GALLERY */
.strategy-gallery-scroll {
    display: flex;
    gap: 2rem;

    overflow-x: auto;

    padding: 0 6%;
}

.strategy-gallery-scroll::-webkit-scrollbar {
    height: 6px;
}

.strategy-gallery-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
}

.strategy-gallery-panel {
    min-width: 560px;
    height: 700px;

    overflow: hidden;

    flex-shrink: 0;
}

.strategy-gallery-panel img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: grayscale(1) brightness(0.7);

    transition: transform 1s ease;
}

.strategy-gallery-panel:hover img {
    transform: scale(1.05);
}

/* MOBILE */
@media (max-width: 980px) {

    .strategy-intelligence-grid,
    .strategy-secondary-stage {
        grid-template-columns: 1fr;
    }

    .strategy-metric-column,
    .strategy-editorial-column {
        grid-column: auto;
    }

    .strategy-gallery-panel {
        min-width: 85vw;
        height: 520px;
    }

    .strategy-editorial-column h3,
    .strategy-secondary-left h2,
    .strategy-showcase-heading h2 {
        font-size: 2.3rem;
    }

    .strategy-metric-number {
        font-size: 4rem;
    }

}