/* ====================================================================
   OwnCredit — hospitality growth & capital
   --------------------------------------------------------------------
   Palette  : Assets/OwnCredit Assets/ColorPallet_2.jfif
              Deep Emerald #1e5841 · Antique Gold #b08d57
              Ivory Cream  #f5f0e1 · Pale Gold    #d9c9a3
   Type     : Urbanist (display/UI, per Brand/README.txt),
              Cormorant Garamond italic (accent phrases — the one soft
              humanist note against the geometric display face),
              Geist (body), Fragment Mono (micro-labels)
   Geometry : nothing sharper than 12px; bands meet on 44px curves.
   ==================================================================== */

/* ---- 1. tokens ---------------------------------------------------- */
:root {
  /* grounds */
  --ground:       #061711;   /* deepest — page base */
  --ground-2:     #0a2018;   /* raised band */
  --emerald:      #1e5841;   /* brand deep emerald */
  --cream:        #f5f0e1;   /* ivory cream band */
  --cream-2:      #ece5d2;   /* cream surface */

  /* ink */
  --ink:          #f3efe4;
  --ink-70:       rgba(243, 239, 228, 0.74);
  --ink-55:       rgba(243, 239, 228, 0.56);
  --ink-40:       rgba(243, 239, 228, 0.40);
  --on-cream:     #10281d;
  --on-cream-70:  rgba(16, 40, 29, 0.74);
  --on-cream-50:  rgba(16, 40, 29, 0.52);

  /* accent */
  --gold:         #d4af37;
  --gold-antique: #b08d57;
  --gold-pale:    #d9c9a3;
  --gold-soft:    rgba(212, 175, 55, 0.14);

  /* lines + surfaces */
  --line:         rgba(243, 239, 228, 0.12);
  --line-soft:    rgba(243, 239, 228, 0.07);
  --line-cream:   rgba(16, 40, 29, 0.13);
  --surface:      rgba(255, 255, 255, 0.045);
  --surface-2:    rgba(255, 255, 255, 0.075);

  /* type */
  --f-display: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-sans:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:    "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* rhythm */
  --gutter: clamp(1.4rem, 5vw, 5rem);
  --wrap:   1240px;
  --sec:    clamp(4.5rem, 9vw, 8.5rem);
  --s-1:    clamp(0.7rem, 1.1vw, 1rem);
  --s-2:    clamp(1.15rem, 2.2vw, 2rem);
  --s-3:    clamp(1.9rem, 3.8vw, 3.4rem);
  --s-4:    clamp(2.6rem, 5vw, 4.5rem);

  /* soft corners — the brief asks for nothing sharp */
  --r-xs: 12px;
  --r-sm: 16px;
  --r-md: 22px;
  --r-lg: 30px;
  --r-xl: 44px;
  --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --nav-h: 78px;
  color-scheme: dark;
}

/* ---- 2. reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
/* Without this the width/height attributes on <img> act as a presentational
   height, which beats aspect-ratio and renders portraits at full intrinsic
   size. Rules that set an explicit height (.two-sides-hero img) still win. */
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

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

::selection { background: rgba(212, 175, 55, 0.28); color: var(--ink); }

/* scroll lock for the team spotlight. Set on <html>, not body: body already
   carries overflow-x, and the fixed nav is viewport-anchored either way. */
html.is-locked { overflow: hidden; }

/* the hero's entry animation waits behind the first-load intro */
html[data-intro="1"] .hero [data-rise] { animation-play-state: paused; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 50%; top: 0.65rem;
  transform: translate(-50%, -180%);
  z-index: 200;
  padding: 0.7rem 1.3rem;
  background: var(--gold); color: #0b1f16;
  border-radius: var(--r-pill);
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---- 3. layout helpers -------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--sec); }

