/* ============================================================
   Operational Edge — brand stylesheet
   Palette and typography per the Operational Edge brand board
   and the SARManager pitch deck.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Brand palette */
  --navy-900: #0b1d2d;
  --navy-800: #0e2841;
  --navy-700: #12314f;
  --ink: #1b1f24;
  --slate-600: #36424f;
  --slate-400: #6b7785;
  --slate-300: #8a93a0;
  --slate-200: #a7b0ba;
  --paper: #f2f4f7;
  --gold: #c9a26b;
  --gold-dark: #9c7b5c;

  /* Semantic */
  --bg: var(--navy-900);
  --surface: rgba(255, 255, 255, 0.035);
  --surface-strong: rgba(255, 255, 255, 0.06);
  --line: rgba(167, 176, 186, 0.18);
  --line-strong: rgba(201, 162, 107, 0.4);
  --text: var(--paper);
  --text-muted: var(--slate-200);
  --text-dim: var(--slate-300);

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --radius: 14px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* clears the sticky header */
  -webkit-text-size-adjust: 100%; /* stop iOS inflating text in landscape */
}

/* Pages carrying a sticky sub-nav need to clear both bars. */
html:has(.subnav) {
  scroll-padding-top: 144px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Long unbroken strings (email addresses) must not force a scrollbar. */
  overflow-wrap: break-word;
}

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

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

a:hover {
  color: #e0bd88;
}

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

.wrap {
  width: min(100% - 3rem, var(--wrap));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--gold);
  color: var(--navy-900);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ── Typography ───────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
  /* Even out line lengths so headings don't strand a single word
     ("...one operating / philosophy"). */
  text-wrap: balance;
}

/* Avoid a one-word last line in running copy and list items. */
p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

/* Cormorant ships oldstyle figures by default, which renders "v1.4.40"
   as "vI.4.40". Any number set in the display face needs lining figures. */
.stat-block dt,
.stat-block__value,
.facts dt,
.step__num,
.pillar__num,
.error-page__code {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
}

h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
}

h3 {
  font-size: 1.3rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.005em;
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}

.accent {
  color: var(--gold);
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-muted);
  font-weight: 300;
  max-width: 62ch;
}

.rule {
  width: 64px;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: 0 0 1.6rem;
}

/* ── Buttons ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.95rem 1.7rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.btn--primary {
  background: var(--gold);
  color: var(--navy-900);
}

.btn--primary:hover {
  background: #dcb47c;
  color: var(--navy-900);
  transform: translateY(-2px);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--paper);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ── Header / nav ─────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 29, 45, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(11, 29, 45, 0.96);
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--paper);
}

.logo:hover {
  color: var(--paper);
}

.logo__mark {
  width: 44px;
  height: 29px; /* mark is 3:2 */
  flex: none;
}

.logo__text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.05;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.logo__word--accent {
  color: var(--gold);
  font-weight: 600;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}

.nav__list a:hover,
.nav__list a[aria-current="page"] {
  color: var(--paper);
  border-bottom-color: var(--gold);
}

.nav__cta {
  color: var(--navy-900) !important;
  background: var(--gold);
  padding: 0.7rem 1.2rem !important;
  border-bottom: 0 !important;
}

