/* ============================================================================
   hahn.Klea page styles. The engine (scrollcraft.css) is the mechanism; this
   file is the brand and the composition. Tokens first.
   Stacking, all in the root context (nothing between them makes its own):
     0 ground   1 hero planes   3 grain   7 back orbit panels   8 swarm canvas
     9 front orbit panels   10 copy   11 ring dial   60 header   80 drawer   90 sun
   ========================================================================== */

:root {
  /* The design is dark in both phone themes. Without this the browser styles
     its own parts (fields, scrollbars, autofill, pickers) to the device theme,
     and Android Chrome may auto darken the page on top of ours. */
  color-scheme: dark;

  --navy-950: #071636;
  --navy-900: #0B1F4D;
  --navy-850: #0E2760;
  --navy-800: #112F6E;
  --navy-700: #173B82;
  --blue-500: #3C69BC;
  --blue-300: #8EAFE3;
  --gold: #C5A059;
  --gold-hi: #E2C48A;
  --gold-deep: #9E7E42;
  --alabaster: #FBF9F4;

  --sc-canvas: var(--navy-700);
  --sc-surface: var(--navy-800);
  --sc-ink: var(--alabaster);
  --sc-ink-soft: #CDD4E2;
  --sc-accent: var(--gold);
  --sc-accent-ink: var(--navy-900);
  --sc-font-display: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --sc-font-text: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --sc-hairline: rgba(251, 249, 244, 0.14);
  --sc-shadow-color: 222 70% 6%;

  --radius: 2px;
  --gutter: clamp(1.25rem, 4.6vw, 5rem);
  --bar-h: 4.5rem;
}

html { background: var(--navy-900); }
body {
  background: transparent;
  font-size: 1.0625rem;
  line-height: 1.66;
  letter-spacing: 0.005em;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  padding: 0.7rem 1rem; background: var(--gold); color: var(--navy-900);
  border-radius: var(--radius); transform: translateY(-160%);
  transition: transform 160ms var(--sc-ease-out);
}
.skip:focus { transform: none; }
[data-sc-progress] { z-index: 61; height: 2px; }
.sc-grain { z-index: 3; opacity: 0.04; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius); }

/* ------------------------------------------------------------- type ------ */
.wordmark {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--alabaster);
}
.wordmark__dot { color: var(--gold); }

.display {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: clamp(2.7rem, 1.5rem + 3.3vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
.accent {
  font-family: var(--sc-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 1.1rem + 0.75vw, 1.95rem);
  line-height: 1.22;
  margin: 0.9rem 0 0;
  text-wrap: balance;
}
.body {
  color: var(--sc-ink-soft);
  max-width: 38rem;
  margin: 1.25rem 0 0;
  text-wrap: pretty;
}

/* ---------------------------------------------------------- buttons ------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 1.45rem;
  border-radius: var(--radius);
  font-family: var(--sc-font-text);
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out),
              color 160ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--navy-900); }
.btn--line { border-color: rgba(251, 249, 244, 0.55); color: var(--alabaster); background: rgba(11, 31, 77, 0.22); }
@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover { background: var(--gold-hi); box-shadow: 0 10px 24px -12px rgba(197, 160, 89, 0.7); }
  .btn--line:hover { border-color: var(--gold); color: var(--alabaster); }
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ------------------------------------------------------------ ground ----- */
.ground {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--navy-700);
}
.ground__pool {
  position: absolute; left: 0; top: 0;
  width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 136, 214, 0.42) 0%, rgba(60, 105, 188, 0.2) 32%, rgba(23, 59, 130, 0) 64%);
  transform: translate3d(50vw, 50vh, 0);
  will-change: transform;
}
.ground::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 95% at 50% 45%, rgba(7, 22, 54, 0) 52%, rgba(7, 22, 54, 0.62) 100%);
}

/* ------------------------------------------------------- hero planes ----- */
.hero-planes {
  position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100svh;
  z-index: 1; overflow: hidden; pointer-events: none;
}
.plane { position: absolute; inset: 0; }
.plane img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; max-width: none; }
.plane__haze, .plane__mist, .plane__ext, .hero-glow { display: none; }
.hero-mark {
  position: absolute; left: 50%; top: 60%; width: auto; height: 34vh; max-width: none;
  transform: translate(-50%, -50%); display: none;
}
.no-webgl .hero-mark { display: block; }