/* Sections sit under a fixed bar, so anchor jumps need headroom. */
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* The cream band lifts out of the dark page on a big soft curve. */
.band-cream {
  position: relative;
  z-index: 2;
  background: var(--cream);
  color: var(--on-cream);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.band-dark-round {
  position: relative;
  z-index: 3;
  background: var(--ground);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: calc(var(--r-xl) * -1);
}

.label {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.label::before {
  content: ""; width: 26px; height: 1px;
  background: currentColor; opacity: 0.55;
}
.band-cream .label { color: var(--gold-antique); }

.h-display {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h-section {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
/* Serif italic accent — softens the geometry without leaving the brand. */
.em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.band-cream .em { color: var(--gold-antique); }

.lead {
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.85;
  color: var(--ink-70);
  max-width: 46ch;
}
.band-cream .lead { color: var(--on-cream-70); }

.prose p + p { margin-top: 1.1rem; }

/* ---- 4. buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease),
              border-color 0.3s var(--ease), color 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: var(--gold);
  color: #0b1f16;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.18);
}
.btn-gold:hover { background: #e2c14f; box-shadow: 0 16px 40px rgba(212, 175, 55, 0.28); }

.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }

.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* underlined text link — the rule retracts on hover */
.link-u {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease), color 0.3s var(--ease);
}
.link-u:hover { background-size: 26% 1px; }
.band-cream .link-u { color: var(--gold-antique); }

/* ---- 5. navigation ------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.nav[data-scrolled="true"] {
  background: rgba(6, 23, 17, 0.74);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 8px 34px rgba(0, 0, 0, 0.30);
}

.nav-inner {
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
}

.nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); }
.nav-links.right { justify-self: end; }

.nav-link {
  position: relative;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  padding-block: 0.4rem;
  transition: color 0.3s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after,
.nav-link[aria-current="true"]::after { transform: scaleX(1); }
.nav-link[aria-current="true"] { color: var(--gold); }

/* centred wordmark */
.brand {
  grid-column: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.32rem;
  transition: opacity 0.3s var(--ease);
}
.brand:hover { opacity: 0.82; }
.brand-mark { width: 15px; height: 20px; fill: var(--gold); }
.brand-name {
  font-family: var(--f-display);
  font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.4em; text-indent: 0.4em;
  line-height: 1; color: var(--ink);
}
.brand-kicker {
  font-family: var(--f-mono);
  font-size: 0.5rem; letter-spacing: 0.2em; text-indent: 0.2em;
  text-transform: uppercase; line-height: 1; color: var(--ink-40);
}

.nav-cta { padding: 0.7rem 1.25rem; font-size: 0.65rem; }

/* scroll progress hairline */
.progress {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--gold-antique), var(--gold));
  opacity: 0.9;
}

/* burger + mobile sheet */
.burger {
  display: none;
  justify-self: end;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  cursor: pointer;
}
.burger span {
  display: block; width: 17px; height: 1.5px; border-radius: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.burger span + span { margin-top: 4.5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sheet {
  position: fixed; inset: var(--nav-h) 0 auto 0;
  z-index: 99;
  padding: var(--s-3) var(--gutter) var(--s-4);
  background: rgba(7, 26, 19, 0.97);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: grid; gap: 0.4rem;
  transform: translateY(-14px);
  opacity: 0; visibility: hidden;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), visibility 0.3s;
}
.sheet[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
.sheet a {
  font-family: var(--f-display);
  font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  transition: color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.sheet a:hover { color: var(--gold); padding-left: 0.4rem; }
.sheet .btn { margin-top: var(--s-2); }

/* ---- 6. hero ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + var(--s-4));
  padding-bottom: var(--s-4);
  overflow: hidden;
}

/* The photo is dusk-blue; desaturating it lets the emerald wash tint it
   green while the warm window lights stay gold. Do not hue-rotate it. */
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  background: url("assets/hero.jpg") center 34% / cover no-repeat;
  opacity: 0.62;
  filter: saturate(0.42) contrast(1.04);
  transform: scale(1.07);
  animation: heroDrift 26s var(--ease-soft) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }

.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 28% 46%, rgba(4, 20, 14, 0.80), rgba(4, 20, 14, 0) 72%),
    linear-gradient(rgba(10, 48, 33, 0.30), rgba(10, 48, 33, 0.30)),
    linear-gradient(to bottom, rgba(6, 23, 17, 0.86) 0%, rgba(6, 23, 17, 0) 28%,
                    rgba(6, 23, 17, 0.30) 62%, var(--ground) 100%);
}

.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero h1 {
  margin-top: var(--s-2); max-width: 15ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}
/* the hero copy sits on photography, so it carries a little more weight
   and a shadow than the same roles do on flat ground */
.hero .lead {
  margin-top: var(--s-2); max-width: 44ch;
  color: rgba(243, 239, 228, 0.82);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.55);
}

.hero-actions {
  margin-top: var(--s-3);
  display: flex; flex-wrap: wrap; gap: 0.8rem;
}

