/* WAKAN — single stylesheet for the whole site.
   Ported from the approved Home-C design system. Palette + type per project/brand/style-guide.md.

   The design files are written with inline styles (a constraint of the design tool). Here the same
   system lives as classes: identical tokens, so nothing was re-derived — only re-housed.

   Reveal animation is driven by motion.js. Everything here is visible by default; motion.js
   ARMS what is below the fold and releases it on the way down, so a missed element or absent
   JS leaves content visible rather than clipped to nothing.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/CormorantGaramond-VF.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("assets/Jost-VF.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #141B23;
  --deep: #0E1218;
  --gold: #FDB515;
  --cream: #F5EBD8;
  --muted: #B0A89C;
  --slate: #3A4654;
  --stone: #070607;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-label: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 4vw, 64px);
  --wrap: 1320px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

/* clip, never hidden: overflow-x:hidden makes this a scroll container and silently
   breaks position:sticky in every descendant — the pinned heroes depend on it. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
/* anchors (#giving, #retreats, #main) land below the fixed .nav, not under it */
html { scroll-padding-top: 104px; }

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--cream);
  font-family: var(--font-label);
  font-weight: 300;
  line-height: 1.6;
}

main { flex: 1; }

a { color: var(--cream); text-decoration: none; }

img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* gold-filled buttons: a cream ring so it doesn't read as the button's own edge */
.submit:focus-visible, .playbtn:focus-visible { outline-color: var(--cream); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  padding: 12px 18px; background: var(--night); color: var(--gold);
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
}
/* the header's wordmark occupies the top-left, so the skip chip takes the empty centre
   rather than landing on the brand */
.skip:focus-visible { left: 50%; transform: translateX(-50%); top: 10px; border: 1px solid var(--gold); }

/* logo SVGs carry currentColor, so one file serves every colour via CSS mask */
.wordmark {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.wordmark {
  -webkit-mask-image: url("assets/logotype.svg?v=rh1");
  mask-image: url("assets/logotype.svg?v=rh1");
  aspect-ratio: 30726 / 9614;
  color: var(--cream);
}
/* the mark is two colours (gold, with a red heart), so it is a plain image rather than a mask */
.logomark {
  display: block;
  background: url("assets/logomark.svg?v=rh1") center / contain no-repeat;
  aspect-ratio: 1;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(16px, 2.4vw, 28px) var(--gutter);
  background: linear-gradient(to bottom, rgba(20, 27, 35, .75), transparent);
  transition: background .5s ease;
}
.nav.is-stuck { background: rgba(20, 27, 35, .92); backdrop-filter: blur(6px); }

/* the wordmark is stacked (RADIANT over HEART), so it is ~40px tall here; the padding keeps the bar its old height */
.nav__brand { flex: none; width: clamp(100px, 9vw, 128px); padding-block: 4px; }

.nav__links { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }

.nav__links a, .nav__support {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  transition: color .3s ease;
}
/* links are short and the type is small; the padding is what makes them tappable */
.nav__links > a { padding-block: 12px; }
/* the support CTA is a filled button, not a text link: it keeps its own colour in
   both states, or its label goes gold-on-gold once it is the current page */
.nav__links a:not(.nav__support):hover { color: var(--gold); }
.nav__links a:not(.nav__support)[aria-current="page"] { color: var(--gold); }

.nav__support {
  display: inline-flex; align-items: center; gap: 12px;
  margin-left: 12px; padding: 12px 20px;
  border: 1px solid rgba(253, 181, 21, .6);
  color: var(--cream);
  transition: background .4s ease, border-color .4s ease;
}
.nav__support:hover, .nav__support:focus-visible { background: rgba(253, 181, 21, .1); border-color: var(--gold); }

.nav__menu {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
/* the box and lines are one image: browser night modes (Brave, Dark Reader) recolor CSS
   backgrounds and borders, which turned the white lines black, but leave images alone */
.nav__menu img { display: block; width: 44px; height: 44px; }

@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__menu { display: grid; }
}

/* ==========================================================================
   OVERLAY MENU
   ========================================================================== */

.menu {
  position: fixed; inset: 0; z-index: 30;
  overflow: hidden;
  background: var(--stone);
  visibility: hidden; opacity: 0;
  transition: opacity .45s ease, visibility .45s;
}
body.menu-open .menu { visibility: visible; opacity: 1; }
body.menu-open { overflow: hidden; }

.menu__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  filter: saturate(.55) brightness(.32) sepia(.16);
}
.menu__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7, 6, 7, .86), rgba(7, 6, 7, .7) 45%, rgba(7, 6, 7, .92));
}

.menu__close {
  position: absolute; z-index: 2;
  top: clamp(16px, 2.4vw, 28px); right: var(--gutter);
  display: grid; place-content: center;
  width: 44px; height: 44px;
  background: none; border: 1px solid rgba(253, 181, 21, .5); cursor: pointer;
  color: var(--cream); font-family: var(--font-label); font-size: 18px; line-height: 1;
  transition: color .3s ease, border-color .3s ease;
}
.menu__close:hover, .menu__close:focus-visible { color: var(--gold); border-color: var(--gold); }

.menu__inner {
  position: relative; height: 100%;
  display: grid; grid-template-rows: 1fr auto;
  overflow-y: auto;
  padding: clamp(80px, 12vh, 130px) clamp(24px, 6vw, 80px) clamp(24px, 4vh, 44px);
}

.menu__nav { display: grid; align-content: center; justify-items: start; gap: clamp(4px, 1.2vh, 12px); }

.menu__link {
  display: flex; align-items: baseline; gap: clamp(14px, 3vw, 28px);
  min-height: 44px; padding: 9px 0;
}
.menu__num {
  color: rgba(253, 181, 21, .55);
  font-family: var(--font-label); font-size: 11px; letter-spacing: .3em;
  transition: color .5s ease;
}
.menu__link:hover .menu__num, .menu__link:focus-visible .menu__num { color: var(--gold); }
.menu__txt {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, min(7vw, 6vh), 60px); line-height: 1.05;
  letter-spacing: .06em; text-transform: uppercase;
  transition: transform .6s var(--ease);
}
.menu__link:hover .menu__txt, .menu__link:focus-visible .menu__txt { transform: translateX(10px); color: var(--gold); }
.menu__link[aria-current="page"] .menu__txt { color: var(--gold); }

.menu__support { margin-top: clamp(18px, 3vh, 30px); }
.menu__support span {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border: 1px solid rgba(253, 181, 21, .6);
  color: var(--cream);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
}

.menu__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 14px clamp(20px, 4vw, 48px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid rgba(176, 168, 156, .2);
  color: var(--muted); font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
}
.menu__foot p { margin: 0; }
.menu__foot a { color: var(--muted); transition: color .3s var(--ease); }
.menu__foot a:hover { color: var(--gold); }
.menu__tagline {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(16px, 2vw, 22px); letter-spacing: .02em; text-transform: none;
  color: var(--cream);
}
.menu__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(16px, 3vw, 32px); }
.menu__links a { padding-block: 11px; }

/* ==========================================================================
   REVEAL — motion.js adds .is-visible via IntersectionObserver
   ========================================================================== */

/* Everything here is visible by default and animates only when motion.js has armed it.
   The old way round — hidden until JS says otherwise — means one missed reveal leaves a
   photo clipped to nothing, permanently. Arming inverts the failure: no JS, stalled JS, a
   missed element or reduced motion all end at "visible", never at "blank". */

[data-reveal] { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].is-armed { opacity: 0; transform: translateY(28px); }

[data-reveal]:nth-child(2) { transition-delay: 80ms; }
[data-reveal]:nth-child(3) { transition-delay: 160ms; }
[data-reveal]:nth-child(4) { transition-delay: 240ms; }
[data-reveal]:nth-child(5) { transition-delay: 320ms; }
[data-reveal]:nth-child(6) { transition-delay: 400ms; }

/* a photo wiping in from the left instead of fading up */
.clip[data-reveal] { transition-property: clip-path; transition-duration: 1.5s; transition-timing-function: var(--ease); }
.clip[data-reveal].is-armed { opacity: 1; transform: none; clip-path: inset(0 99.9% 0 0); }

/* a gold hairline drawing itself across */
/* a border, not a 1px background: zoomed out, a 1px box can round to zero device pixels
   and vanish, while a border always keeps at least one */