.js .hero-planes { position: fixed; inset: 0; width: auto; height: auto; }
.js .plane { inset: auto; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; }
.js .plane img { width: var(--img-w, 1552px); height: 1013px; object-fit: fill; }
.js .plane__haze {
  display: block; position: absolute; left: 0; width: var(--img-w, 1552px); top: 380px; height: 260px;
  background: linear-gradient(180deg, rgba(142, 175, 227, 0) 0%, rgba(142, 175, 227, 0.16) 60%, rgba(142, 175, 227, 0) 100%);
}
.js .plane__mist {
  display: block; position: absolute; left: 0; width: var(--img-w, 1552px); top: 700px; height: 110px; z-index: 1;
  background: linear-gradient(180deg, rgba(172, 198, 238, 0) 0%, rgba(172, 198, 238, 0.14) 55%, rgba(172, 198, 238, 0) 100%);
}
.js .plane--vines picture { position: relative; z-index: 2; }
/* the navy floor: feathers in over the last rows of vines, holds, then fades into the ground */
.js .plane__ext {
  display: block; position: absolute; left: 0; top: 830px; z-index: 3;
  width: var(--img-w, 1552px); height: calc(183px + var(--ext-h, 700px));
  background: linear-gradient(180deg,
    rgba(14, 39, 96, 0) 0px,
    rgba(14, 39, 96, 0.55) 110px,
    var(--navy-850) 183px,
    var(--navy-850) calc(183px + var(--ext-op, 240px)),
    rgba(14, 39, 96, 0) 100%);
}
/* a soft shade behind the monogram; lighter now the mark is large */
.js .hero-glow {
  display: block; position: absolute; left: 0; top: 0; width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(6, 20, 52, 0.36) 0%, rgba(6, 20, 52, 0.2) 46%, rgba(6, 20, 52, 0) 100%);
  will-change: transform, opacity;
}
.no-webgl .hero-glow { display: none; }
.js .hero-mark { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; }
.hero-planes.is-off { visibility: hidden; }

/* reduced motion: the landscape is a still composition that scrolls away */
.reduced .hero-planes { position: absolute; inset: auto; left: 0; top: 0; width: 100%; height: 100vh; height: 100svh; }
.reduced .plane__haze, .reduced .plane__mist, .reduced .plane__ext { display: none; }

/* ------------------------------------------------------------- swarm ------ */
.swarm {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 8;
  pointer-events: none; opacity: 0; transition: opacity 700ms var(--sc-ease-out);
}
.swarm.is-live { opacity: 1; }
.no-webgl .swarm { display: none; }
.verify { position: fixed; width: 1px; height: 1px; left: 0; top: 0; pointer-events: none; opacity: 0; }

