/* ============================================================
   Morclave — SHARED DESIGN TOKENS
   Used by index.html and offer.html.
   Page-specific stylesheets load AFTER this and may override.
   Cascade is managed via @layer (base < components < utilities).
   Page-inline <style> blocks remain UNlayered, so they win
   over anything in these layers — no !important needed.
   ============================================================ */

@layer base, components, utilities;

/* ===== BASE ===== */
@layer base {

    /* ===== SCROLLBAR =====
       Defined once here so every page reserves the same gutter width.
       A page that styles this itself gets a different scrollbar width,
       which shifts all centred containers by half the difference. */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-2); }
    ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
    :root {
        --primary: #0473ea;
        --primary-dark: #0360c4;
        --primary-light: #5a9ff5;
        --primary-ultra: #d6e9ff;
        --accent: #5fcb3a;
        --accent-dark: #4caf28;
        --accent-light: #6ed94a;
        --danger: #e05252;
        --danger-soft: #f87171;
        --text: #292929;
        --text-2: #3f4147;
        --text-3: #6b7079;
        --text-muted: #888b90;
        --white: #ffffff;
        --bg: #ffffff;
        --bg-2: #f6f8fb;
        --bg-3: #edf1f7;
        --border: #e4e8ee;
        --border-2: #d0d5dd;

        /* Navy scale (dark surfaces) */
        --navy-900: #0a1628;
        --navy-800: #0b1c36;
        --navy-700: #0e2244;
        --navy-600: #122a54;
        --navy-500: #1a3a6e;

        /* Elevation tiers */
        --lift-sm: -2px;
        --lift-md: -6px;

        /* Shadow tokens */
        --sh-sm: 0 4px 16px rgba(17,24,39,.06);
        --sh-md: 0 12px 40px rgba(17,24,39,.08);
        --sh-lg: 0 24px 64px rgba(17,24,39,.10);
        --sh-brand-sm: 0 4px 16px color-mix(in srgb, var(--primary) 18%, transparent);

        /* Unified card system */
        --card-radius: 22px;
        --card-pad: 36px 30px;
        --icon-size: 52px;
        --icon-radius: 14px;

        /* Spacing scale */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 24px;
        --space-6: 32px;
        --space-7: 48px;
        --space-8: 64px;

        --display: 'Montserrat', sans-serif;
        --body: 'Karla', sans-serif;
        --ease: cubic-bezier(.4,0,.2,1);
        --spring: cubic-bezier(.34,1.56,.64,1);

        /* Tint native form controls with brand color */
        accent-color: var(--primary);
    }

    /* Reset */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: 80px; }
    img { max-width: 100%; height: auto; display: block; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    button { font-family: inherit; }

    /* Focus */
    :focus { outline: none; }
    :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

    /* Selection */
    ::selection { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--text); }

    /* Typography */
    h1, h2, h3, h4 {
        font-family: var(--display);
        font-weight: 700;
        line-height: 1.12;
        color: var(--text);
        letter-spacing: -.025em;
        text-wrap: balance;
    }
}

