/* ==========================================================================
   ABOSS ACTIEV — site styles
   Theme: "Backing Bold Futures". A cosmic emerald void lit by gold
   portals and doorways, after the launch artwork (assets/image.png,
   assets/Banner.png). Wide, quiet typography with dust and starlight.
   ========================================================================== */

:root {
  /* Void surfaces */
  --void: #010b07;
  --deep: #011710;
  --abyss: #02211a;
  --panel: rgba(6, 40, 30, .42);
  --line: rgba(224, 174, 56, .16);
  --line-2: rgba(243, 237, 224, .1);

  /* Brand */
  --emerald: #12b07a;
  --emerald-300: #6fe0b3;
  --emerald-glow: rgba(18, 176, 122, .35);
  --gold: #e0ae38;
  --gold-300: #f6d27a;
  --gold-glow: rgba(240, 190, 70, .45);
  --ivory: #f3ede0;

  /* Text */
  --text: #f3ede0;
  --text-2: #b7c7bf;
  --text-3: #7f968c;

  /* Type */
  /* Syne for headings and titles; DM Sans for everything else (body, nav, buttons, labels) */
  --f-display: "Syne", system-ui, sans-serif;
  --f-body: "DM Sans", system-ui, sans-serif;
  --f-wide: var(--f-body);

  /* Layout */
  --gutter: clamp(16px, 4vw, 56px);
  --max: clamp(1240px, 80vw, 1600px);
  --radius: 4px;
  --nav-h: 72px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
::selection { background: var(--gold); color: var(--void); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--gold); color: var(--void); padding: 8px 14px; border-radius: 4px; font-weight: 600;
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.gold {
  --gold-grad: linear-gradient(100deg, var(--gold-300) 0%, var(--gold) 45%, #f9e3a6 70%, var(--gold) 100%);
  color: var(--gold-300);
  background: var(--gold-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 9s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.muted { color: var(--text-3); }

/* Film grain over everything — subtle, desert-dust texture */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); }
}

.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
  transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 12px var(--gold-glow);
}

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-wide); font-size: 11px; letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.eyebrow__line { width: 36px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow--center { justify-content: center; }
.eyebrow--center .eyebrow__line:last-child { background: linear-gradient(90deg, var(--gold), transparent); }

.h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(34px, 5.2vw, 68px); line-height: 1.06; letter-spacing: -0.03em;
  text-wrap: balance;
}
.lead { font-family: var(--f-body); font-weight: 300; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45; color: var(--text); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 26px;
  font-family: var(--f-wide); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  border-radius: 999px; white-space: nowrap; isolation: isolate;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .4s, color .4s, border-color .4s;
}
.btn .arrow { transition: transform .5s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--gold {
  color: #1a1203;
  background: linear-gradient(120deg, #f8dc8c, var(--gold) 55%, #b8841e);
  box-shadow: 0 0 0 1px rgba(255, 230, 160, .4) inset, 0 10px 40px -10px var(--gold-glow);
}
.btn--gold:hover { box-shadow: 0 0 0 1px rgba(255, 240, 190, .7) inset, 0 14px 60px -8px rgba(240, 190, 70, .75); }
.btn--ghost {
  color: var(--ivory); border: 1px solid rgba(243, 237, 224, .26);
  background: rgba(2, 33, 26, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-300); }
.btn--lg { height: 60px; padding: 0 34px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h);
  transition: transform .5s var(--ease-out), background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(1, 11, 7, .62); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-color: var(--line-2); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 32px; }
.nav__logo svg { height: 26px; width: auto; }
.nav nav { margin-left: auto; }
.nav__links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-family: var(--f-wide); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-2);
  transition: color .3s;
}
.nav__links a:hover { color: var(--gold-300); }
.nav__cta { height: 42px; padding: 0 20px; font-size: 10px; }
.nav__toggle { display: none; width: 44px; height: 44px; margin-left: auto; position: relative; }
.nav__toggle span { position: absolute; left: 11px; right: 11px; height: 1px; background: var(--ivory); transition: transform .4s var(--ease-out); }
.nav__toggle span:first-child { top: 18px; }
.nav__toggle span:last-child { top: 25px; }
.nav-open .nav__toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-open .nav__toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; justify-content: center;
  padding: var(--nav-h) var(--gutter) 40px;
  background: radial-gradient(120% 70% at 50% 110%, rgba(224, 174, 56, .22), transparent 60%), var(--void);
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.nav-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: m; }
.mobile-menu li { counter-increment: m; }
.mobile-menu a { font-family: var(--f-body); font-weight: 300; font-size: clamp(30px, 8vw, 44px); display: flex; gap: 16px; align-items: baseline; }
.mobile-menu a::before { content: "0" counter(m); font-family: var(--f-wide); font-size: 10px; color: var(--gold); letter-spacing: .2em; }
.mobile-menu__foot { margin-top: 40px; font-family: var(--f-wide); font-size: 10px; letter-spacing: .38em; text-transform: uppercase; color: var(--text-3); }

