/* ==========================================================================
   SUMMIT TECS — DESIGN SYSTEM
   ==========================================================================
   Version  : 2.0
   Aesthetic: Premium · Corporate · Engineering

   CONTENTS
   ─────────────────────────────────────────────────────────────────────────
    0.  Design Tokens  ·  :root custom properties
        0a. Colour System
        0b. Typography Scale
        0c. Spacing Scale
        0d. Elevation System
        0e. Border Radius
        0f. Breakpoints (as min-width values)
        0g. Motion & Timing
        0h. Layout
        0i. Z-Index Stack

    1.  Reset & Base
    2.  Typography Classes
    3.  Accessibility
    4.  Layout — Container & Grid
    5.  Section Utilities
    6.  Elevation (Box-shadow utilities)
    7.  Cards
    8.  Buttons
    9.  Badges
    10. Icons
    11. Forms
    12. Navigation — Header & Desktop
    13. Navigation — Mobile Drawer
    14. Page Hero (inner pages)
    15. Footer
    16. Animations & Reveal
    17. Reduced-motion overrides
    18. Print

   Load order: common.css → index.css | inner.css | 404.css
   ========================================================================== */


/* ============================================================
   0. DESIGN TOKENS
   ============================================================ */
:root {

  /* ----------------------------------------------------------
     0a. COLOUR SYSTEM
     ----------------------------------------------------------
     Naming convention: --color-{role}-{shade}
     Shades: 50 (lightest) → 900 (darkest)
     Semantic aliases map roles to the palette.
  ---------------------------------------------------------- */

  /* Navy palette — primary brand colour */
  --color-navy-50:   #EEF2F8;
  --color-navy-100:  #C9D5E8;
  --color-navy-200:  #93AACD;
  --color-navy-300:  #5E80B3;
  --color-navy-400:  #2C5282;
  --color-navy-500:  #1E3A5F;
  --color-navy-600:  #152C4A;
  --color-navy-700:  #0D1F35;
  --color-navy-800:  #0A1628;   /* brand primary */
  --color-navy-900:  #060D18;

  /* Gold palette — accent colour */
  --color-gold-50:   #FBF6EC;
  --color-gold-100:  #F3E5C4;
  --color-gold-200:  #E8CD98;
  --color-gold-300:  #DDB76C;   /* gold-light */
  --color-gold-400:  #C8A96E;   /* gold (primary accent) */
  --color-gold-500:  #B38E52;
  --color-gold-600:  #8F703E;
  --color-gold-700:  #6B5430;
  --color-gold-800:  #473820;
  --color-gold-900:  #241C10;

  /* Neutral palette */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAFAFA;
  --color-neutral-100: #F5F5F0;   /* off-white, surface */
  --color-neutral-150: #EEEEEA;
  --color-neutral-200: #E5E7EB;   /* border */
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;   /* muted text */
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #1A1A2E;   /* body text */

  /* Semantic colour aliases — USE THESE in components */
  --color-brand:        var(--color-navy-800);
  --color-brand-hover:  var(--color-navy-500);
  --color-brand-subtle: var(--color-navy-50);
  --color-accent:       var(--color-gold-400);
  --color-accent-hover: var(--color-gold-300);
  --color-accent-muted: var(--color-gold-50);

  --color-surface-0:    var(--color-neutral-0);    /* pure white */
  --color-surface-1:    var(--color-neutral-50);   /* card surface */
  --color-surface-2:    var(--color-neutral-100);  /* section bg alt */
  --color-surface-3:    var(--color-neutral-150);  /* input hover */

  --color-text-primary: var(--color-neutral-900);
  --color-text-body:    var(--color-neutral-800);
  --color-text-muted:   var(--color-neutral-500);
  --color-text-faint:   var(--color-neutral-400);
  --color-text-inverse: var(--color-neutral-0);

  --color-border:       var(--color-neutral-200);
  --color-border-focus: var(--color-navy-500);

  /* Status colours */
  --color-success:      #16a085;
  --color-success-bg:   #d1f5ef;
  --color-warning:      #d97706;
  --color-warning-bg:   #fef3c7;
  --color-error:        #dc2626;
  --color-error-bg:     #fee2e2;
  --color-info:         #2563eb;
  --color-info-bg:      #dbeafe;

  /* Overlay / backdrop */
  --color-overlay:      rgba(10, 22, 40, 0.55);
  --color-backdrop:     rgba(10, 22, 40, 0.35);

  /* ----------------------------------------------------------
     0b. TYPOGRAPHY SCALE
     ----------------------------------------------------------
     8-step modular scale (ratio ≈ 1.25 — Major Third)
     Named semantically so the scale can be updated globally.
  ---------------------------------------------------------- */

  /* Font families */
  --font-sans:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font sizes — fluid where appropriate */
  --text-xs:   0.6875rem;   /* 11px — labels, legal */
  --text-sm:   0.75rem;     /* 12px — captions, eyebrows */
  --text-base: 0.875rem;    /* 14px — UI text, nav, badges */
  --text-md:   1rem;        /* 16px — body */
  --text-lg:   1.125rem;    /* 18px — lead text */
  --text-xl:   1.25rem;     /* 20px — sub-headings */
  --text-2xl:  1.5rem;      /* 24px — section titles (small) */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px — page headings */
  --text-5xl:  3rem;        /* 48px — hero text */
  --text-6xl:  3.75rem;     /* 60px */
  --text-7xl:  4.5rem;      /* 72px — display */

  /* Fluid type (clamp) for headings */
  --text-heading-sm:  clamp(1.25rem,  2.5vw,  1.875rem);
  --text-heading-md:  clamp(1.5rem,   3.5vw,  2.5rem);
  --text-heading-lg:  clamp(1.875rem, 4.5vw,  3rem);
  --text-heading-xl:  clamp(2.25rem,  5.5vw,  4rem);
  --text-display:     clamp(2.5rem,   6vw,    5rem);

  /* Font weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Line heights */
  --leading-none:   1;
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.75;

  /* Letter spacing */
  --tracking-tight:    -0.03em;
  --tracking-snug:     -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.15em;
  --tracking-caps:      0.12em;

  /* ----------------------------------------------------------
     0c. SPACING SCALE (8-point grid)
     ----------------------------------------------------------
     --space-N where N = multiplier of 4px
     1 unit = 4px → --space-2 = 8px, --space-4 = 16px, etc.
  ---------------------------------------------------------- */
  --space-px:  1px;
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-11:  44px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-18:  72px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28:  112px;
  --space-32:  128px;

  /* Semantic spacing aliases */
  --gap-xs:    var(--space-2);
  --gap-sm:    var(--space-3);
  --gap-md:    var(--space-6);
  --gap-lg:    var(--space-8);
  --gap-xl:    var(--space-12);
  --gap-2xl:   var(--space-16);

  --section-padding-y: var(--space-24);
  --section-padding-x: var(--space-10);

  /* ----------------------------------------------------------
     0d. ELEVATION SYSTEM
     ----------------------------------------------------------
     5 levels of elevation using layered box-shadow.
     level-0 = flat (no shadow)
     level-4 = maximum elevation (modal, popover)
  ---------------------------------------------------------- */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(10,22,40,0.04),
                 0 1px 3px rgba(10,22,40,0.06);
  --elevation-2: 0 2px 6px rgba(10,22,40,0.06),
                 0 4px 12px rgba(10,22,40,0.08);
  --elevation-3: 0 6px 16px rgba(10,22,40,0.09),
                 0 10px 30px rgba(10,22,40,0.10);
  --elevation-4: 0 12px 28px rgba(10,22,40,0.12),
                 0 20px 60px rgba(10,22,40,0.14);

  /* Coloured glow elevations (brand accent) */
  --elevation-accent: 0 4px 20px rgba(200,169,110,0.18),
                      0 2px 8px  rgba(200,169,110,0.12);
  --elevation-brand:  0 4px 20px rgba(10,22,40,0.20),
                      0 2px 8px  rgba(10,22,40,0.14);

  /* ----------------------------------------------------------
     0e. BORDER RADIUS
  ---------------------------------------------------------- */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-3xl:   32px;
  --radius-full:  9999px;   /* pill */

  /* Component-level aliases */
  --radius-btn:   var(--radius-sm);
  --radius-card:  var(--radius-xl);
  --radius-input: var(--radius-md);
  --radius-badge: var(--radius-full);
  --radius-modal: var(--radius-2xl);
  --radius-tag:   var(--radius-sm);

  /* ----------------------------------------------------------
     0f. BREAKPOINTS
     ----------------------------------------------------------
     Reference only — media queries must use literal values.
     Documented here so they appear in one place.

     xs:   0px        (mobile portrait — default)
     sm:   480px      (mobile landscape)
     md:   768px      (tablet portrait)
     lg:   1024px     (tablet landscape / small desktop)
     xl:   1280px     (desktop)
     2xl:  1536px     (large desktop)
  ---------------------------------------------------------- */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ----------------------------------------------------------
     0g. MOTION & TIMING
  ---------------------------------------------------------- */
  /* Durations */
  --duration-instant:  0ms;
  --duration-fast:     120ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;
  --duration-slowest:  900ms;

  /* Easing curves */
  --ease-linear:    linear;
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot */
  --ease-smooth:    cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Named transitions */
  --transition-micro:   var(--duration-fast)   var(--ease-out);
  --transition-base:    var(--duration-normal)  var(--ease-out);
  --transition-motion:  var(--duration-slow)    var(--ease-in-out);
  --transition-appear:  var(--duration-slower)  var(--ease-out);

  /* Legacy aliases — keep for backward compatibility */
  --transition-fast:   var(--transition-micro);
  --transition-normal: var(--transition-base);
  --transition-slow:   var(--transition-motion);

  /* ----------------------------------------------------------
     0h. LAYOUT
  ---------------------------------------------------------- */
  --header-height:    72px;
  --max-width:        1280px;
  --max-width-prose:  720px;
  --max-width-narrow: 560px;

  /* Grid */
  --grid-columns:  12;
  --grid-gutter:   var(--space-6);
  --grid-margin:   var(--space-10);

  /* ----------------------------------------------------------
     0i. Z-INDEX STACK
     ----------------------------------------------------------
     Named layers prevent z-index wars.
  ---------------------------------------------------------- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-sticky:  100;
  --z-dropdown:200;
  --z-overlay: 400;
  --z-drawer:  500;
  --z-header: 1000;
  --z-modal:  1100;
  --z-toast:  1200;
  --z-skip:   9999;
}


/* ============================================================
   1. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 2;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  color: var(--color-text-body);
  background-color: var(--color-surface-0);
  line-height: var(--leading-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-primary);
}

p {
  max-width: var(--max-width-prose);
}

strong { font-weight: var(--weight-semibold); }
em     { font-style: italic; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* ============================================================
   2. TYPOGRAPHY CLASSES
   ============================================================ */

/* Display — hero headings */
.text-display {
  font-size: var(--text-display);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Heading levels */
.text-h1 {
  font-size: var(--text-heading-xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}

.text-h2 {
  font-size: var(--text-heading-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.text-h3 {
  font-size: var(--text-heading-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.text-h4 {
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.text-h5 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

/* Body text */
.text-body-lg  { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.text-body     { font-size: var(--text-md); line-height: var(--leading-relaxed); }
.text-body-sm  { font-size: var(--text-base); line-height: var(--leading-normal); }

/* UI text */
.text-ui-lg   { font-size: var(--text-base); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); }
.text-ui      { font-size: var(--text-sm);   font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); }
.text-ui-sm   { font-size: var(--text-xs);   font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); }

/* Eyebrow — section labels above headings */
.text-eyebrow {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

/* Prose lead */
.text-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: var(--max-width-narrow);
}

/* Colour utilities */
.text-primary  { color: var(--color-text-primary); }
.text-body     { color: var(--color-text-body); }
.text-muted    { color: var(--color-text-muted); }
.text-faint    { color: var(--color-text-faint); }
.text-inverse  { color: var(--color-text-inverse); }
.text-accent   { color: var(--color-accent); }
.text-brand    { color: var(--color-brand); }

/* Weight utilities */
.font-normal    { font-weight: var(--weight-normal); }
.font-medium    { font-weight: var(--weight-medium); }
.font-semibold  { font-weight: var(--weight-semibold); }
.font-bold      { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); }

/* ============================================================
   3. ACCESSIBILITY
   ============================================================ */

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-6);
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--transition-micro);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Keyboard focus ring — WCAG 2.2 AA */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Visually hidden — screen-reader only */
.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;
}

/* ============================================================
   4. LAYOUT — CONTAINER & GRID
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-10);
}

.container--narrow {
  max-width: 900px;
}

.container--prose {
  max-width: var(--max-width-prose);
}

@media (max-width: 1024px) { .container { padding-inline: var(--space-8); } }
@media (max-width: 768px)  { .container { padding-inline: var(--space-5); } }
@media (max-width: 480px)  { .container { padding-inline: var(--space-4); } }

/* ── 12-column grid ─────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

/* Column span helpers */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Common responsive auto-grid patterns */
.grid--2 { display: grid; grid-template-columns: repeat(2,  minmax(0,1fr)); gap: var(--grid-gutter); }
.grid--3 { display: grid; grid-template-columns: repeat(3,  minmax(0,1fr)); gap: var(--grid-gutter); }
.grid--4 { display: grid; grid-template-columns: repeat(4,  minmax(0,1fr)); gap: var(--grid-gutter); }

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
}

/* Flex row utility */
.flex-row {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

.flex-row--wrap   { flex-wrap: wrap; }
.flex-row--center { justify-content: center; }
.flex-row--between{ justify-content: space-between; }

/* ============================================================
   5. SECTION UTILITIES
   ============================================================ */

.section {
  padding-block: var(--section-padding-y);
}

.section--sm   { padding-block: var(--space-16); }
.section--lg   { padding-block: calc(var(--section-padding-y) * 1.5); }

.section--alt  { background: var(--color-surface-2); }
.section--dark {
  background: var(--color-brand);
  color: var(--color-text-inverse);
}
.section--dark .text-muted,
.section--dark .text-body {
  color: rgba(255, 255, 255, 0.7);
}

/* Section header block */
.section__eyebrow {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.section__title {
  font-size: var(--text-heading-lg);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--color-brand);
}

.section--dark .section__title { color: var(--color-text-inverse); }

.section__lead {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: var(--max-width-narrow);
}

.section__action {
  margin-top: var(--space-8);
}

/* ============================================================
   6. ELEVATION UTILITIES
   ============================================================ */
.elevation-0 { box-shadow: var(--elevation-0); }
.elevation-1 { box-shadow: var(--elevation-1); }
.elevation-2 { box-shadow: var(--elevation-2); }
.elevation-3 { box-shadow: var(--elevation-3); }
.elevation-4 { box-shadow: var(--elevation-4); }

/* Legacy aliases */
--shadow-sm: var(--elevation-1);
--shadow-md: var(--elevation-2);
--shadow-lg: var(--elevation-3);
--shadow-xl: var(--elevation-4);

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

/*
 * Card anatomy:
 *   .card                → base container
 *   .card--flat          → no shadow, border only
 *   .card--elevated      → elevation-2 resting
 *   .card--interactive   → hover lift effect
 *   .card--dark          → navy background variant
 *
 *   .card__media         → image/video region (flush top)
 *   .card__body          → padding region
 *   .card__eyebrow       → label above title
 *   .card__title         → heading
 *   .card__excerpt       → body text
 *   .card__footer        → bottom metadata / actions
 */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-0);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition:
    transform     var(--transition-base),
    box-shadow    var(--transition-base),
    border-color  var(--transition-base);
}