.line { height: 0; border-top: 1px solid; border-image: linear-gradient(to right, var(--gold), rgba(253, 181, 21, .25)) 1; }
.line[data-reveal] { transform-origin: left; transition-property: transform; transition-duration: 1.8s; transition-timing-function: var(--ease); }
.line[data-reveal].is-armed { opacity: 1; transform: scaleX(0); }

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.wrap { max-width: var(--wrap); margin-inline: auto; }

.band { padding: clamp(80px, 13vh, 170px) var(--gutter); }
.band--deep { background: var(--deep); }

/* eyebrow / headings */
.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
}

.h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(48px, 8vw, 124px); line-height: .95;
  letter-spacing: .1em; text-transform: uppercase;
}
.h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 3.2vw, 48px); line-height: 1.1;
  letter-spacing: .12em; text-transform: uppercase;
  text-wrap: balance;
}
/* the softer, sentence-case variant the design uses for statements */
.h2--soft {
  font-weight: 400; letter-spacing: normal; text-transform: none;
  font-size: clamp(34px, 3.8vw, 60px);
}
.h3 {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 2vw, 30px); line-height: 1.15;
  letter-spacing: .08em; text-transform: uppercase;
}

.lede {
  margin: clamp(24px, 3vh, 40px) 0 0;
  max-width: 46ch;
  font-size: clamp(17px, 1.3vw, 21px); line-height: 1.7;
  text-wrap: pretty;
}

.prose { display: grid; gap: 22px; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.75; }
.prose p { margin: 0; text-wrap: pretty; }

.note { margin: 8px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }

/* two-column: statement left, prose right */
.two {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(32px, 5vw, 96px); align-items: start;
}

/* ---------- call to action ---------- */

.cta {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap;
  color: var(--cream);
  transition: color .3s ease;
}
.cta__arrow {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(253, 181, 21, .7); border-radius: 50%;
  color: var(--cream);
  transition: transform .5s ease, background .5s ease, color .5s ease;
}
.cta__arrow svg { width: 18px; height: 18px; }
/* the hero's pill, borrowed for the body calls to action. Not applied to .cta wholesale:
   inside a door the link sits on a photograph, where a black pill would fight the image. */
.cta--pill {
  position: relative; isolation: isolate; overflow: hidden;
  /* inside .prose the anchor is a grid child and would stretch the pill across the
     whole column; the others size to content because their parent is not a grid */
  align-self: start; justify-self: start; width: fit-content;
  padding: 14px 26px; gap: 18px;
  background: var(--stone);
  border: 1px solid rgba(253, 181, 21, .5); border-radius: 999px;
  transition: color .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.cta--pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(253, 181, 21, .28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: sheen 4.5s var(--ease) infinite;
}
/* hover lights the edge rather than filling the pill: the pill stays black, the rim
   goes full gold, the label warms to cream */
.cta--pill:hover, .cta--pill:focus-visible {
  color: var(--cream); border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(253, 181, 21, .35), 0 0 24px rgba(253, 181, 21, .22);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .cta--pill::before { animation: none; } }
@media (max-width: 520px) { .cta--pill, .cta--plain { padding-left: 18px; gap: 12px; } }

/* Inside a pill the ring is a frame within a frame. The arrow keeps its travel on
   hover, but loses the circle, its fixed box and the gold fill that only read as a
   button when there was a circle to fill. */
.cta--pill .cta__arrow,
.cta--plain .cta__arrow,
.mailbtn .cta__arrow,
.mhero__statement a .cta__arrow {
  width: auto; height: auto; border: 0; border-radius: 0; background: none;
  transition: transform .5s ease;
}
/* in a door the label is a span, so the hover state has to come from the door itself */
@media (hover: hover) {
  .door:hover .cta--pill {
    color: var(--cream); border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(253, 181, 21, .35), 0 0 24px rgba(253, 181, 21, .22);
  }
  .door:hover .cta--pill .cta__arrow { transform: translateX(6px); }
}
.door:focus-visible .cta--pill {
  color: var(--cream); border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(253, 181, 21, .35), 0 0 24px rgba(253, 181, 21, .22);
}
.door:focus-visible .cta--pill .cta__arrow { transform: translateX(6px); }

.cta--pill:hover .cta__arrow, .cta--pill:focus-visible .cta__arrow,
.cta--plain:hover .cta__arrow, .cta--plain:focus-visible .cta__arrow,
.mailbtn:hover .cta__arrow, .mailbtn:focus-visible .cta__arrow,
.mhero__statement a:hover .cta__arrow, .mhero__statement a:focus-visible .cta__arrow {
  background: none; color: currentColor; border: 0; transform: translateX(6px);
}


.cta:not(.cta--pill):not(.cta--plain):hover, .cta:not(.cta--pill):not(.cta--plain):focus-visible { color: var(--cream); }
.cta:not(.cta--pill):not(.cta--plain):hover .cta__arrow, .cta:not(.cta--pill):not(.cta--plain):focus-visible .cta__arrow { transform: translateX(6px); background: var(--gold); color: var(--night); }

/* ---------- section head: title left, link right ---------- */

.head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(36px, 5vh, 64px);
}
/* every landing section reads head, rule, body: the body sits as far below the rule
   as the head sits above it */
.line + .two, .line + .feature { padding-top: clamp(36px, 5vh, 64px); }
/* each section's action sits under its text, 36px down, on the text's left edge */
.prose > .cta { margin-top: 14px; }
.lede + .cta, .grid + .cta { margin-top: 36px; }
/* the landing's two statement sections on one 12-column grid, so neither is a split
   down the middle and they alternate rather than mirror. Every edge sits on the gutter
   or a column line, every top is flush with the row: no free offsets.
   Ayni: statement wide on the left (8 columns), prose in the last 4, tops flush.
   A Higher Tomorrow: the team photo in the first 4 columns, the statement to its right
   from column 6, the prose under the statement on the same left edge.
   Under 900px both simply stack. */
.two--pull > .h2, .two--photo > .h2 { font-size: clamp(38px, 4.6vw, 72px); }
.two--photo > img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 45%;
  filter: saturate(.7) brightness(.72) sepia(.12);
}
@media (min-width: 900px) {
  .two--pull, .two--photo { grid-template-columns: repeat(12, 1fr); column-gap: clamp(20px, 2.5vw, 40px); row-gap: 0; }
  .two--pull > .h2 { grid-column: 1 / 9; }
  .two--pull > .prose { grid-column: 9 / 13; }
  /* the photo takes the text block's exact height, so its top and bottom are the
     statement's top and the prose's last line */
  .two--photo > img { grid-column: 1 / 5; grid-row: 1 / 3; align-self: stretch; height: 100%; aspect-ratio: auto; }
  .two--photo > .h2 { grid-column: 6 / 13; grid-row: 1; }
  /* the prose closes on the photo's bottom edge, so the text block and the photo share
     top and bottom lines */
  .two--photo > .prose { grid-column: 6 / 12; grid-row: 2; align-self: end; margin-top: clamp(32px, 4vh, 48px); }
}

/* ---------- grids ---------- */

.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding-top: 36px;
}
.grid article { display: grid; gap: 18px; align-content: start; }
.grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.7) brightness(.72) sepia(.12); }
.grid__num { margin: 0; color: var(--gold); font-size: 12px; letter-spacing: .3em; }
.grid p { margin: 0; font-size: 16px; line-height: 1.7; text-wrap: pretty; }

/* hairline-separated tiles (Retreats: what you can host) */
/* the hairlines belong to the tiles, not to the container behind them: with five
   tiles in a four-across grid the container's background used to show through the
   empty cell as a grey slab. Now a leftover cell is simply nothing. */
.tiles {
  display: grid; grid-template-columns: 1fr;
  gap: 0; margin-top: 36px;
}
/* five tiles only ever sit evenly as one row of five or a filled last row, so the
   column count is chosen rather than left to auto-fit, which stranded one tile */