.nav__cta:hover {
  background: #dcb47c;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--paper);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

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

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

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

/* ── Sub-navigation (page sections) ───────────────────────── */

.subnav {
  position: sticky;
  top: 78px;
  z-index: 90;
  background: rgba(8, 23, 36, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.subnav__inner {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  min-height: 52px;
}

.subnav__title {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.subnav__list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.subnav__list::-webkit-scrollbar {
  display: none;
}

.subnav__list a {
  display: block;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.9rem 0;
  border-bottom: 1px solid transparent;
}

.subnav__list a:hover,
.subnav__list a[aria-current="true"] {
  color: var(--paper);
  border-bottom-color: var(--gold);
}

/* ── Hero ─────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 86vh, 860px);
  padding: 6rem 0 5rem;
  overflow: hidden;
  border-bottom: 2px solid var(--gold);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("assets/hero-bg.jpg");
  background-size: cover;
  background-position: center right;
  z-index: 0;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--navy-900) 0%,
    rgba(11, 29, 45, 0.92) 38%,
    rgba(11, 29, 45, 0.55) 68%,
    rgba(11, 29, 45, 0.35) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.hero--compact {
  min-height: clamp(420px, 62vh, 620px);
  padding: 5rem 0 4rem;
}

.hero__tagline {
  margin-top: 2.6rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-style: italic;
  color: var(--gold);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 2rem;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero__meta span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.hero__meta span::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ── Sections ─────────────────────────────────────────────── */

.section {
  /* 120px top+bottom stacked to ~240px of dead space between sections;
     this keeps the airy feel without the page reading as disconnected. */
  padding: clamp(3.5rem, 6.5vw, 5.5rem) 0;
  position: relative;
}

.section--alt {
  background: linear-gradient(180deg, rgba(14, 40, 65, 0.55), rgba(11, 29, 45, 0));
  border-block: 1px solid var(--line);
}

.section--dark {
  background: #081724;
  border-block: 1px solid var(--line);
}

.section__head {
  max-width: 62ch;
  margin-bottom: 2.75rem;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head--center .rule {
  margin-inline: auto;
}

.section__lead {
  color: var(--text-muted);
  font-size: 1.08rem;
}

/* ── Grids ────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.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--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ── Cards ────────────────────────────────────────────────── */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
    background 0.3s var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--gold);
  opacity: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  transition: opacity 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  background: var(--surface-strong);
}

.card:hover::before {
  opacity: 1;
}

.card h3 {
  margin-bottom: 0.5rem;
  color: var(--paper);
}

.card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.card--flat:hover {
  transform: none;
}

.icon {
  width: 30px;
  height: 30px;
  margin-bottom: 1.1rem;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Numbered steps ───────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

/* Use a modifier, never an inline grid-template-columns — inline styles
   outrank the media queries below and would stay 3-across on a phone. */
.steps--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.step {
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}

/* Headings wrap to different line counts ("Achieve sustainable growth"
   takes two lines where its siblings take one), which pushed the body
   copy out of alignment across the row. Subgrid locks the rows together. */
@supports (grid-template-rows: subgrid) {
  .steps > .step {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }
}

.step:hover {
  border-top-color: var(--gold);
}

.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.65;
  margin-bottom: 0.7rem;
}

.step h3 {
  margin-bottom: 0.4rem;
}

.step p {
  color: var(--text-muted);
  font-size: 0.94rem;
  margin: 0;
}

/* ── Values row ───────────────────────────────────────────── */

.value {
  text-align: center;
  padding: 1.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.value:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

.value .icon {
  margin-inline: auto;
}

.value h3 {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Feature / split layouts ──────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split--wide-left {
  grid-template-columns: 1.15fr 0.85fr;
}

.split__media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--navy-800);
}

.split__media img {
  width: 100%;
  height: auto;
}

.split__caption {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 0.9rem;
}

/* ── Stats ────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stat-block {
  border-left: 2px solid var(--gold);
  padding: 0.4rem 0 0.4rem 1.4rem;
}

.stat-block dt,
.stat-block__value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1;
  color: var(--paper);
  margin-bottom: 0.45rem;
}

.stat-block dd,
.stat-block__label {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Definition-style lists (dash bullets, as in the deck) ── */

.dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}

.dash-list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text-muted);
  font-size: 0.97rem;
}

.dash-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 12px;
  height: 1px;
  background: var(--gold);
}

.dash-list strong {
  color: var(--paper);
  font-weight: 600;
}

/* ── Capability chips ─────────────────────────────────────── */

.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.capability {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.15rem 1.25rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.capability:hover {
  border-color: var(--line-strong);
  background: var(--surface-strong);
}

.capability h3 {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  color: var(--paper);
}

.capability p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
  margin-bottom: 1rem;
}

.tag--muted {
  color: var(--text-dim);
  border-color: var(--line);
}

/* ── Architecture diagram ─────────────────────────────────── */

.arch {
  display: grid;
  gap: 1.25rem;
}

.arch__tier {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--surface);
}

.arch__tier--core {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(201, 162, 107, 0.08), rgba(255, 255, 255, 0.02));
}