/* Variants */
.card--flat {
  box-shadow: none;
}

.card--elevated {
  box-shadow: var(--elevation-2);
  border-color: transparent;
}

.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-3);
  border-color: var(--color-accent);
}

.card--dark {
  background: var(--color-navy-800);
  border-color: rgba(255,255,255,0.08);
  color: var(--color-text-inverse);
}

.card--dark:hover {
  border-color: var(--color-accent);
}

/* Regions */
.card__media {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
}

.card__media img,
.card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.card--interactive:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

.card__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-brand);
}

.card--dark .card__title { color: var(--color-text-inverse); }

.card__excerpt {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  flex: 1;
}

.card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   8. BUTTONS
   ============================================================ */

/*
 * Button system:
 *   Base: .btn
 *   Variants: --primary, --secondary, --outline, --ghost,
 *             --gold, --outline-white, --danger
 *   Sizes: --sm, (default), --lg, --xl
 *   Modifiers: --full (full width), --icon (square icon btn),
 *              --shrink (no flex-shrink in row context)
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color  var(--transition-micro),
    border-color      var(--transition-micro),
    color             var(--transition-micro),
    transform         var(--transition-micro),
    box-shadow        var(--transition-micro);
}

.btn:active {
  transform: translateY(1px);
}

/* ── Sizes ─────────────────────────────────────── */
.btn--sm {
  padding: 8px var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
}