@media (min-width: 1120px) { .tiles { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 680px) and (max-width: 1119px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles > :last-child { grid-column: 1 / -1; }
}
.tile {
  display: grid; gap: 14px; align-content: start;
  padding: clamp(28px, 3vw, 44px);
  background: var(--deep);
  box-shadow: 0 0 0 1px rgba(176, 168, 156, .16);
  transition: background .6s ease;
}
.tile:hover { background: rgba(253, 181, 21, .05); }
.tile .h3 { font-size: clamp(20px, 1.5vw, 26px); text-wrap: balance; }
.tile p { margin: 0; font-size: 15px; line-height: 1.7; text-wrap: pretty; }
.tile__num { color: var(--gold); font-size: 12px; letter-spacing: .3em; }

/* ---------- feature: image pair beside text ---------- */

.feature {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  filter: saturate(.7) brightness(.72) sepia(.12);
}
.pair img:nth-child(2) { margin-top: 48px; }

/* section photos drift very slowly. object-position, not a scale, so nothing
   overflows its box. Carried over from the shipped build. */
@keyframes drift {
  from { object-position: 50% 44%; }
  to   { object-position: 50% 56%; }
}
.pair img, .stage img, .grid img { animation: drift 30s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .pair img, .stage img, .grid img { animation: none; }
}

/* ---------- centred hero (Ayni) ---------- */

.chero {
  position: relative; min-height: 100vh; overflow: hidden;
  display: grid; place-content: center; justify-items: center; text-align: center;
  padding: clamp(120px, 18vh, 180px) var(--gutter) clamp(72px, 12vh, 120px);
  --p: 0;
}
.chero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1 + var(--p) * .1));
  filter: saturate(.68) contrast(1.06) brightness(.5) sepia(.14);
  will-change: transform;
}
.chero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20, 27, 35, .75) 0%, rgba(7, 6, 7, .5) 45%, rgba(7, 6, 7, .9) 100%); }
.chero__inner { position: relative; display: grid; justify-items: center; }
.chero__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 15vw, 220px); line-height: .9;
  letter-spacing: .14em; text-transform: uppercase; text-indent: .14em;
}
.chero__say { margin: clamp(20px, 3vh, 32px) 0 0; max-width: 22ch; font-size: clamp(13px, 1.3vw, 17px); letter-spacing: .3em; text-transform: uppercase; line-height: 1.9; }
.chero__note { margin: clamp(40px, 7vh, 72px) 0 0; color: var(--muted); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) { .chero__img { transform: none; } }

/* the gold rule-diamond-rule ornament */
.dia { display: flex; align-items: center; gap: 18px; color: var(--gold); font-size: 12px; }
.dia::before, .dia::after {
  content: ""; display: block;
  width: clamp(40px, 8vw, 110px); height: 1px; background: rgba(253, 181, 21, .55);
}

/* the quieter second CTA in a pair: a ghost of the pill, no fill and no sheen, same hover */
.cta--plain {
  align-self: start; justify-self: start; width: fit-content;
  padding: 14px 26px; gap: 18px;
  background: transparent;
  border: 1px solid rgba(253, 181, 21, .45); border-radius: 999px;
  color: var(--cream);
  transition: color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.cta--plain:hover, .cta--plain:focus-visible {
  color: var(--cream); border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(253, 181, 21, .35), 0 0 24px rgba(253, 181, 21, .22);
  transform: translateY(-2px);
}
.cta-pair { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); margin-top: 36px; }

/* ---------- alternating stage rows (Full Cycle) ---------- */

.stage {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: center;
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(48px, 8vh, 96px) var(--gutter);
  transition: background .8s ease;
}
.stage:hover { background: rgba(253, 181, 21, .04); }
.stage + .stage { border-top: 1px solid rgba(176, 168, 156, .14); }
.stage img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; filter: saturate(.7) brightness(.72) sepia(.12); }
/* even rows put the photo on the right without reordering the source */
.stage:nth-of-type(even) > :first-child { order: 2; }
.stage__num { margin: 0 0 16px; color: var(--gold); font-size: 12px; letter-spacing: .3em; }
.stage h3 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.1; letter-spacing: .1em; }
.stage p { margin: 22px 0 0; max-width: 46ch; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.75; text-wrap: pretty; }

/* ---------- pull quote ---------- */

.center { text-align: center; }
.center .cta, .center .prose { margin-inline: auto; }
.quote {
  max-width: 24ch; margin: 0 auto;
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(30px, 4.4vw, 64px); line-height: 1.15;
  text-wrap: balance;
}
.quote__cite {
  display: block; margin-top: clamp(20px, 3vw, 34px);
  color: var(--gold); font-family: var(--font-label); font-style: normal;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
}

/* ---------- closing band: statement left, CTA right ---------- */

/* centred, like the closing panels on the other pages */
.close { max-width: var(--wrap); margin-inline: auto; text-align: center; }
.close .cta-pair { justify-content: center; }
.close p { margin: 22px auto 0; max-width: 46ch; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.75; text-wrap: pretty; }

/* ---------- full-bleed image band with a centred statement ---------- */

.cover { position: relative; overflow: hidden; padding: clamp(90px, 16vh, 190px) var(--gutter); }
.cover__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  filter: saturate(.6) brightness(.4) sepia(.14);
}
.cover__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20, 27, 35, .5), rgba(7, 6, 7, .82)); }
.cover__inner { position: relative; max-width: 900px; margin-inline: auto; text-align: center; }
.cover__quote {
  margin: 0;
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(32px, 4.6vw, 66px); line-height: 1.12;
  text-wrap: balance;
}
.cover__inner p + p { margin: 26px auto 0; max-width: 52ch; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.75; text-wrap: pretty; }
.cover .cta { margin-top: 36px; }

/* ==========================================================================
   HOMEPAGE HERO — a tall section holding a sticky stage; --p is scroll
   progress through it, set by motion.js ([data-pin]).
   ========================================================================== */

/* the scroll-pinned version is parked at git tag parked-scroll-hero; this is one still screen */
.mhero { position: relative; height: 100vh; height: 100svh; --p: 0; }
/* black first: the fade has to come up from something, and a stray page colour behind
   a transparent video would show as a flash of the wrong tone. */
.mhero__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.mhero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  filter: saturate(.8) contrast(1.05) brightness(.98) sepia(.08);
  transition: opacity 1.6s var(--ease);
}
/* The lockup used to settle while the valley was still arriving, so the one piece of
   motion the brand owns happened against a half-painted frame. The film now waits: mark,
   wordmark, tagline, place, field — then the valley fades up behind them. Guarded on .js
   so that without the script the video is simply visible, as before. */
.js .mhero:not(.is-lit) .mhero__img { opacity: 0; }
.mhero__grade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(20, 27, 35, .85) 0%, rgba(20, 27, 35, .35) 30%, rgba(20, 27, 35, .1) 55%, rgba(7, 6, 7, .6) 100%);
}
.mhero__dim { position: absolute; inset: 0; background: rgba(7, 6, 7, .78); opacity: calc(var(--p) * 1.45); }

.mhero__lockup {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  text-align: center; padding-inline: 24px;
  /* holds for the first 5% of the pin, then leaves slowly: gone at 55% */
  opacity: calc((.55 - var(--p)) * 2);
  transform: translateY(calc(var(--p) * -120px));
}
.mhero__lockup .logomark { width: 100%; }
.mhero__lockup .wordmark { width: 100%; margin-top: 0; }

/* filter runs BEFORE mask, so a drop-shadow set on a masked element is computed
   from its un-masked box and then clipped away by the mask itself. The shadow has
   to live on a wrapper, where the child arrives already masked. */
.halo {
  display: block;
  filter:
    drop-shadow(0 0 1px rgba(7, 6, 7, 1))
    drop-shadow(0 0 4px rgba(245, 235, 216, .35))
    drop-shadow(0 0 14px rgba(7, 6, 7, .9)) drop-shadow(0 0 38px rgba(7, 6, 7, .8))
    drop-shadow(0 0 80px rgba(7, 6, 7, .6));
}
/* The lockup's proportions come from the design handoff: a 140 mark over a 307-wide wordmark
   (45.6%), gap 22 (7%). One ratio, used wherever the lockup appears. */
.halo--mark { width: calc(var(--lock-w, min(62vw, 440px)) * .456); }
.halo--word { width: var(--lock-w, min(62vw, 440px)); margin: clamp(14px, 2.2vw, 30px) 0 0; }

.mhero__place { text-shadow: 0 0 4px rgba(7, 6, 7, .8), 0 0 12px rgba(7, 6, 7, .45); }
.mhero__tagline {
  color: #FFD98A;
  text-shadow: 0 0 5px rgba(7, 6, 7, 1), 0 0 14px rgba(7, 6, 7, .95), 0 0 38px rgba(7, 6, 7, .85);
}
/* the statement quote sits over the same footage once the hero resolves */
.mhero__statement p:first-child {
  paint-order: stroke fill;
  -webkit-text-stroke: 1px rgba(7, 6, 7, .95);
  text-shadow: 0 0 8px rgba(7, 6, 7, 1), 0 0 26px rgba(7, 6, 7, .9), 0 0 64px rgba(7, 6, 7, .75);
}
/* the loop passes through near-white frames; a soft radial pool keeps the lockup
   legible on those without reading as a box */