/* ==========================================================================
   HERO — the portal
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(70% 60% at 72% 45%, #03301f 0%, transparent 70%),
    linear-gradient(180deg, #001a11 0%, #01120c 60%, var(--void) 100%);
}
.hero__cosmos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__nebula {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 35% at 70% 40%, rgba(18, 176, 122, .18), transparent 70%),
    radial-gradient(30% 30% at 78% 70%, rgba(224, 174, 56, .14), transparent 70%),
    radial-gradient(50% 40% at 10% 100%, rgba(18, 176, 122, .08), transparent 70%);
}

.hero__portal {
  position: absolute; z-index: 1;
  right: max(var(--gutter), calc((100vw - var(--max)) / 2 - 40px));
  top: calc(50% + var(--nav-h) / 2); transform: translateY(-50%);
  height: min(calc(100svh - var(--nav-h) - 24px), 960px, 75vw); aspect-ratio: 550 / 960;
  will-change: transform;
}
.portal__body { position: relative; height: 100%; }
.hero__portal img {
  position: relative; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 76%, transparent 98%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 76%, transparent 98%);
          mask-composite: intersect;
  animation: breathe 7s ease-in-out infinite;
}
.portal__halo {
  position: absolute; inset: 6% 0 18% -6%; border-radius: 50% / 46%;
  background: radial-gradient(closest-side, rgba(240, 190, 70, .35), rgba(18, 176, 122, .2) 55%, transparent 100%);
  filter: blur(40px); animation: halo 7s ease-in-out infinite;
}
.portal__flare {
  position: absolute; left: 50%; top: 2%; width: 140%; height: 2px; transform: translateX(-50%) rotate(-8deg);
  background: linear-gradient(90deg, transparent, rgba(255, 236, 180, .55), transparent);
  filter: blur(1px); opacity: .6; mix-blend-mode: screen;
}
@keyframes breathe { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.12) saturate(1.15); } }
@keyframes halo { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

.hero__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22svh; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgba(1, 11, 7, .85) 70%, var(--void)),
    repeating-linear-gradient(180deg, rgba(246, 210, 122, .06) 0 1px, transparent 1px 14px);
}

.hero__inner {
  position: relative; z-index: 3; flex: 1;
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 32px); padding-bottom: 48px;
}
.hero__copy { max-width: min(780px, max(680px, 40vw)); }
.hero__pillars {
  font-family: var(--f-wide); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--emerald-300);
  margin-bottom: 30px;
}
.hero__pillars i { font-style: normal; color: var(--gold); padding: 0 6px; }
.hero__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(40px, 5.6vw, 92px); line-height: 1.04; letter-spacing: -0.04em;
}
.hero__title .gold { font-weight: 500; }
.hero__lead {
  margin-top: 30px; max-width: 520px;
  font-family: var(--f-body); font-weight: 300; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; color: var(--ivory);
}
.hero__body { margin-top: 16px; max-width: 500px; color: var(--text-2); }
.hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }


/* ==========================================================================
   Sections
   ========================================================================== */
.section { position: relative; padding: clamp(96px, 14vw, 180px) 0; }
.section__head { max-width: 820px; margin-bottom: clamp(56px, 7vw, 96px); }
.section__intro { margin-top: 30px; display: grid; gap: 12px; color: var(--text-2); max-width: 640px; }

/* ---------- Manifesto ---------- */
.manifesto { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(48px, 6vw, 90px); }
/* Shares the page container's left edge; the intro and statement carry their own measures. */
.manifesto__inner .manifesto__line { max-width: 1100px; }
.manifesto__intro { max-width: 620px; color: var(--text-2); font-size: 18px; margin-bottom: 40px; }
.manifesto__line {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 64px); line-height: 1.14; letter-spacing: -0.03em;
  text-wrap: balance;
}
.manifesto__line .gold { font-weight: 500; }