.btn--lg {
  padding: 14px var(--space-10);
  font-size: var(--text-md);
}

.btn--xl {
  padding: 18px var(--space-12);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

/* ── Modifiers ──────────────────────────────────── */
.btn--full    { width: 100%; }
.btn--shrink  { flex-shrink: 0; }

/* Square icon button */
.btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-md);
}

.btn--icon.btn--sm {
  width: 36px;
  height: 36px;
}

.btn--icon.btn--lg {
  width: 52px;
  height: 52px;
}

/* ── Variants ──────────────────────────────────── */

/* Primary — navy fill */
.btn--primary {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border-color: var(--color-brand);
}

.btn--primary:hover {
  background: var(--color-navy-500);
  border-color: var(--color-navy-500);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--elevation-brand);
}

/* Secondary — muted fill */
.btn--secondary {
  background: var(--color-surface-2);
  color: var(--color-brand);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  background: var(--color-neutral-200);
  border-color: var(--color-neutral-300);
  color: var(--color-brand);
  transform: translateY(-1px);
}

/* Outline — transparent, dark border */
.btn--outline {
  background: transparent;
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.btn--outline:hover {
  background: var(--color-brand);
  color: var(--color-text-inverse);
}

/* Ghost — no border */
.btn--ghost {
  background: transparent;
  color: var(--color-brand);
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
}

/* Gold — accent fill */
.btn--gold {
  background: var(--color-accent);
  color: var(--color-brand);
  border-color: var(--color-accent);
  font-weight: var(--weight-bold);
}

.btn--gold:hover {
  background: var(--color-gold-300);
  border-color: var(--color-gold-300);
  color: var(--color-brand);
  transform: translateY(-2px);
  box-shadow: var(--elevation-accent);
}

/* Outline white — for dark backgrounds */
.btn--outline-white {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-text-inverse);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
}