.hero-regions {
  margin-top: var(--s-4);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0;
  font-family: var(--f-mono);
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-70);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}
.hero-regions li { display: flex; align-items: center; }
.hero-regions li + li::before {
  content: ""; flex: none;
  width: 3px; height: 3px; margin-inline: 1.3rem;
  background: var(--gold); transform: rotate(45deg); opacity: 0.8;
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.8rem;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  font-family: var(--f-mono);
  font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-40);
}
.scroll-cue i {
  display: block; width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue {
  0%, 100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);    transform-origin: top; }
}

/* ---- 7. sector marquee -------------------------------------------- */
.marquee {
  position: relative;
  border-block: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.018);
  padding-block: 1.15rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; width: max-content;
  animation: slide 44s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-track li {
  display: flex; align-items: center;
  font-family: var(--f-mono);
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-55);
  white-space: nowrap;
}
.marquee-track li::after {
  content: ""; flex: none;
  width: 4px; height: 4px; margin-inline: 2.2rem;
  background: var(--gold-antique); transform: rotate(45deg);
}

/* ---- 8. about ----------------------------------------------------- */
.about-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.about-head .h-section { margin-top: var(--s-2); max-width: 16ch; }
.about-copy { padding-top: clamp(0.5rem, 3vw, 3.6rem); }
.about-copy p { color: var(--on-cream-70); }
.about-copy .link-u { margin-top: var(--s-2); }

/* ---- two sides: full-bleed doorway + the audience pair -------------
   The picture is the header for the two cards under it, not decoration.
   It runs edge to edge, carries the copy inside it, and its lower third
   dissolves into the cream ground so the image hands off to the cards
   instead of stopping at a hard line.
   -------------------------------------------------------------------- */
.two-sides { margin-top: var(--s-4); }

.two-sides-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(340px, 40vw, 540px);
}
.two-sides-hero img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
.two-sides-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    /* shade under the copy */
    linear-gradient(to right, rgba(4, 18, 13, 0.88) 0%, rgba(4, 18, 13, 0.52) 40%, rgba(4, 18, 13, 0.08) 72%),
    /* dissolve into the cream band */
    linear-gradient(to bottom, rgba(4, 18, 13, 0.34) 0%, rgba(4, 18, 13, 0) 26%,
                    rgba(245, 240, 225, 0) 58%, var(--cream) 100%);
}

.two-sides-copy {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  /* bottom padding lifts the copy clear of the dissolve */
  padding: var(--s-3) var(--gutter) clamp(4.5rem, 11vw, 9rem);
  color: var(--ink);
}
.band-cream .two-sides-copy .label { color: var(--gold); }
.two-sides-copy h3 {
  margin-top: var(--s-2);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.62);
}
.two-sides-sub {
  margin-top: 0.9rem;
  max-width: 38ch;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.75;
  color: rgba(243, 239, 228, 0.82);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.6);
}

/* the cards ride up into the dissolve, so picture and pair read as one block */
.two-sides .sides { margin-top: clamp(-3rem, -3vw, -1rem); }

/* two-sided cards */
.sides {
  margin-top: var(--s-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-2);
}
.side {
  position: relative;
  padding: var(--s-3);
  background: var(--cream-2);
  border: 1px solid var(--line-cream);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.side::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--gold-antique), transparent);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.side:hover {
  transform: translateY(-5px);
  border-color: rgba(176, 141, 87, 0.5);
  box-shadow: 0 22px 50px rgba(16, 40, 29, 0.14);
}
.side:hover::before { opacity: 1; }
.side h3 {
  margin-top: 0.9rem;
  font-family: var(--f-display);
  font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em;
}
.side p { margin-top: 0.7rem; color: var(--on-cream-70); font-size: 0.97rem; }
.side ul { margin-top: var(--s-2); display: grid; gap: 0.6rem; }
.side li {
  display: flex; gap: 0.7rem;
  font-size: 0.93rem; line-height: 1.6; color: var(--on-cream-70);
}
.side li::before {
  content: ""; flex: none;
  width: 5px; height: 5px; margin-top: 0.68rem;
  background: var(--gold-antique); transform: rotate(45deg);
}
.side-num {
  font-family: var(--f-mono);
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-antique);
}

/* stats */
.stats {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-cream);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-2);
}
.stat-n {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  line-height: 1; letter-spacing: -0.04em;
  color: var(--emerald);
}
.stat-n .suffix { color: var(--gold-antique); }
.stat-l {
  margin-top: 0.7rem;
  font-family: var(--f-mono);
  font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-cream-50);
  line-height: 1.7;
}

