/* ==========================================================================
   TRIDENT NORTHSTAR GROUP LLC — Corporate Design System
   tridentnorthstar.com

   A single stylesheet consumed by every page. All color, spacing, type and
   elevation values live in the :root token block below — add new values there
   rather than hardcoding them in component rules.

   Palette rationale: the brand marries the two U.S. national colors. Blue is
   the STRUCTURAL color (grounds, panels, rules, ownership lines); red is the
   PRECISION accent (indices, seams, primary actions, alliance lines). Neither
   is used decoratively without meaning.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* --- Blue: structure ------------------------------------------------- */
    --navy-975: #010712;
    --navy-950: #04101F;
    --navy-900: #071A31;
    --navy-850: #0A2140;
    --navy-800: #0C2A52;
    --navy-700: #002868;   /* anchor brand blue */
    --blue-600: #0A3A8C;
    --blue-500: #1150B4;
    --blue-400: #2E70D8;
    --blue-300: #6A9CE8;
    --blue-200: #A8C6F0;
    --blue-100: #D6E4F8;
    --blue-050: #EEF4FD;

    /* --- Red: precision --------------------------------------------------- */
    --red-800: #8A0F14;
    --red-700: #C0161C;   /* text-safe red on white — 6.2:1 */
    --red-600: #E02128;   /* OFFICIAL brand red, sampled from the logo */
    --red-500: #E8434A;
    --red-400: #EF6A70;
    --red-300: #FF6B72;   /* accessible red on navy grounds */
    --red-050: #FDEDEE;

    /* --- Neutrals ---------------------------------------------------------- */
    --white:     #FFFFFF;
    --paper:     #F7F9FC;
    --mist:      #EDF1F7;
    --line:      #DCE4EF;
    --line-soft: #E8EDF5;
    --steel-300: #B3C0D2;
    --steel-500: #5F6F86;   /* small-label grey; was #78889F (3.6:1 on white, failed AA) — now 5.1:1 */
    --steel-600: #5A6B84;
    --ink-700:   #35455C;
    --ink-800:   #1E2C40;
    --ink-900:   #0E1A2B;

    /* --- Semantic ---------------------------------------------------------- */
    --bg:            var(--white);
    --bg-alt:        var(--paper);
    --bg-dark:       var(--navy-950);
    --text:          var(--ink-800);
    --text-muted:    var(--steel-600);
    --text-on-dark:  rgba(255, 255, 255, 0.92);
    --text-on-dark-muted: rgba(214, 228, 248, 0.66);
    --hairline-dark: rgba(168, 198, 240, 0.16);
    --hairline-dark-strong: rgba(168, 198, 240, 0.30);

    /* --- Signature gradients: where red meets blue -------------------------- */
    --seam:        linear-gradient(90deg, var(--red-600) 0%, var(--red-600) 22%, var(--navy-700) 60%, var(--navy-700) 100%);
    --seam-soft:   linear-gradient(90deg, var(--red-600) 0%, var(--blue-500) 100%);
    --seam-dark:   linear-gradient(90deg, var(--red-300) 0%, var(--blue-300) 100%);
    --grad-navy:   linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 55%, var(--navy-975) 100%);
    --grad-panel:  linear-gradient(158deg, var(--navy-850) 0%, var(--navy-950) 100%);

    /* --- Typography --------------------------------------------------------- */
    --font-display: 'Archivo', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fs-eyebrow: 0.75rem;
    --fs-sm:      0.875rem;
    --fs-base:    1rem;
    --fs-lead:    clamp(1.0625rem, 0.98rem + 0.42vw, 1.1875rem);
    --fs-h4:      clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --fs-h3:      clamp(1.1875rem, 1.1rem + 0.45vw, 1.5rem);
    --fs-h2:      clamp(1.625rem, 1.35rem + 1.2vw, 2.375rem);
    --fs-h1:      clamp(2.25rem, 1.75rem + 2vw, 3.5rem);

    /* --- Spacing ------------------------------------------------------------ */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

    /* --- Radius / elevation -------------------------------------------------- */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;

    --shadow-xs: 0 1px 2px rgba(4, 16, 31, 0.06);
    --shadow-sm: 0 2px 6px rgba(4, 16, 31, 0.07), 0 1px 2px rgba(4, 16, 31, 0.05);
    --shadow-md: 0 10px 28px -12px rgba(4, 16, 31, 0.22), 0 2px 6px rgba(4, 16, 31, 0.05);
    --shadow-lg: 0 24px 56px -22px rgba(4, 16, 31, 0.32), 0 4px 12px rgba(4, 16, 31, 0.06);

    /* --- Motion --------------------------------------------------------------- */
    --t-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);

    /* --- Layout ---------------------------------------------------------------- */
    --container:        1240px;
    --container-narrow: 900px;
    --navbar-height:     74px;
    --header-height:     var(--navbar-height);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--navbar-height) + var(--space-6));
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--blue-600); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--red-600); }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    color: var(--ink-900);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.14;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.012em; }

p  { margin: 0 0 var(--space-4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.15rem; }
li { margin-bottom: var(--space-2); }

strong { font-weight: 650; color: var(--ink-900); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-8) 0; }