/* Danger */
.btn--danger {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}

.btn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: var(--color-text-inverse);
}

/* Disabled state — all variants */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* ============================================================
   9. BADGES
   ============================================================ */

/*
 * Badge anatomy:
 *   .badge                → base
 *   .badge--{variant}     → color variants
 *   .badge--sm / --lg     → size variants
 *   .badge--dot           → with leading status dot
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-badge);
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Size variants */
.badge--sm {
  padding: 2px var(--space-2);
  font-size: 0.625rem;
}

.badge--lg {
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
}

/* Colour variants */
.badge--default {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.badge--brand {
  background: var(--color-navy-50);
  color: var(--color-navy-800);
  border-color: var(--color-navy-100);
}

.badge--accent {
  background: var(--color-gold-50);
  color: var(--color-gold-700);
  border-color: var(--color-gold-100);
}

.badge--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: rgba(22,160,133,0.25);
}

.badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: rgba(217,119,6,0.25);
}

.badge--error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: rgba(220,38,38,0.25);
}

.badge--info {
  background: var(--color-info-bg);
  color: var(--color-info);
  border-color: rgba(37,99,235,0.25);
}

/* Filled (solid) modifier */
.badge--filled.badge--brand   { background: var(--color-brand);   color: #fff; border-color: transparent; }
.badge--filled.badge--accent  { background: var(--color-accent);  color: var(--color-brand); border-color: transparent; }
.badge--filled.badge--success { background: var(--color-success); color: #fff; border-color: transparent; }

/* Status dot */
.badge--dot::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   10. ICONS
   ============================================================ */

/*
 * Icon container — wraps FA icons or SVGs with consistent
 * sizing, shape, and colour treatment.
 *
 *   .icon-box              → base container
 *   .icon-box--{size}      → xs / sm / md (default) / lg / xl
 *   .icon-box--{shape}     → round / square (default)
 *   .icon-box--{style}     → solid (fill) / outline / ghost
 *   .icon-box--{color}     → brand / accent / success / etc.
 */

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-accent);
  font-size: 1.125rem;
  transition:
    background var(--transition-base),
    color      var(--transition-base);
}