/* ---- 9. approach: process rail + pillars --------------------------- */
.approach-head { max-width: 64ch; }
.approach-head .h-section { margin-top: var(--s-2); }
.approach-head .lead { margin-top: var(--s-2); max-width: 58ch; }

.rail {
  margin-top: var(--s-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.step {
  position: relative;
  padding: var(--s-3) var(--s-2);
  background: var(--ground);
  transition: background-color 0.45s var(--ease);
}
.step:hover { background: #0b2419; }
.step-n {
  font-family: var(--f-mono);
  font-size: 0.63rem; letter-spacing: 0.2em;
  color: var(--gold);
}
.step h3 {
  margin-top: 1rem;
  font-family: var(--f-display);
  font-weight: 500; font-size: 1.16rem; letter-spacing: -0.015em;
}
.step p { margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.7; color: var(--ink-55); }
.step::after {
  content: "";
  position: absolute; left: var(--s-2); bottom: 0;
  width: calc(100% - var(--s-2) * 2); height: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.step:hover::after { transform: scaleX(1); }

.pillars {
  margin-top: var(--s-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-2);
}
.pillar {
  padding: var(--s-3) var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background-color 0.45s var(--ease);
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.34);
  background: var(--surface-2);
}
.pillar-ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  background: var(--gold-soft);
  color: var(--gold);
}
.pillar-ico svg { width: 19px; height: 19px; }
.pillar h3 {
  margin-top: 1.1rem;
  font-family: var(--f-display);
  font-weight: 500; font-size: 1.1rem; letter-spacing: -0.012em;
}
.pillar p { margin-top: 0.55rem; font-size: 0.9rem; line-height: 1.72; color: var(--ink-55); }

/* ---- 10. regions band --------------------------------------------- */
.regions {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  margin-inline: var(--gutter);
  isolation: isolate;
}
.regions-bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("assets/skyline.jpg") center 60% / cover no-repeat;
  opacity: 0.5;
  filter: saturate(0.5);
}
.regions::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(8, 32, 23, 0.86), rgba(6, 23, 17, 0.94)),
    radial-gradient(ellipse at 50% 0%, rgba(30, 88, 65, 0.5), transparent 70%);
}
.regions .inner { padding: var(--s-4) var(--s-3); }
.regions-head { max-width: 60ch; }
.regions-head .h-section { margin-top: var(--s-2); }
.regions-head .lead { margin-top: var(--s-2); }
.regions-grid {
  margin-top: var(--s-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-2);
}
/* each card is a tab that opens the shared outlook panel below the grid */
.region {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: var(--s-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(6, 23, 17, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),
              background-color 0.45s var(--ease);
}
.region:hover { transform: translateY(-4px); border-color: rgba(212, 175, 55, 0.34); }
/* aria-selected is the desktop tablist; aria-expanded is the mobile accordion */
.region[aria-selected="true"],
.region[aria-expanded="true"] {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.10);
}

.region-cue {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.9rem;
  font-family: var(--f-mono);
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-40);
  transition: color 0.3s var(--ease);
}
.region-cue i {
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.35s var(--ease);
}
.region:hover .region-cue,
.region[aria-selected="true"] .region-cue,
.region[aria-expanded="true"] .region-cue { color: var(--gold); }
.region[aria-selected="true"] .region-cue i,
.region[aria-expanded="true"] .region-cue i { transform: rotate(45deg); }

/* ---- region outlook panel ------------------------------------------
   Every figure here is quoted from the linked source. If a number is
   edited, the source link must be re-checked with it.
   -------------------------------------------------------------------- */
.region-panel {
  position: relative;
  margin-top: var(--s-2);
  padding: var(--s-3);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--r-lg);
  background: rgba(6, 23, 17, 0.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: panelIn 0.45s var(--ease) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.region-panel:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.region-panel-name {
  font-family: var(--f-mono);
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  padding-right: 2.5rem;
}

.region-facts { margin-top: var(--s-2); display: grid; gap: 0.95rem; }
/* NOT display:flex here — these items contain an inline .rf-n span, and a
   flex parent would make the figure and its sentence separate flex items
   that column off against each other on narrow screens. */
.region-facts li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.93rem; line-height: 1.7; color: var(--ink-70);
  max-width: 78ch;
}
.region-facts li::before {
  content: "";
  position: absolute; left: 0; top: 0.72rem;
  width: 5px; height: 5px;
  background: var(--gold); transform: rotate(45deg);
}
.rf-n {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.region-source {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
  font-family: var(--f-mono);
  font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-40);
  line-height: 1.9;
}
.region-source a {
  color: var(--ink-55);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(212, 175, 55, 0.45);
  transition: color 0.3s var(--ease);
}
.region-source a:hover { color: var(--gold); }