.arch__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.arch__nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.arch__node {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  background: rgba(11, 29, 45, 0.6);
}

.arch__node strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--paper);
}

.arch__node span {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Arrows are drawn, not typed — the ▾ / ↕ glyphs are missing from
   Montserrat and fell back to an unrelated dot. */
.arch__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.arch__flow::before,
.arch__flow::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}

.arch__flow--down::before,
.arch__flow--down::after {
  transform: rotate(45deg) translate(-2px, -2px);
}

.arch__flow--both::before {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.arch__flow--both::after {
  transform: rotate(45deg) translate(-2px, -2px);
}

/* ── Founders ─────────────────────────────────────────────── */

.founder {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
}

.founder__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin: 0 0 0.15rem;
  color: var(--paper);
}

.founder__role {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

/* ── Pull quote / banner ──────────────────────────────────── */

.banner {
  border-left: 2px solid var(--gold);
  padding: 0.5rem 0 0.5rem 1.8rem;
  max-width: 76ch;
}

.banner p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  color: var(--paper);
}

.banner p + p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 0.9rem;
}

/* ── Contact ──────────────────────────────────────────────── */

.contact__inner {
  max-width: 780px;
  margin-inline: auto;
}

.form {
  display: grid;
  gap: 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.optional {
  color: var(--text-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.04em;
}

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--paper);
  background: rgba(11, 29, 45, 0.7);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.8rem 0.95rem;
  transition: border-color 0.2s var(--ease);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
  outline: none;
}

.field textarea {
  resize: vertical;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #e0705f;
}

.form .btn {
  justify-self: start;
}

.form__status {
  margin: 0;
  font-size: 0.88rem;
  color: var(--gold);
  min-height: 1.4em;
}

.contact__direct {
  text-align: center;
  margin-top: 1.8rem;
  color: var(--text-dim);
  font-size: 0.94rem;
}

/* ── CTA strip ────────────────────────────────────────────── */

.cta {
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: linear-gradient(180deg, #081724, var(--navy-800));
  border-top: 2px solid var(--gold);
  text-align: center;
}

.cta h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.cta .lead {
  margin-inline: auto;
  text-align: center;
}

.cta .actions {
  justify-content: center;
}

/* ── Footer ───────────────────────────────────────────────── */

.site-footer {
  background: #071320;
  border-top: 1px solid var(--line);
  padding: 3.5rem 0 2.5rem;
  font-size: 0.88rem;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}

.site-footer h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.site-footer ul a {
  color: var(--text-muted);
}

.site-footer ul a:hover {
  color: var(--paper);
}

.site-footer__tagline {
  color: var(--text-dim);
  margin-top: 0.9rem;
  font-size: 0.86rem;
}

.site-footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.site-footer__legal {
  display: grid;
  gap: 0.35rem;
}

.site-footer__legal p {
  margin: 0;
}

.site-footer__note {
  margin: 1.2rem 0 0;
  max-width: 78ch;
  color: var(--slate-400);
  font-size: 0.75rem;
  line-height: 1.6;
}

/* ── Error page ───────────────────────────────────────────── */

.error-page {
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 5rem 0;
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 10rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
  margin: 0;
}

/* ── Pillars ──────────────────────────────────────────────── */

.pillars {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem 1.8rem;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
    background 0.3s var(--ease);
}

.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  background: var(--surface-strong);
}

.pillar__num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  opacity: 0.8;
  margin-bottom: 1.2rem;
}

.pillar .icon {
  width: 34px;
  height: 34px;
}

.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.7rem;
  color: var(--paper);
}

.pillar > p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.pillar__list {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.pillar__list li {
  position: relative;
  padding-left: 1.1rem;
}

.pillar__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
}

.pillar__foot {
  margin-top: auto;
  padding-top: 1.4rem;
}

.pillar__who {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
}

/* ── Biography ────────────────────────────────────────────── */

.bio {
  display: grid;
  grid-template-columns: 0.9fr 1.6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.bio__aside {
  position: sticky;
  top: 110px;
}

.bio__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  margin: 0 0 0.3rem;
  color: var(--paper);
}

.bio__role {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.6rem;
}