/* ===== COMPONENTS ===== */
@layer components {
    /* Eyebrow / tag pill.
       line-height:1 keeps the line-box tight; padding is intentionally
       asymmetric (11 top / 7 bottom) to optically center uppercase letters —
       the descender region inside the line-box is empty for ALL-CAPS, which
       would otherwise make the bottom gap look ~3px larger than the top.
       Total padding (18px) and total height (~32px) match the original. */
    .tag {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--body);
        font-size: .72rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
        padding: 10px 14px 8px;
        border-radius: 100px;
        margin-bottom: 22px;
    }

    .stitle {
        font-size: clamp(1.85rem, 3.4vw, 2.5rem);
        margin-bottom: var(--space-4);
        letter-spacing: -.02em;
        line-height: 1.15;
    }
    .ssub {
        font-size: clamp(.98rem, 1.4vw, 1.06rem);
        color: var(--text-3);
        max-width: 680px;
        line-height: 1.7;
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        font-family: var(--body);
        font-weight: 800;
        font-size: 1rem;
        line-height: 1;
        padding: 18px 36px;
        border-radius: 100px;
        border: none;
        cursor: pointer;
        transition:
            background-color .4s var(--ease),
            border-color .4s var(--ease),
            color .4s var(--ease),
            transform .4s var(--ease),
            box-shadow .4s var(--ease);
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    /* Header CTA — size/weight overrides on top of .btn .btn-w.
       line-height 1.7 restores the original button height (the pre-refactor
       .hdr-cta inherited it from body; .btn sets line-height:1 which would
       otherwise shrink the button by ~8px). */
    .hdr-cta {
        padding: 10px 24px;
        font-size: .84rem;
        font-weight: 700;
        line-height: 1.7;
    }
    .hdr.stuck .hdr-cta {
        background: transparent;
        color: var(--text-3);
        border-color: var(--text-3);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .hdr.stuck .hdr-cta:hover {
        color: #fff;
        border-color: var(--primary);
        background: color-mix(in srgb, var(--primary) 6%, transparent);
    }

    /* Primary gradient — canonical CTA (.btn-p and .btn-g are aliases) */
    .btn-p,
    .btn-g {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    }
    .btn-g:hover i { transform: translateX(4px); }

    /* Outlined */
    .btn-o {
        background: transparent;
        color: var(--text);
        border: 1.5px solid var(--border);
    }
    .btn-o:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 4%, transparent);
    }

    /* White / glass (used on dark surfaces) */
    .btn-w {
        background: rgba(255,255,255,.1);
        color: #fff;
        border: 1.5px solid rgba(255,255,255,.15);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .btn-w:hover {
        background: rgba(255,255,255,.18);
        border-color: rgba(255,255,255,.3);
    }

    /* Block (full-width) modifier */
    .btn-block { width: 100%; }

    /* Pulse halo (campaign CTA emphasis) */
    .btn-pulse { position: relative; }
    .btn-pulse::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        animation: pulseRing 2.4s ease-out infinite;
        pointer-events: none;
    }
    @keyframes pulseRing {
        0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
        70%  { box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent) 0%, transparent); }
        100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
    }

    /* Position-aware button (cursor-tracked accent fill).
       Add `position-aware-button` alongside any .btn variant. Wrap text in
       <span class="label">…</span>. JS in assets/position-aware-button.js. */
    .position-aware-button {
        appearance: none;
        z-index: 1;
        text-transform: capitalize;
        letter-spacing: 0;
    }
    .position-aware-button .label {
        position: relative;
        z-index: 2;
        display: inline-block;
    }
    .position-aware-button .blob {
        position: absolute;
        width: 2px;
        height: 2px;
        margin-left: 0;
        margin-top: 0;
        border: 1px solid var(--accent);
        border-radius: 50%;
        background: var(--accent);
        z-index: -1;
        transition:
            border-width .4s ease-out,
            margin-left .4s ease-out,
            margin-top .4s ease-out;
        pointer-events: none;
    }
    .position-aware-button .blob.expand {
        border-width: 1500px;
        margin-left: -1500px;
        margin-top: -1500px;
        transition:
            border-width .7s ease-in-out,
            margin-left .7s ease-in-out,
            margin-top .7s ease-in-out;
    }
}

/* ===== UTILITIES ===== */
@layer utilities {
    /* Scroll reveal */
    .rv {
        opacity: 0;
        transform: translateY(36px);
        transition: opacity .85s var(--ease), transform .85s var(--ease);
    }
    .rv.vis {
        opacity: 1;
        transform: translateY(0);
    }
    .d1 { transition-delay: .08s; }
    .d2 { transition-delay: .16s; }
    .d3 { transition-delay: .24s; }
    .d4 { transition-delay: .32s; }
    .d5 { transition-delay: .4s; }
}

/* ===== REDUCED MOTION =====
   Kept UNlayered so it always wins, no matter which layer the
   targeted rule lives in. !important only used on the universal
   selector where lower specificity would otherwise lose to .btn etc. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn-pulse::after { animation: none; }
    .rv { opacity: 1; transform: none; }
    .position-aware-button .label,
    .position-aware-button .blob { transition: none; }
}

/* ===== REGION SWITCHER =====
   Shared by index.html, ae/index.html and 404.html. Lives here rather than
   inline so the three pages cannot drift apart.

   In the footers it sits at the end of the footer bar, so the panel opens
   UPWARD — there is no viewport below it. Anchoring uses `transform` while the
   entrance uses the independent `translate`/`scale` properties, so the centred
   mobile variant can re-anchor without rewriting the animation. */