.region-close {
  position: absolute; top: var(--s-2); right: var(--s-2);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-55);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.region-close svg { width: 15px; height: 15px; }
.region-close:hover { color: var(--gold); border-color: var(--gold); transform: rotate(90deg); }

/* ---- region outlook, mobile: an accordion instead of one shared panel ----
   Each row gets its own dropdown inserted directly beneath it, sliding open
   on height. The shared desktop panel is never opened at this width.
   -------------------------------------------------------------------- */
@media (max-width: 860px) {
  .region-panel--inline {
    grid-column: 1 / -1;
    /* tuck under its own row without closing the gap between cards */
    margin-top: -0.55rem;
    overflow: hidden;
    /* height drives the motion here, so the pop-in animation must not run */
    animation: none;
    transition: height 0.42s var(--ease);
  }
}
@media (min-width: 861px) {
  .region-panel--inline { display: none !important; }
}
/* name and label only — the cards carry no body copy */
.region h3 {
  font-family: var(--f-display);
  font-weight: 500; font-size: 1.25rem; letter-spacing: -0.015em;
}
.region .tag {
  display: block; margin-bottom: 0.7rem;
  font-family: var(--f-mono);
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-antique);
}

/* ---- 11. team ------------------------------------------------------ */
.team-head { display: grid; gap: var(--s-2); max-width: 64ch; }

/* Investors / Operators, per the reference site. A fixed three-column track
   rather than auto-fit: a group holding one person must not stretch that
   card to full width. */
.team-cat {
  margin-top: var(--s-4);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.team-grid {
  margin-top: var(--s-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.member {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.member:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.42);
}
.member-photo { position: relative; overflow: hidden; background: var(--ground-2); }
.member-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  /* the three source photos have very different backdrops — resting them
     desaturated makes the set read as one; colour returns on hover */
  filter: saturate(0.38) contrast(1.03);
  transform: scale(1.01);
  transition: filter 0.7s var(--ease), transform 0.7s var(--ease);
}
.member:hover .member-photo img { filter: saturate(0.95); transform: scale(1.045); }
.member-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 23, 17, 0.88) 0%, rgba(6, 23, 17, 0.10) 44%, rgba(30, 88, 65, 0.14) 100%);
  pointer-events: none;
}
.member-id {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--s-2);
}
.member-id h3 {
  font-family: var(--f-display);
  font-weight: 500; font-size: 1.35rem; letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.member-role {
  margin-top: 0.35rem;
  font-family: var(--f-mono);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
}
.member-body { padding: var(--s-2); display: flex; flex-direction: column; flex: 1; gap: var(--s-2); }
.member-body > p { font-size: 0.92rem; line-height: 1.75; color: var(--ink-70); }
.member-facts { display: grid; gap: 0.55rem; }
.member-facts li {
  display: flex; gap: 0.65rem;
  font-size: 0.86rem; line-height: 1.62; color: var(--ink-55);
}
.member-facts li::before {
  content: ""; flex: none;
  width: 4px; height: 4px; margin-top: 0.6rem;
  background: var(--gold); transform: rotate(45deg);
}
.chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.3rem; }
.chip {
  padding: 0.34rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 0.57rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-55);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.member:hover .chip { border-color: rgba(212, 175, 55, 0.28); color: var(--ink-70); }

.team-note {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--ink-55);
  text-align: center;
}
.team-note a { color: var(--gold); }

/* ---- 12. contact --------------------------------------------------- */
.contact { position: relative; overflow: hidden; }
.contact-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("assets/nightcity.jpg") center 42% / cover no-repeat;
  opacity: 0.26;
  filter: saturate(0.42);
}
.contact::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, var(--ground) 0%, rgba(8, 30, 21, 0.86) 42%, var(--ground) 100%);
}
.contact .wrap { position: relative; z-index: 2; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-4);
  align-items: start;
}
.contact-aside .h-section { margin-top: var(--s-2); max-width: 13ch; }
.contact-aside .lead { margin-top: var(--s-2); }

.contact-lines { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.contact-line {
  display: grid; gap: 0.3rem;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-soft);
}
.contact-line dt {
  font-family: var(--f-mono);
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-40);
}
.contact-line dd {
  font-family: var(--f-display);
  font-size: 1.12rem; font-weight: 500; letter-spacing: -0.01em;
}
.contact-line a { transition: color 0.3s var(--ease); }
.contact-line a:hover { color: var(--gold); }