/* Sizes */
.icon-box--xs { width: 28px; height: 28px; min-width: 28px; font-size: 0.75rem;  border-radius: var(--radius-sm); }
.icon-box--sm { width: 36px; height: 36px; min-width: 36px; font-size: 0.875rem; border-radius: var(--radius-md); }
.icon-box--lg { width: 60px; height: 60px; min-width: 60px; font-size: 1.375rem; border-radius: var(--radius-lg); }
.icon-box--xl { width: 72px; height: 72px; min-width: 72px; font-size: 1.75rem;  border-radius: var(--radius-xl); }

/* Shape */
.icon-box--round { border-radius: var(--radius-full); }

/* Style: outline */
.icon-box--outline {
  background: transparent;
  border: 2px solid var(--color-brand);
  color: var(--color-brand);
}

/* Style: ghost */
.icon-box--ghost {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
}

/* Style: accent ghost */
.icon-box--accent-ghost {
  background: var(--color-accent-muted);
  color: var(--color-accent);
}

/* Colour overrides */
.icon-box--brand   { background: var(--color-brand);   color: var(--color-accent); }
.icon-box--accent  { background: var(--color-accent);  color: var(--color-brand);  }
.icon-box--success { background: var(--color-success-bg); color: var(--color-success); }
.icon-box--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.icon-box--error   { background: var(--color-error-bg);   color: var(--color-error);   }
.icon-box--muted   { background: var(--color-surface-2);  color: var(--color-text-muted); }

/* ============================================================
   11. FORMS
   ============================================================ */

/*
 * Form anatomy:
 *   .form                → optional wrapper
 *   .form-group          → label + input pair
 *   .form-label          → visible label
 *   .form-input          → text / email / tel / url / number
 *   .form-select         → <select>
 *   .form-textarea       → <textarea>
 *   .form-hint           → helper text below input
 *   .form-error          → inline validation error
 *   .form-status         → AJAX submission feedback (injected by JS)
 *   .input--error        → error state modifier on input
 *   .input--success      → success state modifier on input
 */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
}

/* Required asterisk */
.form-label [aria-hidden] {
  color: var(--color-error);
  margin-left: 2px;
}

/* Base input styles shared by input, select, textarea */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 11px var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
  background: var(--color-surface-0);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-input);
  line-height: var(--leading-normal);
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--transition-micro),
    box-shadow   var(--transition-micro),
    background   var(--transition-micro);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-faint);
  font-weight: var(--weight-normal);
}

/* Focus state */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

/* Hover state */
.form-input:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled),
.form-textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--color-neutral-400);
  background: var(--color-surface-3);
}

/* Disabled state */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background: var(--color-surface-2);
  color: var(--color-text-faint);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Textarea */
.form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: var(--leading-relaxed);
}

/* Select chevron */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

/* State modifiers */
.input--error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}

.input--success {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.10);
}

/* Helper / error text */
.form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.form-error {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-error);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* AJAX submission feedback */
.form-status {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-3);
  min-height: 1.25em;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.form-status:empty { display: none; }

.form-status--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid rgba(22,160,133,0.25);
}

.form-status--error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid rgba(220,38,38,0.20);
}

/* ============================================================
   12. NAVIGATION — HEADER & DESKTOP
   ============================================================ */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-10);
  z-index: var(--z-header);
  transition: box-shadow var(--transition-base);
}

.site-header.scrolled {
  box-shadow: var(--elevation-2);
}

/* Logo */
.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.site-header__logo img {
  height: 42px;
  width: auto;
}

/* Desktop nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav__link {
  position: relative;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-body);
  border-radius: var(--radius-sm);
  transition: color var(--transition-micro);
}

/* Animated underline indicator */
.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: var(--space-4);
  right: var(--space-4);
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
  border-radius: 1px;
}

.site-nav__link:hover {
  color: var(--color-brand);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav__link[aria-current="page"] {
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
}

/* CTA in nav */
.site-nav__cta {
  margin-left: var(--space-3);
}

/* ============================================================
   13. NAVIGATION — MOBILE DRAWER
   ============================================================ */

/* Hamburger toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  gap: 5px;
  z-index: var(--z-header);
  flex-shrink: 0;
  transition: background var(--transition-micro);
}

.nav-toggle:hover {
  background: var(--color-surface-2);
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-body);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform var(--transition-base),
    opacity   var(--transition-base),
    width     var(--transition-base);
}

/* Animated X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  width: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Drawer panel */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 85vw);
  background: var(--color-surface-0);
  box-shadow: var(--elevation-4);
  transform: translateX(100%);
  transition: transform var(--transition-motion);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  padding-block-start: calc(var(--header-height) + var(--space-6));
  padding-inline: var(--space-8);
  padding-block-end: var(--space-10);
  gap: var(--space-1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav__link {
  display: block;
  padding-block: var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-body);
  border-bottom: 1px solid var(--color-border);
  transition:
    color        var(--transition-micro),
    padding-left var(--transition-micro);
}

