/* ═══════════════════════════════════════════════════════════════════
   SW Finance — base.css
   Tokens · Reset · Global utilities · Typography system
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand colours ─────────────────────────────────────────────── */
  --c-primary:    #0d1f3c;   /* Navy — headings, nav bg, dark sections  */
  --c-secondary:  #E63027;   /* Red  — CTAs, accents, highlights        */
  --c-secondary-muted: #cd544e; /* Less saturated Red — image badges     */
  --c-accent:     #1B4FAB;   /* Blue — links, badges, "W" in logo       */
  --c-bg:         #ffffff;   /* Page background                         */
  --c-surface:    #ffffff;   /* Card / section surface                  */
  --c-surface-2:  #f5f6f8;   /* Alternate surface (strip, callout bg)   */
  --c-text:       #111827;   /* Primary body text                       */
  --c-off:        #4a5162;   /* Secondary / caption text                */
  --c-muted:      #9299a8;   /* Muted / placeholder text                */
  --c-border:     #e4e6eb;   /* Dividers, input borders                 */
  --c-dark:       #0a1628;   /* Darker navy for gradient depths         */
  --c-nav-bg:     #0d1f3c;   /* Nav background                         */
  --c-white:      #ffffff;   /* Pure white — text on dark backgrounds   */
  --c-secondary-hover: #c4201a; /* Red darkened 15% — button hover/active */

  /* ── Spacing — base 4 px ──────────────────────────────────────── */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;   --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-8: 32px;   --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;  --sp-24: 96px;

  /* ── Font families ─────────────────────────────────────────────── */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;

  /* ── Type scale — Major Third (ratio 1.25) ─────────────────────── */
  --ts--2: 0.64rem;
  --ts--1: 0.80rem;
  --ts-0:  1.00rem;
  --ts-1:  1.25rem;
  --ts-2:  1.563rem;
  --ts-3:  1.953rem;
  --ts-4:  2.441rem;
  --ts-5:  3.052rem;
  --ts-6:  3.815rem;

  /* ── Semantic type roles ────────────────────────────────────────── */
  --text-display:  clamp(var(--ts-4), 5vw,   var(--ts-6));
  --text-title:    clamp(var(--ts-3), 4vw,   var(--ts-5));
  --text-subtitle: clamp(var(--ts-2), 2.5vw, var(--ts-4));
  --text-lead:     clamp(var(--ts-1), 1.5vw, var(--ts-2));
  --text-body:     clamp(var(--ts-0), 1vw,   var(--ts-1));
  --text-small:    var(--ts--1);
  --text-micro:    var(--ts--2);

  /* font-weight */
  --weight-display: 700;
  --weight-heading: 600;
  --weight-body:    400;
  --weight-label:   500;

  /* line-height */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* letter-spacing */
  --tracking-wide:  0.08em;
  --tracking-tight: -0.02em;

  /* ── Nav link — slightly tighter than --text-small for compact desktop nav */
  --text-nav-link: clamp(0.68rem, 0.9vw, var(--ts--1));

  /* ── Section system ────────────────────────────────────────────── */
  --curve-section:  clamp(16px, 3vw, 40px);
  --shadow-section: 0 -4px 24px 0 rgba(0,0,0,.08);
  --nav-h:          68px;

  /* ── Transitions ───────────────────────────────────────────────── */
  --t-fast:   160ms;
  --t-base:   280ms;
  --t-slow:   520ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* ── Stagger delays (multiples of 80ms) — used in animations.css ── */
  --stagger-1:  80ms;
  --stagger-2: 160ms;
  --stagger-3: 240ms;
  --stagger-4: 320ms;
  --stagger-5: 400ms;

  /* ── Hero above-fold animation delays ─────────────────────────── */
  --hero-delay-1: 200ms;
  --hero-delay-2: 400ms;
  --hero-delay-3: 600ms;
  --hero-delay-4: 800ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:     0ms;
    --t-base:     0ms;
    --t-slow:     0ms;
    --stagger-1:  0ms;
    --stagger-2:  0ms;
    --stagger-3:  0ms;
    --stagger-4:  0ms;
    --stagger-5:  0ms;
    --hero-delay-1: 0ms;
    --hero-delay-2: 0ms;
    --hero-delay-3: 0ms;
    --hero-delay-4: 0ms;
  }
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family:  var(--font-body);
  font-size:    var(--text-body);
  font-weight:  var(--weight-body);
  line-height:  var(--leading-normal);
  color:        var(--c-text);
  background-color: var(--c-bg);
}

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