/* ---------- Ecosystem ---------- */
.ecosystem { overflow: hidden; padding-top: clamp(48px, 6vw, 90px); padding-bottom: clamp(48px, 6vw, 90px); }
.ecosystem .section__head { max-width: none; }
/* Held to exactly two lines: the type shrinks so the longest line (≈16em in Syne) fits the container */
.h2--two-line {
  white-space: nowrap;
  font-size: min(clamp(34px, 5.2vw, 68px), (min(100vw, var(--max) + var(--gutter) * 2) - var(--gutter) * 2) / 16.6);
}
.orbit-bg { position: absolute; right: -20vw; top: 6%; width: 70vw; aspect-ratio: 1; pointer-events: none; }
.orbit-bg i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(224, 174, 56, .12);
  animation: spin 80s linear infinite;
}
.orbit-bg i::after { content: ""; position: absolute; top: 50%; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px var(--gold); }
.orbit-bg i:nth-child(2) { inset: 14%; border-color: rgba(18, 176, 122, .14); animation-duration: 60s; animation-direction: reverse; }
.orbit-bg i:nth-child(2)::after { background: var(--emerald); box-shadow: 0 0 18px var(--emerald); }
.orbit-bg i:nth-child(3) { inset: 30%; border-color: rgba(243, 237, 224, .08); animation-duration: 45s; }
.orbit-bg i:nth-child(3)::after { background: var(--ivory); box-shadow: 0 0 14px var(--ivory); }
@keyframes spin { to { transform: rotate(360deg); } }

.forces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); position: relative; }
.force {
  grid-column: span 3; position: relative; padding: clamp(28px, 3vw, 44px);
  background: linear-gradient(180deg, rgba(2, 33, 26, .92), rgba(1, 15, 10, .96));
  overflow: hidden; transition: background .6s;
}
.force--wide { grid-column: span 6; display: grid; grid-template-columns: auto 1fr 1.2fr; gap: 14px 48px; align-items: start; }
.force--wide .force__glyph { grid-row: span 3; }
.force::before {
  content: ""; position: absolute; inset: auto -20% -60% -20%; height: 100%;
  background: radial-gradient(closest-side, rgba(224, 174, 56, .18), transparent);
  opacity: 0; transition: opacity .6s;
}
.force:hover::before { opacity: 1; }
.force__no { position: absolute; top: 22px; right: 26px; font-family: var(--f-wide); font-size: 11px; letter-spacing: .2em; color: var(--text-3); }
.force__glyph { width: 56px; height: 56px; color: var(--gold); margin-bottom: 30px; filter: drop-shadow(0 0 12px rgba(224, 174, 56, .4)); }
.force h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(21px, 2vw, 26px); letter-spacing: -0.02em; line-height: 1.2; }
.force__tag { margin: 10px 0 14px; color: var(--gold-300); font-family: var(--f-body); font-weight: 300; }
.force p:last-child { color: var(--text-2); font-size: 15px; }
.force--wide h3 { font-size: clamp(26px, 2.8vw, 36px); }
.force--wide .force__tag { margin: 0; }
.force--wide p:last-child { grid-column: 3; grid-row: 1 / span 2; font-size: 17px; }

/* ---------- Founders ---------- */
.founders { padding-top: clamp(48px, 6vw, 90px); }
.founders::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 0% 50%, rgba(18, 176, 122, .1), transparent 70%);
}
.founders__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(48px, 7vw, 110px); align-items: start; }
.founders__aside { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 20px; justify-items: start; }
.founders__aside > p:not(.eyebrow):not(.lead) { color: var(--text-2); }
.founders__aside .eyebrow { margin-bottom: 0; }
.founders__note { border-left: 1px solid var(--gold); padding-left: 18px; color: var(--ivory) !important; font-family: var(--f-body); font-weight: 300; font-size: 18px; margin-bottom: 12px; }

.trajectories { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.trajectory {
  position: relative; display: block; padding: 34px 80px 34px 34px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(2, 33, 26, .7), rgba(1, 15, 10, .4));
  overflow: hidden; transition: border-color .5s, transform .6s var(--ease-out);
}
.trajectory::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--emerald), var(--gold));
  transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease-out);
}
.trajectory:hover { border-color: rgba(224, 174, 56, .45); transform: translateX(6px); }
.trajectory:hover::after { transform: scaleY(1); }
.trajectory__phase { font-family: var(--f-wide); font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--emerald-300); }
.trajectory h3 { margin: 12px 0 8px; font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -0.02em; }
.trajectory p { color: var(--text-2); }
.trajectory__go {
  position: absolute; right: 28px; top: 50%; translate: 0 -50%;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--gold); transition: background .4s, color .4s;
}
.trajectory:hover .trajectory__go { background: var(--gold); color: var(--void); }

/* ---------- Philosophy — the eclipse ---------- */
.philosophy { overflow: hidden; text-align: center; padding-bottom: clamp(48px, 6vw, 80px); }
.philosophy + .approach { padding-top: clamp(64px, 8.5vw, 120px); }
/* The eclipse is inscribed in a square frame that sits in normal flow and holds the content
   it encircles, so the section always makes room for the whole circle and anything after the
   frame (the closing line and the triad) lands below it. Wide screens frame the full statement; narrower screens,
   where that statement's diagonal exceeds the viewport, frame just the heading. */