/* ---------------------------------------------------------- header ------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
  padding: 0 var(--gutter);
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.bar::before {
  content: ""; position: absolute; inset: 0 0 -2.5rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 22, 58, 0.55) 0%, rgba(7, 22, 58, 0.28) 55%, rgba(7, 22, 58, 0) 100%);
  transition: opacity 240ms var(--sc-ease-out);
}
.bar.is-solid::before { opacity: 0; }
.bar.is-solid { background: rgba(9, 26, 64, 0.9); box-shadow: 0 1px 0 rgba(251, 249, 244, 0.08); }
.bar__brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; justify-self: start; }
.bar__mark { width: 1.35rem; height: auto; }
.bar__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.bar__end { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1rem, 2vw, 1.75rem); }
.bar__end .btn { min-height: 2.6rem; padding: 0.7rem 1.1rem; }
.bar__link {
  position: relative;
  font-family: var(--sc-font-text); font-size: 0.93rem; font-weight: 400; letter-spacing: 0.01em;
  color: rgba(251, 249, 244, 0.88); text-decoration: none; background: none; border: 0; padding: 0.4rem 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem;
  transition: color 160ms var(--sc-ease-out);
}
.bar__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.05rem; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 220ms var(--sc-ease-out);
}
.bar__link:hover, .bar__link:focus-visible, .bar__link[aria-expanded="true"] { color: var(--alabaster); }
.bar__link:hover::after, .bar__link:focus-visible::after, .bar__link[aria-expanded="true"]::after { transform: scaleX(1); }
.menu { position: relative; }
.menu__chev {
  width: 0.42rem; height: 0.42rem; margin-top: -0.2rem;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg);
  transition: transform 200ms var(--sc-ease-out);
}
.menu__button[aria-expanded="true"] .menu__chev { transform: translateY(0.2rem) rotate(225deg); }
.menu__panel {
  position: absolute; left: -1.2rem; top: calc(100% + 0.9rem); min-width: 15rem;
  padding: 0.6rem; display: grid;
  background: rgba(9, 26, 64, 0.97); border: 1px solid rgba(197, 160, 89, 0.32); border-radius: var(--radius);
  box-shadow: 0 24px 48px -20px rgba(3, 10, 30, 0.8);
}
.menu__panel[hidden] { display: none; }
.menu__panel a {
  padding: 0.7rem 0.8rem; color: var(--alabaster); text-decoration: none; font-size: 0.95rem;
  border-radius: var(--radius); transition: background-color 140ms var(--sc-ease-out);
}
.menu__panel a:hover, .menu__panel a:focus-visible { background: rgba(197, 160, 89, 0.14); }
.bar__toggle {
  display: none; justify-self: end;
  font: 500 0.78rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--alabaster); background: rgba(11, 31, 77, 0.3); border: 1px solid rgba(251, 249, 244, 0.5);
  border-radius: var(--radius); padding: 0.75rem 1rem; cursor: pointer;
}

.drawer {
  position: fixed; inset: 0; z-index: 80; padding: calc(var(--bar-h) + 1.5rem) var(--gutter) 2rem;
  background: rgba(9, 26, 64, 0.985); display: flex; flex-direction: column; gap: 2rem; overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer nav { display: grid; }
.drawer nav a {
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.9rem; line-height: 1.2;
  color: var(--alabaster); text-decoration: none; padding: 0.55rem 0; border-bottom: 1px solid var(--sc-hairline);
}
.drawer .btn { align-self: flex-start; }
.drawer-open .bar { background: transparent; box-shadow: none; z-index: 85; }

/* ------------------------------------------------------------ hero ------- */
.hero { position: relative; height: 175vh; }
.reduced .hero { height: 100vh; height: 100svh; }
.hero__place {
  position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh;
  display: flex; justify-content: center; align-items: flex-start;
  padding: calc(var(--bar-h) + clamp(1.5rem, 5vh, 4rem)) var(--gutter) 0;
  pointer-events: none;
}
.hero__copy {
  position: relative; z-index: 10; text-align: center; max-width: 60rem; pointer-events: auto;
  --hero-title: clamp(2.6rem, 1rem + 3.9vw, 4.6rem);
}
.hero__title {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--hero-title);
  line-height: 0.98; letter-spacing: -0.012em; margin: 0;
  text-shadow: 0 2px 22px rgba(6, 20, 52, 0.5);
}
.hero__line { display: block; }
.hero__sub {
  font-size: clamp(1rem, 0.92rem + 0.25vw, 1.15rem);
  /* no wider than the headline, so the copy block is the headline's width and
     the monogram's stem can stand clear beside it */
  color: var(--alabaster); max-width: calc(var(--hero-title) * 6); margin: 1.1rem auto 0; line-height: 1.55;
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(6, 20, 52, 0.65);
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.7rem; }
/* Darkens the landscape behind the copy. It sits UNDER the swarm (z 2, above the
   planes at z 1), so it no longer dims the monogram; the swarm shader calms only
   the dust directly behind the letters instead. */
.hero__scrim {
  position: absolute; left: 50%; top: calc(var(--bar-h) - 1rem);
  width: min(80rem, 120vw); height: min(36rem, 56vh); transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 46%, rgba(7, 22, 58, 0.7) 0%, rgba(7, 22, 58, 0.45) 50%, rgba(7, 22, 58, 0) 100%);
  z-index: 2; pointer-events: none;
}
@media (max-width: 860px) {
  .hero__scrim {
    top: 0; width: 170vw; height: 64vh;
    background: radial-gradient(50% 50% at 50% 44%, rgba(7, 22, 58, 0.76) 0%, rgba(7, 22, 58, 0.52) 54%, rgba(7, 22, 58, 0) 100%);
  }
}
/* the requested alternative: copy on the left, monogram to the right */
[data-hero="left"] .hero__place { justify-content: flex-start; align-items: center; padding-top: var(--bar-h); padding-bottom: 12vh; }
[data-hero="left"] .hero__copy { text-align: left; max-width: 36rem; }
[data-hero="left"] .hero__title { font-size: clamp(2.8rem, 1rem + 4.4vw, 5.2rem); }
[data-hero="left"] .hero__sub { margin-left: 0; max-width: 30rem; }
[data-hero="left"] .hero__actions { justify-content: flex-start; }
[data-hero="left"] .hero__scrim {
  left: 0; top: 0; transform: none; width: min(66rem, 72vw); height: 100vh;
  background: radial-gradient(58% 55% at 28% 46%, rgba(7, 22, 58, 0.66) 0%, rgba(7, 22, 58, 0.36) 55%, rgba(7, 22, 58, 0) 100%);
}

