/* ==============================================================
   BASE  -  design tokens, reset, typography, utilities
   Change brand colours in the :root block below and the whole
   site follows.
   ============================================================== */

:root {
  /* ---- Brand: deep steel blue ---- */
  --navy-900:#0E2233;
  --navy-800:#132E44;
  --navy-700:#1A3D5C;
  --navy-600:#236A96;
  --blue-500:#2980B9;
  --blue-400:#4A9FCC;
  --blue-300:#8FC6E3;
  --blue-200:#C7E2F1;
  --blue-100:#E4F2FA;
  --blue-50:#F2F8FC;

  /* ---- Accent: brand green ---- */
  --green-600:#009149;
  --green-500:#00B159;
  --green-400:#2ECC71;
  --green-100:#DDF5E8;
  --green-50:#F0FAF5;

  /* ---- Highlight: gold ---- */
  --gold-600:#C98A0C;
  --gold-500:#EDB147;
  --gold-100:#FDF1DA;

  /* ---- Neutrals ---- */
  --white:#FFFFFF;
  --paper:#F5F8FB;
  --line:#E3EAF1;
  --ink:#16232F;
  --ink-soft:#41566A;
  --muted:#6B8299;
  --danger:#C0392B;

  /* ---- Shape & motion ---- */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-xl:26px;
  --r-pill:999px;

  --sh-sm:0 1px 3px rgba(19,46,68,.08);
  --sh-md:0 6px 20px rgba(19,46,68,.09);
  --sh-lg:0 18px 44px rgba(19,46,68,.14);
  --sh-xl:0 32px 80px rgba(19,46,68,.22);

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-pop:cubic-bezier(.34,1.4,.64,1);

  --header-h:72px;
  --maxw:1200px;
}

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

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

body {
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg { display:block; max-width:100%; }
img { height:auto; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; color:inherit; }
button { background:none; border:none; cursor:pointer; }
ul { list-style:none; }

:focus-visible {
  outline:3px solid var(--blue-400);
  outline-offset:2px;
  border-radius:4px;
}

/* -------------------- typography -------------------- */
h1,h2,h3,h4 { line-height:1.15; font-weight:700; color:var(--navy-800); }

.display {
  font-family:'Bebas Neue',Impact,sans-serif;
  font-weight:400;
  letter-spacing:.5px;
  line-height:1;
}

/* -------------------- layout utilities -------------------- */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }

.section { padding:78px 0; }
.section--tight { padding:56px 0; }
.section--paper { background:var(--paper); }
.section--white { background:var(--white); }
.section--navy { background:var(--navy-800); color:rgba(255,255,255,.72); }
.section--blue { background:var(--blue-50); }

.section-head { text-align:center; max-width:660px; margin:0 auto 44px; }
.section-head .eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--green-100); color:var(--green-600);
  font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  padding:6px 15px; border-radius:var(--r-pill); margin-bottom:14px;
}
.section-head h2 { font-size:clamp(30px,4.4vw,48px); }
.section-head h2 em { font-style:normal; color:var(--blue-500); }
.section-head p { color:var(--muted); font-size:16px; margin-top:12px; }
.section--navy .section-head h2 { color:#fff; }
.section--navy .section-head h2 em { color:var(--gold-500); }
.section--navy .section-head p { color:rgba(255,255,255,.6); }
.section--navy .section-head .eyebrow { background:rgba(255,255,255,.1); color:var(--gold-500); }

.rule { width:56px; height:4px; border-radius:2px; margin:16px auto 0;
        background:linear-gradient(90deg,var(--green-500),var(--blue-500)); }

/* -------------------- buttons -------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border-radius:var(--r-md);
  font-size:15px; font-weight:600; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease),
             background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

.btn--green { background:var(--green-500); color:#fff; box-shadow:0 6px 18px rgba(0,177,89,.28); }
.btn--green:hover { background:var(--green-600); box-shadow:0 10px 26px rgba(0,177,89,.36); }

.btn--gold { background:var(--gold-500); color:var(--navy-800); box-shadow:0 6px 18px rgba(237,177,71,.32); }
.btn--gold:hover { background:#f5bf63; }

.btn--navy { background:var(--navy-700); color:#fff; }
.btn--navy:hover { background:var(--navy-600); box-shadow:0 10px 26px rgba(35,106,150,.3); }

.btn--ghost { border:1.6px solid rgba(255,255,255,.4); color:#fff; }
.btn--ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; }

.btn--outline { border:1.6px solid var(--line); color:var(--ink-soft); background:var(--white); }
.btn--outline:hover { border-color:var(--blue-400); color:var(--navy-600); }

.btn--sm { padding:9px 17px; font-size:13px; border-radius:var(--r-sm); }
.btn--block { width:100%; }

/* -------------------- reveal on scroll -------------------- */
.reveal { opacity:0; transform:translateY(22px); }
.reveal.in { opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }

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

/* -------------------- a11y -------------------- */
.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;
}
.skip-link {
  position:absolute; left:12px; top:-60px; z-index:2000;
  background:var(--navy-800); color:#fff; padding:10px 18px; border-radius:var(--r-sm);
  transition:top .2s var(--ease);
}
.skip-link:focus { top:12px; }