.philosophy__frame {
  position: relative; isolation: isolate;
  width: min(1120px, 100%); aspect-ratio: 1; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 940px); justify-content: center; align-content: center;
}
.philosophy__frame > :last-child { margin-bottom: 0; }
.eclipse { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.eclipse__planet {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #010b07 62%, #021a12 68%, transparent 70.5%);
  box-shadow: 0 -2px 0 0 rgba(246, 210, 122, .55), 0 -30px 120px -20px rgba(240, 190, 70, .45), 0 -80px 240px -40px rgba(18, 176, 122, .3);
}
.eclipse__planet::before {
  content: ""; position: absolute; inset: -6%; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 88%, rgba(224, 174, 56, .06) 95%, transparent);
}
.philosophy__inner { position: relative; max-width: calc(1120px + var(--gutter) * 2); }
.philosophy__inner > .triad { max-width: 1060px; margin: clamp(28px, 3.5vw, 44px) auto 0; }
.philosophy__title { margin-bottom: clamp(60px, 8vw, 100px); }
.philosophy__rupee { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 3vw, 38px); margin-bottom: 30px; color: var(--ivory); }
.rupee-list { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 800px; }
.rupee-list li {
  padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2);
  background: rgba(2, 33, 26, .5); font-size: 15px;
}
.philosophy__q { margin: clamp(64px, 8vw, 100px) auto 0; display: grid; gap: 10px; }
.philosophy__q p { color: var(--text-2); font-size: 18px; }
.philosophy__q .philosophy__answer { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 4.4vw, 58px); letter-spacing: -0.03em; line-height: 1.1; color: var(--ivory); }
.philosophy__centre { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 520px; color: var(--text-2); }
.triad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.triad__item { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.6vw, 22px); padding: 18px clamp(12px, 2vw, 28px); text-align: left; }
.triad__item + .triad__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, rgba(224, 174, 56, .38) 50%, transparent); }
.triad__item + .triad__item::after { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 8px var(--gold-glow); }
.triad__icon { flex: none; display: grid; place-items: center; width: clamp(48px, 4.2vw, 56px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(224, 174, 56, .42); background: radial-gradient(circle at 50% 45%, rgba(18, 176, 122, .22), rgba(1, 23, 16, .7) 72%); box-shadow: 0 0 22px rgba(18, 176, 122, .22), inset 0 0 14px rgba(224, 174, 56, .1); color: var(--gold); }
.triad__icon svg { width: 48%; height: 48%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.triad__text { display: grid; gap: 4px; min-width: 0; }
.triad__no { font-family: var(--f-body); font-size: 12px; letter-spacing: .2em; color: var(--gold); }
.triad__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ivory); }
.triad__sub { font-family: var(--f-body); font-weight: 300; font-size: 14px; line-height: 1.4; color: var(--text-2); }

@media (min-width: 1200px) {
  .triad__sub { white-space: nowrap; }
}
@media (max-width: 900px) and (min-width: 641px) {
  .triad__item { flex-direction: column; text-align: center; gap: 14px; }
}

/* ---------- Approach — orbital path ---------- */
.orbit-path { position: relative; }
.orbit-path__line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line-2); }
.orbit-path__line span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--emerald), var(--gold)); transform-origin: 0 50%; box-shadow: 0 0 10px var(--gold-glow); }
.js .orbit-path__line span { transform: scaleX(0); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.step { position: relative; padding-top: 44px; }
.step__node {
  position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--void); border: 1px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(224, 174, 56, .08), 0 0 20px rgba(224, 174, 56, .5);
}
.step__node::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--gold); }
.step__no { font-family: var(--f-wide); font-size: 10px; letter-spacing: .3em; color: var(--gold); }
.step h3 { margin: 10px 0 12px; font-family: var(--f-display); font-weight: 500; font-size: clamp(16px, 1.6vw, 20px); letter-spacing: .14em; text-transform: uppercase; }
.step p { color: var(--text-2); font-size: 15px; }
.approach__close .gold { display: block; }
.approach__close { margin-top: clamp(72px, 9vw, 120px); max-width: 30em; text-wrap: balance; font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 3vw, 38px); line-height: 1.25; letter-spacing: -0.02em; }

/* ---------- Frontier — the doorway of light ---------- */
.frontier { overflow: hidden; padding: 0; }
/* The visual is shown whole: full width at its natural 3:1 aspect, never cropped or stretched. */
.frontier__visual { display: block; }
.frontier__visual img { display: block; width: 100%; height: auto; }