.bio__body > h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--paper);
  margin-top: 2.4rem;
  margin-bottom: 0.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.bio__body > h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.bio__body {
  max-width: 68ch; /* ~90 characters per line was too wide to read */
}

.bio__body p {
  color: var(--text-muted);
  font-size: 1rem;
}

.bio__lead {
  font-size: 1.1rem !important;
  color: var(--text) !important;
}

/* Credential chips */

.creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
}

.creds li {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.34rem 0.85rem;
}

/* Fact list in the bio sidebar */

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.facts div {
  border-left: 2px solid var(--gold);
  padding-left: 1.1rem;
}

.facts dt {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--paper);
  margin-bottom: 0.25rem;
}

.facts dd {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Scroll reveal ────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ══ Responsive ═══════════════════════════════════════════════
   Breakpoints, largest first:
     ≥1600  large desktop  — wider measure so 4K doesn't look cramped
     ≥1281  laptop/desktop — the default layout above
     ≤1280  small laptop   — 5-up values become 3-up
     ≤1080  tablet         — 4-up becomes 2-up, pillars 3-up becomes 2-up
     ≤860   nav collapses to the hamburger
     ≤700   large phone    — single column for text-heavy blocks
     ≤620   phone          — everything single column, tighter gutters
   ═════════════════════════════════════════════════════════════ */

/* ── Large desktop ────────────────────────────────────────── */

@media (min-width: 1600px) {
  :root {
    --wrap: 1320px;
  }

  .hero__inner {
    max-width: 980px;
  }
}

/* ── Small laptop ─────────────────────────────────────────── */

@media (max-width: 1280px) {
  .grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Tablet ───────────────────────────────────────────────── */

@media (max-width: 1080px) {

  .grid--3,
  .grid--4,
  .steps,
  .steps--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The three pillars stay side by side as one row — tighten them
     instead of reflowing, so the set never breaks into 2 + 1. */
  .pillar {
    padding: 1.8rem 1.3rem;
  }

  .pillar h3 {
    font-size: 1.3rem;
  }

  .pillar > p,
  .pillar__list {
    font-size: 0.85rem;
  }

  .split,
  .split--wide-left,
  .bio {
    grid-template-columns: 1fr;
  }

  .bio__aside {
    position: static;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Nav collapse ─────────────────────────────────────────── */

@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    inset: 78px 0 auto 0;
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    background: rgba(8, 23, 36, 0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 1.5rem;
    display: none;
  }

  .nav.is-open {
    display: block;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }

  .nav__list a {
    display: block;
    padding: 0.95rem 0; /* ≥44px touch target */
    border-bottom: 1px solid var(--line);
  }

  .nav__cta {
    text-align: center;
    margin-top: 0.8rem;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  /* Below the desktop nav there is no longer room for three across. */
  .pillars {
    grid-template-columns: 1fr;
  }

  .pillar {
    padding: 2rem 1.6rem;
  }
}

/* ── Large phone ──────────────────────────────────────────── */

@media (max-width: 700px) {
  .grid--3 {
    grid-template-columns: 1fr;
  }

  .grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Phone ────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .wrap {
    width: min(100% - 2rem, var(--wrap));
  }

  .grid--2,
  .grid--4,
  .steps,
  .steps--3,
  .form__row,
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .hero__bg {
    background-position: 72% center;
  }

  .form {
    padding: 1.4rem;
  }

  .pillar {
    padding: 1.8rem 1.4rem;
  }

  /* Stacked meta reads better than a cramped wrapping row. */
  .hero__meta {
    flex-direction: column;
    gap: 0.5rem;
  }

  .site-footer__bottom {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Very small phones ────────────────────────────────────── */

@media (max-width: 380px) {
  .grid--5 {
    grid-template-columns: 1fr;
  }

  .logo__text {
    font-size: 1rem;
  }
}

/* ── Short viewports (landscape phones) ───────────────────── */

@media (max-height: 620px) and (orientation: landscape) {
  .hero,
  .hero--compact {
    min-height: 0;
    padding: 4.5rem 0 3.5rem;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

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

@media print {
  .site-header,
  .nav,
  .cta,
  .hero__bg {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}