.mhero__lockup::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 46% at 50% 46%, rgba(7, 6, 7, .62) 0%, rgba(7, 6, 7, .38) 45%, rgba(7, 6, 7, 0) 78%);
  pointer-events: none;
}
.mhero__lockup { isolation: isolate; }

/* a gold ring drawing itself around the lockup as you scroll — conic sweep, masked to a hairline.
   --ring-p runs 0..1 over the first quarter of the pin, so it closes while the lockup is still lit. */
.mhero__lockup::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: calc(var(--ring-r) * 2); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-90deg);
  border-radius: 50%;
  --ring-p: clamp(0, var(--p) * 4, 1);
  background: conic-gradient(var(--gold) calc(var(--ring-p) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  filter: drop-shadow(0 0 6px rgba(253, 181, 21, .45));
  pointer-events: none;
}
.mhero__tagline {
  margin: clamp(16px, 2vw, 26px) 0 0;
  color: var(--gold); font-size: clamp(11px, 1vw, 14px); letter-spacing: .34em; text-transform: uppercase;
}
.mhero__place {
  margin: clamp(18px, 3vh, 30px) 0 0;
  color: var(--cream); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
}

/* the gold seam, in four beats driven by --p:
   1. 0–.25   the ring closes; no line yet.
   2. .25–.75 the line leaves the ring's two poles — the top of the sun, the foot of
              the wordmark — and runs outward to the edges.
   3. .30–.55 as the lockup fades, the line closes in from each pole to a small gap
              at the centre, where one plain sentence says what WAKAN is (.50–.76).
   4. .74–.82 the gap widens for the quote: the line yields to words, then runs on
              behind the Ayni pill into the doors.
   --ring-r is the ring's radius; --ring-y its centre, which drifts up with the lockup
   while the quote stays put — hence the two inner lengths. */
.mhero {
  /* the stacked lockup is tall, and the email field waits at 78% of the stage: the height
     term keeps mark + wordmark + the two lines under it clear of the field on short screens */
  --lock-w: min(62vw, 440px, 66vh - 142px);
  --ring-r: min(44vmin, 360px);
  --drift: calc(var(--p) * 120px);
  --ring-y: calc(50% - var(--drift));
  --quote-gap: clamp(110px, 10vw, 150px);   /* half the quote block: two lines plus the pill */
  --line-gap: clamp(56px, 5vw, 80px);        /* half the interlude line, with air */
  --close: clamp(0, (var(--p) - .3) * 4, 1);
  --part: clamp(0, (var(--p) - .74) * 12, 1);
  --gap: calc(var(--line-gap) + (var(--quote-gap) - var(--line-gap)) * var(--part));
  --seam-out: calc(clamp(0, (var(--p) - .25) * 2, 1) * 60vh);
  /* the line closes from each pole to the edge of the gap, never through it: the gap
     holds the interlude, then widens to hold the quote. Both sit at 50%, so the
     lockup's drift is taken out of each length. */
  --seam-in-up: calc((var(--ring-r) - var(--gap) + var(--drift)) * var(--close));
  --seam-in-dn: calc((var(--ring-r) - var(--gap) - var(--drift)) * var(--close));
}
.mhero__seam, .mhero__seam--up {
  position: absolute; left: 50%; width: 1px;
  box-shadow: 0 0 14px rgba(253, 181, 21, .35);
  /* a zero-height element still paints its box-shadow; fade in as the line begins */
  opacity: clamp(0, (var(--p) - .25) * 40, 1);
}
.mhero__seam {
  top: calc(var(--ring-y) + var(--ring-r) - var(--seam-in-dn));
  height: calc(var(--seam-in-dn) + var(--seam-out));
  transform: translateX(-.5px);
  background: linear-gradient(to bottom, rgba(253, 181, 21, 0), var(--gold) 8%, var(--gold) 70%, rgba(253, 181, 21, 0));
}
.mhero__seam--up {
  top: calc(var(--ring-y) - var(--ring-r) + var(--seam-in-up));
  height: calc(var(--seam-in-up) + var(--seam-out));
  transform: translate(-.5px, -100%);
  background: linear-gradient(to top, rgba(253, 181, 21, 0), var(--gold) 8%, var(--gold) 70%, rgba(253, 181, 21, 0));
}

/* one plain sentence between the mark and the proverb: in as the lockup leaves, out before the quote */
.mhero__interlude {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin: 0; padding-inline: 24px; width: max-content; max-width: 90vw; text-align: center;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.4vw, 36px); line-height: 1.25; color: var(--cream);
  text-shadow: 0 0 8px rgba(7, 6, 7, 1), 0 0 26px rgba(7, 6, 7, .9);
  opacity: min(clamp(0, (var(--p) - .5) * 12, 1), clamp(0, (.76 - var(--p)) * 12, 1));
  pointer-events: none;
}
.mhero__statement {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center; padding-inline: 24px;
  /* after the interlude has gone, in fast, 76% to 88%, so the gap is never empty */
  opacity: calc((var(--p) - .76) * 8);
  transform: translateY(calc((1 - var(--p)) * 40px));
}
.mhero__statement p:first-child {
  margin: 0;
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(28px, 3.6vw, 58px); line-height: 1.12; letter-spacing: -.01em;
  text-shadow: 0 2px 40px rgba(7, 6, 7, .6);
}
.mhero__statement p + p { margin: clamp(22px, 3vw, 36px) 0 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
/* the statement sits over the lockup, so it only takes clicks once it has faded in */
.mhero__statement { pointer-events: none; }
/* a button, not a rule: an opaque pill so the seam passes behind it, never through the type */
.mhero__statement a {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 18px; padding: 14px 26px;
  color: var(--cream); text-decoration: none;
  background: var(--stone);
  border: 1px solid rgba(253, 181, 21, .5); border-radius: 999px;
  box-shadow: 0 0 0 rgba(253, 181, 21, 0);
  transition: color .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
/* the sheen: a narrow gold light crossing the pill every few seconds, and on hover */
.mhero__statement a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(253, 181, 21, .28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: sheen 4.5s var(--ease) infinite;
}
/* 4.5s round: ~1.8s of rest, then ~2.7s to cross — sooner than before, and slower across */
@keyframes sheen { 0%, 40% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.mhero__statement a:hover, .mhero__statement a:focus-visible {
  color: var(--cream); border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(253, 181, 21, .35), 0 0 24px rgba(253, 181, 21, .22);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .mhero__statement a::before { animation: none; }
}
.mhero.is-statement .mhero__statement a { pointer-events: auto; }

.mhero__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(253, 181, 21, .18); }
.mhero__bar i { display: block; height: 100%; transform: scaleX(var(--p)); transform-origin: left; background: var(--gold); }

.mhero__scroll {
  position: absolute; left: var(--gutter); bottom: 28px; margin: 0;
  display: flex; align-items: center; gap: 10px;
  color: var(--cream); font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  /* the valley is bright at the bottom of the frame; the halo keeps the word on it */
  text-shadow: 0 0 6px rgba(7, 6, 7, .9), 0 0 18px rgba(7, 6, 7, .7);
  /* stays the whole pin, so the statement never reads as the end; the stage carries it away */
}
.mhero__scroll svg {
  width: 18px; height: 18px; color: var(--gold);
  filter: drop-shadow(0 0 4px rgba(7, 6, 7, .9));
  animation: nudge 2s var(--ease) infinite;
}
@keyframes nudge { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }

/* the scroll cue's mirror: same voice, right side, opens the service film */
.mhero__watch {
  position: absolute; right: var(--gutter); bottom: 20px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--gold); border: 0; border-radius: 0; cursor: pointer;
  color: var(--night); font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  transition: background .3s ease;
}
.mhero__watch svg { width: 16px; height: 16px; }
.mhero__watch:hover, .mhero__watch:focus-visible { background: #FFC94D; }

.filmbox {
  width: min(94vw, 1200px); max-height: 90vh; padding: 0;
  background: #000; border: 1px solid rgba(253, 181, 21, .45); overflow: visible;
}
.filmbox::backdrop { background: rgba(7, 6, 7, .88); }
.filmbox video { display: block; width: 100%; max-height: 90vh; }
.filmbox__close {
  position: absolute; top: -52px; right: 0;
  display: grid; place-content: center; width: 44px; height: 44px;
  background: rgba(7, 6, 7, .6); border: 1px solid rgba(253, 181, 21, .5); cursor: pointer;
  color: var(--cream); font-size: 18px; line-height: 1;
}
.filmbox__close:hover, .filmbox__close:focus-visible { color: var(--gold); border-color: var(--gold); }

/* no scroll-driven motion: two ordinary stacked screens, everything visible */
@media (prefers-reduced-motion: reduce) {
  .mhero { height: auto; }
  .mhero__stage { position: relative; height: auto; }
  .mhero__lockup, .mhero__statement {
    position: relative; inset: auto;
    min-height: 100vh; opacity: 1; transform: none;
  }
  .mhero__img { position: absolute; }
  .mhero__stage video.mhero__img { display: none; }
  .mhero__stage { background: url("assets/home-hero-poster.jpg") 50% 40% / cover no-repeat; }
  .mhero__seam, .mhero__seam--up, .mhero__bar, .mhero__scroll, .mhero__dim, .mhero__interlude { display: none; }
  .mhero__lockup::after { --ring-p: 1; }
  /* stage is two screens tall here: pin the ask to the first, under the lockup */
  .herojoin { top: 78vh; }
}

/* ==========================================================================
   TWO DOORS — the split that follows the homepage hero. The widening on hover
   is :has(), so it needs no JS; without :has() the doors simply stay even.
   ========================================================================== */

/* ==========================================================================
   EMAIL SIGN-UP — one quiet line inside the hero lockup: a rule, a placeholder
   and an arrow. No panel, no fill.
   ========================================================================== */

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

/* the ask is its own layer in the stage, not part of the lockup: it rides down the
   screen as you scroll and parks under the Ayni line instead of fading with the logo */
.herojoin {
  position: absolute; left: 50%; z-index: 3;
  /* two parking spots, no sliding: under the lockup at rest, under the Ayni pill for the
     statement. The move happens while the field is hidden (it holds to 8%, gone by 16%). */
  top: calc(78% + clamp(0, (var(--p) - .3) * 100, 1) * 10%);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  width: min(92vw, 440px);
  padding: 4px 4px 4px 22px;
  /* a field, not a caption: an opaque black pill with a gold rim, same family as the CTAs */
  background: rgba(7, 6, 7, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(253, 181, 21, .45); border-radius: 999px;
  box-shadow: 0 8px 30px rgba(7, 6, 7, .45);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.herojoin:focus-within { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(253, 181, 21, .35), 0 0 24px rgba(253, 181, 21, .22); }
.herojoin__fld {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 2px; border: 0; background: transparent;
  color: var(--cream); font-family: var(--font-label);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.herojoin__fld::placeholder { color: rgba(245, 235, 216, .55); }
.herojoin__fld:focus { outline: none; }
.herojoin__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px 0 18px;
  background: transparent; border: 0; border-left: 1px solid rgba(253, 181, 21, .35); border-radius: 0;
  color: var(--cream); font-family: var(--font-label);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; outline: none;
  transition: color .4s var(--ease);
}
.herojoin__btn svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.herojoin__btn:hover, .herojoin__btn:focus-visible { color: #FFD98A; }
.herojoin__btn:hover svg, .herojoin__btn:focus-visible svg { transform: translateX(6px); }
@media (max-width: 420px) { .herojoin__btn span { display: none; } .herojoin__btn { padding: 0 12px; } }

.doors {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--deep);
  min-height: min(100vh, 900px);
  border-top: 1px solid var(--gold);   /* the gold line between the hero and the two paths */
  transition: grid-template-columns 1.1s var(--ease);
}
@media (hover: hover) {
  .doors:has(.door:first-of-type:hover) { grid-template-columns: 1.5fr 1fr; }
  .doors:has(.door:last-of-type:hover)  { grid-template-columns: 1fr 1.5fr; }
}

.door {
  position: relative; overflow: hidden; contain: layout paint;
  display: grid; align-content: end; justify-items: start;
  min-height: min(100vh, 900px);
  padding: clamp(40px, 6vw, 96px) var(--gutter);
}
/* the dimming of the door you are not pointing at */
.door::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(7, 6, 7, .55); opacity: 0;
  transition: opacity 1s ease;
}
@media (hover: hover) {
  .doors:has(.door:first-of-type:hover) .door:last-of-type::after,
  .doors:has(.door:last-of-type:hover)  .door:first-of-type::after { opacity: 1; }
}

/* The panel widths animate, so a width:100% image would be re-rasterised every frame as
   its box changes. Pinning it to the widest state (60vw) instead means the bitmap never
   resizes: the panel just reveals or clips more of it, which the compositor does free. */
.door img {
  position: absolute; top: 0; left: 0;
  /* max-width: none is load-bearing: the global `img { max-width: 100% }` clamps this
     back to the panel's width, which is the very thing we are pinning it against. */
  width: 60vw; max-width: none; height: 100%; object-fit: cover; object-position: 50% 60%;
  filter: saturate(.95) brightness(1.02);
  transition: transform 1.4s var(--ease);
}
.door--right img { left: auto; right: 0; }
@media (hover: hover) { .door:hover img { transform: scale(1.05); } }
/* Group and When only mean something for a retreat enquiry. Someone writing about
   giving should not be asked their party size. :has() is already load-bearing in the
   doors above, so this costs nothing new. */
.form:not(:has(#t-retreat:checked)) .form__row--retreat { display: none; }

.door__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 6, 7, .82) 0%, rgba(7, 6, 7, .34) 48%, rgba(20, 27, 35, .06) 100%);
}
/* The photographs arrive as dark as the hero leaves off (its dim tops out at .78), come up
   slowly, keep a veil at rest, and clear on hover. An overlay's opacity rather than a
   filter on the image, so the pinned bitmap above is never repainted. */
.door__shade::before {
  content: ''; position: absolute; inset: 0; background: var(--stone);
  opacity: .3; transition: opacity 2.8s var(--ease);
}
.door__shade[data-reveal].is-armed { opacity: 1; transform: none; }
.door__shade.is-armed::before { opacity: .78; transition: none; }
@media (hover: hover) {
  .door:hover .door__shade::before { opacity: 0; transition-duration: .9s; }
}
/* Width in vw, not a share of the panel: the panels animate their width, and a text box
   that tracked them would re-wrap (with text-wrap: pretty, the slow algorithm) and repaint
   its stroke and three-layer shadow on every frame. Pinned, the copy just sits there. */
.door__text { position: relative; width: min(46ch, calc(40vw - 2 * var(--gutter))); }
.door__text .h2 { font-size: clamp(40px, 4.6vw, 72px); line-height: 1; }
.door__text p { margin: 24px 0 32px; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; max-width: 38ch; text-wrap: pretty; }
/* the photographs are brighter now, so every piece of door copy carries a dark
   halo of its own rather than depending on the shade beneath it */
/* words over a photograph: a solid black outline drawn behind the glyph, then a
   glow spreading out from it. paint-order keeps the stroke from eating the letterform. */
.door__text .h2, .door__text p, .door__text .eyebrow {
  paint-order: stroke fill;
  -webkit-text-stroke: 2px rgba(7, 6, 7, .92);
  text-shadow: 0 0 12px rgba(7, 6, 7, .95), 0 0 34px rgba(7, 6, 7, .8), 0 0 70px rgba(7, 6, 7, .5);
}
/* the small type would be swallowed by a 2px stroke */
.door__text p { -webkit-text-stroke-width: 2px; }
/* gold at 12px over a sunlit photograph has no contrast, and a stroke that size
   closes the letterform. Lighter gold, no stroke, dark glow — same as the hero tagline. */
.door__text .eyebrow {
  color: #FFD98A;
  -webkit-text-stroke: 0;
  text-shadow: 0 0 5px rgba(7, 6, 7, 1), 0 0 16px rgba(7, 6, 7, .95), 0 0 40px rgba(7, 6, 7, .85);
}

/* the doors use the editorial button — type plus a ringed arrow — not a filled
   pill. Filled gold is reserved for the one primary action on a view. */
.door .cta { color: var(--cream); }
.door .cta__arrow { border-color: rgba(245, 235, 216, .75); color: var(--cream); }
.door .cta:not(.cta--pill) span:first-child {
  paint-order: stroke fill;
  -webkit-text-stroke: 2px rgba(7, 6, 7, .9);
  text-shadow: 0 0 10px rgba(7, 6, 7, .95), 0 0 30px rgba(7, 6, 7, .75);
}
.door .cta:not(.cta--pill) .cta__arrow { box-shadow: 0 0 14px rgba(7, 6, 7, .65); backdrop-filter: blur(2px); }
.door:hover .cta:not(.cta--pill), .door:focus-visible .cta:not(.cta--pill) { color: var(--gold); }
.door:hover .cta:not(.cta--pill) .cta__arrow, .door:focus-visible .cta:not(.cta--pill) .cta__arrow { transform: translateX(6px); border-color: var(--gold); color: var(--gold); background: rgba(7, 6, 7, .35); }

.door--right { justify-items: end; text-align: right; }
.door--right img { object-position: 50% 55%; }

/* pinned to the second column's left edge (an absolutely positioned grid child takes its
   grid area as containing block), so it rides the boundary exactly as the columns animate */
.doors__seam {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  grid-column: 2; grid-row: 1; margin-left: -.5px;
  background: linear-gradient(to bottom, rgba(253, 181, 21, .2), var(--gold) 20%, var(--gold) 80%, rgba(253, 181, 21, .2));
  box-shadow: 0 0 16px rgba(253, 181, 21, .35);
  pointer-events: none;
}

.doors__hint {
  position: absolute; left: 50%; top: clamp(32px, 5vh, 56px); transform: translateX(-50%);
  margin: 0; color: var(--cream);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  pointer-events: none; white-space: nowrap;
  text-shadow:
    0 0 4px rgba(7, 6, 7, 1), 0 0 10px rgba(7, 6, 7, 1), 0 0 22px rgba(7, 6, 7, .95),
    0 0 14px rgba(255, 255, 255, .55), 0 0 34px rgba(255, 255, 255, .4), 0 0 70px rgba(255, 255, 255, .25);
}

@media (max-width: 720px) {
  .doors, .doors:has(.door:hover) { grid-template-columns: 1fr; }
  .door { min-height: 80vh; }
  .door img, .door--right img { width: 100%; left: 0; right: auto; }
  .door__text { width: auto; max-width: 46ch; }
  .door--right { justify-items: start; text-align: left; }
  /* at phone size the 2px outline smears the letterforms; the glow alone carries it */
  .door__text .h2, .door__text p { -webkit-text-stroke: 0; }
  .door__text .h2 { font-size: 34px; letter-spacing: .08em; }
  .door__text p { font-size: 16px; line-height: 1.6; margin: 18px 0 26px; }
  .doors__seam, .doors__hint { display: none; }
  .doors:has(.door:hover) .door::after { opacity: 0; }
}

/* ==========================================================================
   VIDEO HERO — kept from the shipped build. A tall section holds a sticky
   100vh stage; scroll progress scrubs the clip while the copy stays pinned.
   ========================================================================== */

.vhero { position: relative; height: 320vh; }
.vhero__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--night); }
.vhero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.8) contrast(1.08) brightness(.8) sepia(.12);
}
.vhero__grade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(20, 27, 35, .50) 0%, rgba(7, 6, 7, .15) 45%, rgba(7, 6, 7, .55) 80%, rgba(7, 6, 7, .85) 100%);
}
.vhero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 14% 88%, rgba(20, 27, 35, .55) 0%, rgba(20, 27, 35, 0) 72%);
}
.vhero__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(253, 181, 21, .18); }
.vhero__bar i { display: block; height: 100%; width: 0; background: var(--gold); }