/* ---------- Enquiry ---------- */
.enquiry-section { border-top: 1px solid var(--line-2); background: linear-gradient(180deg, var(--void), var(--deep)); }
.enquiry > * { min-width: 0; }
.enquiry { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
.enquiry__aside { display: grid; gap: 22px; }
.enquiry__aside .eyebrow { margin-bottom: 0; }
.tellus { margin: 0; padding: 0 0 0 20px; color: var(--text-2); display: grid; gap: 6px; }
.tellus li::marker { color: var(--gold); font-family: var(--f-wide); font-size: 11px; }

.faq { margin-top: 26px; }
.faq__title { font-family: var(--f-display); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; font-weight: 400; }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__q { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; color: var(--gold); font-size: 20px; transition: rotate .4s var(--ease-out); }
.faq__item[open] .faq__q::after { rotate: 45deg; }
.faq__q h4 { font-family: var(--f-display); font-weight: 400; font-size: 17px; }
.faq__a { padding: 0 0 20px; color: var(--text-2); font-size: 15px; }

.form {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: clamp(20px, 3.5vw, 44px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(2, 33, 26, .75), rgba(1, 15, 10, .8));
  box-shadow: 0 40px 120px -40px rgba(224, 174, 56, .2);
}
.form.flash { animation: flash 1.4s var(--ease-out); }
@keyframes flash { 0% { box-shadow: 0 0 0 1px var(--gold), 0 0 80px rgba(224, 174, 56, .5); } 100% { box-shadow: 0 40px 120px -40px rgba(224, 174, 56, .2); } }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, .field legend { font-family: var(--f-wide); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); padding: 0; }
.field legend { margin-bottom: 10px; }
.opt { color: var(--text-3); margin-left: 6px; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ivory);
  background: rgba(1, 11, 7, .6); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 13px 14px; transition: border-color .3s, box-shadow .3s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 174, 56, .15); }
.field.has-error input, .field.has-error textarea { border-color: #e2725b; }
.err { color: #f0907c; font-size: 13px; min-height: 0; }
.form__q { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--f-body) !important; font-size: 17px !important; color: var(--ivory) !important; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-block; padding: 8px 15px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; color: var(--text-2); transition: all .3s; }
.choice:hover span { border-color: rgba(224, 174, 56, .5); }
.choice input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--void); }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.form__submit { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 8px; }
.form__submit p { color: var(--text-2); font-size: 14px; }
.form__submit strong { color: var(--ivory); font-weight: 500; }
.form__success {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 30px;
  background: linear-gradient(180deg, #02211a, #010b07); border-radius: var(--radius);
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;
}
.form.is-sent .form__success { opacity: 1; visibility: visible; }
.form__success .tick { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--void); font-size: 24px; box-shadow: 0 0 40px var(--gold-glow); }
.form__success h3 { font-family: var(--f-display); font-weight: 400; font-size: 26px; }
.form__success p { color: var(--text-2); max-width: 360px; }

/* ---------- Footer ---------- */
/* Starts on the enquiry section's closing tone (--deep) so the two meet without a seam;
   a gold hairline marks the top edge, brightest at the centre. */
.footer {
  --logo-h: clamp(72px, 9vw, 120px);
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: clamp(80px, 10vw, 136px) 0 32px;
  background: linear-gradient(180deg, var(--deep), var(--void) 55%);
}
.footer::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(900px, 90%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 174, 56, .55), transparent);
}
/* Emerald ambience with a warm gold core, centred behind the logo; it breathes very slowly. */
.footer__glow {
  position: absolute; z-index: -1; left: 50%; top: clamp(20px, 3vw, 48px); translate: -50% 0;
  width: min(1100px, 140%); height: clamp(320px, 34vw, 460px); pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 46%, rgba(240, 190, 70, .15), rgba(240, 190, 70, .05) 38%, transparent 62%),
    radial-gradient(closest-side, rgba(18, 176, 122, .2), rgba(18, 176, 122, .09) 40%, rgba(18, 176, 122, .03) 72%, transparent);
  animation: footer-breathe 9s ease-in-out infinite;
}
@keyframes footer-breathe { 50% { opacity: .72; } }

.footer__stage { display: grid; justify-items: center; }
/* The official lockup, shown as-is. Its artwork carries 22% padding top and bottom, so the
   horizon and the reflection are pulled up to sit against the drawn baseline. */
.footer__logo { position: relative; display: grid; justify-items: center; border-radius: var(--radius); }
.footer__logo img { display: block; height: var(--logo-h); width: auto; }
.footer__logo > img:first-child { filter: drop-shadow(0 0 28px rgba(18, 176, 122, .28)) drop-shadow(0 0 60px rgba(224, 174, 56, .14)); }
.footer__horizon {
  position: relative; width: min(560px, 82vw); height: 1px; margin-top: calc(var(--logo-h) * -.19);
  background: linear-gradient(90deg, transparent, rgba(18, 176, 122, .55) 22%, rgba(246, 210, 122, .95) 50%, rgba(18, 176, 122, .55) 78%, transparent);
  box-shadow: 0 0 14px 1px rgba(240, 190, 70, .35);
}
.footer__reflection {
  margin-top: calc(var(--logo-h) * -.375); transform: scaleY(-1); opacity: .2; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 22%, transparent 62%);
  mask-image: linear-gradient(to top, #000 22%, transparent 62%);
  filter: blur(.6px);
}
/* Brand statement: Syne bold caps with the footer's gold-to-emerald light. Trailing letter-spacing
   is offset with matching left padding so the words sit on the logo's centre line. */