::selection { background: var(--navy-700); color: #fff; }

:focus-visible {
    outline: 2px solid var(--red-600);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 2000;
    padding: var(--space-3) var(--space-5);
    background: var(--navy-950);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: top var(--t-fast);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-6);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--alt   { background: var(--bg-alt); }
.section--mist  { background: var(--mist); }
.section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); }

.section--dark {
    background: var(--grad-navy);
    color: var(--text-on-dark);
}
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--text-on-dark-muted); }
.section--dark strong { color: #fff; }
.section--dark a { color: var(--blue-200); }
.section--dark a:hover { color: var(--red-300); }

/* Faint blueprint grid used on dark grounds */
.section--grid::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(168, 198, 240, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(168, 198, 240, 0.045) 1px, transparent 1px);
    background-size: 78px 78px;
    pointer-events: none;
}
.section--grid > .container { position: relative; z-index: 1; }

.grid { display: grid; gap: var(--space-8); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-lg { gap: var(--space-8); }

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
}
.split--lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }

/* ==========================================================================
   4. SECTION HEADINGS & THE RED/BLUE SEAM
   ========================================================================== */

.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red-700);
    margin: 0 0 var(--space-4);
}
.eyebrow::after {
    content: '';
    flex: 0 0 auto;
    width: 56px;
    height: 2px;
    background: var(--seam-soft);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
    content: '';
    width: 56px; height: 2px;
    background: linear-gradient(90deg, var(--blue-500), var(--red-600));
}
/* Heroes are dark grounds too, but are not .section--dark */
.hero .eyebrow, .page-hero .eyebrow { color: var(--red-300); }
.hero .eyebrow::after, .page-hero .eyebrow::after { background: var(--seam-dark); }

.section--dark .eyebrow { color: var(--red-300); }
.section--dark .eyebrow::after { background: var(--seam-dark); }
.section--dark .eyebrow--center::before { background: linear-gradient(90deg, var(--blue-300), var(--red-300)); }

.section-head { max-width: 780px; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p {
    max-width: 62ch;
    font-size: var(--fs-lead);
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.62;
}
.section--dark .section-head p { color: var(--text-on-dark-muted); }

.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--text-muted); max-width: 62ch; }

/* Standalone 3px seam rule: red bleeding into navy */
.seam { height: 3px; background: var(--seam); border: 0; margin: 0; }
.seam--full { width: 100%; }

/* Index numerals — 01 / 02 / 03 */
.index {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--red-700);
    font-variant-numeric: tabular-nums;
}
.section--dark .index { color: var(--red-300); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 0.85rem 1.5rem;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: background var(--t-base), color var(--t-base),
                border-color var(--t-base), box-shadow var(--t-base), transform var(--t-fast);
}
.btn i { font-size: 0.85em; }

.btn--primary {
    background: var(--red-600);
    border-color: var(--red-600);
    color: #fff;
}
.btn--primary:hover {
    background: var(--red-700);
    border-color: var(--red-700);
    color: #fff;
}

.btn--navy {
    background: var(--navy-700);
    border-color: var(--navy-700);
    color: #fff;
}
.btn--navy:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.btn--outline {
    background: transparent;
    border-color: var(--line);
    color: var(--ink-900);
}
.btn--outline:hover { border-color: var(--navy-700); color: var(--navy-700); background: var(--blue-050); }

.btn--ghost-light {
    background: transparent;
    border-color: var(--hairline-dark-strong);
    color: #fff;
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--blue-200); color: #fff; }

/* .section--dark a would otherwise recolor button text to blue-200 — a filled red button
   ended up with light-blue type at 2.7:1. Buttons keep their own text color on dark grounds. */