/* form */
.form {
  padding: var(--s-3);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
.field { display: grid; gap: 0.45rem; }
.field.full { grid-column: 1 / -1; }
.field > label, .field-legend {
  font-family: var(--f-mono);
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-40);
}
/* only the email is required; the rest say so rather than leaving people guessing */
.field > label .opt { opacity: 0.62; }
.field input, .field textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.7; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-40); }
.field input:hover, .field textarea:hover { border-color: rgba(243, 239, 228, 0.22); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}
.field input[aria-invalid="true"] { border-color: #e0796b; }

/* fieldset resets, then a segmented pill control — softer than a dropdown
   and it keeps the native radio keyboard contract */
.field fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 0.45rem; }
.segmented { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segmented label {
  display: inline-block;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-55);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.segmented label:hover { border-color: rgba(243, 239, 228, 0.26); color: var(--ink); }
.segmented input:checked + label {
  background: var(--gold);
  border-color: var(--gold);
  color: #0b1f16;
}
.segmented input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }

.form-foot {
  margin-top: var(--s-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  justify-content: space-between;
}
.form-note { font-size: 0.8rem; line-height: 1.6; color: var(--ink-40); max-width: 34ch; }
.form-note[data-state="error"] { color: #f0a99d; }
.form-note[data-state="busy"] { color: var(--gold-pale); }
.form-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.btn[disabled] { opacity: 0.55; cursor: progress; transform: none; }

.confirm {
  padding: var(--s-4) var(--s-3);
  text-align: center;
  border: 1px solid rgba(212, 175, 55, 0.34);
  border-radius: var(--r-lg);
  background: var(--gold-soft);
  animation: pop 0.5s var(--ease) both;
}
@keyframes pop {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.confirm h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; }
.confirm p { margin-top: 0.8rem; color: var(--ink-70); }
.confirm .tick {
  width: 46px; height: 46px; margin: 0 auto var(--s-2);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold); color: #0b1f16;
}

/* ---- 13. footer ---------------------------------------------------- */
.footer {
  position: relative;
  padding-block: var(--s-4) var(--s-3);
  border-top: 1px solid var(--line-soft);
  background: #04120d;
}
.footer-top {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: space-between; align-items: flex-start;
}
.footer-brand { display: flex; align-items: center; gap: 0.7rem; }
.footer-brand svg { width: 16px; height: 21px; fill: var(--gold); }
.footer-brand span {
  font-family: var(--f-display);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.34em; text-indent: 0.34em;
}
.footer-tag { margin-top: 0.8rem; font-size: 0.9rem; color: var(--ink-55); max-width: 34ch; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer-nav a {
  font-family: var(--f-mono);
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-55);
  transition: color 0.3s var(--ease);
}
.footer-nav a:hover { color: var(--gold); }
.legal {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
  font-size: 0.76rem; line-height: 1.8; color: var(--ink-40);
  max-width: 88ch;
}
.footer-bottom {
  margin-top: var(--s-2);
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-40);
}
.credit a {
  color: var(--ink-55);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 0.3s var(--ease), background-size 0.4s var(--ease);
}
.credit a:hover { color: var(--gold); background-size: 30% 1px; }