/* hero entrance on load (the copy is fully present without JS) */
.js .hero__title .hero__line, .js .hero__sub, .js .hero__actions { opacity: 0; transform: translate3d(0, 14px, 0); }
.is-loaded .hero__title .hero__line, .is-loaded .hero__sub, .is-loaded .hero__actions {
  opacity: 1; transform: none;
  transition: opacity 900ms var(--sc-ease-out), transform 900ms var(--sc-ease-out);
}
.is-loaded .hero__title .hero__line:nth-child(2) { transition-delay: 90ms; }
.is-loaded .hero__sub { transition-delay: 200ms; }
.is-loaded .hero__actions { transition-delay: 300ms; }

/* --------------------------------------------------------- stations ------ */
.station { position: relative; min-height: 120vh; display: flex; align-items: center; }
.station__inner {
  width: 100%; max-width: 86rem; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.station__copy { position: relative; z-index: 10; max-width: 35rem; }
.station--right .station__copy { justify-self: end; }
.station__stage {
  position: relative; min-height: 26rem; display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.fallback { width: min(18rem, 70%); height: auto; display: none; }
.no-webgl .fallback { display: block; }

.points, .checks { list-style: none; margin: 1.9rem 0 0; padding: 0; max-width: 34rem; }
.points li, .checks li {
  position: relative; padding: 0.78rem 0 0.78rem 1.7rem;
  border-top: 1px solid var(--sc-hairline); font-size: 1rem; color: var(--alabaster);
}
.points li:last-child, .checks li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.points li::before {
  content: ""; position: absolute; left: 0.1rem; top: 1.36rem; width: 0.42rem; height: 0.42rem;
  background: var(--gold); transform: rotate(45deg);
}
.checks li::before {
  content: ""; position: absolute; left: 0.05rem; top: 1.08rem; width: 0.38rem; height: 0.7rem;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg);
}

.station--pin { --sc-z-stage: 10; min-height: 0; display: block; }
.pin-center { height: 100%; display: flex; align-items: center; padding-top: calc(var(--bar-h) * 0.5); }

.hush { height: 70vh; }

/* ------------------------------------------------------------- ring ------- */
.ring { position: relative; height: 600vh; }
.ring__slot { display: none; }
.ring__mark { display: none; }
.orbit {
  position: fixed; left: 0; top: 0; z-index: 9;
  width: min(33rem, 38vw);
  /* taller than their content, same width: the last block settles at the bottom */
  min-height: clamp(22rem, 48vh, 27rem);
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2.8vh, 2.2rem) clamp(1.3rem, 1.9vw, 2.1rem);
  background: linear-gradient(180deg, rgba(18, 49, 112, 0.96) 0%, rgba(10, 30, 72, 0.97) 100%);
  border: 1px solid rgba(197, 160, 89, 0.4);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / 0.3), 0 34px 70px -24px hsl(var(--sc-shadow-color) / 0.75),
              inset 0 1px 0 rgba(251, 249, 244, 0.08);
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}
.orbit > :last-child { margin-top: auto; }
.orbit > :nth-last-child(2) { margin-bottom: 1rem; }
.orbit__title {
  font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.8rem, 1.2rem + 1.3vw, 2.4rem);
  line-height: 1; letter-spacing: -0.01em; margin: 0;
}
.orbit__line { margin: 0.5rem 0 0; color: var(--sc-ink-soft); font-size: 0.94rem; line-height: 1.5; }
.orbit__line--serif { font-family: var(--sc-font-display); font-style: italic; font-weight: 500; font-size: 1.35rem; color: var(--alabaster); }
.orbit__text { margin: 0.7rem 0 0; color: var(--sc-ink-soft); font-size: 0.94rem; line-height: 1.58; }
.orbit__note { margin: 0.75rem 0 0; font-size: 0.78rem; color: rgba(205, 212, 226, 0.8); }
.orbit__slogan {
  margin: 1rem 0 0; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-hi);
}

.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 0.9rem; }
.case { border-top: 1px solid rgba(197, 160, 89, 0.45); padding-top: 0.7rem; }
.case__tag { margin: 0; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hi); }
.case__title { margin: 0.4rem 0 0; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.28rem; line-height: 1.1; }
.case__text { margin: 0.4rem 0 0; font-size: 0.87rem; line-height: 1.52; color: var(--sc-ink-soft); }
.quote { margin: 1rem 0 0; padding: 0.85rem 0 0; border-top: 1px solid var(--sc-hairline); }
.quote blockquote { margin: 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 500; font-size: 1.25rem; line-height: 1.28; }
.quote figcaption { margin-top: 0.4rem; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--sc-ink-soft); }