.section--dark .btn--primary, .section--dark .btn--primary:hover,
.section--dark .btn--navy,    .section--dark .btn--navy:hover,
.section--dark .btn--ghost-light, .section--dark .btn--ghost-light:hover { color: #fff; }

.btn--sm { padding: 0.65rem 1.15rem; font-size: 0.875rem; }
.btn--full { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.btn-row--center { justify-content: center; }

/* Inline text link with a moving arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--navy-700);
}
.link-arrow i { font-size: 0.8em; }
.link-arrow:hover { color: var(--red-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.section--dark .link-arrow { color: var(--blue-200); }
.section--dark .link-arrow:hover { color: var(--red-300); }

/* ==========================================================================
   6. BADGES & PILLS
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem 0.7rem;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    white-space: nowrap;
}
.badge--red   { background: var(--red-050);  color: var(--red-700);  border: 1px solid rgba(224, 33, 40, 0.2); }
.badge--navy  { background: var(--blue-050); color: var(--navy-700); border: 1px solid rgba(0, 40, 104, 0.16); }
.badge--onDark {
    background: rgba(168, 198, 240, 0.1);
    color: var(--blue-100);
    border: 1px solid var(--hairline-dark-strong);
}
.badge--onDark-red {
    background: rgba(224, 33, 40, 0.16);
    color: var(--red-300);
    border: 1px solid rgba(255, 107, 114, 0.32);
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-8);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: border-color var(--t-base);
}
.card:hover { border-color: var(--navy-700); }

/* Bespoke icon set — assets/img/icons.svg. Drawn for these subjects rather
   than pulled from a glyph library. Small UI affordances (arrows, checks,
   external-link marks) stay on Font Awesome, where a glyph is the right form
   and bespoke detail would be lost at 11px. */
.icon {
    display: block;
    width: 28px;
    height: 28px;
    color: inherit;
    flex: 0 0 auto;
}
.channel__icon .icon { width: 24px; height: 24px; }

.card__icon {
    display: block;
    width: auto; height: auto;
    padding: 0;
    margin-bottom: var(--space-6);
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    color: var(--navy-700);
}

.card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}
.card h3, .card h4 { margin-bottom: var(--space-3); }
/* Cards in dense grids and process steps are <h3> for a correct outline (h2 -> h3), but
   keep the compact h4 scale so the visual hierarchy is unchanged. */
.card--flat h3, .card--dark h3, .process__step h3 { font-size: var(--fs-h4); letter-spacing: -0.012em; }
.card p { color: var(--text-muted); margin-bottom: var(--space-4); }
.card__foot { margin-top: auto; padding-top: var(--space-2); }

.card--dark {
    background: var(--grad-panel);
    border-color: var(--hairline-dark);
    color: var(--text-on-dark);
}
.card--dark h3, .card--dark h4 { color: #fff; }
.card--dark p { color: var(--text-on-dark-muted); }
.card--dark:hover { border-color: var(--blue-300); }
.card--dark .card__icon { color: var(--blue-100); }

.card--flat { background: var(--paper); border-color: var(--line-soft); }
.card--flat:hover { background: var(--white); }

/* Technical corner ticks — a drafting-table cue used on key panels.
   Both corners are drawn on ::after alone, as four gradient layers, because
   ::before on every .card is reserved for the hover seam. An earlier version
   put the top-left tick on ::before; it won the cascade and silently collapsed
   the seam to a 14px blob on all 17 tiles that carry this class. */
.ticks::after {
    content: '';
    position: absolute;
    inset: 10px;
    pointer-events: none;
    opacity: 0.55;
    background:
        linear-gradient(var(--red-600), var(--red-600))   top left     / 14px 2px no-repeat,
        linear-gradient(var(--red-600), var(--red-600))   top left     / 2px 14px no-repeat,
        linear-gradient(var(--navy-700), var(--navy-700)) bottom right / 14px 2px no-repeat,
        linear-gradient(var(--navy-700), var(--navy-700)) bottom right / 2px 14px no-repeat;
}
.card--dark.ticks::after {
    background:
        linear-gradient(var(--red-300), var(--red-300))   top left     / 14px 2px no-repeat,
        linear-gradient(var(--red-300), var(--red-300))   top left     / 2px 14px no-repeat,
        linear-gradient(var(--blue-300), var(--blue-300)) bottom right / 14px 2px no-repeat,
        linear-gradient(var(--blue-300), var(--blue-300)) bottom right / 2px 14px no-repeat;
}

/* ==========================================================================
   9. HEADER — utility bar + primary navigation
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    transition: box-shadow var(--t-base);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }


/* --- Primary nav --- */
.navbar { height: var(--navbar-height); }
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    height: var(--navbar-height);
}

.brand { display: flex; align-items: center; gap: var(--space-3); color: inherit; }
.brand:hover { color: inherit; }
.brand__mark { width: 40px; height: 40px; flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
    font-family: var(--font-display);
    font-size: 1.1875rem;   /* 19px: qualifies as large text, so the brand red passes contrast */
    font-weight: 800;
    letter-spacing: -0.022em;
    color: var(--ink-900);
    white-space: nowrap;
}
.brand__name em { font-style: normal; color: var(--red-600); }
.brand__sub {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--steel-500);
    margin-top: 3px;
    white-space: nowrap;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-menu li { margin: 0; }
.nav-link {
    position: relative;
    display: block;
    padding: 0.6rem 0.85rem;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--ink-700);
    border-radius: var(--radius-xs);
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0.85rem; right: 0.85rem; bottom: 0.15rem;
    height: 2px;
    background: var(--red-600);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--t-base);
}
.nav-link:hover { color: var(--navy-700); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--navy-700); font-weight: 650; }
.nav-link.is-active::after { transform: scaleX(1); }

.nav-cta { margin-left: var(--space-3); }
/* You are already here — drop the red call-to-action back to structural navy. */
.nav-cta .btn.is-current {
    background: var(--navy-700);
    border-color: var(--navy-700);
    box-shadow: none;
    cursor: default;
}
.nav-cta .nav-link::after { display: none; }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--ink-900);
    font-size: 1.1rem;
    align-items: center;
    justify-content: center;
}
.nav-toggle:hover { border-color: var(--navy-700); color: var(--navy-700); }

/* ==========================================================================
   10. HERO
   ========================================================================== */

