/* ============================================================
   HJV Momentum Sdn Bhd — site stylesheet
   Brand: Navy #103766 / Gold #B8860B / Cream #F8F4EC
   Cormorant Garamond (display) / Montserrat (body)
   ============================================================ */

/* Single committed theme: navy ground, gold accent, cream text.
   The site does NOT follow the viewer's light/dark setting — every visitor sees
   the same navy. To restore the adaptive light/dark behaviour instead, see the
   commented block at the foot of this file. */

:root {
  color-scheme: dark;

  --navy:        #103766;
  --gold:        #B8860B;
  --cream:       #F8F4EC;

  --ground:        #0A2445;
  --band:          #0E2C53;
  --band-dark:     #061A33;
  --ink:           #F2EEE4;
  --ink-on-dark:   #F2EEE4;
  --muted:         #A8B6C9;
  --muted-on-dark: #A8B6C9;
  --accent:          #D9A62E;
  --accent-on-dark:  #D9A62E;
  --rule:          #1F4272;
  --rule-strong:   #2C4E7C;
  --rule-on-dark:  #24406A;
  --field:         #0E2C53;
  --field-rule:    #2C4E7C;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.875rem;
  --t-2xl:  2.5rem;
  --t-3xl:  3.25rem;
  --t-4xl:  4.5rem;

  --measure: 34rem;
  --gutter:  clamp(1.25rem, 5vw, 4.5rem);
  --shell:   72rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #16202E;
  padding: 0.75rem 1.25rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- primitives ---------- */

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 48rem; }