/* ---- 14. scroll reveal --------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(0.965); }
[data-reveal].in { opacity: 1; transform: none; }

/* hero copy animates on load rather than on scroll */
.hero [data-rise] {
  opacity: 0;
  transform: translateY(22px);
  animation: rise 1s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---- 14b. route curtain --------------------------------------------
   The base rules live inline in each page's <head> so the curtain paints
   in place before this file loads. Only the dressing is here.
   -------------------------------------------------------------------- */
.curtain-mark {
  width: clamp(46px, 7vw, 82px);
  height: auto;
  fill: var(--gold);
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}
/* the mark only shows while the curtain actually covers the page */
.curtain[data-state="cover"] .curtain-mark,
html[data-route="in"] .curtain-mark { opacity: 1; }

.curtain[data-state="cover"] { transform: translateY(0); }
.curtain[data-state="exit"]  { transform: translateY(-100%); }
.curtain[data-state="idle"]  { transform: translateY(100%); }

/* cover and exit are two halves of one upward sweep, so they share an easing */
.curtain[data-anim="cover"] { transition: transform 0.52s cubic-bezier(0.7, 0, 0.2, 1); }
.curtain[data-anim="exit"]  { transition: transform 0.58s cubic-bezier(0.5, 0, 0.15, 1); }
.curtain[hidden] { display: none !important; }

/* ---- 14c. first-load intro ------------------------------------------ */
/* max-width is load-bearing: centred flex children size to their content,
   and the letter-spaced wordmark is wider than a small phone without it */
.intro-lockup {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.9rem;
  max-width: min(92vw, 460px);
  text-align: center;
}
.intro-name { max-width: 100%; }
.intro-mark {
  width: clamp(34px, 5vw, 52px);
  height: auto;
  fill: var(--gold);
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  animation: introMark 0.72s var(--ease) 0.1s forwards;
}
@keyframes introMark {
  to { opacity: 1; transform: none; }
}
/* mark, then the wordmark — no strapline */
.intro-name {
  opacity: 0;
  transform: translateY(8px);
  animation: introText 0.7s var(--ease) 0.6s forwards;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  letter-spacing: 0.42em; text-indent: 0.42em;
  line-height: 1;
  color: var(--ink);
}
@keyframes introText {
  to { opacity: 1; transform: none; }
}
/* the whole panel lifts away once the name has settled */
.intro[data-state="out"] {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
}
.intro[hidden] { display: none !important; }

/* ---- 14d. team page: roster + spotlight ----------------------------- */
.page { padding-top: var(--nav-h); }

.roster-section { padding-block: clamp(3rem, 6vw, 5.5rem) var(--sec); }

/* same label / heading / lead stack the team section carried on the homepage */
.roster-head {
  display: grid;
  gap: var(--s-2);
  max-width: 64ch;
  margin-bottom: var(--s-4);
}

.roster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}

/* portrait only — no bio, no chips; the write-up is in the spotlight */
.face {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ground-2);
  cursor: pointer;
  font: inherit; color: inherit;
  transition: transform 0.55s var(--ease), border-color 0.55s var(--ease),
              box-shadow 0.55s var(--ease), opacity 0.5s var(--ease),
              filter 0.5s var(--ease);
}
.face img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.38) contrast(1.03);
  transform: scale(1.01);
  transition: filter 0.7s var(--ease), transform 0.7s var(--ease);
}
.face::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 23, 17, 0.88) 0%, rgba(6, 23, 17, 0.08) 46%,
                              rgba(30, 88, 65, 0.14) 100%);
  pointer-events: none;
}
.face:hover { transform: translateY(-6px); border-color: rgba(212, 175, 55, 0.34); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
.face:hover img { filter: saturate(0.95); transform: scale(1.05); }

.face-id {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 0.34rem;
  padding: var(--s-2);
  text-align: left;
}
.face-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}
.face-role {
  font-family: var(--f-mono);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
}

/* the rest of the grid recedes while one portrait is open */
.roster[data-open="true"] .face { opacity: 0.28; filter: saturate(0.3); }
.roster[data-open="true"] .face[aria-expanded="true"] { opacity: 1; filter: none; }

.face-data { display: none; }

/* spotlight */
.spotlight { position: fixed; inset: 0; z-index: 800; }
.spotlight[hidden] { display: none !important; }
/* Lighter than a solid cover: the grid stays faintly readable underneath so
   the spotlight reads as a layer over the page rather than a separate screen.
   The portraits are already dimmed to 0.28, so this only has to soften. */