.hero {
    position: relative;
    background: var(--grad-navy);
    color: var(--text-on-dark);
    padding-block: clamp(4rem, 2.5rem + 7vw, 8rem) clamp(3.5rem, 2.5rem + 5vw, 6rem);
    overflow: hidden;
    isolation: isolate;
}
/* --- The apex field ------------------------------------------------------
   The logo is an upward arrowhead: a convergence to a single point, which is
   exactly what a parent holding company is. The backdrop restates that form as
   nested chevrons ascending to one apex, with the brand red blooming behind it.

   Three background layers on one pseudo-element, painted top-down:
     1. a scrim that darkens the left so headline type always holds contrast
     2. the chevron field
     3. the red bloom sitting behind the apex
   Doing it in CSS rather than markup means every inner page inherits it. --- */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(101deg,
            var(--navy-950) 0%,
            rgba(4, 16, 31, 0.90) 26%,
            rgba(4, 16, 31, 0.45) 56%,
            rgba(4, 16, 31, 0.05) 84%),
        url("../img/hero-apex.svg"),
        radial-gradient(46% 54% at 80% 0%,
            rgba(224, 33, 40, 0.34) 0%,
            rgba(224, 33, 40, 0.09) 42%,
            rgba(224, 33, 40, 0) 72%);
    background-size: auto, cover, auto;
    background-position: center, 82% 12%, center;
    background-repeat: no-repeat;
}
.hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--seam);
}

.hero__inner { position: relative; z-index: 1; max-width: 940px; }
.hero h1 { color: #fff; margin-bottom: var(--space-6); }
.hero h1 .hl {
    color: var(--blue-200);
    position: relative;
    white-space: nowrap;
}
.hero__lead {
    font-size: clamp(1.0625rem, 0.95rem + 0.62vw, 1.375rem);
    line-height: 1.6;
    color: var(--text-on-dark-muted);
    max-width: 760px;
    margin-bottom: var(--space-8);
}
.hero .btn-row { margin-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); }

/* Credential rail under the hero copy */
.hero__creds {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--hairline-dark);
    padding-top: var(--space-6);
    max-width: none;
}
.hero__cred { padding-right: var(--space-5); }
.hero__cred + .hero__cred { padding-left: var(--space-5); border-left: 1px solid var(--hairline-dark); }
.hero__cred dt {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red-300);
    margin-bottom: var(--space-2);
}
.hero__cred dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
}

/* --- Inner-page hero --- */
.page-hero {
    position: relative;
    background: var(--grad-navy);
    color: var(--text-on-dark);
    padding-block: clamp(3rem, 2rem + 4.5vw, 5.5rem) clamp(3rem, 2rem + 4vw, 5rem);
    overflow: hidden;
    isolation: isolate;
}
/* Inner pages carry the same apex field, cropped tighter and held back so it
   reads as a corner detail rather than competing with the page title. */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(101deg,
            var(--navy-950) 0%,
            rgba(4, 16, 31, 0.92) 30%,
            rgba(4, 16, 31, 0.55) 62%,
            rgba(4, 16, 31, 0.12) 88%),
        url("../img/hero-apex.svg"),
        radial-gradient(50% 76% at 84% -14%,
            rgba(224, 33, 40, 0.28) 0%,
            rgba(224, 33, 40, 0) 68%);
    background-size: auto, cover, auto;
    background-position: center, 84% 20%, center;
    background-repeat: no-repeat;
}
.page-hero::after {
    content: '';
    position: absolute; z-index: 0;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--seam);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 860px; }
.page-hero h1 { color: #fff; margin-bottom: var(--space-5); }
.page-hero p {
    font-size: var(--fs-lead);
    color: var(--text-on-dark-muted);
    margin-bottom: 0;
    max-width: 720px;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    font-size: 0.8125rem;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}
.breadcrumb li { margin: 0; color: var(--text-on-dark-muted); }
.breadcrumb a { color: var(--blue-200); }
.breadcrumb a:hover { color: var(--red-300); }
.breadcrumb li + li::before { content: '/'; margin-right: var(--space-2); color: rgba(168, 198, 240, 0.4); }

/* ==========================================================================
   11. ORGANIZATION CHART
   Solid blue connectors = wholly owned. Dashed red = alliance, not ownership.
   ========================================================================== */

.orgchart {
    --org-gap: clamp(1.25rem, 0.5rem + 3vw, 3rem);
    --org-line: var(--blue-400);
    --org-line-alt: var(--red-500);
    position: relative;
}

.org-parent { max-width: 560px; margin-inline: auto; }

.org-node {
    position: relative;
    display: block;
    padding: var(--space-6);
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--navy-700);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: border-color var(--t-base);
    color: inherit;
}
a.org-node:hover { border-inline-color: var(--steel-300); border-bottom-color: var(--steel-300); color: inherit; }

.org-node--parent {
    background: var(--grad-panel);
    border-color: var(--navy-800);
    border-top-color: var(--blue-400);   /* ownership blue — never the affiliate red */
    color: var(--text-on-dark);
    box-shadow: var(--shadow-md);
}
.org-node--parent .org-node__name { color: #fff; }
.org-node--parent .org-node__role { color: var(--blue-200); }
.org-node--parent .org-node__meta { color: var(--text-on-dark-muted); }
a.org-node--parent:hover { border-inline-color: var(--blue-400); border-bottom-color: var(--blue-400); }

/* Every company in the chart — held or allied — carries the same mark. The
   connector line, not the mark, is what states ownership. */
.org-node__logo {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto var(--space-4);
}
.org-node:not(.org-node--parent) .org-node__logo { width: 40px; height: 40px; }
.org-chip__logo { width: 17px; height: 17px; flex: 0 0 auto; }

.org-node__tier {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy-700);
    margin-bottom: var(--space-3);
}
.org-node--parent .org-node__tier { color: var(--blue-200); }
.org-node--ally .org-node__tier { color: var(--red-700); }   /* red on a label only where the dashed line is */

