/* ==========================================================================
   shell.css — Golden Wings Digital
   The shared shell every page wears: design tokens, base type, buttons,
   header + brand lockup, mobile drawer, footer, inquiry modal, page loader.
   Loaded FIRST on every page; page-specific sheets layer on top.
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root{
    --ink:      #122B54;   /* headings / navy */
    --ink-2:    #24406E;
    --body:     #5B6B85;   /* paragraph */
    --mute:     #5F6C82;
    --blue:     #1D5FE0;
    --blue-d:   #164BB8;
    --blue-l:   #EAF1FE;
    --gold:     #EFA126;
    --gold-d:   #8A5A06;
    --gold-l:   #FDF2DE;
    --cream:    #FFF8EC;
    --cream-2:  #FFFCF6;
    --line:     #EDE8DC;
    --line-2:   #E4E9F2;
    --white:    #FFFFFF;

    --r-sm: 10px;
    --r:    14px;
    --r-lg: 20px;

    --sh-1: 0 1px 2px rgba(18,43,84,.04), 0 6px 18px rgba(18,43,84,.05);
    --sh-2: 0 14px 38px rgba(18,43,84,.10);
    --sh-blue: 0 8px 22px rgba(29,95,224,.26);

    --wrap: 1180px;
    --pad:  clamp(18px, 5vw, 40px);
    --ease: cubic-bezier(.4,0,.2,1);

    --head: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sans: 'Inter', 'Inter-Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── 2. RESET / BASE ───────────────────────────────────────────────────── */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; }