button, input, select, textarea { font: inherit; }

[id] { scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }

/* ── Skip link ──────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 9999;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-primary);
  color: var(--c-white);
  font-size:   var(--text-small);
  font-weight: var(--weight-label);
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translateY(0); }

/* ── Global utilities ───────────────────────────────────────────── */
.is-hidden       { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Hides native <select> from view while keeping it in FormData.
   Used by select.js — JS sets tabindex="-1" and aria-hidden="true" alongside. */
.native-select-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Typography utility classes ─────────────────────────────────── */
.text-display {
  font-family:    var(--font-display);
  font-size:      var(--text-display);
  font-weight:    var(--weight-display);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--c-primary);
}

.text-title {
  font-family: var(--font-display);
  font-size:   var(--text-title);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  color:       var(--c-primary);
}

.text-subtitle {
  font-family: var(--font-display);
  font-size:   var(--text-subtitle);
  font-weight: var(--weight-heading);
  line-height: var(--leading-snug);
  color:       var(--c-primary);
}

.text-lead {
  font-size:   var(--text-lead);
  font-weight: var(--weight-body);
  line-height: var(--leading-normal);
  color:       var(--c-off);
}

.text-body {
  font-size:   var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-normal);
  color:       var(--c-text);
}

.text-small {
  font-size:   var(--text-small);
  font-weight: var(--weight-body);
  line-height: var(--leading-normal);
  color:       var(--c-off);
}

.text-micro {
  font-size:   var(--text-micro);
  font-weight: var(--weight-body);
  line-height: var(--leading-loose);
  color:       var(--c-off);
}

/* ── Semantic component classes ─────────────────────────────────── */
.eyebrow {
  font-size:      var(--text-small);
  font-weight:    var(--weight-label);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--c-secondary);
}
.eyebrow--light { color: rgba(255,255,255,0.75); }

.section-heading {
  font-family: var(--font-display);
  font-size:   var(--text-title);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  color:       var(--c-primary);
}
.section-heading--light { color: var(--c-white); }

.section-body {
  font-size:   var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-normal);
  color:       var(--c-off);
}
.section-body + .section-body { margin-top: var(--sp-4); }
.section-body--spaced          { margin-top: var(--sp-6); }
.section-body--callout         { font-weight: var(--weight-heading); color: var(--c-primary); }
.section-body--light           { color: rgba(255,255,255,0.80); }

/* ── Container ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-8);
}

@media (max-width: 768px) {
  .container { padding-inline: var(--sp-6); }
}
@media (max-width: 400px) {
  .container { padding-inline: var(--sp-4); }
}

/* ── Section overlap stack ──────────────────────────────────────── */
.section-layer {
  position: relative;
  border-radius: var(--curve-section) var(--curve-section) 0 0;
  margin-top: calc(-1 * var(--curve-section));
  padding-top: calc(var(--sp-20) + var(--curve-section));
  padding-bottom: var(--sp-20);
  box-shadow: var(--shadow-section);
}
.section-layer--5 { z-index: 5; }
.section-layer--4 { z-index: 4; }
.section-layer--3 { z-index: 3; }
.section-layer--2 { z-index: 2; }
.section-layer--1 { z-index: 1; border-radius: 0; box-shadow: none; }

/* ── Layout utilities ───────────────────────────────────────────── */
.layout-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.layout-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-6);
  list-style: none;
}

@media (max-width: 900px) {
  .layout-split,
  .layout-two-col { grid-template-columns: 1fr; }
}