.org-node__name {
    font-family: var(--font-display);
    font-size: clamp(1rem, 0.94rem + 0.32vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.24;
    color: var(--ink-900);
    margin: 0 0 var(--space-2);
}
.org-node__role {
    font-size: 0.875rem;
    font-weight: 550;
    color: var(--navy-700);
    margin: 0 0 var(--space-3);
}
.org-node__meta {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}
.org-node__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--blue-600);
}
.org-node--parent .org-node__link { color: var(--blue-200); }

/* --- Connectors --- */
.org-stem {
    width: 2px;
    height: 44px;
    margin-inline: auto;
    background: var(--org-line);
}

.org-children {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--org-gap);
    padding-top: 44px;
}
/* The shared bus is gone: each branch draws its own half of it (::after) so an
   owned company and an affiliated one can carry different line styles. This
   pseudo-element is only used for the left rail on narrow screens. */
.org-children::before { content: ''; position: absolute; display: none; }
.org-branch { position: relative; }
/* Connectors are drawn with borders, not backgrounds, so the affiliate variant
   can simply switch to dashed red. ::before = vertical drop into the node;
   ::after = this branch's half of the horizontal bus, meeting its sibling's
   half exactly beneath the parent's center. */
.org-branch::before {
    content: '';
    position: absolute;
    top: -44px; left: 50%;
    width: 0; height: 44px;
    border-left: 2px solid var(--org-line);
    margin-left: -1px;   /* center the 2px border on the column center */
}
.org-branch::after {
    content: '';
    position: absolute;
    top: -44px;
    height: 0;
    border-top: 2px solid var(--org-line);
}
.org-branch:first-child::after { left: 50%; right: calc(-1 * var(--org-gap) / 2); }
.org-branch:last-child::after  { left: calc(-1 * var(--org-gap) / 2); right: 50%; }

/* Affiliated company: assisted by the Group, not owned. Dashed red, like the
   alliance, because it is the same kind of relationship — not ownership. */
.org-branch--ally::before { border-left-style: dashed; border-left-color: var(--org-line-alt); }
.org-branch--ally::after  { border-top-style: dashed;  border-top-color: var(--org-line-alt); }
.org-node--ally { border-top-color: var(--red-600); }

/* --- Alliance band: dashed red, dropping from the operating company --- */
.org-alliance {
    position: relative;
    margin-top: 48px;
    padding: var(--space-6);
    border: 1px dashed rgba(224, 33, 40, 0.42);
    border-radius: var(--radius-md);
    background: var(--red-050);
}
.org-alliance::before {
    content: '';
    position: absolute;
    top: -48px;
    left: calc(75% + var(--org-gap) / 4);
    width: 0; height: 48px;
    border-left: 2px dashed var(--org-line-alt);
    /* +0.5px, not -1px like the branch drops: .org-alliance has a 1px dashed border,
       and percentage offsets resolve against the padding box inside it. This puts
       the 2px stem dead-center on the right column, verified to the half-pixel. */
    margin-left: 0.5px;
}
.org-alliance__label {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red-700);
    margin: 0 0 var(--space-4);
    text-align: center;
}
.org-alliance__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
.org-alliance__list li { margin: 0; }
.org-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.55rem 0.95rem;
    background: var(--white);
    border: 1px solid rgba(224, 33, 40, 0.24);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-800);
    transition: border-color var(--t-base), color var(--t-base);
}
/* Country cards carry the shared Trident mark, matching the partner panels. */
.country__mark { width: 40px; height: 40px; flex: 0 0 auto; }
a.org-chip:hover {
    border-color: var(--red-600);
    color: var(--red-700);
}

/* --- Legend --- */
.org-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
    list-style: none;
    padding-left: 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.org-legend li { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.org-legend__key { width: 34px; height: 0; flex: 0 0 auto; }
.org-legend__key--own { border-top: 2px solid var(--blue-400); }
.org-legend__key--ally { border-top: 2px dashed var(--red-500); }

/* ==========================================================================
   12. ENTITY / FEATURE PANELS
   ========================================================================== */

.entity {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 0.6rem + 3.4vw, 3.5rem);
    padding: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--navy-700);
    border-radius: var(--radius-md);
    transition: box-shadow var(--t-base);
}
.entity:hover { box-shadow: var(--shadow-sm); }
.entity--ally { border-left-color: var(--red-600); }   /* at-rest color is the only color a panel ever shows */
.entity__aside { border-right: 1px solid var(--line-soft); padding-right: clamp(1rem, 0.4rem + 2vw, 2.5rem); }
.entity__title { margin-bottom: var(--space-3); }
.entity__meta { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.entity__meta li {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-sm);
    margin: 0;
}
.entity__meta dt, .entity__meta .k {
    flex: 0 0 34%;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel-500);
    padding-top: 2px;
}
.entity__meta .v { flex: 1; color: var(--ink-800); font-weight: 500; }