.footer__tag {
  margin-top: calc(var(--logo-h) * -.42 + clamp(14px, 2.2vw, 26px));
  font-family: var(--f-display); font-weight: 700; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(15px, 2vw, 26px); line-height: 1.3;
  letter-spacing: clamp(.12em, .5vw, .3em); padding-left: clamp(.12em, .5vw, .3em);
  color: var(--gold-300);
  filter: drop-shadow(0 0 14px rgba(240, 190, 70, .28)) drop-shadow(0 0 32px rgba(18, 176, 122, .22));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .footer__tag {
    background: linear-gradient(100deg, var(--emerald-300) 0%, var(--gold-300) 28%, #f9e3a6 50%, var(--gold) 72%, var(--emerald-300) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

.footer__nav {
  margin-top: clamp(44px, 5vw, 64px); padding-block: 22px;
  border-block: 1px solid var(--line-2);
}
.footer__links { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; row-gap: 14px; }
.footer__links li { display: flex; align-items: center; }
.footer__links li + li::before {
  content: ""; width: 4px; height: 4px; margin-inline: clamp(18px, 3vw, 36px); rotate: 45deg;
  background: var(--gold); opacity: .7; box-shadow: 0 0 6px var(--gold-glow);
}
.footer__links a { font-family: var(--f-wide); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-2); transition: color .3s; }
.footer__links a:hover, .footer__links a:focus-visible { color: var(--gold-300); }
.footer__bottom { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; color: var(--text-3); }

@media (max-width: 640px) {
  .footer__links { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 16px 40px; }
  .footer__links li + li::before { display: none; }
  .footer__links li:last-child { grid-column: 1 / -1; justify-content: center; }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; text-wrap: balance; }
}

/* ---------- Back to top ---------- */
/* Centred in the right-hand margin beside the container when that margin is wide enough;
   otherwise it tucks into the corner. Hidden (and unfocusable) until the page is scrolled. */
.to-top {
  --size: 52px;
  position: fixed; z-index: 95;
  right: max(16px, calc((max(var(--gutter), (100vw - var(--max)) / 2) - var(--size)) / 2));
  bottom: calc(clamp(16px, 3vw, 36px) + env(safe-area-inset-bottom, 0px));
  width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center; color: var(--gold-300);
  background: radial-gradient(circle at 50% 30%, rgba(18, 176, 122, .28), rgba(1, 11, 7, .88) 70%);
  border: 1px solid rgba(224, 174, 56, .45);
  box-shadow: 0 0 0 4px rgba(18, 176, 122, .06), 0 0 22px rgba(18, 176, 122, .22), 0 0 34px rgba(240, 190, 70, .12), 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  translate: 0 calc(var(--lift, 0px) * -1);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility .45s, border-color .3s, box-shadow .3s, color .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { transition: transform .35s var(--ease-out); }
.to-top:hover, .to-top:focus-visible {
  color: #f9e3a6; border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(224, 174, 56, .08), 0 0 26px rgba(18, 176, 122, .32), 0 0 40px rgba(240, 190, 70, .28), 0 10px 30px rgba(0, 0, 0, .45);
}
.to-top:hover svg, .to-top:focus-visible svg { transform: translateY(-2px); }
.to-top:focus-visible { outline-offset: 4px; border-radius: 50%; }
.nav-open .to-top { opacity: 0; visibility: hidden; }
@media (max-width: 640px) { .to-top { --size: 44px; } }

/* ---------- Social rail ---------- */
/* Compact by default: a toggle stacked above the back-to-top button that opens the icons upwards.
   It appears with that button (.is-shown, set in JS) so it never covers the hero.
   Where the right-hand margin can hold it, it becomes the always-open vertical rail. */
.social {
  --size: 52px; --icon: 42px;
  position: fixed; z-index: 94;
  right: max(16px, calc((max(var(--gutter), (100vw - var(--max)) / 2) - var(--size)) / 2));
  bottom: calc(clamp(16px, 3vw, 36px) + env(safe-area-inset-bottom, 0px));
  width: var(--size);
  translate: 0 calc(var(--lift, 0px) * -1);
  opacity: 0; visibility: hidden; transform: translateY(calc(var(--size) * -1 + 2px)) scale(.9);
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out), visibility .45s;
}
.social.is-shown { opacity: 1; visibility: visible; transform: translateY(calc((var(--size) + 12px) * -1)); }
.nav-open .social { opacity: 0; visibility: hidden; }

.social__toggle {
  width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center; color: var(--gold-300);
  background: radial-gradient(circle at 50% 30%, rgba(18, 176, 122, .28), rgba(1, 11, 7, .88) 70%);
  border: 1px solid rgba(224, 174, 56, .45);
  box-shadow: 0 0 0 4px rgba(18, 176, 122, .06), 0 0 22px rgba(18, 176, 122, .22), 0 0 34px rgba(240, 190, 70, .12), 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s, box-shadow .3s, color .3s;
}
.social__toggle:hover, .social__toggle:focus-visible, .social.is-open .social__toggle {
  color: #f9e3a6; border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(224, 174, 56, .08), 0 0 26px rgba(18, 176, 122, .32), 0 0 40px rgba(240, 190, 70, .28), 0 10px 30px rgba(0, 0, 0, .45);
}
.social__toggle:focus-visible { outline-offset: 4px; border-radius: 50%; }
.social__toggle svg { grid-area: 1 / 1; transition: opacity .3s, transform .4s var(--ease-out); }
.social__toggle-close, .social.is-open .social__toggle-open { opacity: 0; transform: rotate(-90deg) scale(.6); }
.social.is-open .social__toggle-close { opacity: 1; transform: none; }

.social__panel {
  position: absolute; bottom: calc(100% + 12px); right: calc((var(--size) - var(--icon) - 12px) / 2);
  width: calc(var(--icon) + 12px); padding: 6px 0; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: linear-gradient(180deg, rgba(18, 176, 122, .10), rgba(1, 11, 7, .72) 30%, rgba(1, 11, 7, .72) 70%, rgba(18, 176, 122, .10));
  border: 1px solid rgba(224, 174, 56, .4);
  box-shadow: inset 0 1px 0 rgba(246, 210, 122, .12), 0 0 24px rgba(18, 176, 122, .16), 0 0 36px rgba(240, 190, 70, .08), 0 18px 40px rgba(0, 0, 0, .45);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.94); transform-origin: 50% 100%;
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility .35s;
}
.social.is-open .social__panel { opacity: 1; visibility: visible; transform: none; }
.social__label { display: none; }
.social__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.social__link {
  position: relative; width: var(--icon); height: var(--icon); border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .07), rgba(1, 11, 7, .92) 72%);
  border: 1px solid rgba(224, 174, 56, .26);
  box-shadow: inset 0 0 0 3px rgba(1, 11, 7, .6), 0 4px 14px rgba(0, 0, 0, .35);
  transition: transform .4s var(--ease-out), border-color .3s, box-shadow .3s;
}
.social__link svg { width: 52%; height: auto; transition: transform .4s var(--ease-out), filter .3s; }
.social__link:hover, .social__link:focus-visible {
  transform: scale(1.08); border-color: var(--gold);
  box-shadow: inset 0 0 0 3px rgba(1, 11, 7, .6), 0 0 0 4px rgba(224, 174, 56, .08), 0 0 20px rgba(18, 176, 122, .35), 0 0 30px rgba(240, 190, 70, .25);
}
.social__link:hover svg, .social__link:focus-visible svg { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(246, 210, 122, .45)); }
.social__link:focus-visible { outline-offset: 4px; border-radius: 50%; }
/* Name slides out to the left on hover / keyboard focus */
.social__link::after {
  content: attr(data-name); position: absolute; right: calc(100% + 16px); top: 50%;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 600 10px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-300);
  background: rgba(1, 11, 7, .88); border: 1px solid rgba(224, 174, 56, .35);
  box-shadow: 0 0 18px rgba(18, 176, 122, .18);
  opacity: 0; transform: translate(8px, -50%); transition: opacity .3s, transform .35s var(--ease-out);
}
.social__link:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) { .social__link:hover::after { opacity: 1; transform: translate(0, -50%); } }