.eyebrow {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.lede { font-size: var(--t-md); color: var(--muted); max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }

.corridor {
  display: flex; align-items: center; gap: 0.875rem;
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.corridor__line {
  flex: 1; height: 1px; min-width: 2.5rem; position: relative;
  background: linear-gradient(to right, var(--rule-strong), var(--accent), var(--rule-strong));
}
.corridor__line::before, .corridor__line::after {
  content: ""; position: absolute; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--accent);
}
.corridor__line::before { left: 0; }
.corridor__line::after  { right: 0; }

/* ---------- hero corridor arc ----------
   The corridor motif at hero scale. The arc draws itself once on load, then
   rests. Base styles below are the FINISHED state, so if animation never runs
   (reduced motion, a screenshot, an old engine) the figure is fully drawn. */

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.hero-figure { display: block; }
.hero-figure svg { display: block; width: 100%; height: auto; max-width: 27rem; margin-inline: auto; }

/* ---------- image slots ----------
   .shot is a real photograph; .shot--empty is the placeholder standing in for
   one, naming the file it is waiting for. Both hold the same aspect ratio, so
   dropping the file in never reflows the page. */

.shot {
  display: block; width: 100%;
  aspect-ratio: var(--ratio, 4/3);
  object-fit: cover;
  background: var(--band);
}
.shot--empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.4rem;
  border: 1px dashed var(--rule-strong);
  text-align: center; padding: 1rem;
}
.shot__label {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.shot__file {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.6875rem; color: var(--muted); word-break: break-all;
}

.shot-row {
  display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: 2rem;
}

.founder .shot { margin-bottom: 0.5rem; }
.wordmark__logo { display: block; height: 2rem; width: auto; }

.map__land { fill: var(--band); stroke: var(--rule-strong); stroke-width: 0.6; }
.map__grat { fill: none; stroke: var(--rule); stroke-width: 0.6; opacity: 0.7; }

/* The planes. Every spoke shares one duration and one delay, so the whole fan
   departs Kuala Lumpur together and lands together.
   Base state parks each plane at its destination, so if offset-path is
   unsupported they read as "arrived" rather than piling up at 0,0. */
.plane { fill: var(--accent); }
@supports (offset-path: path("M0,0 L1,1")) {
  .plane { offset-path: var(--flight); offset-rotate: auto; offset-distance: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (offset-path: path("M0,0 L1,1")) {
    .plane { animation: fly 9s 0.8s linear infinite; }
  }
  /* the gold trail draws behind each plane, on the same clock */
  .arc__line { animation: trail 9s 0.8s linear infinite; }
}

@keyframes fly {
  0%   { offset-distance: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  60%  { offset-distance: 100%; opacity: 1; }
  72%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes trail {
  0%   { stroke-dashoffset: 1; opacity: 1; }
  60%  { stroke-dashoffset: 0; opacity: 1; }
  88%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.arc__track  { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.arc__line   { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round;
               stroke-dasharray: 1; stroke-dashoffset: 0; }
.arc__halo   { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.3; }
.arc__label  {
  fill: var(--ink);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  /* knock the label out of whatever sits behind it so it stays legible */
  stroke: var(--ground); stroke-width: 4px; paint-order: stroke fill;
}
/* destinations sit back from Kuala Lumpur, which stays the loudest thing here */
.arc__label--dest {
  fill: var(--muted);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em;
}

/* Intermediate stops sit back; Kuala Lumpur, the home base, reads first. */
.arc__node        { fill: var(--accent); opacity: 0.5; }
.arc__node--home  { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .arc__halo,
  .arc__label { animation: arc-fade 0.7s 0.2s ease-out both; }
}

@keyframes arc-fade { from { opacity: 0; } to { opacity: 1; } }

.btn {
  display: inline-block; font-family: inherit;
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.9rem 1.75rem;
  border: 1px solid var(--accent); background: var(--accent);
  color: #16202E; text-decoration: none; cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.btn:hover { background: transparent; color: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-row { display: flex; gap: 0.875rem; flex-wrap: wrap; }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--rule); background: var(--ground); }
.masthead__inner {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem 2rem; padding-block: 1.5rem; flex-wrap: wrap;
}
.wordmark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--t-lg); font-weight: 500;
  letter-spacing: 0.04em; text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.wordmark span { color: var(--accent); }

/* Mobile menu, CSS only — a focusable checkbox drives it, so it works with the
   keyboard and without JavaScript. Seven nav items will not fit a phone. */
.nav-toggle {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.nav-btn { display: none; }
.nav-btn__bars, .nav-btn__x {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
}
.nav-btn__x { display: none; }

.masthead nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }

@media (max-width: 60rem) {
  .masthead__inner { position: relative; }
  .nav-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    cursor: pointer; color: var(--ink);
    font-size: var(--t-xs); font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.5rem 0.25rem;
  }
  .nav-toggle:focus-visible + .nav-btn { outline: 2px solid var(--accent); outline-offset: 3px; }
  .nav-toggle:checked + .nav-btn .nav-btn__bars { display: none; }
  .nav-toggle:checked + .nav-btn .nav-btn__x    { display: block; }

  .masthead nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule);
    margin-top: 1rem;
  }
  .nav-toggle:checked ~ nav { display: flex; }
  .masthead nav a {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--rule);
    border-top: 0;
  }
  .masthead nav a.is-current,
  .masthead nav a:hover { border-bottom-color: var(--rule); color: var(--accent); }
}
.masthead nav a {
  font-size: var(--t-sm); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--muted);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.masthead nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.masthead nav a.is-current { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- page header ---------- */

.page-head { padding-block: clamp(2.75rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); }
.page-head h1 { font-size: clamp(2.5rem, 6.5vw, var(--t-3xl)); max-width: 18ch; margin-top: 1.25rem; }
.page-head .lede { margin-top: 1.5rem; }
.page-head--hero h1 { font-size: clamp(2.75rem, 7.5vw, var(--t-4xl)); max-width: 16ch; }
.page-head--hero h1 em { font-style: italic; color: var(--accent); }

.breadcrumb {
  font-size: var(--t-xs); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.breadcrumb a { text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

/* ---------- bands ---------- */

.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band--tint { background: var(--band); }
.band--navy { background: var(--band-dark); color: var(--ink-on-dark); }
.band--top { border-top: 1px solid var(--rule); }

.band--navy .lede,
.band--navy .muted,
.band--navy .service-list li,
.band--navy .pillar__who,
.band--navy .corridor { color: var(--muted-on-dark); }
.band--navy .eyebrow { color: var(--accent-on-dark); }
.band--navy h1, .band--navy h2, .band--navy h3 { color: var(--ink-on-dark); }
.band--navy .btn { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: #0A2445; }
.band--navy .btn:hover { background: transparent; color: var(--accent-on-dark); }
.band--navy .btn--ghost { background: transparent; color: var(--ink-on-dark); border-color: var(--rule-on-dark); }
.band--navy .btn--ghost:hover { border-color: var(--accent-on-dark); color: var(--accent-on-dark); }
.band--navy .service-list li::before { background: var(--accent-on-dark); }
.band--navy .corridor__line {
  background: linear-gradient(to right, var(--rule-on-dark), var(--accent-on-dark), var(--rule-on-dark));
}
.band--navy .corridor__line::before,
.band--navy .corridor__line::after { background: var(--accent-on-dark); }

.section-head { max-width: 42rem; }
.section-head h2 { font-size: clamp(1.875rem, 4.5vw, var(--t-2xl)); margin-top: 0.875rem; }
.section-head .lede { margin-top: 1.25rem; }

/* ---------- pillar tiles ---------- */

.tile-grid {
  display: grid; gap: 1px; background: var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 2.5rem;
}
.tile {
  background: var(--ground); padding: 1.75rem 1.5rem;
  text-decoration: none; display: flex; flex-direction: column; gap: 0.5rem;
}
.band--tint .tile { background: var(--band); }
.tile__role {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.tile__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--t-lg); font-weight: 400; color: var(--ink); line-height: 1.2;
}
.tile__desc { font-size: var(--t-sm); color: var(--muted); }
.tile__more {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-top: auto; padding-top: 0.75rem;
}

/* ---------- two-column pillar layout ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 4rem); }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pillar__tagline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-size: var(--t-lg);
  color: var(--accent); margin-top: 0.75rem; line-height: 1.35;
}
.pillar__who { margin-top: 1.5rem; font-size: var(--t-sm); color: var(--muted); }
.pillar__who strong {
  display: block; margin-bottom: 0.25rem;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}

.service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
.service-list li {
  position: relative; padding-left: 1.375rem;
  font-size: var(--t-sm); color: var(--muted); line-height: 1.55;
}
.service-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 1px; background: var(--accent);
}
.list-title {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.125rem;
}

/* ---------- prose ---------- */

.prose { max-width: var(--measure); display: grid; gap: 1.25rem; }
.prose p { color: var(--muted); }
.prose h3 { font-size: var(--t-xl); margin-top: 1rem; color: var(--ink); }

/* ---------- feature blocks (why / mission) ---------- */

.grid-3 {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: 2.75rem;
}
/* The rule sits on the block, not the heading, so an icon can slot between
   them without breaking the line across the three columns. */
.feature { padding-top: 1.125rem; border-top: 1px solid var(--rule-strong); }
.band--navy .feature { border-top-color: var(--rule-on-dark); }
.feature h3 { font-size: var(--t-lg); font-weight: 400; }
.feature p { font-size: var(--t-sm); color: var(--muted); margin-top: 0.75rem; }

/* Section marks — same stroke weight and geometry as the hero flight map, so
   they read as part of the system rather than a bought icon set. */
.feature__icon {
  display: block; width: 34px; height: 34px;
  margin-bottom: 1rem; color: var(--accent);
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.feature__icon .is-filled { fill: currentColor; stroke: none; }

.statement h3 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-on-dark);
}
.statement p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 300; line-height: 1.35; margin-top: 1rem; color: var(--ink-on-dark);
}

/* ---------- founders ---------- */

.founders {
  display: grid; gap: 1px; background: var(--rule); margin-top: 2.75rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.founder { background: var(--ground); padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.band--tint .founder { background: var(--band); }
.founder__name { font-size: var(--t-xl); font-weight: 400; line-height: 1.15; }
.founder__title {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.founder__bio { font-size: var(--t-sm); color: var(--muted); }
.founder__pending {
  font-size: var(--t-sm); color: var(--muted); font-style: italic;
  border-left: 2px solid var(--rule-strong); padding-left: 0.875rem;
}

.figures {
  list-style: none; margin: 0.5rem 0 0; padding: 1rem 0 0;
  display: grid; gap: 0.625rem; border-top: 1px solid var(--rule);
}
.figures li { display: flex; gap: 0.875rem; align-items: baseline; font-size: var(--t-sm); color: var(--muted); }
.figures b {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--t-lg); font-weight: 500; color: var(--accent);
  font-variant-numeric: tabular-nums; min-width: 5.5rem; flex-shrink: 0; line-height: 1.1;
}

/* ---------- programme (study mission) ---------- */

.facts {
  display: grid; gap: 1px; background: var(--rule-on-dark);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: 2.5rem;
}
.fact { background: var(--band-dark); padding: 1.5rem 1.25rem; }
.fact dt {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-on-dark);
}
.fact dd {
  margin: 0.5rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--t-lg); color: var(--ink-on-dark);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.fact dd small {
  display: block; font-family: Montserrat, Arial, sans-serif;
  font-size: var(--t-xs); color: var(--muted-on-dark); margin-top: 0.375rem; line-height: 1.5;
}

.module { border-top: 1px solid var(--rule); padding-top: 2rem; margin-top: 3rem; }
.module__label {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.module__title { font-size: clamp(1.75rem, 4vw, var(--t-2xl)); margin-top: 0.75rem; }
.module__sub { font-size: var(--t-md); color: var(--muted); margin-top: 0.875rem; max-width: var(--measure); }

.metrics {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin-top: 1.75rem; padding-block: 1.25rem;
  border-block: 1px solid var(--rule);
}
.metric b {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--t-2xl); font-weight: 400; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.metric span {
  display: block; margin-top: 0.375rem;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}

.takeaways { display: grid; gap: 1.5rem; margin-top: 2rem; }
.takeaway { display: grid; gap: 0.5rem; }
.takeaway h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--t-lg); font-weight: 500; margin: 0; line-height: 1.25;
}
.takeaway p { font-size: var(--t-sm); color: var(--muted); }
.takeaway__gain {
  font-size: var(--t-sm); color: var(--ink);
  border-left: 2px solid var(--accent); padding-left: 0.875rem;
}

/* ---------- insights ---------- */

.article-list { display: grid; gap: 0; margin-top: 2.5rem; }
.article {
  display: grid; gap: 0.5rem;
  padding-block: 1.75rem; border-top: 1px solid var(--rule);
}
.article:last-child { border-bottom: 1px solid var(--rule); }
.article__meta {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.article__title { font-size: var(--t-xl); font-weight: 400; }
.article__sub { font-size: var(--t-sm); color: var(--muted); max-width: var(--measure); }
.article__status {
  font-size: var(--t-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- contact ---------- */

.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); margin-top: 2.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }

.detail { display: grid; gap: 1.5rem; align-content: start; margin: 0; }
.detail dt {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.375rem;
}
.detail dd { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.detail dd a { color: var(--ink); text-decoration-color: var(--rule-strong); }

.form { display: grid; gap: 1.125rem; }
.form__row { display: grid; gap: 1.125rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--t-sm);
  color: var(--ink); background: var(--field);
  border: 1px solid var(--field-rule); border-radius: 0;
  padding: 0.7rem 0.8rem; width: 100%;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }

/* ---------- cta strip ---------- */

.cta-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.5rem 2rem;
}
.cta-strip h2 { font-size: clamp(1.75rem, 4vw, var(--t-2xl)); max-width: 20ch; }

/* ---------- footer ---------- */

.footer { background: var(--band-dark); color: var(--ink-on-dark); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer .wordmark { color: var(--ink-on-dark); }
.footer .wordmark span { color: var(--accent-on-dark); }
.footer__top { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.footer__tagline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--t-md); font-style: italic;
  color: var(--muted-on-dark); margin-top: 0.75rem; max-width: 24ch;
}
.footer__col h4 {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-on-dark); margin: 0 0 1rem;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.footer__col a, .footer__col li { font-size: var(--t-sm); color: var(--muted-on-dark); text-decoration: none; }
.footer__col a:hover { color: var(--accent-on-dark); }
.footer__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--rule-on-dark);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; justify-content: space-between;
  font-size: var(--t-xs); color: var(--muted-on-dark); letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ============================================================
   REVERT: adaptive light/dark
   ------------------------------------------------------------
   The site is currently locked to the navy theme for every visitor.
   To go back to following the viewer's own light/dark setting:

   1. In the :root block at the top of this file, remove
      `color-scheme: dark;` and restore the light values:
        --ground: #F8F4EC;  --band: #FFFDF8;  --band-dark: #103766;
        --ink: #16202E;     --muted: #5A6472; --accent: #B8860B;
        --rule: #DED5C4;    --rule-strong: #C4B698;
        --field: #FFFFFF;   --field-rule: #CFC5B0;
      (leave --ink-on-dark, --muted-on-dark, --accent-on-dark,
       --rule-on-dark as they are — those are for navy bands.)

   2. Uncomment the two blocks below.
   ============================================================ */

/*
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0A2445; --band: #0E2C53; --band-dark: #061A33;
    --ink: #F2EEE4; --muted: #A8B6C9;
    --accent: #D9A62E;
    --rule: #1F4272; --rule-strong: #2C4E7C; --rule-on-dark: #24406A;
    --field: #0E2C53; --field-rule: #2C4E7C;
  }
}
:root[data-theme="dark"] {
  --ground: #0A2445; --band: #0E2C53; --band-dark: #061A33;
  --ink: #F2EEE4; --muted: #A8B6C9;
  --accent: #D9A62E;
  --rule: #1F4272; --rule-strong: #2C4E7C; --rule-on-dark: #24406A;
  --field: #0E2C53; --field-rule: #2C4E7C;
}
*/

/* ---------- phone refinements ----------
   Checked at 390px: the hero figure would otherwise dominate the first screen,
   and a few grids sit one column wider than they should. */

@media (max-width: 40rem) {
  .hero-grid { gap: 2rem; }
  .hero-figure svg { max-width: 20rem; }

  /* the flight map is decoration, not information — it must never push the
     headline and the call to action below the fold on a phone */
  .page-head--hero { padding-block: 2.25rem 1.5rem; }

  .metrics { gap: 1.5rem; }
  .metric b { font-size: var(--t-xl); }

  .shot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founders, .tile-grid { grid-template-columns: minmax(0, 1fr); }

  .footer__base { flex-direction: column; gap: 0.5rem; }
  .cta-strip { flex-direction: column; align-items: flex-start; }
}