/* Feature panel — big two-up mandates (airports / ports) */
.feature {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    background: var(--grad-panel);
    border: 1px solid var(--hairline-dark);
    border-radius: var(--radius-md);
    color: var(--text-on-dark);
    overflow: hidden;
    isolation: isolate;
}
.feature::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -40%; right: -30%;
    width: 90%; height: 180%;
    background: radial-gradient(circle at 50% 50%, rgba(224, 33, 40, 0.10) 0%, rgba(224, 33, 40, 0) 68%);
    pointer-events: none;
}
.feature h3 { color: #fff; }
.feature p { color: var(--text-on-dark-muted); }
.feature__num {
    font-family: var(--font-display);
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(168, 198, 240, 0.16);
    margin-bottom: var(--space-4);
}
.feature__list { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.feature__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--hairline-dark);
    font-size: var(--fs-sm);
    color: var(--text-on-dark-muted);
    margin: 0;
}
.feature__list i { color: var(--red-300); margin-top: 0.35em; font-size: 0.75rem; flex: 0 0 auto; }

/* --- Past-performance record ---------------------------------------------
   Delivered work, as distinct from mandates the Group is pursuing. The site is
   otherwise necessarily forward-looking, so anything actually built gets its
   own treatment and is never mixed into a capability card. --- */
.record {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
    align-items: start;
    padding: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
    background: var(--grad-panel);
    border: 1px solid var(--hairline-dark);
    border-left: 4px solid var(--red-600);
    border-radius: var(--radius-md);
    color: var(--text-on-dark);
    overflow: hidden;
    isolation: isolate;
}
.record::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -60%; right: -18%;
    width: 70%; height: 220%;
    background: radial-gradient(circle at 50% 50%, rgba(224, 33, 40, 0.10) 0%, rgba(224, 33, 40, 0) 66%);
}
.record__mark {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: var(--radius-sm);
    background: rgba(224, 33, 40, 0.16);
    border: 1px solid rgba(255, 107, 114, 0.30);
    color: var(--red-300);
}
.record__mark .icon { width: 36px; height: 36px; }
.record__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red-300);
    margin: 0 0 var(--space-3);
}
.record__label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--hairline-dark);
}
.record h3 { color: #fff; margin-bottom: var(--space-3); }
.record p { color: var(--text-on-dark-muted); margin-bottom: var(--space-4); }
.record__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.record__meta li { margin: 0; }

@media (max-width: 640px) {
    .record { grid-template-columns: minmax(0, 1fr); }
}

/* Capability grid: let a card claim two columns so a 7-card grid closes cleanly */
.card--wide { grid-column: span 2; }
@media (max-width: 960px) { .card--wide { grid-column: span 1; } }

/* ==========================================================================
   13. LISTS: checks, numbered process, definition rows
   ========================================================================== */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: var(--space-3);
    color: var(--text-muted);
}
.checklist li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0; top: 0.16em;
    font-size: 0.75rem;
    color: var(--red-600);
}
.section--dark .checklist li { color: var(--text-on-dark-muted); }
.section--dark .checklist li::before { color: var(--red-300); }

.process { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.process__step {
    counter-increment: step;
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--line);
    margin: 0;
}
.process__step:last-child { border-bottom: 1px solid var(--line); }
.process__step::before {
    content: '0' counter(step);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--red-600);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.process__step h3, .process__step h4 { margin-bottom: var(--space-2); }
.process__step p { color: var(--text-muted); margin: 0; }
.section--dark .process__step { border-color: var(--hairline-dark); }
.section--dark .process__step::before { color: var(--red-300); }

.deflist { margin: 0; }
.deflist__row {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--line);
}
.deflist__row:last-child { border-bottom: 1px solid var(--line); }
.deflist__row dt {
    font-family: var(--font-display);
    font-weight: 650;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy-700);
}
.deflist__row dd { margin: 0; color: var(--text-muted); }
.section--dark .deflist__row { border-color: var(--hairline-dark); }
.section--dark .deflist__row dt { color: var(--blue-200); }
.section--dark .deflist__row dd { color: var(--text-on-dark-muted); }

/* ==========================================================================
   14. COUNTRY / NETWORK CARDS
   ========================================================================== */

.country {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: border-color var(--t-base);
}
.country:hover { border-color: var(--navy-700); }
.country__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }

.country__name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--ink-900); margin: 0; letter-spacing: -0.015em; }
.country__region { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-700); margin: 2px 0 0; }
.country p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.country__lanes { list-style: none; margin: auto 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.country__lanes li { margin: 0; }
.tag {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    background: var(--blue-050);
    border: 1px solid rgba(0, 40, 104, 0.12);
    border-radius: var(--radius-xs);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--navy-700);
    white-space: nowrap;
}

/* --- Partner identity lockup -------------------------------------------
   The alliance companies trade under the same Trident Northstar mark as the
   U.S. entities. That shared identity is the point of the section, so the mark
   leads each panel above a hairline. The market code is carried by the company
   name itself (Trident Northstar AU), so no separate badge is needed. --- */
.ally-mark {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--line-soft);
}
.ally-mark__logo { width: 54px; height: 54px; flex: 0 0 auto; }

/* ==========================================================================
   15. QUOTE / CALLOUT / NOTICE
   ========================================================================== */

