/* ============================================================
   NCDE Gateway 2.0.1 — Enterprise Hero Experience
   ============================================================ */

:root {
    --gateway-gold: #d8b13e;
    --gateway-gold-soft: #f0d36b;
    --gateway-emerald: #053c30;
    --gateway-emerald-deep: #03271f;
    --gateway-glass: rgba(4, 47, 37, 0.34);
}

.gateway-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: linear-gradient(180deg, rgba(3, 48, 37, .96), rgba(3, 40, 31, .92));
    border-bottom: 1px solid rgba(216, 177, 62, .2);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.gateway-header .header-inner { min-height: 98px; height: auto; }
.gateway-header .brand img { width: 62px; height: 62px; }
.gateway-header .brand-text span { font-size: clamp(21px, 2.4vw, 30px); }
.gateway-header .brand-text small { letter-spacing: 3.5px; }

.gateway-menu-toggle {
    overflow: hidden;
    isolation: isolate;
}

.gateway-menu-toggle::after {
    content: "";
    position: absolute;
    inset: -55%;
    z-index: -1;
    background: conic-gradient(from 90deg, transparent 0 72%, rgba(240, 211, 107, .32), transparent 90%);
    animation: gatewayMenuHalo 7s linear infinite;
}

.menu-lines {
    width: 24px;
    height: 20px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

.menu-lines i {
    width: 100%;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: var(--gateway-gold-soft);
    box-shadow: 0 0 10px rgba(216, 177, 62, .34);
    transition: transform .25s ease, opacity .2s ease, width .25s ease;
}

.gateway-menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.gateway-menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(2) { opacity: 0; width: 0; }
.gateway-menu-toggle[aria-expanded="true"] .menu-lines i:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.gateway-hero {
    min-height: calc(100svh - 98px);
    background-image: url('/assets/img/hero-mangrove-morning.jpg');
    background-position: center 46%;
    background-size: cover;
    background-attachment: scroll;
}

.gateway-hero .hero-overlay {
    background:
        radial-gradient(circle at 75% 17%, rgba(238, 205, 105, .16), transparent 26%),
        radial-gradient(circle at 52% 82%, rgba(14, 129, 113, .13), transparent 38%),
        linear-gradient(90deg, rgba(2, 24, 20, .84) 0%, rgba(2, 35, 29, .56) 54%, rgba(3, 38, 48, .28) 100%);
}

.hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8, 61, 62, .05), transparent 35%, rgba(2, 22, 18, .22)),
        radial-gradient(ellipse at 50% 102%, rgba(6, 72, 57, .36), transparent 50%);
}

.gateway-hero .hero-content {
    max-width: 1100px;
    padding: clamp(58px, 8vh, 104px) 0 clamp(74px, 10vh, 120px);
}