.ledger { width: 100%; border-collapse: collapse; margin-top: 0.9rem; font-size: 0.93rem; }
.ledger th, .ledger td { padding: 0.62rem 0; border-top: 1px solid var(--sc-hairline); text-align: left; font-weight: 400; }
.ledger tr:last-child th, .ledger tr:last-child td { border-bottom: 1px solid var(--sc-hairline); }
.ledger th { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.15rem; }
.ledger td { color: var(--sc-ink-soft); }
.ledger__price { text-align: right !important; color: var(--alabaster) !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1rem; }
.founder { border-top: 1px solid rgba(197, 160, 89, 0.45); padding-top: 0.65rem; }
.founder__name { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.1; }
.founder__role { margin: 0.25rem 0 0; font-size: 0.84rem; color: var(--sc-ink-soft); }

.field { display: grid; gap: 0.3rem; }
.field label, .field__label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.field input, .field select {
  width: 100%; min-height: 2.6rem; padding: 0.5rem 0.75rem;
  background: rgba(7, 22, 54, 0.55); color: var(--alabaster);
  border: 1px solid rgba(251, 249, 244, 0.26); border-radius: var(--radius);
  font-family: inherit; font-size: 0.95rem;
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.72rem) 55%;
  background-size: 0.34rem 0.34rem; background-repeat: no-repeat; padding-right: 2rem;
}
.field select option { background: var(--navy-900); color: var(--alabaster); }
.field input:hover, .field select:hover { border-color: rgba(251, 249, 244, 0.45); }
.field input:focus, .field select:focus { outline: none; border-color: var(--gold); background-color: rgba(7, 22, 54, 0.8); }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: #E9A77E; }
/* Short desktop screens (a 1366 by 768 laptop, say): the panels tighten a little
   so the ring's monogram keeps its size and still reads above the front panel. */
@media (min-width: 861px) and (max-height: 760px) {
  .orbit { min-height: clamp(19rem, 48vh, 27rem); padding-top: 1rem; padding-bottom: 1rem; }
  .orbit > :nth-last-child(2) { margin-bottom: 0.6rem; }
  .cases { margin-top: 0.7rem; }
  .case { padding-top: 0.55rem; }
  .case__text { line-height: 1.45; }
  .quote { padding-top: 0.6rem; }
  .quote blockquote { font-size: 1.15rem; }
  .ledger { margin-top: 0.7rem; }
  .ledger th, .ledger td { padding: 0.5rem 0; }
}