.pullquote {
    position: relative;
    margin: 0;
    padding-left: clamp(1.25rem, 0.5rem + 2.4vw, 2.5rem);
    border-left: 3px solid var(--red-600);
}
.pullquote p {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
    font-weight: 600;
    line-height: 1.34;
    letter-spacing: -0.022em;
    color: var(--ink-900);
    margin-bottom: var(--space-5);
    text-wrap: balance;
}
.section--dark .pullquote p { color: #fff; }
.pullquote footer {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel-500);
}
.section--dark .pullquote footer { color: var(--blue-200); }

.notice {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--navy-700);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.notice i { color: var(--navy-700); font-size: 1rem; margin-top: 0.15em; flex: 0 0 auto; }
.notice strong { color: var(--ink-900); font-weight: 650; }
.notice div > strong:first-child { display: block; margin-bottom: var(--space-2); }
.notice--dark {
    background: rgba(168, 198, 240, 0.05);
    border-color: var(--hairline-dark);
    border-left-color: var(--red-600);
    color: var(--text-on-dark-muted);
}
.notice--dark i { color: var(--red-300); }
.notice--dark strong { color: #fff; }
.notice--dark div > strong:first-child { color: #fff; }

/* ==========================================================================
   16. CTA BAND
   ========================================================================== */

.cta-band {
    position: relative;
    background: var(--navy-700);
    color: #fff;
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    overflow: hidden;
    isolation: isolate;
}
.cta-band::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--seam);
}
.cta-band__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}
.cta-band h2 { color: #fff; margin-bottom: var(--space-3); max-width: 22ch; }
.cta-band p { color: rgba(255, 255, 255, 0.78); margin: 0; max-width: 52ch; }

/* Legal / long-form pages */
.prose { max-width: 74ch; }
.prose h2 { font-size: var(--fs-h4); margin-top: var(--space-10); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-muted); }
.prose ul { padding-left: 1.25rem; }

/* ==========================================================================
   17. FORMS
   ========================================================================== */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-group--full { grid-column: 1 / -1; }

.form-group label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-700);
}
.form-group label .req { color: var(--red-700); }

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.8rem 0.95rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--ink-900);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-group textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6B84' d='M1.4 1.6 6 6.2l4.6-4.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    background-size: 12px;
    padding-right: 2.4rem;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--navy-700);
    box-shadow: 0 0 0 3px rgba(0, 40, 104, 0.12);
}
.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
    border-color: var(--red-600);
    box-shadow: 0 0 0 3px rgba(224, 33, 40, 0.1);
}
.form-error { font-size: 0.8125rem; color: var(--red-700); min-height: 1.1em; }

.form-consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 0.8125rem; color: var(--text-muted); }
.form-consent input { width: auto; margin-top: 0.25em; flex: 0 0 auto; }

.form-status {
    display: none;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    margin-top: var(--space-5);
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: #ECFDF3; border: 1px solid #A6E7C3; color: #04673A; }
.form-status.is-error   { background: var(--red-050); border: 1px solid rgba(224, 33, 40, 0.3); color: var(--red-700); }

/* Contact channel rows */
.channel {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--line);
}
.channel:last-child { border-bottom: 1px solid var(--line); }
.channel__icon {
    display: block;
    width: auto; height: auto;
    flex: 0 0 auto;
    padding-top: 2px;
    color: var(--navy-700);
}
.channel__label {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel-500);
    margin: 0 0 var(--space-1);
}
.channel__value { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink-900); margin: 0; }
.channel__note { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--space-1) 0 0; }

/* ==========================================================================
   18. FOOTER
   ========================================================================== */

.site-footer {
    background: var(--navy-975);
    color: var(--text-on-dark-muted);
    border-top: 3px solid transparent;
    border-image: var(--seam) 1;
    /* Sized so the longest entry — "Trident Northstar Investments LLC" — fits on
       one line in a 4-column footer. See the footer breakpoint note below. */
    font-size: 0.8125rem;
}
.footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.footer__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__sub { color: var(--blue-300); }
.footer__about { max-width: 42ch; margin-bottom: var(--space-6); line-height: 1.7; font-size: 0.875rem; }

.footer__title {
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red-300);
    margin: 0 0 var(--space-5);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: var(--space-3); }
.footer__list a { white-space: nowrap; }
.footer__list a { color: var(--text-on-dark-muted); }
.footer__list a:hover { color: #fff; }
.footer__list .ext { font-size: 0.7em; opacity: 0.7; margin-left: 4px; }

.footer__contact { list-style: none; margin: 0; padding: 0; }
.footer__contact li { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); line-height: 1.6; }
.footer__contact li > span, .footer__contact a { white-space: nowrap; }
.footer__contact i { color: var(--blue-300); margin-top: 0.28em; flex: 0 0 auto; width: 14px; }
.footer__contact a { color: var(--text-on-dark-muted); }
.footer__contact a:hover { color: #fff; }

/* Entity/naming disclosure. It used to sit under the org chart, where it
   interrupted the diagram; as footer small print it appears on every page
   instead of two, which is also better for diligence. */
.footer__disclosure {
    margin: 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--hairline-dark);
    font-size: 0.75rem;                  /* 12px — legal text must be readable, not decorative */
    line-height: 1.75;
    color: rgba(214, 228, 248, 0.66);    /* ~7:1 on the footer ground; 0.40 was ~3:1 and failed AA */
    max-width: 110ch;
}