.gateway-hero .hero-label {
    margin-bottom: 24px;
    border-color: rgba(240, 211, 107, .36);
    background: rgba(3, 40, 31, .3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 35px rgba(0,0,0,.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.gateway-hero h1 {
    max-width: 1020px;
    margin-bottom: 26px;
    font-size: clamp(44px, 6.3vw, 76px);
    line-height: .99;
    letter-spacing: -2.5px;
    text-wrap: balance;
}

.gateway-hero h1 span {
    color: #f0d36b;
    text-shadow: 0 8px 28px rgba(0,0,0,.25), 0 0 34px rgba(216,177,62,.12);
}

.gateway-hero p {
    max-width: 760px;
    margin-bottom: 34px;
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.55;
    color: rgba(255,255,255,.9);
    text-wrap: pretty;
}

.hero-action-grid {
    width: min(940px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.gateway-action-card {
    position: relative;
    min-height: 116px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 18px 20px;
    border: 1px solid rgba(240, 211, 107, .32);
    border-radius: 24px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(10, 75, 60, .48), rgba(2, 33, 28, .28));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        0 20px 44px rgba(0,0,0,.2);
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    overflow: hidden;
    transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.gateway-action-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 10%, rgba(255,255,255,.12) 40%, transparent 64%);
    transform: translateX(-115%);
    transition: transform .75s ease;
    pointer-events: none;
}

.gateway-action-card:hover,
.gateway-action-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(240,211,107,.66);
    background: linear-gradient(145deg, rgba(11, 88, 69, .58), rgba(3, 39, 33, .34));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 55px rgba(0,0,0,.27), 0 0 30px rgba(216,177,62,.08);
    outline: none;
}

.gateway-action-card:hover::before,
.gateway-action-card:focus-visible::before { transform: translateX(115%); }

.gateway-action-primary {
    background: linear-gradient(145deg, rgba(14, 91, 70, .58), rgba(3, 42, 34, .32));
}

.gateway-action-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(240,211,107,.38);
    border-radius: 17px;
    background: rgba(3, 42, 34, .36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 26px rgba(216,177,62,.08);
}

.gateway-action-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--gateway-gold-soft);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gateway-action-copy { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.gateway-action-copy strong { font-size: 17px; line-height: 1.2; letter-spacing: .2px; }
.gateway-action-copy small { color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.4; }

.gateway-action-arrow {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(240,211,107,.34);
    border-radius: 50%;
    color: var(--gateway-gold-soft);
    font: 600 23px/1 Georgia, serif;
    box-shadow: 0 0 0 0 rgba(216,177,62,.16);
    animation: gatewayArrowBreath 2.8s ease-in-out infinite;
}

.hero-trust-line {
    margin-top: 26px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: rgba(255,255,255,.64);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.hero-trust-line i { width: 4px; height: 4px; border-radius: 50%; background: var(--gateway-gold); box-shadow: 0 0 10px rgba(216,177,62,.52); }

@keyframes gatewayArrowBreath {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(216,177,62,.14); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(216,177,62,0), 0 0 18px rgba(216,177,62,.16); }
}

@keyframes gatewayMenuHalo { to { transform: rotate(1turn); } }

@media (max-width: 900px) {
    .gateway-header .header-inner { min-height: 84px; }
    .gateway-header .brand img { width: 54px; height: 54px; }
    .gateway-header .brand-text span { font-size: clamp(19px, 5vw, 27px); letter-spacing: 1.5px; }
    .gateway-header .brand-text small { font-size: 9px; letter-spacing: 2.5px; margin-top: 6px; }

    .gateway-hero { min-height: calc(100svh - 84px); background-position: 62% center; }
    .gateway-hero .hero-content { padding-top: 46px; padding-bottom: 116px; }
    .gateway-hero h1 { font-size: clamp(43px, 10vw, 60px); line-height: 1.02; letter-spacing: -1.8px; }
    .gateway-hero p { font-size: 18px; line-height: 1.55; max-width: 650px; }
    .hero-action-grid { grid-template-columns: 1fr; max-width: 650px; }
    .gateway-action-card { min-height: 104px; }
}

@media (max-width: 560px) {
    .gateway-header .container { width: 90%; }
    .gateway-header .brand { gap: 9px; }
    .gateway-header .brand img { width: 47px; height: 47px; }
    .gateway-header .brand-text span { font-size: 17px; letter-spacing: 1.15px; }
    .gateway-header .brand-text small { font-size: 7.5px; letter-spacing: 1.7px; }
    .gateway-menu-toggle { width: 48px; height: 48px; border-radius: 17px; flex-shrink: 0; }

    .gateway-hero { background-position: 66% center; }
    .gateway-hero .hero-overlay {
        background:
            linear-gradient(180deg, rgba(2, 26, 22, .56), rgba(2, 25, 21, .64) 46%, rgba(2, 22, 18, .82)),
            linear-gradient(90deg, rgba(2, 25, 21, .69), rgba(2, 38, 42, .24));
    }
    .gateway-hero .hero-content { width: 88%; padding-top: 40px; padding-bottom: 126px; }
    .gateway-hero .hero-label { margin-bottom: 18px; padding: 9px 13px; font-size: 9.5px; letter-spacing: 1.7px; }
    .gateway-hero h1 { margin-bottom: 22px; font-size: clamp(39px, 11.4vw, 52px); line-height: 1.035; letter-spacing: -1.45px; }
    .gateway-hero p { margin-bottom: 28px; font-size: 17px; line-height: 1.52; }

    .gateway-action-card {
        min-height: 96px;
        grid-template-columns: 44px minmax(0, 1fr) 30px;
        gap: 11px;
        padding: 15px 14px;
        border-radius: 21px;
    }
    .gateway-action-icon { width: 44px; height: 44px; border-radius: 15px; }
    .gateway-action-icon svg { width: 23px; height: 23px; }
    .gateway-action-copy strong { font-size: 15.5px; }
    .gateway-action-copy small { font-size: 11.5px; }
    .gateway-action-arrow { width: 30px; height: 30px; font-size: 20px; }
    .hero-trust-line { margin-top: 20px; gap: 8px; font-size: 8.5px; letter-spacing: 1.1px; }
}

@media (prefers-reduced-motion: reduce) {
    .gateway-menu-toggle::after,
    .gateway-action-arrow { animation: none !important; }
}
.gateway-action-card.is-pressed { transform: translateY(-1px) scale(.985); }
@media (max-width: 900px) {
    .gateway-menu-toggle .menu-lines::before,
    .gateway-menu-toggle .menu-lines::after { display: none !important; content: none !important; }
}

/* ============================================================
   Sprint 2.3 — Portal 1.6.3 + Standalone Editorial Homepage
   ============================================================ */
html { scroll-behavior: smooth; }
body.is-portal-active { overflow: hidden; }
.site-after-gateway { position: relative; z-index: 1; }
.gateway-header { position: sticky; top: 0; }
.gateway-hero--editorial {
    position: relative;
    isolation: isolate;
    min-height: max(760px, calc(100svh - 98px));
    overflow: clip;
}
.gateway-hero--editorial .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    padding-top: clamp(68px, 10vh, 118px);
    padding-bottom: clamp(110px, 16vh, 180px);
    transform: translate3d(0, calc(var(--hero-scroll, 0) * -70px), 0);
    opacity: calc(1 - (var(--hero-scroll, 0) * .88));
    transition: opacity .08s linear;
    will-change: transform, opacity;
}
.gateway-hero--editorial h1 {
    max-width: 900px;
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.02;
    letter-spacing: -1.9px;
}
.hero-title-line { display: block; }
.hero-title-we {
    margin-bottom: .2em;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .54em;
    font-weight: 400;
    font-style: italic;
    letter-spacing: .02em;
    color: rgba(255,255,255,.84) !important;
}
.hero-title-bronze { color: #d8b46a !important; }
.hero-title-silver { color: #e8ece9 !important; }
.hero-title-gold { color: #f0d36b !important; }
.editorial-reveal {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(18px);
    transition:
        opacity 1.05s cubic-bezier(.2,.7,.2,1),
        filter 1.05s cubic-bezier(.2,.7,.2,1),
        transform 1.05s cubic-bezier(.2,.7,.2,1);
}
.gateway-hero--editorial.is-entered .editorial-reveal {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}
.gateway-hero--editorial.is-entered [data-reveal-order="0"] { transition-delay: .12s; }
.gateway-hero--editorial.is-entered [data-reveal-order="1"] { transition-delay: .55s; }
.gateway-hero--editorial.is-entered [data-reveal-order="2"] { transition-delay: 1.05s; }
.gateway-hero--editorial.is-entered [data-reveal-order="3"] { transition-delay: 1.65s; }
.gateway-hero--editorial.is-entered [data-reveal-order="4"] { transition-delay: 2.25s; }
.gateway-hero--editorial.is-entered [data-reveal-order="5"] { transition-delay: 3.05s; }
.gateway-hero--editorial.is-entered [data-reveal-order="6"] { transition-delay: 3.85s; }
.gateway-hero--editorial.is-entered [data-reveal-order="7"] { transition-delay: 4.35s; }

@media (max-width: 900px) {
    .gateway-hero--editorial { min-height: max(780px, calc(100svh - 84px)); }
    .gateway-hero--editorial .hero-content { padding-top: 54px; padding-bottom: 145px; }
    .gateway-hero--editorial h1 { font-size: clamp(36px, 9vw, 50px); letter-spacing: -1.3px; }
}
@media (max-width: 560px) {
    .gateway-hero--editorial { min-height: max(820px, calc(100svh - 84px)); }
    .gateway-hero--editorial .hero-content { width: 88%; padding-top: 46px; padding-bottom: 150px; }
    .gateway-hero--editorial h1 { font-size: clamp(34px, 10vw, 46px); }
    .hero-title-we { font-size: .58em; }
}
@media (prefers-reduced-motion: reduce) {
    .editorial-reveal { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
    .gateway-hero--editorial .hero-content { transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   Sprint 2.4 — Cinematic Storytelling Foundation
   Fixed header mask, sticky narrative, pixel transitions,
   and premium enterprise navigation.
   ============================================================ */
:root {
    --ncde-header-height: 98px;
    --ncde-deep: #03261f;
    --ncde-deeper: #011a16;
    --ncde-gold: #d9b657;
    --ncde-gold-soft: #f0d989;
}

body.is-portal-active { overflow: hidden; }
.site-after-gateway { position: relative; z-index: 1; }

.gateway-header {
    position: fixed !important;
    inset: 0 0 auto;
    z-index: 900;
    background: linear-gradient(180deg, rgba(3,55,43,.98), rgba(3,47,37,.96));
    box-shadow: 0 1px 0 rgba(226,194,101,.22), 0 18px 45px rgba(0,0,0,.16);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.gateway-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -38px;
    height: 38px;
    background: linear-gradient(180deg, rgba(2,29,24,.32), transparent);
    pointer-events: none;
}
.gateway-header .header-inner { min-height: var(--ncde-header-height); }

#main-content { padding-top: var(--ncde-header-height); }

/* Hero becomes a tall scroll scene. The content remains framed while its
   inner narrative travels upward and is clipped by the fixed header. */
.gateway-hero--editorial {
    min-height: 185svh !important;
    overflow: visible !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: 62% center !important;
}
.gateway-hero--editorial::before {
    content: "";
    position: fixed;
    inset: var(--ncde-header-height) 0 0;
    z-index: -3;
    background: inherit;
    background-position: 62% center;
    background-size: cover;
    pointer-events: none;
}
.gateway-hero--editorial .hero-overlay,
.gateway-hero--editorial .hero-atmosphere {
    position: fixed;
    top: var(--ncde-header-height);
    left: 0; right: 0; bottom: 0;
    pointer-events: none;
}
.gateway-hero--editorial .hero-content {
    position: sticky !important;
    top: var(--ncde-header-height);
    min-height: calc(100svh - var(--ncde-header-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(48px, 8vh, 94px) !important;
    padding-bottom: clamp(82px, 12vh, 130px) !important;
    transform: translate3d(0, calc(var(--hero-scroll, 0) * -52vh), 0) !important;
    opacity: calc(1 - (var(--hero-scroll, 0) * .80)) !important;
    will-change: transform, opacity;
}
.gateway-hero--editorial h1 { max-width: 950px; }

/* Premium hamburger system */
.gateway-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 910;
    background: rgba(0,16,13,.68);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .42s ease, visibility .42s ease;
}
.gateway-menu-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 920;
    width: min(520px, 92vw);
    padding: 30px clamp(24px, 5vw, 54px) 28px;
    color: #f7f1dc;
    background:
        radial-gradient(circle at 90% 8%, rgba(221,181,78,.16), transparent 34%),
        linear-gradient(150deg, rgba(7,66,51,.98), rgba(1,29,24,.99));
    border-left: 1px solid rgba(226,194,101,.32);
    box-shadow: -30px 0 80px rgba(0,0,0,.42);
    transform: translate3d(105%,0,0);
    visibility: hidden;
    transition: transform .58s cubic-bezier(.22,.84,.22,1), visibility .58s ease;
    overflow-y: auto;
}
body.is-menu-open { overflow: hidden; }
body.is-menu-open .gateway-menu-backdrop { opacity: 1; visibility: visible; }
body.is-menu-open .gateway-menu-panel { transform: translate3d(0,0,0); visibility: visible; }
.gateway-menu-panel__top { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.gateway-menu-kicker { color: var(--ncde-gold-soft); font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.gateway-menu-close {
    width:48px; height:48px; border-radius:50%; border:1px solid rgba(236,207,126,.42);
    color:#f7e7b5; background:rgba(255,255,255,.045); font-size:31px; font-weight:200;
    cursor:pointer; transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.gateway-menu-close:hover,.gateway-menu-close:focus-visible { transform:rotate(90deg); background:rgba(217,182,87,.12); border-color:rgba(236,207,126,.8); outline:none; }
.gateway-menu-intro { margin:42px 0 34px; padding-bottom:28px; border-bottom:1px solid rgba(236,207,126,.18); }
.gateway-menu-intro span { display:block; margin-bottom:10px; color:rgba(240,217,137,.72); font:italic 18px/1.2 Georgia,serif; }
.gateway-menu-intro strong { display:block; max-width:390px; font-size:clamp(24px,4vw,36px); line-height:1.18; letter-spacing:-.025em; }
.gateway-menu-links { display:grid; gap:4px; }
.gateway-menu-links a {
    display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:15px; padding:17px 5px;
    color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.08);
    transition:transform .25s ease, color .25s ease, border-color .25s ease;
}
.gateway-menu-links a span { grid-row:1/3; color:var(--ncde-gold); font-size:10px; font-weight:800; letter-spacing:.16em; padding-top:5px; }
.gateway-menu-links a strong { font-size:19px; line-height:1.2; }
.gateway-menu-links a small { margin-top:5px; color:rgba(255,255,255,.55); font-size:12px; }
.gateway-menu-links a:hover,.gateway-menu-links a:focus-visible { transform:translateX(8px); color:var(--ncde-gold-soft); border-color:rgba(236,207,126,.35); outline:none; }
.gateway-menu-ecosystem { margin-top:34px; }
.gateway-menu-ecosystem p { margin:0 0 12px; color:rgba(240,217,137,.65); font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.gateway-menu-ecosystem > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gateway-menu-ecosystem a { display:flex; justify-content:space-between; gap:10px; padding:15px 16px; color:#fff; text-decoration:none; border:1px solid rgba(236,207,126,.25); border-radius:16px; background:rgba(255,255,255,.035); }
.gateway-menu-ecosystem a:hover,.gateway-menu-ecosystem a:focus-visible { border-color:rgba(236,207,126,.62); background:rgba(217,182,87,.09); outline:none; }
.gateway-menu-footer { margin-top:38px; color:rgba(255,255,255,.72); }
.gateway-menu-footer span { display:block; font-family:Georgia,serif; font-size:16px; }
.gateway-menu-footer small { display:block; margin-top:7px; color:rgba(240,217,137,.58); font-size:11px; letter-spacing:.08em; }
.gateway-menu-toggle.is-active .menu-lines i:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.gateway-menu-toggle.is-active .menu-lines i:nth-child(2){ opacity:0; }
.gateway-menu-toggle.is-active .menu-lines i:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Pixel dissolve transition layer */
.cinematic-pixel-transition {
    position:fixed;
    inset:var(--ncde-header-height) 0 0;
    z-index:780;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
}
.cinematic-pixel-transition.is-active { opacity:1; visibility:visible; }
.cinematic-pixel-transition canvas { width:100%; height:100%; display:block; }

@media (max-width:900px) {
    :root { --ncde-header-height:84px; }
    .gateway-hero--editorial { min-height:175svh !important; background-attachment:scroll !important; }
    .gateway-hero--editorial .hero-content { transform:translate3d(0, calc(var(--hero-scroll, 0) * -44vh), 0) !important; }
}
@media (max-width:560px) {
    .gateway-menu-panel { width:100%; padding:25px 24px 24px; }
    .gateway-menu-ecosystem > div { grid-template-columns:1fr; }
    .gateway-menu-intro { margin-top:32px; }
}
@media (prefers-reduced-motion:reduce) {
    .gateway-hero--editorial .hero-content { transform:none !important; opacity:1 !important; }
    .gateway-menu-panel,.gateway-menu-backdrop { transition:none !important; }
}