@media (max-width: 640px) { .social { --size: 44px; } }

/* Rail: only when the margin beside the container fits it and the viewport is tall enough */
@media (min-width: 1420px) and (min-height: 600px) {
  .social, .social.is-shown { --size: 56px; bottom: auto; top: 50%; translate: none; opacity: 1; visibility: visible; transform: translateY(-50%); }
  .social__toggle { display: none; }
  .social__panel {
    position: relative; bottom: auto; right: auto; width: var(--size); padding: 20px 0 7px;
    opacity: 1; visibility: visible; transform: none;
    animation: social-in 1s var(--ease-out) 1.2s both;
  }
  .social__label {
    display: flex; align-items: center; gap: 12px;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font: 600 10px/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: rgba(244, 239, 228, .78);
  }
  .social__label::before { content: ''; width: 1px; height: 18px; background: rgba(224, 174, 56, .6); }
  /* Gold lines and diamonds above and below the pill */
  .social::before, .social::after {
    content: ''; position: absolute; left: 50%; width: 1px; height: 46px; translate: -50% 0;
    animation: social-in 1s var(--ease-out) 1.2s both;
  }
  .social::before { bottom: 100%; background: linear-gradient(180deg, transparent, var(--gold)); }
  .social::after { top: 100%; background: linear-gradient(0deg, transparent, var(--gold)); }
  .social__panel::before, .social__panel::after {
    content: ''; position: absolute; left: 50%; width: 7px; height: 7px;
    background: var(--gold-300); box-shadow: 0 0 10px rgba(246, 210, 122, .9), 0 0 20px rgba(224, 174, 56, .6);
  }
  .social__panel::before { top: -4px; transform: translate(-50%, -50%) rotate(45deg); }
  .social__panel::after { bottom: -4px; transform: translate(-50%, 50%) rotate(45deg); }
}
@keyframes social-in { from { opacity: 0; translate: 24px 0; } }