.ring-dial {
  position: fixed; left: 50%; bottom: 0.9rem; z-index: 11;
  display: flex; gap: 0.35rem; padding: 0.35rem;
  background: rgba(9, 26, 64, 0.86); border: 1px solid rgba(251, 249, 244, 0.12); border-radius: var(--radius);
  transform: translate3d(-50%, 0, 0); opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--sc-ease-out);
}
.ring-dial.is-on { opacity: 1; pointer-events: auto; }
.ring-dial:focus-within { opacity: 1; }
/* no swarm, no point of light: the authored silence would read as a gap */
.no-webgl .hush { height: 0; }
.ring-dial button {
  font: 400 0.8rem/1 var(--sc-font-text); letter-spacing: 0.04em; color: rgba(251, 249, 244, 0.78);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  padding: 0.6rem 0.8rem; cursor: pointer; transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.ring-dial button:hover { color: var(--alabaster); }
.ring-dial button[aria-current="true"] { color: var(--alabaster); border-color: rgba(197, 160, 89, 0.7); }

/* static ring: phones, reduced motion, no script. Four panels in a column. */
.ring--static { height: auto; padding: clamp(5rem, 12vh, 9rem) var(--gutter); display: grid; justify-items: center; gap: 1.5rem; }
.ring--static .ring__slot { display: block; height: 50vh; width: 100%; }
.ring--static .orbit { position: relative; opacity: 1; pointer-events: auto; transform: none !important; width: min(38rem, 100%); min-height: 0; z-index: 10; }
.ring--static .ring-dial { display: none; }
.no-webgl .ring--static .ring__slot { display: flex; align-items: center; justify-content: center; }
.no-webgl .ring--static .ring__mark { display: block; height: 70%; width: auto; }
.no-js .ring { height: auto; padding: 6rem var(--gutter); display: grid; justify-items: center; gap: 1.5rem; }
.no-js .orbit { position: relative; opacity: 1; pointer-events: auto; width: min(38rem, 100%); min-height: 0; }
.no-js .ring-dial { display: none; }

/* ---------------------------------------------------------- contact ------ */
.contact { position: relative; z-index: 10; padding: clamp(7rem, 22vh, 13rem) 0 0; }
.contact__inner {
  max-width: 86rem; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.contact__lead .btn { margin-top: 2rem; }
.contact__list { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.contact__list > div { padding: 1.1rem 0; border-top: 1px solid var(--sc-hairline); }
.contact__list dt { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.contact__list dd { margin: 0.35rem 0 0; font-size: 1.08rem; }
.contact__list a {
  color: var(--alabaster); text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 220ms var(--sc-ease-out);
}
.contact__list a:hover, .contact__list a:focus-visible { background-size: 100% 1px; }
.contact__social { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; }

.foot {
  max-width: 86rem; margin: clamp(5rem, 14vh, 9rem) auto 0; padding: 1.8rem var(--gutter) 2.2rem;
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 2rem; align-items: center;
  border-top: 1px solid var(--sc-hairline);
}
.foot__brand { text-decoration: none; }
.foot__slogan { margin: 0; font-family: var(--sc-font-display); font-style: italic; font-size: 1.15rem; color: var(--sc-ink-soft); }
.foot__legal { margin: 0; font-size: 0.82rem; color: var(--sc-ink-soft); }
.foot__legal a { color: var(--sc-ink-soft); margin-left: 0.9rem; }

/* --------------------------------------------------------------- sun ----- */
.sun { position: fixed; left: 0; top: 0; z-index: 90; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 220ms var(--sc-ease-out); }
.has-sun .sun.is-on { opacity: 1; }
.sun > span { position: absolute; left: 0; top: 0; border-radius: 50%; }
.sun__corona {
  width: 5.4rem; height: 5.4rem; margin: -2.7rem 0 0 -2.7rem;
  background: radial-gradient(circle, rgba(242, 214, 150, 0.52) 0%, rgba(197, 160, 89, 0.3) 18%, rgba(197, 160, 89, 0.12) 42%, rgba(197, 160, 89, 0) 70%);
  mix-blend-mode: screen;
  transition: transform 260ms var(--sc-ease-out), opacity 260ms var(--sc-ease-out);
}
.sun__raysWrap { width: 3.1rem; height: 3.1rem; margin: -1.55rem 0 0 -1.55rem; transition: transform 260ms var(--sc-ease-out), opacity 260ms var(--sc-ease-out); opacity: 0.8; }
.sun__rays {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(236, 204, 138, 0.9) 0deg 1.6deg, rgba(236, 204, 138, 0) 1.6deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 42% 58%, transparent 74%);
  mask: radial-gradient(circle, transparent 0 38%, #000 42% 58%, transparent 74%);
  animation: sun-turn 18s linear infinite;
}
.sun__ring {
  width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem;
  border: 1px solid rgba(226, 196, 138, 0.8); transform: scale(0.3); opacity: 0;
  transition: transform 300ms var(--sc-ease-out), opacity 220ms var(--sc-ease-out);
}
.sun__core {
  width: 0.62rem; height: 0.62rem; margin: -0.31rem 0 0 -0.31rem;
  background: radial-gradient(circle at 42% 40%, #FFF8E8 0%, #F3D99E 38%, #C5A059 100%);
  box-shadow: 0 0 0.45rem 0.08rem rgba(243, 217, 158, 0.7);
  transition: transform 180ms var(--sc-ease-out);
}
.sun.is-target .sun__corona { transform: scale(1.8); }
.sun.is-target .sun__raysWrap { transform: scale(1.45); opacity: 1; }
.sun.is-target .sun__ring { transform: scale(1.35); opacity: 1; }
.sun.is-target .sun__core { transform: scale(1.3); }
.sun.is-text .sun__corona { transform: scale(0.55); }
.sun.is-text .sun__raysWrap { transform: scale(0.6); opacity: 0.5; }
.sun.is-press .sun__core { transform: scale(0.72); }
.sun.is-press .sun__corona { transform: scale(1.35); }
@keyframes sun-turn { to { transform: rotate(360deg); } }
.has-sun, .has-sun * { cursor: none !important; }
.reduced .sun__rays { animation: none; }

/* ------------------------------------------------------------ mobile ----- */
@media (max-width: 1080px) {
  .bar__nav { gap: 1rem; }
  .bar__link { font-size: 0.86rem; }
}
@media (max-width: 960px) {
  .bar { grid-template-columns: 1fr auto; }
  .bar__nav, .bar__end { display: none; }
  .bar__toggle { display: inline-flex; }
}
@media (max-width: 860px) {
  body { font-size: 1rem; }
  .hero { height: 175vh; }
  .hero__place { padding-top: calc(var(--bar-h) + 5vh); }
  .hero__title { font-size: clamp(2.5rem, 1.4rem + 6vw, 3.5rem); }
  .hero__sub { font-size: 1rem; margin-top: 0.9rem; max-width: 30rem; }
  .hero__actions { margin-top: 1.3rem; }
  [data-hero="left"] .hero__place { align-items: flex-start; padding-top: calc(var(--bar-h) + 5vh); }
  [data-hero="left"] .hero__title { font-size: clamp(2.5rem, 1.4rem + 6vw, 3.5rem); }

  .station { min-height: 0; display: block; padding: 4rem 0; }
  .station__inner { grid-template-columns: 1fr; gap: 0; }
  .station__stage { order: -1; min-height: 44vh; }
  .station--right .station__copy { justify-self: start; }
  .display { font-size: clamp(2.4rem, 1.6rem + 4vw, 3.2rem); }
  .accent { font-size: 1.3rem; }
  .station--pin { padding: 0; }
  .station--pin .station__stage { min-height: 32vh; }
  .station--pin .pin-center { align-items: flex-start; padding-top: calc(var(--bar-h) + 0.5rem); }
  .station--pin .body { font-size: 0.95rem; margin-top: 0.8rem; line-height: 1.55; }
  .station--pin .accent { font-size: 1.15rem; margin-top: 0.5rem; }
  .station--pin .checks { margin-top: 1rem; }
  .station--pin .checks li { padding: 0.5rem 0 0.5rem 1.6rem; font-size: 0.92rem; }
  .station--pin .checks li::before { top: 0.78rem; }
  .hush { height: 45vh; }

  .cases, .founders { grid-template-columns: 1fr; }
  .contact__inner { grid-template-columns: 1fr; }
  .contact__list { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .station--pin .body { display: none; }
}

/* ==================================================== touch and phones ====
   Everything here is about a thumb on a phone: no sideways drag, headings
   that clear the fixed bar, targets big enough to hit, and a price list that
   reads down the screen instead of across it.
   ========================================================================= */

/* the hero's scrim is deliberately wider than the screen, and without this the
   whole page can be dragged sideways on a phone */
.hero { overflow-x: clip; }

/* an anchor lands under the fixed bar without this, hiding the heading */
section[id], article[id] { scroll-margin-top: calc(var(--bar-h) + 1rem); }

/* 44px minimum on anything a thumb has to hit */
.bar__brand { min-height: 44px; }
.bar__toggle { min-height: 44px; }
@media (pointer: coarse), (max-width: 860px) {
  .contact__list a, .contact__social a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__brand { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__legal a { display: inline-block; padding: 0.7rem 0.5rem; margin-left: 0.45rem; }
}

/* phones: name and basis stack on the left, the price stays on the right */
@media (max-width: 860px) {
  .ledger, .ledger tbody, .ledger th, .ledger td { display: block; }
  .ledger tr {
    display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center;
    padding: 0.7rem 0; border-top: 1px solid var(--sc-hairline);
  }
  .ledger tr:last-child { border-bottom: 1px solid var(--sc-hairline); }
  .ledger th, .ledger td { padding: 0; border: 0; }
  .ledger tr:last-child th, .ledger tr:last-child td { border-bottom: 0; }
  .ledger th { grid-column: 1; grid-row: 1; }
  .ledger td:not(.ledger__price) { grid-column: 1; grid-row: 2; font-size: 0.82rem; color: var(--sc-ink-soft); }
  .ledger__price { grid-column: 2; grid-row: 1 / span 2; }
}

/* a field under 16px makes iOS zoom the page the moment it takes focus */
@media (pointer: coarse), (max-width: 860px) {
  .field input, .field select { font-size: 1rem; }
}

/* the quiet before the close is a fifth of a phone screen; shorten it there */
@media (max-width: 860px) {
  .contact { padding-top: clamp(4rem, 14vh, 8rem); }
}

/* a phone held sideways has almost no height: the copy tightens so the whole
   mark still fits in the air under it (buttons keep their 48px hit area) */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .hero__place { padding-top: calc(var(--bar-h) + 1vh); }
  .hero__title { font-size: clamp(1.8rem, 0.9rem + 2.6vw, 2.3rem); }
  .hero__sub { font-size: 0.9rem; margin-top: 0.5rem; max-width: 36rem; }
  .hero__actions { margin-top: 0.8rem; }
}

/* a field the browser fills in keeps the panel's own colours, not the pale
   yellow or blue the browser paints, which differs between phone themes */
.field input::placeholder { color: rgba(205, 212, 226, 0.7); opacity: 1; }
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--alabaster);
  -webkit-box-shadow: inset 0 0 0 100px rgba(7, 22, 54, 0.92);
  caret-color: var(--gold);
  transition: background-color 100000s ease-in-out 0s;
}

/* ================================================= reviews and actions ====
   Real client reviews in the Case Studies panel, the buttons that close a
   ring panel, and the contact list's stacked cells.
   ========================================================================= */
.reviews { display: grid; gap: 1.1rem; margin-top: 1rem; }
.review { margin: 0; padding-top: 0.75rem; border-top: 1px solid rgba(197, 160, 89, 0.45); }
.review__quote { margin: 0.45rem 0 0; }
.review__quote p {
  margin: 0; font-family: var(--sc-font-display); font-style: italic; font-weight: 500;
  font-size: 1.24rem; line-height: 1.3; color: var(--alabaster); text-wrap: pretty;
}
.review__by { margin-top: 0.5rem; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--sc-ink-soft); }

/* the rest of a review quote, dropped down in place; JS drives max-height so
   it can animate open and shut (see the case studies block in site.js) */
.review__more { margin-top: 0.5rem; }
.review__more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; letter-spacing: 0.05em; color: var(--gold-hi); transition: color 160ms var(--sc-ease-out);
}
.review__more > summary::-webkit-details-marker { display: none; }
.review__more > summary::after {
  content: ""; flex: none; width: 0.4rem; height: 0.4rem;
  border-right: 1.5px solid var(--gold-hi); border-bottom: 1.5px solid var(--gold-hi);
  transform: translateY(-0.1rem) rotate(45deg); transition: transform 200ms var(--sc-ease-out);
}
.review__more[open] > summary::after { transform: translateY(0.05rem) rotate(225deg); }
.review__more:hover > summary, .review__more > summary:focus-visible { color: var(--alabaster); }
.review__more__panel { overflow: hidden; max-height: 0; transition: max-height 380ms var(--sc-ease-out); }
.review__more__panel .review__quote { margin-top: 0.55rem; }

/* centred, one button or a pair */
.orbit__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.orbit__actions .btn { min-height: 2.75rem; padding: 0.75rem 1.25rem; }

/* two addresses or two sets of hours share one cell; an odd last item takes
   the whole row so the grid never ends on a gap */
.contact__stack { display: grid; justify-items: start; gap: 0.15rem; }
.contact__stack > * { text-wrap: balance; }
.contact__list > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* the page you are on, in the bar and the drawer */
.bar__link[aria-current="page"] { color: var(--alabaster); }
.bar__link[aria-current="page"]::after { transform: scaleX(1); }
.drawer nav a[aria-current="page"] { color: var(--gold-hi); }

@media (min-width: 861px) and (max-height: 760px) {
  .reviews { gap: 0.8rem; margin-top: 0.7rem; }
  .review { padding-top: 0.55rem; }
  .review__quote p { font-size: 1.1rem; line-height: 1.26; }
}

/* short laptops: the panels with buttons tighten further so the ring monogram
   keeps its size above the front panel */
@media (min-width: 861px) and (max-height: 760px) {
  .orbit { padding-bottom: 0.85rem; }
  .orbit > :nth-last-child(2) { margin-bottom: 0.45rem; }
  .orbit__actions .btn { min-height: 2.6rem; padding: 0.6rem 1.1rem; }
  .orbit__slogan { display: none; }
  .ledger th, .ledger td { padding: 0.4rem 0; }
  .orbit__note { margin-top: 0.5rem; line-height: 1.4; }
  .review__quote p { font-size: 1.04rem; }
  .reviews { gap: 0.65rem; }
}

/* ===================================================== legal and POPIA ====
   On every page: the POPIA statement and the three legal documents at the
   foot, and a privacy note under each form that collects details.
   ========================================================================= */
.foot__base {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.4rem 2rem; margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--sc-hairline);
}
.popia { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; max-width: 36rem; font-size: 0.84rem; line-height: 1.5; color: var(--sc-ink-soft); }
.popia strong { font-weight: 500; color: var(--alabaster); }
.popia__mark { flex: none; margin-top: 0.05rem; color: var(--gold); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.86rem; color: var(--sc-ink-soft); text-decoration: none; }
.foot__links a:hover, .foot__links a:focus-visible, .foot__links a[aria-current="page"] { color: var(--alabaster); }
.check a { color: var(--alabaster); text-decoration-color: rgba(197, 160, 89, 0.7); text-underline-offset: 0.18em; }