.mobile-nav__link:hover,
.mobile-nav__link[aria-current="page"] {
  color: var(--color-accent);
  padding-left: var(--space-2);
}

.mobile-nav__link--cta {
  color: var(--color-accent);
  margin-top: var(--space-2);
}

.mobile-nav__link--cta:hover {
  color: var(--color-gold-500);
}

/* Backdrop overlay */
.mobile-nav__overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: calc(var(--z-drawer) - 10);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-motion);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.mobile-nav__overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Breakpoint: show hamburger */
@media (max-width: 1024px) {
  .site-nav        { display: none; }
  .nav-toggle      { display: flex; }
  .site-header     { padding-inline: var(--space-5); }
}

/* ============================================================
   14. PAGE HERO (inner pages)
   ============================================================ */

.page-hero {
  position: relative;
  padding-block-start: calc(var(--header-height) + var(--space-16));
  padding-block-end: var(--space-16);
  padding-inline: var(--space-10);
  background: var(--color-brand);
  overflow: hidden;
}

/* Decorative gold accent bar */
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    var(--color-navy-400) 100%
  );
}

/* Subtle geometric background texture */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(200,169,110,0.06) 0%, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(44,82,130,0.15) 0%, transparent 50%);
  pointer-events: none;
}

.page-hero__eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

.page-hero__title {
  position: relative;
  font-size: var(--text-heading-xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-inverse);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  max-width: 700px;
}

.page-hero__subtitle {
  position: relative;
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  line-height: var(--leading-relaxed);
}

/* Breadcrumb inside hero */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  position: relative;
}

.breadcrumb__link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
  transition: color var(--transition-micro);
}

.breadcrumb__link:hover { color: rgba(255, 255, 255, 0.85); }

.breadcrumb__sep     { color: rgba(255, 255, 255, 0.3); user-select: none; }
.breadcrumb__current { color: var(--color-accent); font-weight: var(--weight-medium); }

@media (max-width: 768px) {
  .page-hero {
    padding-block-start: calc(var(--header-height) + var(--space-10));
    padding-block-end: var(--space-10);
    padding-inline: var(--space-5);
  }
}

/* ============================================================
   15. FOOTER
   ============================================================ */

.site-footer {
  background: var(--color-brand);
  color: rgba(255, 255, 255, 0.7);
  padding-block-start: var(--space-16);
  padding-block-end: var(--space-8);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 560px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.site-footer__logo {
  height: 36px;
  width: auto;
  margin-bottom: var(--space-4);
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.site-footer__tagline {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: 260px;
  color: rgba(255,255,255,0.55);
}

.site-footer__heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.site-footer__link {
  display: block;
  padding-block: var(--space-1);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-micro);
}

.site-footer__link:hover {
  color: var(--color-text-inverse);
}

.site-footer__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__bottom {
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
}

.footer-legal {
  font-size: var(--text-xs);
  opacity: 0.45;
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   16. ANIMATIONS & REVEAL
   ============================================================ */

/* ── Scroll-reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal--delay-1 { transition-delay: 0.10s; }
.reveal--delay-2 { transition-delay: 0.20s; }
.reveal--delay-3 { transition-delay: 0.30s; }
.reveal--delay-4 { transition-delay: 0.40s; }
.reveal--delay-5 { transition-delay: 0.50s; }

/* Directional variants */
.reveal--left {
  transform: translateX(-24px);
}

.reveal--right {
  transform: translateX(24px);
}

.reveal--left.is-visible,
.reveal--right.is-visible {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(0.95);
}

.reveal--scale.is-visible {
  transform: scale(1);
}

/* ── Keyframe library ───────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0);  transform-origin: top;    }
  50%  { transform: scaleY(1);  transform-origin: top;    }
  51%  { transform: scaleY(1);  transform-origin: bottom; }
  100% { transform: scaleY(0);  transform-origin: bottom; }
}

@keyframes spinCCW {
  to { transform: rotate(-360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.5; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Skeleton loading shimmer */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-2) 25%,
    var(--color-neutral-150) 50%,
    var(--color-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s var(--ease-in-out) infinite;
  border-radius: var(--radius-sm);
}

/* ============================================================
   17. REDUCED-MOTION OVERRIDES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   18. PRINT
   ============================================================ */
@media print {
  .site-header,
  .mobile-nav,
  .mobile-nav__overlay,
  .nav-toggle,
  .skip-link,
  .hero__prev,
  .hero__next {
    display: none !important;
  }

  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
  }

  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    opacity: 0.7;
  }
}

/* ============================================================
   Backward-compatibility aliases
   (map old variable names to new tokens)
   ============================================================ */