.vhero__eyebrow {
  position: absolute; z-index: 2;
  top: clamp(70px, 13vh, 150px); left: var(--gutter);
  margin: 0; color: var(--muted);
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
}

.vhero__mark {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2.2vw, 28px);
  margin: 0; padding-inline: var(--gutter);
  text-align: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 3.2vw, 44px); line-height: 1.1;
  letter-spacing: .32em; text-transform: uppercase;
  transition: opacity .6s ease, transform .6s ease;
}
.vhero__line { display: inline-block; padding-left: .32em; }
.vhero__sp { display: inline-block; width: .6em; }
.vhero__lockup { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.6vw, 22px); transition: opacity .7s ease, transform .7s ease; }
/* the sun sits above the words now, so it is its own element — it still arrives
   with the lockup, tied to that state rather than given a second timer */
.vhero__sun { width: calc(min(50vw, 400px) * .456); }
.js .vhero:not(.is-static) .vhero__sun { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .vhero:not(.is-static):has(.vhero__lockup.on) .vhero__sun { opacity: 1; transform: none; }
.wordmark--vh { width: min(50vw, 400px); }
.vhero__ch { display: inline-block; transition: opacity .25s ease, transform .25s ease; }

.vstage {
  position: absolute; z-index: 2;
  left: var(--gutter); bottom: clamp(30px, 8vh, 90px);
  margin: 0; max-width: 40ch;
  transition: opacity .3s ease, transform .3s ease;
}
.vstage__label { margin: 0 0 clamp(10px, 1.2vw, 16px); color: var(--gold); font-size: clamp(11px, .8vw, 12px); letter-spacing: .34em; text-transform: uppercase; }
.vstage__line { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25; }
.vhero__cta { margin: clamp(22px, 3vw, 36px) 0 0; transition: opacity .5s ease; }

.js .vhero:not(.is-static) .vhero__ch { opacity: 0; transform: translateY(10px); }
.js .vhero:not(.is-static) .vhero__ch.on { opacity: 1; transform: none; }
.js .vhero:not(.is-static) .vhero__lockup { opacity: 0; transform: translateY(14px); }
.js .vhero:not(.is-static) .vhero__lockup.on { opacity: 1; transform: none; }
.js .vhero:not(.is-static) .vstage { opacity: 0; transform: translateY(12px); pointer-events: none; }
.js .vhero:not(.is-static) .vstage.out { transform: translateY(-12px); }
.js .vhero:not(.is-static) .vstage.on {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .5s ease, transform .5s ease;
}
.js .vhero:not(.is-static) .vhero__cta { opacity: 0; pointer-events: none; }
.js .vhero:not(.is-static).is-end .vhero__cta { opacity: 1; pointer-events: auto; }

/* Full Cycle quote block over the sweeping clip — reuses the vhero language.
   Poster doubles as the fallback: video 404 or reduced motion still shows the still. */
.band--video {
  position: relative; overflow: hidden;
  background: var(--night) url("assets/full-cycle-sweep-poster.jpg") center/cover no-repeat;
}
.band--video > :not(video):not(.vhero__grade) { position: relative; z-index: 1; }
.band--video .vhero__video { filter: saturate(.8) contrast(1.06) sepia(.12); }
.band--video .vhero__grade {
  background: linear-gradient(to bottom, rgba(7, 6, 7, .42) 0%, rgba(7, 6, 7, .28) 50%, rgba(7, 6, 7, .48) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .band--video .vhero__video { display: none; }
}

@media (max-width: 860px) {
  .vhero { height: 240vh; }
  .vhero__stage { height: 100svh; }
  .vhero__mark { font-size: clamp(18px, 5vw, 26px); }
  .wordmark--vh { width: min(60vw, 280px); }
  .vhero__sun { width: calc(min(60vw, 280px) * .456); }
  .vhero__line { display: block; }
  .vstage { left: 20px; right: 20px; bottom: clamp(24px, 6vh, 60px); }
  .vhero__eyebrow { left: 20px; }
}

/* no motion, or no video: static poster, no scroll length, copy unchanged */
.vhero.is-static { height: auto; }
.vhero.is-static .vhero__stage { position: relative; height: auto; min-height: clamp(520px, 86vh, 820px); }
.vhero.is-static .vhero__bar { display: none; }
.vhero.is-static .vstage:not(:last-of-type) { display: none; }

/* ==========================================================================
   INNER-PAGE HERO — still image, parallax on --p ([data-pin])
   ========================================================================== */

.phero {
  position: relative; height: 88vh; min-height: 520px; overflow: hidden;
  display: grid; align-content: end;
  padding: clamp(40px, 8vh, 96px) var(--gutter);
  --p: 0;
}
.phero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(calc(1 + var(--p) * .1)) translateY(calc(var(--p) * 40px));
  filter: saturate(.7) contrast(1.06) brightness(.6) sepia(.12);
  will-change: transform;
}
.phero__grade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 6, 7, .92) 0%, rgba(7, 6, 7, .4) 50%, rgba(20, 27, 35, .7) 100%);
}
.phero__text { position: relative; width: 100%; max-width: var(--wrap); margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .phero__img { transform: none; }
}