.footer__disclosure--legal { border-top: 0; padding-top: var(--space-3); }

.footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-6);
    margin-top: var(--space-6);
    border-top: 1px solid var(--hairline-dark);
    font-size: 0.75rem;
    color: rgba(214, 228, 248, 0.62);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.footer__legal li { margin: 0; }
.footer__bar a { color: rgba(214, 228, 248, 0.62); }
.footer__bar a:hover { color: #fff; }

/* Back to top */
.to-top {
    position: fixed;
    right: clamp(1rem, 2vw, 2rem);
    bottom: clamp(1rem, 2vw, 2rem);
    z-index: 900;
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    background: var(--navy-700);
    color: #fff;
    border: 1px solid var(--blue-600);
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base), background var(--t-base);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--red-600); border-color: var(--red-600); }

/* ==========================================================================
   19. REVEAL ANIMATION
   ========================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__creds { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-5); }
    .hero__cred:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}

/* Footer collapses to 2 columns earlier than the rest of the layout: below
   1200px a 4-column footer cannot hold the longest entity name on one line. */
@media (max-width: 1200px) {
    .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .nav-menu {
        position: absolute;   /* resolves against .site-header (sticky = positioned) */
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-4) var(--space-6) var(--space-8);
        background: var(--white);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md);
        max-height: calc(100dvh - var(--header-height));
        overflow-y: auto;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
    }
    .nav-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-link {
        padding: var(--space-4) 0;
        border-bottom: 1px solid var(--line-soft);
        font-size: 1.0625rem;
        border-radius: 0;
    }
    .nav-link::after { left: 0; right: auto; bottom: -1px; width: 42px; }
    .nav-cta { margin: var(--space-5) 0 0; }
    .nav-cta .btn { width: 100%; }
    .nav-toggle { display: inline-flex; }

    .split, .split--lead, .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
    .entity { grid-template-columns: minmax(0, 1fr); }
    .entity__aside { border-right: 0; border-bottom: 1px solid var(--line-soft); padding-right: 0; padding-bottom: var(--space-6); }
}

@media (max-width: 760px) {
    /* Narrow viewports crop the apex field so tightly that the chevrons run
       straight through the body copy. Scale the field up so fewer, larger lines
       show, and swap the side scrim for a vertical one that goes near-solid
       under the text. */
    .hero::before,
    .page-hero::before {
        background-image:
            linear-gradient(178deg,
                rgba(4, 16, 31, 0.30) 0%,
                rgba(4, 16, 31, 0.78) 32%,
                rgba(4, 16, 31, 0.94) 60%,
                var(--navy-950) 100%),
            url("../img/hero-apex.svg"),
            radial-gradient(76% 34% at 70% 0%,
                rgba(224, 33, 40, 0.30) 0%,
                rgba(224, 33, 40, 0) 72%);
        background-size: auto, 200% auto, auto;
        background-position: center, 62% 0%, center;
    }


    /* Org chart collapses to a left-rail tree */
    .org-parent { max-width: none; }
    .org-children { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-top: 0; padding-left: 26px; }
    .org-children::before {
        display: block;
        left: 0; right: auto;
        top: 0; bottom: 50%;
        width: 2px; height: auto;
        background: var(--org-line);
    }
    .org-branch::before {
        top: 50%; left: -26px;
        width: 26px; height: 0;
        border-left: 0;
        border-top: 2px solid var(--org-line);
        transform: none;
    }
    .org-branch--ally::before { border-top-style: dashed; border-top-color: var(--org-line-alt); }
    .org-branch::after { display: none; }
    .org-node { text-align: left; }
    .org-node__logo { margin-left: 0; }
    .org-alliance { margin-top: var(--space-8); }
    .org-alliance::before { left: 26px; top: -32px; height: 32px; }
    .org-alliance__label, .org-alliance__list { text-align: left; justify-content: flex-start; }

    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .process__step { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .deflist__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .footer__main { grid-template-columns: minmax(0, 1fr); }
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
    .grid--4 { grid-template-columns: minmax(0, 1fr); }
    .hero__creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__cred { padding-left: 0 !important; border-left: 0 !important; }
    .btn-row .btn { width: 100%; }
    .brand__sub { display: none; }
}

/* ==========================================================================
   21. MOTION & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

@media print {
    .site-header, .to-top, .cta-band, .nav-toggle { display: none !important; }
    body { color: #000; background: #fff; }

    /* Reveal-on-scroll content must not print blank: force everything visible. */
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

    /* Dark grounds go white in print, so every light-on-dark color must go dark too —
       the earlier version only fixed headings and printed body copy white-on-white. */
    .section--dark, .hero, .page-hero, .site-footer, .feature, .record, .card--dark,
    .org-node--parent, .cta-band { background: #fff !important; color: #000 !important; border-color: #999 !important; }
    .section--dark *, .hero *, .page-hero *, .site-footer *, .feature *, .record *,
    .card--dark *, .org-node--parent * { color: #000 !important; }
    .hero::before, .page-hero::before, .hero::after, .page-hero::after { display: none !important; }
    .footer__disclosure, .footer__bar { color: #333 !important; }

    .card, .org-node, .entity, .record, .feature { break-inside: avoid; box-shadow: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}