.rgn{position:relative}
.rgn-trigger{
    display:flex;align-items:center;gap:9px;
    padding:12px 18px;border-radius:100px;
    /* Transparent, so the pill carries whatever gradient sits behind it rather
       than approximating it with a flat navy that drifts as the gradient moves.
       The border is then the only thing defining the control, so it carries the
       3:1 boundary on its own. */
    background:transparent;
    border:1px solid var(--primary);
    font-family:var(--body);font-size:.8rem;font-weight:500;
    color:rgba(255,255,255,.85);
    cursor:pointer;outline:none;
    transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.rgn-trigger:hover{background:rgba(4,115,234,.28);border-color:var(--primary-light);color:#fff}
.rgn-trigger:focus-visible,
.rgn.open .rgn-trigger{
    border-color:var(--primary-light);background:rgba(4,115,234,.28);color:#fff;
    box-shadow:0 0 0 4px rgba(4,115,234,.22);
}
.rgn-globe{
    width:15px;height:15px;flex-shrink:0;
    fill:none;stroke:var(--primary-light);stroke-width:1.5;stroke-linecap:round;
    opacity:.9;transition:opacity .25s var(--ease);
}
.rgn-trigger:hover .rgn-globe,.rgn.open .rgn-globe{opacity:1}
.rgn-chev{
    width:9px;height:14px;flex-shrink:0;margin-left:2px;
    fill:none;stroke:var(--primary-light);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
    opacity:.6;transition:opacity .25s var(--ease);
}
.rgn-trigger:hover .rgn-chev,.rgn.open .rgn-chev{opacity:1}
.rgn-panel{
    position:absolute;bottom:calc(100% + 12px);right:0;
    min-width:246px;list-style:none;margin:0;padding:6px;
    /* The darkest navy. Against the lighter gradient it sits on, the blue edge
       and the drop shadow are what separate the two. */
    background:var(--navy-900);
    border:1px solid var(--primary);
    border-radius:16px;
    box-shadow:0 22px 52px rgba(0,0,0,.5);
    z-index:60;text-align:left;
    transform-origin:bottom right;
    opacity:0;translate:0 8px;scale:.97;
    transition:opacity .18s var(--ease),translate .3s cubic-bezier(.16,1,.3,1),scale .3s cubic-bezier(.16,1,.3,1);
}
.rgn-panel[hidden]{display:none}
.rgn.open .rgn-panel{opacity:1;translate:0 0;scale:1}
/* Base reset for pages with no footer list styles (404). The .ftr-scoped rule
   below is the same declaration at higher specificity, needed because the
   generic `.ftr ul li` rule would otherwise reclaim the row spacing. */
.rgn-panel li{margin:0}
.ftr .rgn-panel li{margin:0}
.rgn-panel .rgn-opt{
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:11px 14px;border-radius:11px;
    font-size:.86rem;color:rgba(255,255,255,.7);
    text-decoration:none;
    outline:none;
    transition:background .18s var(--ease),color .18s var(--ease);
}
.rgn-panel a.rgn-opt:hover,
.rgn-panel a.rgn-opt:focus-visible{background:rgba(4,115,234,.45);color:#fff}
/* The current region is focusable by arrow key but is not a link - it gets the
   keyboard ring without the "selectable" blue fill. */
.rgn-panel .rgn-opt:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.rgn-panel .rgn-opt.is-current{color:#fff;cursor:default}
.rgn-tick{
    width:14px;height:12px;flex-shrink:0;
    fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

@media(max-width:480px){
    /* Comfortable thumb target once the pill is the only control in reach. */
    .rgn-trigger{padding:13px 22px;font-size:.86rem}
    .rgn-panel .rgn-opt{font-size:.9rem}
    /* Re-anchor the panel to the centre of a now-centred trigger. */
    .rgn-panel{right:auto;left:50%;transform:translateX(-50%);transform-origin:bottom center}
}