:root {
  /* Old colour names → new semantic aliases */
  --color-navy:        var(--color-navy-800);
  --color-navy-mid:    var(--color-navy-500);
  --color-navy-light:  var(--color-navy-400);
  --color-gold:        var(--color-gold-400);
  --color-gold-light:  var(--color-gold-300);
  --color-off-white:   var(--color-neutral-100);
  --color-white:       var(--color-neutral-0);
  --color-text:        var(--color-text-primary);
  --color-text-muted:  var(--color-neutral-500);
  --color-border:      var(--color-neutral-200);
  --color-surface:     var(--color-neutral-50);

  /* Old font name */
  --font-primary: var(--font-sans);

  /* Old shadow names */
  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);
  --shadow-lg: var(--elevation-3);
  --shadow-xl: var(--elevation-4);
}

/* ============================================================
   NAVIGATION REDESIGN — v3
   ============================================================
   Sections:
     N1.  Utility bar (top strip)
     N2.  Header layout updates
     N3.  Mega menu — Services & Projects
     N4.  Mobile drawer — full redesign
     N5.  Scroll progress indicator
     N6.  Back-to-top button
     N7.  Footer — enhanced
     N8.  Breadcrumb (inner pages)
   ============================================================ */

/* ----------------------------------------------------------
   N1. UTILITY BAR
   Thin strip above the header — phone, email, tagline.
   Collapses on scroll via JS class .utility-bar--hidden
---------------------------------------------------------- */
.utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: var(--color-navy-900);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  z-index: calc(var(--z-header) + 1);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.utility-bar--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.utility-bar__inner {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.utility-bar__contact {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.utility-bar__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: rgba(255,255,255,0.6);
  letter-spacing: var(--tracking-wide);
  transition: color var(--transition-micro);
}

.utility-bar__link i {
  color: var(--color-accent);
  font-size: 0.6rem;
}

.utility-bar__link:hover {
  color: var(--color-text-inverse);
}

.utility-bar__tagline {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

/* Header shifts down when utility bar is visible */
.site-header {
  top: 36px;
  transition: top var(--transition-base), box-shadow var(--transition-base);
}

.site-header--no-utility {
  top: 0;
}

@media (max-width: 768px) {
  .utility-bar { display: none; }
  .site-header { top: 0; }
}

/* ----------------------------------------------------------
   N2. HEADER LAYOUT — updated for mega menu
---------------------------------------------------------- */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative;
}

/* ----------------------------------------------------------
   N3. MEGA MENU
   Triggered by .site-nav__item--has-mega:hover or keyboard
   Contains grouped links with icons and descriptions
---------------------------------------------------------- */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.site-nav__item {
  position: static; /* mega menu is full-width relative to header */
}

.site-nav__trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-body);
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-micro);
  white-space: nowrap;
  font-family: var(--font-sans);
}

.site-nav__trigger::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: var(--space-4);
  right: var(--space-4);
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
  border-radius: 1px;
}

.site-nav__trigger:hover,
.site-nav__item--open .site-nav__trigger {
  color: var(--color-brand);
}

.site-nav__trigger:hover::after,
.site-nav__item--open .site-nav__trigger::after {
  transform: scaleX(1);
}

/* Chevron icon */
.site-nav__chevron {
  font-size: 0.6rem;
  transition: transform var(--transition-base);
  color: var(--color-text-faint);
}

.site-nav__item--open .site-nav__chevron {
  transform: rotate(180deg);
}

/* ── Mega panel ─────────────────────────────────────────── */
.mega-menu {
  position: fixed;
  top: calc(36px + var(--header-height)); /* utility bar + header */
  left: 0;
  right: 0;
  z-index: calc(var(--z-header) - 1);
  background: var(--color-surface-0);
  border-bottom: 2px solid var(--color-border);
  box-shadow: var(--elevation-3);

  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity    var(--transition-base),
    visibility var(--transition-base),
    transform  var(--transition-base);
  pointer-events: none;
}

.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Adjust when utility bar is hidden */
.site-header--no-utility ~ .mega-menu,
.utility-bar--hidden ~ .site-header ~ .mega-menu {
  top: var(--header-height);
}

.mega-menu__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-8) var(--space-10);
  display: grid;
  gap: var(--space-10);
}

/* Services mega: header + 2-col grid of items */
.mega-menu--services .mega-menu__inner {
  grid-template-columns: 220px 1fr;
  align-items: start;
}

/* Projects mega: header + 3-col grid */
.mega-menu--projects .mega-menu__inner {
  grid-template-columns: 220px 1fr;
  align-items: start;
}

/* Left column — promo / heading */
.mega-menu__promo {
  padding: var(--space-6);
  background: var(--color-brand);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}

.mega-menu__promo-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.mega-menu__promo-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-inverse);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-4);
}

.mega-menu__promo-body {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.mega-menu__promo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: gap var(--transition-micro);
}

.mega-menu__promo-link:hover {
  gap: var(--space-3);
  color: var(--color-gold-300);
}

/* Right column — items grid */
.mega-menu__grid {
  display: grid;
  gap: var(--space-2);
}

.mega-menu--services .mega-menu__grid {
  grid-template-columns: repeat(2, 1fr);
}

.mega-menu--projects .mega-menu__grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Individual item */
.mega-menu__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition:
    background  var(--transition-micro),
    transform   var(--transition-micro);
}

.mega-menu__item:hover {
  background: var(--color-surface-2);
  transform: translateX(2px);
}