/* ==========================================================================
   Motion states (JS adds .js; GSAP reveals)
   ========================================================================== */
.js [data-reveal], .js [data-hero-fade] { opacity: 0; }
.no-motion [data-reveal], .no-motion [data-hero-fade] { opacity: 1 !important; transform: none !important; }
.split-line { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-word { display: inline-block; }
.scrub-word { transition: opacity .2s; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .nav__links { gap: 22px; }
  .force--wide { grid-template-columns: auto 1fr; }
  .force--wide p:last-child { grid-column: 1 / -1; grid-row: auto; }
  .force--wide .force__glyph { grid-row: span 2; }
}

@media (max-width: 1199px) {
  .philosophy__frame { display: contents; }
  .philosophy__head {
    --head-d: min(100%, 12.5 * clamp(34px, 5.2vw, 68px));
    position: relative; isolation: isolate;
    width: var(--head-d); aspect-ratio: 1; margin: 0 auto clamp(40px, 6vw, 64px);
    display: grid; align-content: center; justify-items: center;
    padding-inline: 11%;
  }
  .philosophy__head .philosophy__title { margin-bottom: 0; }
  .philosophy__head .eyebrow { white-space: nowrap; }
}

@media (max-width: 960px) {
  .nav nav, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .forces { grid-template-columns: 1fr 1fr; }
  .force { grid-column: span 1; }
  .force--wide { grid-column: 1 / -1; }

  .founders__grid, .enquiry { grid-template-columns: 1fr; }
  .founders__aside { position: static; }

  .steps { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .orbit-path__line { display: none; }
}

@media (min-width: 961px) and (max-width: 1199px) and (orientation: landscape) {
  .hero__copy { max-width: min(680px, 54vw); }
}
/* Stacked hero: the portal sits in the flow above the copy, whole and at full strength. */
@media (max-width: 960px), (max-width: 1199px) and (orientation: portrait) {
  .hero { justify-content: center; }
  .hero__portal {
    position: relative; right: auto; top: auto; transform: none; flex: none;
    height: clamp(240px, 44svh, 540px); margin: calc(var(--nav-h) + 4px) auto 0;
  }
  .hero__inner { flex: none; align-items: flex-start; margin-top: calc(clamp(240px, 44svh, 540px) * -.13); padding-top: 0; padding-bottom: 56px; }
  .hero__copy { max-width: 640px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .forces { grid-template-columns: 1fr; }
  .force--wide { display: block; }
  .force__no { top: 18px; right: 20px; }
  .trajectory { padding: 26px 64px 26px 22px; }
  .trajectory__go { right: 16px; width: 34px; height: 34px; }
  .steps { grid-template-columns: 1fr; }
  .triad { grid-template-columns: 1fr; }
  .triad__item { justify-content: flex-start; padding: 20px 4px; }
  .triad__item + .triad__item::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; background: linear-gradient(to right, transparent, rgba(224, 174, 56, .38) 50%, transparent); }
  .triad__item + .triad__item::after { top: 0; left: 50%; }
  .form__row { grid-template-columns: 1fr; }
  .form__submit .btn { width: 100%; justify-content: center; }
  .btn--lg { white-space: normal; height: auto; min-height: 56px; padding: 14px 26px; text-align: center; }
  .philosophy__head { padding-inline: 8%; }
  .philosophy__head .eyebrow { gap: 10px; }
  .philosophy__head .eyebrow__line { width: 18px; }
  .philosophy__head .philosophy__title { font-size: min(34px, 8.4vw); }
}

@media (max-width: 380px) {
  .philosophy__head .eyebrow { letter-spacing: .28em; }
  .philosophy__head .eyebrow__line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .grain { display: none; }
}

/* Split words inside gradient text carry the gradient themselves */
.gold .split-word, .gold .scrub-word {
  background-image: var(--gold-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: inherit;
}