body{
    font-family:var(--sans);
    background:var(--white);
    color:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

img{ max-width:100%; display:block; }
ul{ list-style:none; }
a{ text-decoration:none; color:inherit; transition:color .2s var(--ease); }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

h1,h2,h3,h4{ font-family:var(--head); color:var(--ink); line-height:1.15; letter-spacing:-.025em; font-weight:700; }

.gw-wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* Section rhythm */
.gw-sec{ padding:clamp(46px,6vw,76px) 0; }
.gw-sec--tint{ background:var(--cream-2); }

.gw-sec-head{ text-align:center; margin-bottom:clamp(26px,3.4vw,40px); }
.gw-sec-head h2{ font-size:clamp(1.5rem,3.4vw,2.15rem); font-weight:800; }
.gw-sec-head p{ margin-top:10px; font-size:clamp(.9rem,1.6vw,1rem); color:var(--body); }

/* ── 3. BUTTONS ────────────────────────────────────────────────────────── */
.gw-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-family:var(--sans); font-weight:600; font-size:.95rem; line-height:1;
    padding:14px 24px; border-radius:11px; white-space:nowrap;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.gw-btn i{ font-size:.92em; }
.gw-btn--primary{ background:var(--blue); color:#fff; box-shadow:var(--sh-blue); }
.gw-btn--primary:hover{ background:var(--blue-d); transform:translateY(-2px); box-shadow:0 12px 26px rgba(29,95,224,.34); }
.gw-btn--ghost{ background:#fff; color:var(--blue); border:1.5px solid #CBDAF7; }
.gw-btn--ghost:hover{ border-color:var(--blue); background:var(--blue-l); transform:translateY(-2px); }
.gw-btn--sm{ padding:11px 18px; font-size:.875rem; border-radius:9px; }
.gw-btn--lg{ padding:16px 32px; font-size:1.02rem; }

/* ── 4. HEADER ─────────────────────────────────────────────────────────── */
.gw-head{
    position:sticky; top:0; z-index:900;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .25s var(--ease);
}
.gw-head.scrolled{ box-shadow:0 6px 22px rgba(18,43,84,.07); }
.gw-head-in{
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    height:clamp(62px,7vw,78px);
}

/* Brand lockup: gold eagle + navy wordmark */
.gw-brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.gw-brand img{ width:clamp(30px,4vw,38px); height:auto; }
.gw-brand span{
    font-family:var(--head); font-weight:700; color:var(--ink);
    font-size:clamp(1.02rem,2.2vw,1.24rem); letter-spacing:.01em; white-space:nowrap;
}

/* Desktop nav */
.gw-nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.gw-nav a{ font-size:.94rem; font-weight:500; color:#54637C; padding:6px 0; position:relative; }
.gw-nav a::after{
    content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:var(--gold); border-radius:2px; transform:scaleX(0); transition:transform .22s var(--ease);
}
.gw-nav a:hover{ color:var(--ink); }
.gw-nav a:hover::after,
.gw-nav a.is-active::after{ transform:scaleX(1); }
.gw-nav a.is-active{ color:var(--ink); font-weight:600; }

.gw-head-cta{ display:flex; align-items:center; gap:10px; }

/* Hamburger */
.gw-burger{ display:none; width:42px; height:42px; border-radius:10px; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.gw-burger span{ display:block; width:22px; height:2.4px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s var(--ease); }
.gw-burger:hover{ background:var(--cream); }

/* ── 5. MOBILE DRAWER ──────────────────────────────────────────────────── */
.gw-overlay{
    position:fixed; inset:0; background:rgba(18,43,84,.42); z-index:998;
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
    backdrop-filter:blur(2px);
}
.gw-overlay.open{ opacity:1; visibility:visible; }

.gw-drawer{
    position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); z-index:999;
    background:#fff; border-left:1px solid var(--line);
    box-shadow:-18px 0 48px rgba(18,43,84,.14);
    transform:translateX(105%); transition:transform .34s var(--ease);
    display:flex; flex-direction:column; padding:22px 22px 26px;
    overflow-y:auto; overscroll-behavior:contain;
}
.gw-drawer.open{ transform:none; }
.gw-drawer-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.gw-drawer-close{ width:38px; height:38px; border-radius:10px; color:var(--ink); font-size:1.05rem; background:var(--cream); }
.gw-drawer nav{ display:flex; flex-direction:column; gap:2px; }
.gw-drawer nav a{
    display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:11px;
    font-size:.97rem; font-weight:500; color:var(--ink-2);
}
.gw-drawer nav a i{ width:20px; text-align:center; color:var(--gold); font-size:.92rem; }
.gw-drawer nav a:hover,
.gw-drawer nav a.is-active{ background:var(--cream); color:var(--ink); }
.gw-drawer-foot{ margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:10px; }
.gw-drawer-phone{
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:13px; border-radius:11px; background:var(--gold-l); color:var(--gold-d);
    font-weight:700; font-size:.94rem;
}

/* ── 14. FOOTER ────────────────────────────────────────────────────────── */
.gw-foot{ border-top:1px solid var(--line); background:#fff; padding:clamp(24px,3.4vw,34px) 0 clamp(20px,2.6vw,26px); }
.gw-foot-top{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.gw-foot-tag{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 14px; color:var(--body); font-size:.88rem; }
.gw-foot-tag span{ display:inline-flex; align-items:center; gap:14px; }
.gw-foot-tag span::after{ content:''; width:4px; height:4px; border-radius:50%; background:var(--gold); }
.gw-foot-tag span:last-child::after{ display:none; }
.gw-socials{ display:flex; gap:10px; }
.gw-socials a{
    width:38px; height:38px; border-radius:10px; background:var(--cream);
    display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:1rem;
    transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.gw-socials a:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
.gw-foot-links{
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px;
    margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
    font-size:.86rem; color:var(--body);
}
.gw-foot-links a:hover{ color:var(--blue); }
.gw-copy{ text-align:center; margin-top:14px; font-size:.8rem; color:var(--mute); }


/* ── 16. PAGE REVEAL OVERLAY ───────────────────────────────────────────── */
.page-reveal-overlay{
    position:fixed; inset:0; z-index:9999;
    background:linear-gradient(180deg,#FFF9F0,#FFFFFF);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
    transition:opacity .45s var(--ease), visibility .45s;
}
.page-reveal-overlay.dismissed{ opacity:0; visibility:hidden; }
.reveal-logo img{ width:150px; height:auto; }
.loading-bar-container{ width:170px; height:3px; border-radius:3px; background:var(--line); overflow:hidden; }
.loading-bar-fill{ width:40%; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--blue)); animation:gwLoad 1.1s var(--ease) infinite; }
@keyframes gwLoad{ 0%{ transform:translateX(-105%); } 100%{ transform:translateX(265%); } }
body.loading-locked{ overflow:hidden; }

/* ── 17. INQUIRY MODAL ─────────────────────────────────────────────────── */
.modal-overlay{
    position:fixed; inset:0; z-index:9500; background:rgba(18,43,84,.5);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; padding:18px;
    opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s;
}
.modal-overlay.active{ opacity:1; visibility:visible; }
.modal-box{
    position:relative; width:100%; max-width:460px; max-height:92vh; overflow-y:auto;
    background:#fff; border-radius:var(--r-lg); box-shadow:0 30px 70px rgba(18,43,84,.28);
    transform:translateY(14px) scale(.98); transition:transform .3s var(--ease);
    padding:30px 26px 26px;
}
.modal-overlay.active .modal-box{ transform:none; }
.modal-close{ position:absolute; top:12px; right:14px; font-size:1.7rem; line-height:1; color:var(--mute); }
.modal-close:hover{ color:var(--ink); }
.modal-header{ text-align:center; margin-bottom:20px; }
.modal-icon{ font-size:2.2rem; margin-bottom:8px; }
.modal-header h2{ font-size:1.35rem; font-weight:800; margin-bottom:6px; }
.modal-header p{ font-size:.88rem; color:var(--body); }
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.form-group .req{ color:#DC2626; }
.form-group .opt{ color:var(--mute); font-weight:400; }
.form-group input,
.form-group textarea{
    width:100%; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm);
    font-family:var(--sans); font-size:.94rem; color:var(--ink); background:#FBFCFE;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-group input:focus,
.form-group textarea:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(29,95,224,.12); }
.form-group textarea{ resize:vertical; }
.modal-submit-btn{ width:100%; margin-top:6px; }
.modal-note{ text-align:center; font-size:.76rem; color:var(--mute); margin-top:12px; }


/* ── SHARED PILL BADGE (page heroes across the site) ───────────────────── */
.badge{
    display:inline-block;
    background:rgba(59,130,246,.07);
    border:1px solid rgba(59,130,246,.20);
    color:#1749B0;
    padding:6px 16px; border-radius:50px;
    font-size:.9rem; font-weight:500;
    margin-bottom:20px;
}

/* ── SWIPE RAIL — shared carousel chrome ───────────────────────────────────
   Any [data-rail] block: the track is a normal grid on desktop and becomes a
   scroll-snap carousel where a page's own CSS makes it scrollable.          */
.gw-rail-nav{ display:none; }

/* ── RESPONSIVE (shell) ────────────────────────────────────────────────── */
@media (max-width:1024px){
    .gw-nav{ gap:16px; }
    .gw-nav a{ font-size:.88rem; }
}

@media (max-width:900px){
    .gw-rail-nav{
        display:flex; align-items:center; justify-content:center; gap:14px;
        margin-top:16px;
    }
    .gw-rail-arrow{
        display:flex; align-items:center; justify-content:center;
        width:38px; height:38px; border-radius:50%;
        background:#fff; border:1px solid var(--line); color:var(--ink);
        box-shadow:0 3px 10px rgba(18,43,84,.10);
        font-size:.82rem;
        transition:opacity .2s var(--ease), background .2s var(--ease);
    }
    .gw-rail-arrow:disabled{ opacity:.32; pointer-events:none; }
    .gw-rail-arrow:active{ background:var(--cream); }

    .gw-rail-dots{ display:flex; gap:7px; }
    .gw-rail-dots button{
        width:7px; height:7px; border-radius:50%;
        background:#D9D3C6; padding:0;
        transition:width .25s var(--ease), background .25s var(--ease);
    }
    .gw-rail-dots button.is-on{ width:20px; border-radius:4px; background:var(--blue); }

    .gw-nav,
    .gw-head-cta{ display:none; }
    .gw-burger{ display:flex; }
    .gw-foot-top{ flex-direction:column; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
    html{ scroll-behavior:auto; }
}