.mega-menu__item-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  transition: background var(--transition-micro), color var(--transition-micro);
  flex-shrink: 0;
}

.mega-menu__item:hover .mega-menu__item-icon {
  background: var(--color-accent);
  color: var(--color-brand);
}

.mega-menu__item-text {}

.mega-menu__item-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-brand);
  letter-spacing: var(--tracking-snug);
  margin-bottom: 2px;
}

.mega-menu__item-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Mega menu footer row (view-all link) */
.mega-menu__footer {
  grid-column: 1 / -1;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.mega-menu__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-brand);
  letter-spacing: var(--tracking-snug);
  transition: gap var(--transition-micro), color var(--transition-micro);
}

.mega-menu__view-all:hover {
  color: var(--color-accent);
  gap: var(--space-3);
}

/* ----------------------------------------------------------
   N4. MOBILE DRAWER — full redesign
   Full-height overlay with sections, contact info, CTA
---------------------------------------------------------- */

/* Override the previous mobile-nav rules */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-surface-0);
  box-shadow: var(--elevation-4);
  transform: translateX(100%);
  transition: transform var(--transition-motion);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

/* Header row inside drawer */
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  min-height: var(--header-height);
  flex-shrink: 0;
}

.mobile-nav__logo img {
  height: 36px;
  width: auto;
}

.mobile-nav__close {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  transition: background var(--transition-micro), color var(--transition-micro);
}

.mobile-nav__close:hover {
  background: var(--color-surface-2);
  color: var(--color-brand);
}

/* Scrollable body */
.mobile-nav__body {
  flex: 1;
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Section heading inside drawer */
.mobile-nav__section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: var(--space-4) 0 var(--space-2);
  margin-top: var(--space-2);
}

/* Main links */
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-body);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition:
    background  var(--transition-micro),
    color       var(--transition-micro),
    padding-left var(--transition-micro);
}

.mobile-nav__link:hover,
.mobile-nav__link[aria-current="page"] {
  background: var(--color-surface-2);
  color: var(--color-brand);
  padding-left: var(--space-5);
}

.mobile-nav__link--cta {
  color: var(--color-accent);
}

.mobile-nav__link--cta:hover {
  background: var(--color-accent-muted);
  color: var(--color-gold-600, #8F703E);
}

.mobile-nav__link-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-brand);
  flex-shrink: 0;
  transition: background var(--transition-micro);
}

.mobile-nav__link:hover .mobile-nav__link-icon {
  background: var(--color-brand);
  color: var(--color-accent);
}

/* Accordion sub-links */
.mobile-nav__sub {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0 var(--space-3) var(--space-10);
}

.mobile-nav__sub.is-open {
  display: flex;
}

.mobile-nav__sub-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-micro), color var(--transition-micro);
}

.mobile-nav__sub-link:hover {
  background: var(--color-surface-2);
  color: var(--color-brand);
}

/* Divider */
.mobile-nav__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-3) 0;
}

/* Contact footer inside drawer */
.mobile-nav__contact {
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex-shrink: 0;
}

.mobile-nav__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-micro);
}

.mobile-nav__contact-item i {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.mobile-nav__contact-item:hover {
  color: var(--color-brand);
}

/* ----------------------------------------------------------
   N5. SCROLL PROGRESS INDICATOR
   Thin line at top of viewport showing page read progress
---------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-navy-400));
  z-index: calc(var(--z-header) + 10);
  width: 0%;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ----------------------------------------------------------
   N6. BACK-TO-TOP BUTTON
---------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-accent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  box-shadow: var(--elevation-3);
  z-index: var(--z-sticky);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity     var(--transition-base),
    visibility  var(--transition-base),
    transform   var(--transition-base),
    background  var(--transition-micro);
  cursor: pointer;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-navy-500);
  color: var(--color-accent);
  box-shadow: var(--elevation-4);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: var(--space-5);
    right: var(--space-5);
    width: 44px;
    height: 44px;
  }
}

/* ----------------------------------------------------------
   N7. FOOTER — enhanced
---------------------------------------------------------- */

/* Footer top CTA band */
.footer-cta {
  background: var(--color-navy-500);
  padding: var(--space-12) 0;
}

.footer-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.footer-cta__text {}

.footer-cta__heading {
  font-size: var(--text-heading-md);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-inverse);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-2);
}

.footer-cta__sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.65);
}

/* Footer nav columns — already styled, adding service links */
.site-footer__services {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ----------------------------------------------------------
   N8. BREADCRUMB TRAIL — inner pages
   Already in common.css, adding nav-specific treatment
---------------------------------------------------------- */
.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  position: relative;
  flex-wrap: wrap;
}

.page-hero__breadcrumb li + li::before {
  content: '/';
  color: rgba(255,255,255,0.25);
  margin-right: var(--space-2);
}

/* ── Responsive nav cleanup ─────────────────────────────── */
@media (max-width: 1024px) {
  .site-nav__list  { display: none; }
  .nav-toggle      { display: flex; }
  .site-header     { padding-inline: var(--space-5); }
  .mega-menu       { display: none; }
}

@media (max-width: 480px) {
  .mobile-nav { width: 100vw; }
}