/* ---------- hero that holds a film ----------
   A silent ambient loop sits in the hero; pressing play swaps in the full film with sound,
   letterboxed and with native controls, and takes the page furniture out of the way. */

.phero__grade, .phero__text { transition: opacity .5s ease; }

.phero__loop { z-index: 0; }
.phero__film { z-index: 1; object-fit: contain; background: #000; }
.phero--film.is-playing .phero__img { transform: none; }
.phero--film.is-playing .phero__grade,
.phero--film.is-playing .phero__text { opacity: 0; pointer-events: none; }

/* The one control on the page that has to read as a button, over moving footage —
   so it is solid gold with dark text, not the site's usual gold-on-dark hairline. */
.playbtn {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 14px 28px 14px 14px;
  background: var(--gold); border: 0; border-radius: 999px; cursor: pointer;
  color: var(--night);
  font-family: var(--font-label); font-weight: 400;
  font-size: clamp(12px, 1.05vw, 14px); letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 30px rgba(7, 6, 7, .45);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.playbtn .cta__arrow {
  width: 38px; height: 38px;
  background: var(--night); border-color: var(--night); color: var(--gold);
  transition: none;
}
.playbtn .cta__arrow svg { width: 20px; height: 20px; margin-left: 2px; }
.playbtn:hover, .playbtn:focus-visible { background: #FFC94D; transform: translateY(-1px); box-shadow: 0 10px 34px rgba(7, 6, 7, .55); }
.playbtn:hover .cta__arrow, .playbtn:focus-visible .cta__arrow { transform: none; background: var(--night); color: var(--gold); }

.filmclose {
  position: absolute; z-index: 3;
  top: clamp(70px, 11vh, 120px); right: var(--gutter);
  display: none; place-content: center;
  width: 44px; height: 44px;
  background: rgba(7, 6, 7, .6); border: 1px solid rgba(253, 181, 21, .5); cursor: pointer;
  color: var(--cream); font-family: var(--font-label); font-size: 18px; line-height: 1;
  transition: color .3s ease, border-color .3s ease;
}
.filmclose:hover, .filmclose:focus-visible { color: var(--gold); border-color: var(--gold); }
.phero--film.is-playing .filmclose { display: grid; }

/* ==========================================================================
   HERO OVERTURE — the order the landing introduces itself in.

   Black, then the mark and wordmark alone, slightly oversized. When the film is
   actually ready they settle back to true size AS the valley fades up behind them,
   so the one piece of motion the brand owns happens against a finished frame rather
   than a half-loaded one. Then tagline, then place, then the field.

   Everything here is opacity and transform only — no layout animates, so none of it
   can fight the scroll-driven pin. Guarded on .js: without the script the hero is
   simply present, and guarded on no-preference: reduced motion gets it all at once.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .mhero .halo { transition: opacity 1.4s var(--ease), transform 1.9s var(--ease); }
  /* Two timelines, deliberately independent.

     The COPY runs on its own clock and never waits for a file: the mark appears, then it
     settles as the rest cascade. On a slow connection you can read the page while the
     valley is still arriving, instead of watching black.

     The VIDEO is the only thing gated on readiness — and on canplaythrough rather than
     "some data exists", because fading in a video that then stalls is what read as glitchy. */
  .js .mhero:not(.is-marked) .halo { opacity: 0; }
  .js .mhero:not(.is-told) .halo { transform: scale(1.06); }
  @media (max-height: 560px) { .js .mhero:not(.is-told) .halo { transform: scale(1.04); } }
  .js .mhero.is-told .halo { transform: scale(1); }

  .js .mhero .mhero__tagline,
  .js .mhero .mhero__place { transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .mhero:not(.is-told) .mhero__tagline,
  .js .mhero:not(.is-told) .mhero__place { opacity: 0; transform: translateY(9px); }
  .js .mhero.is-told .mhero__tagline { transition-delay: .05s; }
  .js .mhero.is-told .mhero__place { transition-delay: .12s; }

  /* the field keeps its translateX(-50%), so only the Y and the opacity move */
  .js .mhero .herojoin {
    animation: none; opacity: 1;
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  .js .mhero:not(.is-told) .herojoin { opacity: 0; transform: translate(-50%, 14px); }
  .js .mhero.is-told .herojoin {
    transform: translate(-50%, 0); transition-delay: .2s;
    /* out of the ring's way: visible at rest, holds to 8%, gone by 16% while the ring draws,
       back once the lockup has faded */
    opacity: max(clamp(0, 1 - (var(--p) - .08) * 12, 1), clamp(0, (var(--p) - .76) * 8, 1));
  }
}

/* the load-in: hero copy settles once, no scroll needed. Armed the same way as the
   reveals — visible unless motion.js is there to play it in. */
.ld { transition: opacity 1.6s var(--ease), transform 1.6s var(--ease); }
.ld.is-armed { opacity: 0; transform: translateY(14px); }
.herojoin { opacity: 0; animation: joinin .8s var(--ease) 1.15s forwards; }
@keyframes joinin {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .herojoin { opacity: 1; animation: none; } }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ==========================================================================
   CONTACT — hero holding the form card
   ========================================================================== */

.chero--contact { align-content: center; justify-items: stretch; text-align: left; padding-bottom: clamp(64px, 10vh, 110px); }
.chero--contact .chero__img { filter: saturate(.68) contrast(1.05) brightness(.42) sepia(.13); transform: scale(calc(1 + var(--p) * .08)); }
@media (prefers-reduced-motion: reduce) { .chero--contact .chero__img { transform: none; } }
.chero--contact .chero__shade { background: linear-gradient(to bottom, rgba(20, 27, 35, .8) 0%, rgba(7, 6, 7, .7) 55%, rgba(7, 6, 7, .92) 100%); }

.contact {
  position: relative; width: 100%; max-width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(40px, 6vw, 90px); align-items: start;
}
.contact__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 4.6vw, 78px); line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
/* The address used to sit in the metadata block, set like the coordinates beneath it,
   so it read as information rather than an invitation. Outlined rather than solid gold:
   the form's Send stays the primary action, this is the way around it. */
.mailbtn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(28px, 4.5vh, 44px); padding: 12px 12px 12px 22px;
  width: min(100%, 420px);
  border: 1px solid rgba(253, 181, 21, .55); border-radius: 999px;
  color: var(--cream); text-decoration: none;
  font-family: var(--font-label); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  transition: border-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.mailbtn:hover, .mailbtn:focus-visible {
  color: var(--cream); border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(253, 181, 21, .35), 0 0 24px rgba(253, 181, 21, .22);
  transform: translateY(-2px);
}
.mailbtn .cta__arrow { color: currentColor; flex: none; }
.mailbtn:hover .cta__arrow, .mailbtn:focus-visible .cta__arrow { transform: translateX(6px); }
.mailbtn__aside {
  margin: 12px 0 0; max-width: 42ch;
  color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: none;
}
@media (max-width: 520px) {
  .mailbtn { width: 100%; font-size: 11px; letter-spacing: .12em; padding-left: 16px; }
}

.contact__lines a { padding-block: 11px; }
.contact__lines { display: grid; gap: 2px; margin-top: clamp(32px, 5vh, 52px); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; }
.contact__lines p { margin: 0; color: var(--muted); }

.form {
  min-width: 0;
  background: rgba(7, 6, 7, .62);
  border: 1px solid rgba(253, 181, 21, .4);
  padding: clamp(26px, 3.2vw, 44px);
  display: grid; gap: 22px;
}
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 18px; }

.lbl, .field label { display: block; margin: 0 0 10px; color: var(--muted); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; }

.field input, .field textarea, .fld {
  width: 100%; padding: 15px 16px;
  background: rgba(7, 6, 7, .4);
  border: 1px solid rgba(176, 168, 156, .3); border-radius: 0;
  color: var(--cream);
  font-family: var(--font-label); font-weight: 300; font-size: 16px;
  transition: border-color .4s ease;
}
.field textarea, textarea.fld { resize: vertical; line-height: 1.7; }
.field input::placeholder, .field textarea::placeholder, .fld::placeholder { color: rgba(176, 168, 156, .65); }
.field input:focus, .field textarea:focus, .fld:focus { outline: none; border-color: rgba(253, 181, 21, .8); }

/* "I am writing about" — radios styled as a segmented control, no JS */
.topic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); gap: 8px; }
.topic input { position: absolute; opacity: 0; pointer-events: none; }
.topic label {
  display: block; margin: 0; padding: 13px 8px;
  border: 1px solid rgba(176, 168, 156, .35);
  color: var(--cream);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-align: center;
  cursor: pointer;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.topic input:checked + label { background: var(--gold); color: var(--night); border-color: var(--gold); }
.topic input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }

.submit {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 16px;
  background: var(--gold); color: var(--night); border: none; cursor: pointer;
  font-family: var(--font-label); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  transition: background-color .5s var(--ease), transform .5s var(--ease);
}
.submit:hover, .submit:focus-visible { background: #FFD98A; }
.submit .cta__arrow { width: 40px; height: 40px; border-color: rgba(20, 27, 35, .5); color: var(--night); }
.submit:hover .cta__arrow, .submit:focus-visible .cta__arrow { transform: translateX(6px); background: var(--night); color: var(--gold); }

/* Sent. Loud on purpose: a line of small print is how you get the same enquiry twice.
   The form is replaced outright, so there is nothing left to submit again. */
.sent {
  display: grid; justify-items: center; gap: 14px; text-align: center;
  padding: clamp(34px, 6vw, 54px) clamp(20px, 4vw, 40px);
  border: 1px solid rgba(253, 181, 21, .45); border-radius: 4px;
  background: rgba(253, 181, 21, .07);
  animation: sentin .55s var(--ease) both;
}
@keyframes sentin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sent__mark {
  display: grid; place-items: center; width: 52px; height: 52px;
  border: 1px solid var(--gold); border-radius: 50%;
  color: var(--gold); font-size: 22px; line-height: 1;
}
.sent__lead {
  margin: 0; color: var(--cream);
  font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15;
}
.sent__sub {
  margin: 0; max-width: 34ch; color: var(--muted);
  font-size: 13px; line-height: 1.7;
}
.sent--slim { padding: 18px 20px; gap: 10px; border-radius: 999px; }
.sent--slim .sent__mark { width: 34px; height: 34px; font-size: 16px; }
.sent--slim .sent__lead { font-size: 17px; }
.sent--fail { border-color: rgba(224, 163, 163, .5); background: rgba(224, 163, 163, .06); }
.sent--fail .sent__mark { border-color: #E0A3A3; color: #E0A3A3; }

.form__note { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; text-align: center; }

/* ==========================================================================
   SUPPORT — giving panel. Frequency, amount and the tier note are radios plus
   sibling selectors, so the panel works with no JS at all.
   ========================================================================== */

.nav__support[aria-current="page"] { background: var(--gold); color: var(--night); border-color: var(--gold); }

.give { display: grid; gap: 26px; }
.give__freq { display: flex; border: 1px solid rgba(176, 168, 156, .3); }
.give__freq label {
  flex: 1; margin: 0; padding: 14px 10px;
  color: var(--muted); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; text-align: center;
  cursor: pointer; transition: background .4s ease, color .4s ease;
}
.give__amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(88px, 100%), 1fr)); gap: 10px; }
/* 2x2 rather than 3 + a lonely one on a phone */
@media (max-width: 520px) { .give__amounts { grid-template-columns: 1fr 1fr; } }
.give__amounts label {
  margin: 0; padding: 18px 8px;
  border: 1px solid rgba(176, 168, 156, .35);
  color: var(--cream); font-family: var(--font-display); font-size: 26px; text-align: center;
  cursor: pointer; transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.give__amounts label:hover { border-color: rgba(253, 181, 21, .7); }
.give input { position: absolute; opacity: 0; pointer-events: none; }
.give input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }

.give__tiers { border-top: 1px solid rgba(176, 168, 156, .25); padding-top: 22px; }
.tier { display: none; }
.tier p:first-child { margin: 0; color: var(--gold); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.tier p + p { margin: 12px 0 0; font-size: 16px; line-height: 1.7; text-wrap: pretty; }

/* the checked radio lights its own control and reveals its tier note */
#give-monthly:checked ~ .give__freq label[for="give-monthly"],
#give-once:checked    ~ .give__freq label[for="give-once"] { background: rgba(253, 181, 21, .18); color: var(--gold); }
#a25:checked  ~ .give__amounts label[for="a25"],
#a60:checked  ~ .give__amounts label[for="a60"],
#a150:checked ~ .give__amounts label[for="a150"],
#a500:checked ~ .give__amounts label[for="a500"] { background: var(--gold); color: var(--night); border-color: var(--gold); }
#a25:checked  ~ .give__tiers .tier--25,
#a60:checked  ~ .give__tiers .tier--60,
#a150:checked ~ .give__tiers .tier--150,
#a500:checked ~ .give__tiers .tier--500 { display: block; }

/* ==========================================================================
   LEGAL PAGES — long-form body copy
   ========================================================================== */

.legal { max-width: 70ch; }
.legal h2 {
  margin: clamp(40px, 6vh, 72px) 0 18px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 2vw, 30px); line-height: 1.2;
  letter-spacing: .08em; text-transform: uppercase;
}
.legal h2:first-of-type { margin-top: clamp(24px, 4vh, 40px); }
.legal p, .legal li { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.8; text-wrap: pretty; }
.legal p { margin: 0 0 18px; }
.legal ul { margin: 0 0 18px; padding-left: 1.4em; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--gold); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot {
  background: var(--stone);
  border-top: 1px solid rgba(253, 181, 21, .45);
  padding: clamp(56px, 9vh, 96px) var(--gutter) 32px;
}
.foot__cols {
  max-width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 40px; align-items: start;
}
/* the same A-to-A measure as the hero lockup */
/* the lockup and its line share one centre: the column shrinks to the line's width and
   everything in it is centred. Mark at the hero's ratio (45.6%) and gap (7% of the wordmark). */
.foot__cols > :first-child { display: grid; justify-items: center; width: max-content; text-align: center; }
.foot__mark { width: 68px; }
.foot__word { width: 150px; margin-top: 10px; }
.foot__line {
  margin: 24px 0 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(22px, 2vw, 30px); line-height: 1.2;
}
.foot__nav, .foot__meta {
  display: grid; gap: 2px; align-content: start;
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
}
.foot__nav a, .foot__meta a { padding-block: 11px; }
.foot__nav a { transition: color .3s ease; }
.foot__nav a:hover, .foot__meta a:hover { color: var(--gold); }
.foot__nav a.is-support { color: var(--gold); }
.foot__meta { color: var(--muted); }
.foot__meta p { margin: 0; padding-block: 5px; }
.foot__meta p:first-child { color: var(--cream); }
.foot__meta a { color: var(--muted); transition: color .3s var(--ease); }
.foot__meta a:first-of-type { margin-top: 12px; }

.foot__legal {
  max-width: var(--wrap); margin: 56px auto 0;
  padding-top: 20px; border-top: 1px solid rgba(176, 168, 156, .2);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  color: var(--muted); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
}
.foot__legal p { margin: 0; }
.foot__legal a { color: var(--muted); transition: color .3s var(--ease); }
.foot__legal a:hover { color: var(--gold); }
.foot__legal p:last-child { display: flex; gap: 24px; }
.foot__legal a { display: inline-block; padding-block: 10px; }

/* phone: links first in two columns, then the place and contact, then the lockup. */
@media (max-width: 640px) {
  .foot { padding-top: clamp(36px, 6vh, 52px); }
  .foot__cols {
    grid-template-columns: 1fr 1fr;
    gap: 26px 22px; align-items: start;
  }
  /* phone: the links come first, in two columns; the lockup closes the footer, centred */
  .foot__cols > :first-child { grid-column: 1 / -1; order: 3; justify-self: center; padding-top: 6px; }
  .foot__nav { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 0 22px; }
  .foot__meta { grid-column: 1 / -1; gap: 0; padding-top: 4px; border-top: 1px solid rgba(176, 168, 156, .14); }

  .foot__line { margin-top: 14px; font-size: 17px; line-height: 1.25; }

  .foot__nav a { padding-block: 8px; font-size: 11px; letter-spacing: .18em; }
  .foot__meta { font-size: 11px; letter-spacing: .18em; }
  .foot__meta p { padding-block: 3px; }
  .foot__meta a { padding-block: 8px; }
  .foot__meta a:first-of-type { margin-top: 8px; }

  .foot__legal { margin-top: 26px; gap: 10px; }
}

/* The detent is gone. "Proximity" only stays light while snap points are far apart
   relative to the viewport — and most bands here are SHORTER than a screen (489px
   against 936px), so every resting position sat near some section's start and the
   browser snapped every time. Measured: a two-tick scroll jumped a whole 488px
   section. A scroll that teleports is worse than no detent at all. */