.spotlight-scrim {
  position: absolute; inset: 0;
  background: rgba(3, 12, 9, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: scrimIn 0.4s var(--ease) both;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

.spotlight-panel {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(1040px, calc(100vw - 2 * var(--gutter)));
  max-height: min(86vh, 780px);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3);
  overflow-y: auto;
  /* translucent, not opaque — the heavy blur is what keeps the copy legible
     while the page still shows through. Measured worst case (text over the
     brightest portrait behind it) is ~8:1, well clear of AA. */
  border: 1px solid rgba(212, 175, 55, 0.34);
  border-radius: var(--r-lg);
  background: rgba(8, 28, 20, 0.68);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  backdrop-filter: blur(26px) saturate(120%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  animation: spotIn 0.5s var(--ease) both;
}
/* without backdrop-filter there is no blur to carry the contrast, so the
   panel has to fall back to something close to solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .spotlight-panel { background: rgba(8, 28, 20, 0.95); }
  .spotlight-scrim { background: rgba(3, 12, 9, 0.82); }
}
@keyframes spotIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.spotlight-photo { border-radius: var(--r-md); overflow: hidden; align-self: start; }
.spotlight-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.spotlight-body { display: flex; flex-direction: column; gap: var(--s-2); padding-right: 2.4rem; }
.spotlight-body h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: -0.028em;
  line-height: 1.08;
}
.spotlight-role {
  font-family: var(--f-mono);
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
  margin-top: -0.6rem;
}
.spotlight-copy p { font-size: 0.97rem; line-height: 1.8; color: var(--ink-70); }
.spotlight-copy .member-facts { margin-top: var(--s-2); }
/* the panel is translucent, so the bullets carry more weight here than they
   do on an opaque card — measured 4.8:1 at --ink-55, 6.6:1 at --ink-70 */
.spotlight-copy .member-facts li { color: var(--ink-70); }

.spotlight-close {
  position: absolute; top: var(--s-2); right: var(--s-2);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(6, 23, 17, 0.7);
  color: var(--ink-55);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.spotlight-close svg { width: 16px; height: 16px; }
.spotlight-close:hover { color: var(--gold); border-color: var(--gold); transform: rotate(90deg); }

/* the contact page reuses the homepage section, minus its top gradient */
.contact-page { padding-top: clamp(3rem, 6vw, 5.5rem); }

/* ---- 15. responsive ------------------------------------------------ */
@media (max-width: 1024px) {
  .about-head { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .about-copy { padding-top: 0; }
  .about-head .h-section { max-width: 20ch; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .contact-aside .h-section { max-width: 18ch; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --nav-h: 68px; }
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto 1fr auto; }
  /* mark and wordmark sit side by side, matching the footer lock-up */
  .brand {
    grid-column: 1;
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
  }
  .brand-mark { width: 16px; height: 21px; }
  .brand-name { letter-spacing: 0.34em; text-indent: 0.34em; }
  .burger { display: inline-flex; flex-direction: column; grid-column: 3; }
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + var(--s-4)) var(--s-4); }
  .scroll-cue { display: none; }
  .regions { margin-inline: max(0.75rem, calc(var(--gutter) * 0.4)); }
  .regions .inner { padding-inline: var(--s-2); }
  .two-sides-hero { min-height: clamp(300px, 56vw, 420px); }
  .two-sides-copy { padding-bottom: clamp(3.5rem, 14vw, 6rem); }
}

@media (max-width: 860px) {
  .spotlight-panel {
    grid-template-columns: minmax(0, 1fr);
    width: min(560px, calc(100vw - 1.6rem));
    max-height: 88vh;
    padding: var(--s-2);
  }
  /* 16/10 on a 4:5 source crops a narrow middle band and takes the top of the
     head off. Square keeps the panel compact; the focal point sits high so the
     whole head stays in frame with headroom above it. */
  .spotlight-photo img { aspect-ratio: 1 / 1; object-position: center 15%; }
  .spotlight-body { padding-right: 0; }
}

@media (max-width: 680px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .region-panel { padding: var(--s-2); }
  .region-close { top: 0.7rem; right: 0.7rem; }
  .region-panel-name { padding-right: 2.2rem; }
  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .face-id { padding: 0.85rem; }
}

@media (max-width: 460px) {
  .roster { grid-template-columns: minmax(0, 1fr); }
  /* tighten the intro tracking so the lock-up still fits a small phone */
  .intro-name { letter-spacing: 0.28em; text-indent: 0.28em; }
}

@media (max-width: 620px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .form { padding: var(--s-2); }
  .hero-actions .btn { width: 100%; }
  .hero-regions { font-size: 0.6rem; letter-spacing: 0.14em; }
  .hero-regions li + li::before { margin-inline: 0.85rem; }
  .brand-name { font-size: 0.82rem; letter-spacing: 0.3em; text-indent: 0.3em; }
  .footer-bottom { flex-direction: column; gap: 0.4rem; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .form-foot .btn { width: 100%; order: -1; }
  .form-note { max-width: none; text-align: center; }
}

@media (max-width: 420px) {
  .hero-regions li + li::before { display: none; }
  .hero-regions { gap: 0.4rem 1.1rem; }
}

/* ---- 16. reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], .hero [data-rise] { opacity: 1 !important; transform: none !important; }
  .hero-photo { transform: none; }
}

@media print {
  .nav, .sheet, .scroll-cue, .marquee, .contact-bg, .hero-photo { display: none !important; }
  body { background: #fff; color: #000; }
}