/* ============================================================
   WESTHOLM — Defined by Intent.
   Quiet. Architectural. Institutional. Premium.
   ============================================================ */

/* ---------- Fonts (local, self-contained) ----------
   Montserrat carries all titles and labels; the brand serif
   lives only inside the logo artwork. Body is Helvetica Neue
   per the Westholm brand board. */
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat-var.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat-italic-var.woff2') format('woff2');
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/ibm-plex-mono.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ---------- Tokens — Westholm colour system ---------- */
:root {
  --black:      #0a0a0a;   /* rich black */
  --black-2:    #101010;
  --navy:       #111827;   /* midnight navy */
  --navy-deep:  #0c111c;
  --ivory:      #f3f1ec;   /* warm ivory */
  --ivory-2:    #eae7df;
  --stone:      #d9d6d0;
  --concrete:   #8a8a87;
  --graphite:   #2c2c2c;
  --gold:       #d5b034;   /* westholm gold — the accent of excellence */
  --gold-dim:   #a8863f;
  --white:      #ffffff;
  --ink-soft:   #67675f;   /* labels on ivory — AA contrast */

  --title: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --sans:  'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
  --mono:  'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --gutter: clamp(1.5rem, 6vw, 7.5rem);
  --maxw: 90rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cine: cubic-bezier(0.65, 0, 0.15, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: italic; }

::selection { background: var(--gold-dim); color: var(--ivory); }

a:focus-visible, button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* ---------- Shared primitives ---------- */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--title);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.section-head .rule { flex: 1; }
.section-head--dark .eyebrow { color: var(--gold); }

/* Fine rules that draw in on scroll */
.rule, [data-line] {
  display: block;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
}
.section--ivory .rule { background: var(--graphite); }
.section--black .rule, .place .rule, .footer .rule { background: var(--stone); }

[data-line] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--ease-cine);
}
[data-line].in-view { transform: scaleX(1); }

[data-line-v] {
  display: block;
  width: 1px;
  background: var(--stone);
  opacity: 0.3;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s var(--ease-cine);
}
[data-line-v].in-view { transform: scaleY(1); }

/* Soft reveal for content blocks */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 1.2s var(--ease-out),
    transform 1.2s var(--ease-out);
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Statement lines that rise out of a mask.
   The mask (.line) keeps its full box so IntersectionObserver
   still sees it; only the inner span moves. */
.line[data-reveal] {
  display: block;
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: none;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.line__in {
  display: block;
  transform: translateY(112%);
  transition: transform 1.5s var(--ease-cine);
}
.line[data-reveal].in-view .line__in { transform: translateY(0); }
.line[data-reveal]:nth-child(2) .line__in { transition-delay: 0.12s; }
.line[data-reveal]:nth-child(3) .line__in { transition-delay: 0.24s; }

.br-desk { display: none; }
@media (min-width: 48rem) { .br-desk { display: inline; } }

/* ============================================================
   NAVIGATION
============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background-color 0.6s ease, backdrop-filter 0.6s ease;
}
.nav.is-scrolled {
  background: rgba(9, 9, 9, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 1.6rem var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(217, 214, 208, 0.10);
}
.nav__mark {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.nav__monogram {
  width: 1.9rem;
  height: 1.9rem;
  opacity: 0.92;
}
/* The wordmark is the brand serif — shipped as artwork, never faked in a font */
.nav__wordmark-img {
  height: 0.85rem;
  width: auto;
  opacity: 0.95;
}
.nav__links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.75rem);
}
.nav__links a {
  font-family: var(--title);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  padding-bottom: 0.35rem;
  position: relative;
  transition: color 0.4s ease;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-cine);
}
.nav__links a:hover { color: var(--ivory); }
.nav__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav__contact { color: var(--ivory); }

/* ---------- Mobile menu ---------- */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 2.6rem;
  height: 2.6rem;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem 0;
}
.nav__toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ivory);
  transition: transform 0.45s var(--ease-cine), opacity 0.3s ease;
}
.menu-open .nav__toggle span:first-child  { transform: translateY(4px) rotate(45deg); }
.menu-open .nav__toggle span:last-child   { transform: translateY(-4px) rotate(-45deg); }

.sitemenu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 4rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}
.menu-open .sitemenu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s ease;
}
.menu-open body { overflow: hidden; }
.sitemenu__nav { display: flex; flex-direction: column; }
.sitemenu__nav a {
  font-family: var(--title);
  font-weight: 300;
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(217, 214, 208, 0.12);
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 0.5s ease, transform 0.6s var(--ease-cine);
}
.sitemenu__nav a:first-child { border-top: 1px solid rgba(217, 214, 208, 0.12); }
.menu-open .sitemenu__nav a { opacity: 1; transform: translateY(0); }
.menu-open .sitemenu__nav a:nth-child(1) { transition-delay: 0.10s; }
.menu-open .sitemenu__nav a:nth-child(2) { transition-delay: 0.16s; }
.menu-open .sitemenu__nav a:nth-child(3) { transition-delay: 0.22s; }
.menu-open .sitemenu__nav a:nth-child(4) { transition-delay: 0.28s; }
.menu-open .sitemenu__nav a:nth-child(5) { transition-delay: 0.34s; }
.sitemenu__motto {
  margin-top: 3rem;
  font-family: var(--title);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.6s ease 0.4s;
}
.menu-open .sitemenu__motto { opacity: 1; }

@media (max-width: 47.9375rem) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}

/* Hero-load choreography for nav */
.nav__mark, .nav__links {
  opacity: 0;
  transition: opacity 1.6s ease 0s;
}
.is-ready .nav__mark, .is-ready .nav__links {
  opacity: 1;
  transition-delay: 1.9s;
}

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-deep);
}
.hero__sticky {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__nightshade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(4, 5, 7, 0.72) 0%,
    rgba(4, 5, 7, 0.24) 52%,
    rgba(6, 7, 9, 0.46) 100%);
  opacity: 0.34;
  transition: opacity 1.4s ease;
}
/* Time of day in Perth grades the scene — no announcement, just true */
.tod-day   .hero__nightshade { opacity: 0.18; }
.tod-dusk  .hero__nightshade { opacity: 0.30; }
.tod-night .hero__nightshade { opacity: 0.50; }
.tod-day  .hero__layer--sky, .tod-day  .hero__layer--sea { filter: brightness(1.12) saturate(0.94); }
.tod-dusk .hero__layer--sky, .tod-dusk .hero__layer--sea { filter: brightness(1.02) hue-rotate(-5deg) saturate(1.08); }
.tod-night .hero__layer--sky, .tod-night .hero__layer--sea { filter: brightness(0.9); }

.hero__scene { position: absolute; inset: 0; }
.hero__layer {
  position: absolute;
  inset: -4%;
  will-change: transform;
}
.hero__layer svg { width: 100%; height: 100%; }
.hero__layer--sea {
  top: 58%;
  bottom: -4%;
  height: auto;
}
.hero__layer--land { top: 0; }

/* Drone film — owned footage, graded to the register */
.hero__film {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* richer, warmer grade — the golden land is the wow, not a mood board */
  filter: saturate(1.3) contrast(1.26) brightness(0.94) sepia(0.08);
}
/* If Safari ever blocks the attribute autoplay (Low Power Mode, "Never
   Auto-Play"), hide its built-in ▶ overlay — the graded poster holds and a
   tap starts the film via the gesture fallback. */
.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.hero__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 50% 42%, rgba(10, 10, 10, 0.38) 0%, rgba(10, 10, 10, 0) 72%),
    radial-gradient(125% 95% at 50% 44%, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.42) 100%),
    /* deepened top scrim — a long feather carries nav/logo contrast down
       through ~20% then releases, so the landscape stays natural (no band) */
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.62) 0%,
      rgba(10, 10, 10, 0.34) 9%,
      rgba(10, 10, 10, 0.12) 20%,
      rgba(10, 10, 10, 0.1) 46%,
      rgba(10, 10, 10, 0.66) 100%);
}
/* Once the film is running, the drawn layers underneath stop painting */
.has-film .hero__layer { visibility: hidden; }

/* Horizon hairline — the first thing that exists */
.hero__horizon {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 58%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(213, 176, 52, 0.0) 6%,
    rgba(213, 176, 52, 0.85) 38%,
    rgba(240, 220, 150, 0.95) 50%,
    rgba(213, 176, 52, 0.85) 62%,
    rgba(213, 176, 52, 0.0) 94%,
    transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(213, 176, 52, 0.35));
}
.is-ready .hero__horizon {
  animation: horizon-draw 1.6s var(--ease-cine) 0.35s forwards,
             horizon-settle 2.5s ease 2.6s forwards;
}
@keyframes horizon-draw   { to { transform: scaleX(1); } }
@keyframes horizon-settle { to { opacity: 0.4; } }

/* Shadow veil — the scene reveals through it */
.hero__veil {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 1;
}
.is-ready .hero__veil {
  animation: veil-lift 3.2s var(--ease-cine) 0.9s forwards;
}
@keyframes veil-lift { to { opacity: 0; } }

/* Slow settle of the whole scene */
.hero__scene {
  transform: scale(1.06);
}
.is-ready .hero__scene {
  transition: transform 5s var(--ease-out) 0.9s;
  transform: scale(1);
}

/* Hero copy */
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: var(--gutter);
  transform: translateY(-3vh);
}

/* Legibility over the film — a soft shadow lifts the light copy and the quiet
   gold labels off the brighter grass without touching the register. */
.hero__support,
.hero__eyebrow,
.hero__tagline,
.hero__coords {
  text-shadow: 0 1px 14px rgba(10, 10, 10, 0.62), 0 0 2px rgba(10, 10, 10, 0.5);
}

/* The descriptor — sits quietly beneath the supporting line.
   Stone, not gold: the tagline below stays the hero's one gold word. */
.hero__eyebrow {
  margin-top: 2.1rem;
  font-family: var(--title);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--stone);
  overflow: hidden;
}
.hero__eyebrow span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}
.is-ready .hero__eyebrow span {
  transition: transform 1.1s var(--ease-cine) 6.3s, opacity 0.9s ease 6.3s;
  transform: translateY(0);
  opacity: 1;
}

/* The parent lockup — the Westholm mark split into two beats: the monogram
   settles first, then the wordmark rises beneath it. Both cropped from the
   one gold master, so weight and hue match exactly. The brand serif lives
   only inside this artwork. Nothing sits above it. */
.hero__lockup {
  margin-top: 0;
}
.hero__mark,
.hero__word {
  display: block;
  height: auto;
  margin-inline: auto;
  opacity: 0;
  /* each element drifts up a few px as it fades — a rise, not a settle */
  transform: translateY(9px);
  /* deep soft shadow lifts the gold off the brighter film —
     legibility without touching the brand artwork */
  filter: drop-shadow(0 3px 22px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}
.hero__mark { width: clamp(5.4rem, 11vw, 9.6rem); }
.hero__word { width: clamp(15rem, 30vw, 26rem); margin-top: 1.4rem; }

/* Beat 1 — the W rises from below and fades in (2.8s) */
.is-ready .hero__mark {
  transition: opacity 1s ease 2.8s, transform 1.3s var(--ease-out) 2.8s;
  opacity: 1;
  transform: translateY(0);
}
/* Beat 2 — WESTHOLM fades in beneath it (3.8s) */
.is-ready .hero__word {
  transition: opacity 1s ease 3.8s, transform 1.3s var(--ease-out) 3.8s;
  opacity: 1;
  transform: translateY(0);
}
/* First visit plays the full sequence over the running film — the mark
   arrives at ~3.3s, never on load. Return visits (below) compress it. */

/* The inscription line — one short gold rule beneath the mark */
.hero__rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  background: var(--gold);
  margin: 2.4rem auto 0;
  transform: scaleX(0);
  transform-origin: center;
}
.is-ready .hero__rule {
  transition: transform 1.1s var(--ease-cine) 4.8s;
  transform: scaleX(1);
}

.hero__support {
  margin-top: 2rem;
  font-size: clamp(0.875rem, 1.4vw, 1rem);
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--stone);
  opacity: 0;
}
.is-ready .hero__support {
  transition: opacity 1.1s ease 5.4s;
  opacity: 1;
}

/* The quiet tagline — small, gold, and the origin of the Intent Line.
   Twinned with the footer motto so the line joins the two utterances. */
.hero__tagline {
  margin-top: 2.6rem;
  font-family: var(--title);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em;
  color: var(--gold);
  opacity: 0;
}
.is-ready .hero__tagline {
  transition: opacity 1.1s ease 7.2s;
  opacity: 1;
}

/* Hero meta strip */
.hero__meta {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2rem var(--gutter) 2.2rem;
  opacity: 0;
}
.is-ready .hero__meta {
  transition: opacity 1.2s ease 8s;
  opacity: 1;
}
.hero__coords {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #a7a5a0; /* a step up from concrete for contrast over the film */
}
.hero__scrollcue {
  pointer-events: none; /* decoration — never intercept clicks near the enquiries seal */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.hero__scrollcue span {
  font-family: var(--title);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--concrete);
}
.hero__scrollcue i {
  display: block;
  width: 1px;
  height: 3.4rem;
  background: linear-gradient(180deg, var(--stone), transparent);
  overflow: hidden;
  position: relative;
}
.hero__scrollcue i::after {
  content: '';
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: cue-drop 3.2s var(--ease-cine) infinite;
}
@keyframes cue-drop {
  0%   { top: -100%; }
  55%  { top: 100%; }
  100% { top: 100%; }
}
@media (max-width: 47.9375rem) {
  /* Declutter the mobile hero base: drop the coordinates so the scroll cue and
     enquiries seal don't compete with a tiny two-line metadata block. */
  .hero__coords { display: none; }
  /* With the coords gone, centre the scroll cue so it sits clear of the
     bottom-right enquiries seal instead of stacking against it. */
  .hero__meta { justify-content: center; }
  /* Tighten the descriptor's tracking so it holds one line instead of
     breaking "CAPITAL / GROUP". */
  .hero__eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.2em;
  }
}

/* The full hero cinematic plays on EVERY load — video first, then the mark
   at ~2.8s, then the rest. No return-visit shortcut: the sequence is the
   point, and a fast replay read as "the logo loads with the page." */

/* ============================================================
   SECTION SURFACES
============================================================ */
.section--ivory {
  background: var(--ivory);
  color: var(--black);
}
.section--black {
  background: var(--black);
  color: var(--ivory);
}

/* ============================================================
   02 · THE GROUP
============================================================ */
.group { padding-block: clamp(7rem, 14vw, 13rem); }

.group__statement {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  font-family: var(--title);
  font-weight: 300;
  font-size: clamp(1.55rem, 3.4vw, 3.1rem);
  line-height: 1.32;
  letter-spacing: 0.005em;
  color: var(--black);
  max-width: 22em;
}
.group__statement em {
  font-style: italic;
  font-weight: 300;
  color: var(--graphite);
}

.group__body {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 34rem) 1fr;
  gap: clamp(3rem, 8vw, 9rem);
  align-items: start;
}
.group__copy p {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--graphite);
}
.group__copy p + p { margin-top: 1.6rem; }

.group__facts {
  justify-self: end;
  width: 100%;
  max-width: 22rem;
}
.group__facts div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid rgba(58, 59, 56, 0.18);
}
.group__facts div:first-child { border-top: 1px solid rgba(58, 59, 56, 0.18); }
.group__facts dt {
  font-family: var(--title);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.group__facts dd {
  font-size: 0.875rem;
  color: var(--black);
  text-align: right;
}
@media (max-width: 47.9375rem) {
  .group__body { grid-template-columns: 1fr; }
  .group__facts { justify-self: start; }
}

/* ============================================================
   03 · OPERATING COMPANIES
============================================================ */
/* Top padding kept lighter than the base section rhythm so the black band
   before "Operating Companies" doesn't read as content that failed to load;
   the bottom keeps its full breath into the next passage. */
.companies { padding-block: clamp(4rem, 7vw, 7rem) clamp(7rem, 14vw, 13rem); }

.companies__parent {
  margin-top: clamp(2.75rem, 4.5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.monogram--group {
  width: 5.2rem;
  height: 5.2rem;
}
.companies__parent-name {
  margin-top: 1.7rem;
  font-family: var(--title);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  text-indent: 0.38em;
  color: var(--ivory);
}
.companies__parent-note {
  margin-top: 0.8rem;
  font-family: var(--title);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--concrete);
}

/* The stem — parent line dividing into two entities */
.companies__stem {
  position: relative;
  height: 7.5rem;
  margin-top: 2.4rem;
}
.stem__drop {
  position: absolute;
  left: 50%;
  top: 0;
  height: 3.75rem;
}
.stem__cross {
  position: absolute;
  top: 3.75rem;
  left: 25%;
  right: 25%;
  transform-origin: center;
  background: var(--stone);
}
.stem__leg {
  position: absolute;
  top: 3.75rem;
  height: 3.75rem;
  transition-delay: 0.5s;
}
.stem__leg--a { left: 25%; }
.stem__leg--b { right: 25%; }

/* Entity register */
.companies__register {
  border-top: 1px solid rgba(217, 214, 208, 0.16);
}
.entity {
  position: relative;
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) minmax(0, 16rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(0.5rem, 2vw, 2rem);
  border-bottom: 1px solid rgba(217, 214, 208, 0.16);
  transition: background-color 0.7s ease;
}
.entity::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 100%;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.7s var(--ease-cine);
}
.entity:hover { background: rgba(217, 214, 208, 0.03); }
.entity:hover::before { transform: scaleY(1); }

.entity__id {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: flex-start;
}
.entity__numeral {
  font-family: var(--title);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.24em;
  color: var(--concrete);
}
.entity__name {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The entity's name is its lockup — white at rest, gold on hover */
.entity__lockup {
  position: relative;
  display: block;
  width: min(21rem, 78%);
}
.entity__lockup img {
  display: block;
  width: 100%;
  height: auto;
}
.entity__lockup img.is-gold {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.entity:hover .entity__lockup img.is-gold { opacity: 1; }
/* Touch equivalent: the row centred in the viewport takes the gold state */
.entity.is-active::before { transform: scaleY(1); }
.entity.is-active .entity__lockup img.is-gold { opacity: 1; }
.entity.is-active .entity__disciplines li { color: var(--stone); }
.entity__mandate {
  margin-top: 1.8rem;
  font-family: var(--title);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.entity__desc {
  margin-top: 1.3rem;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--stone);
}
.entity__disciplines {
  align-self: center;
  justify-self: end;
  width: 100%;
}
.entity__disciplines li {
  font-family: var(--title);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--concrete);
  padding-block: 0.75rem;
  border-bottom: 1px solid rgba(217, 214, 208, 0.10);
  transition: color 0.5s ease, padding-left 0.5s var(--ease-cine);
}
.entity__disciplines li:first-child { border-top: 1px solid rgba(217, 214, 208, 0.10); }
.entity:hover .entity__disciplines li { color: var(--stone); }

.companies__note {
  margin-top: 3.2rem;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--concrete);
}

@media (max-width: 63.9375rem) {
  .entity { grid-template-columns: minmax(4.5rem, 6rem) 1fr; }
  .entity__disciplines { grid-column: 2; justify-self: start; max-width: 24rem; }
}
@media (max-width: 47.9375rem) {
  .entity { grid-template-columns: 1fr; }
  .entity__id { flex-direction: row; align-items: center; }
  .entity__disciplines { grid-column: 1; }
  .companies__stem { display: none; }
  .companies__parent { margin-bottom: 3rem; }
  /* Single-column: the index numeral would sit orphaned above the lockup and
     read as a stray caret. It only earns its place beside the body in the
     multi-column layouts above — hide it here. */
  .entity__numeral { display: none; }
}

/* ============================================================
   04 · APPROACH
============================================================ */
.approach { padding-block: clamp(5rem, 9vw, 8rem); }

.approach__lead {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--title);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.5vw, 2.1rem);
  line-height: 1.42;
  color: var(--black);
  max-width: 26em;
}

.approach__ledger {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.principle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 6rem);
  align-items: baseline;
  padding-block: clamp(1.4rem, 2.5vw, 2.1rem);
}
.principle__rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: rgba(58, 59, 56, 0.22);
}
.principle__rule--last { top: auto; bottom: 0; }
.principle__term {
  font-family: var(--title);
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black);
}
.principle__term em {
  display: block;
  font-size: 0.6em;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-soft);
  margin-top: 0.6em;
}
.principle__gloss {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--graphite);
  max-width: 26rem;
}
@media (max-width: 47.9375rem) {
  .principle { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ============================================================
   05 · PLACE
============================================================ */
/* The photograph begins as an archival plate and opens to full bleed. */
.place {
  position: relative;
  height: 240vh;
  background: var(--black-2);
  color: var(--ivory);
  --plate: 0;
}
.place__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.place__scene {
  position: absolute;
  inset: 0;
}
.place__layer {
  position: absolute;
  inset: 0;
}
.place__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* graded to the register but the water keeps its colour */
  filter: saturate(0.82) brightness(0.78) contrast(1.05);
  clip-path: inset(
    calc(17% * (1 - var(--plate)))
    calc(27% * (1 - var(--plate)))
    calc(31% * (1 - var(--plate)))
    calc(27% * (1 - var(--plate))));
}
.place__frame {
  position: absolute;
  top:    calc(17% * (1 - var(--plate)) - 13px);
  right:  calc(27% * (1 - var(--plate)) - 13px);
  bottom: calc(31% * (1 - var(--plate)) - 13px);
  left:   calc(27% * (1 - var(--plate)) - 13px);
  border: 1px solid rgba(213, 176, 52, 0.4);
  opacity: clamp(0, 1 - var(--plate) * 1.8, 1);
  pointer-events: none;
}
.place__caption {
  position: absolute;
  top: calc(100% + 1.1rem);
  left: 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--concrete);
  white-space: nowrap;
}
.place__shade {
  position: absolute;
  inset: 0;
  opacity: var(--plate);
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.28) 0%, rgba(17, 24, 39, 0.12) 50%, rgba(17, 24, 39, 0.3) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.42) 28%, rgba(10,10,10,0.3) 58%, rgba(10,10,10,0.94) 100%);
}
.place__head {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(7rem, 12vh, 9rem);
}
.place__content {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: auto;
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
  opacity: clamp(0, (var(--plate) - 0.55) * 2.8, 1);
  transform: translateY(calc(2.2rem * (1 - clamp(0, (var(--plate) - 0.55) * 2.8, 1))));
}
.place__statement {
  font-family: var(--title);
  font-weight: 250;
  font-size: clamp(1.7rem, 4vw, 3.4rem);
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
}
.place__copy {
  margin-top: clamp(1.8rem, 4vh, 3rem);
  max-width: 34rem;
}
.place__copy p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--stone);
}
.place__coords {
  margin-top: clamp(1.6rem, 4vh, 2.8rem);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--concrete);
}
@media (max-width: 47.9375rem) {
  .place { height: 210vh; }
}

/* ============================================================
   06 · CONTACT / FOOTER
============================================================ */
.footer { padding-block: clamp(7rem, 13vw, 12rem) 3rem; }

.footer__contact { max-width: 46rem; }
.footer__lead {
  margin-top: clamp(3rem, 6vw, 5rem);
  font-family: var(--title);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.footer__cta {
  display: inline-block;
  margin-top: 2.6rem;
  font-family: var(--title);
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  letter-spacing: 0.08em;
  color: var(--ivory);
  padding-bottom: 0.6rem;
  position: relative;
}
.footer__cta::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--stone);
  opacity: 0.4;
  transition: opacity 0.5s ease;
}
.footer__cta::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.7s var(--ease-cine);
  z-index: 1;
}
.footer__cta:hover::before { transform: scaleX(1); transform-origin: left center; }
.footer__seat {
  margin-top: 1.6rem;
  font-family: var(--title);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--concrete);
}

.footer__grid {
  margin-top: clamp(5rem, 9vw, 8rem);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: 3rem;
  border-top: 1px solid rgba(217, 214, 208, 0.14);
}
.monogram--footer { width: 3rem; height: 3rem; opacity: 0.9; }
.footer__col--mark p {
  margin-top: 1.4rem;
  font-size: 0.8125rem;
  line-height: 1.9;
  color: var(--concrete);
}
.footer__col h4 {
  font-family: var(--title);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--concrete);
  margin-bottom: 1.3rem;
}
.footer__col ul li + li { margin-top: 0.8rem; }
.footer__col ul a {
  font-size: 0.875rem;
  color: var(--stone);
  transition: color 0.4s ease;
  position: relative;
}
.footer__col ul a:hover { color: var(--ivory); }

.footer__close {
  margin-top: clamp(5rem, 9vw, 8rem);
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.footer__close .rule { flex: 1; }
.footer__motto {
  font-family: var(--title);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-indent: 0.32em;
  color: var(--gold);
  white-space: nowrap;
}

.footer__fine {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--concrete);
}

@media (max-width: 63.9375rem) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 47.9375rem) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   THE INTENT LINE — one gold line, drawn by the reader
============================================================ */
.intentline {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  pointer-events: none;
}
.intentline path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.55;
}
.intentline .il-tap {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 0.8s var(--ease-cine);
}
.intentline .il-tap.is-on { stroke-dashoffset: 0; }
.intentline .il-tip {
  fill: var(--gold);
  opacity: 0.9;
}
/* the globe wrap — part of the one line. A faint resting ring, and the
   gold meridian that the line draws as it encircles the world. */
.intentline .il-ghost {
  stroke: rgba(213, 176, 52, 0.12);
  stroke-width: 1;
  opacity: 1;
}
.intentline .il-wrap {
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(213, 176, 52, 0.3));
}
.intentline .il-node {
  fill: var(--gold);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.intentline .il-node.is-on { opacity: 0.9; }
.has-line .companies__stem { display: none; }
/* When the Intent Line is present it becomes the footer motto's approach —
   the stone rules step aside so the gold line arrives from the left alone. */
.has-line .footer__close .rule { opacity: 0; }

/* ============================================================
   TORCHLIGHT — raking light follows the cursor over the register
============================================================ */
.companies { position: relative; }
.torch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  background: radial-gradient(
    620px circle at var(--tx, 50%) var(--ty, 50%),
    rgba(229, 198, 94, 0.075),
    rgba(213, 176, 52, 0.035) 34%,
    transparent 64%);
}
@media (hover: hover) and (pointer: fine) {
  .companies:hover .torch { opacity: 1; }
}

/* ============================================================
   REGISTER STAMP — seals and numerals arrive like an embossing
============================================================ */
@keyframes stamp {
  0%   { opacity: 0; transform: scale(1.14); filter: blur(2px); }
  55%  { opacity: 1; transform: scale(0.99); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}
.companies__parent.in-view .monogram--group,
.entity.in-view .entity__numeral {
  animation: stamp 0.85s var(--ease-out) 0.2s both;
}

/* ============================================================
   MARKED PHRASES — a reviewer's pencil line under what matters
============================================================ */
.mark {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 1.2s var(--ease-cine) 0.7s;
}
.in-view .mark { background-size: 100% 1px; }

/* ============================================================
   REDUCED MOTION — everything visible, nothing moves
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], .line[data-reveal] { opacity: 1; transform: none; }
  .line__in { transform: none; }
  [data-line] { transform: scaleX(1); }
  [data-line-v] { transform: scaleY(1); }
  .hero__veil { opacity: 0; }
  .hero__horizon { transform: scaleX(1); opacity: 0.4; }
  .hero__scene { transform: none; }
  .hero__eyebrow span { transform: none; opacity: 1; }
  .hero__mark, .hero__word { opacity: 1; transform: none; }
  .hero__rule { transform: scaleX(1); }
  .hero__support, .hero__meta, .nav__mark, .nav__links { opacity: 1; }
  .hero__tagline { opacity: 1; }
  .sitemenu__nav a, .sitemenu__motto { opacity: 1; transform: none; }
  /* pinned stages become plain sections */
  .hero { height: auto; min-height: 100svh; }
  .hero__sticky { position: relative; height: 100svh; }
  .hero__nightshade { opacity: 0; }
  .place { height: auto; }
  .place__sticky { position: relative; height: 100svh; }
  .place__photo { clip-path: none; }
  .place__frame { display: none; }
  .place__shade { opacity: 1; }
  .place__content { opacity: 1; transform: none; }
  .intentline, .torch { display: none; }
  .mark { background-size: 100% 1px; }
}

/* ============================================================
   CORRESPONDENCE — enquiries widget
============================================================ */
.corr {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 60;
  font-family: var(--body);
}
.corr__seal {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.corr__seal img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.5s var(--ease-out);
}
.corr__seal:hover img { transform: scale(1.06); }
.corr__hint {
  position: absolute;
  right: calc(100% + 0.8rem);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  background: rgba(10, 10, 10, 0.78);
  padding: 0.4rem 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.corr__seal:hover .corr__hint,
.corr__seal:focus-visible .corr__hint { opacity: 1; }
.corr.is-open .corr__seal { display: none; }

.corr__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(24rem, calc(100vw - 2.8rem));
  height: min(34rem, calc(100vh - 6rem));
  height: min(34rem, calc(100svh - 6rem));
  display: flex;
  flex-direction: column;
  background: #141413;
  border: 1px solid rgba(213, 176, 52, 0.28);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.55s var(--ease-out);
}
.corr.is-open .corr__panel { opacity: 1; transform: translateY(0); }
/* [hidden] loses to our display:flex — restate it so the closed panel
   cannot invisibly swallow clicks meant for the seal */
.corr__panel[hidden] { visibility: hidden; pointer-events: none; }

.corr__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(243, 241, 236, 0.1);
}
.corr__mark { width: 2rem; height: 2rem; border-radius: 50%; }
.corr__title { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.corr__name {
  font-family: var(--title);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
}
.corr__status {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(213, 176, 52, 0.5);
  border-radius: 2px;
  padding: 0.14rem 0.5rem;
}
.corr__close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--stone);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  transition: color 0.3s ease;
}
.corr__close:hover { color: var(--ivory); }

/* Preview body — a quiet notice, not a chat log */
.corr__body {
  flex: 1;
  padding: 1.4rem 1.2rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.corr__desc {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ivory);
}
.corr__notice {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  line-height: 1.6;
  color: var(--gold-dim);
  border-left: 1px solid rgba(213, 176, 52, 0.45);
  padding-left: 0.8rem;
}
.corr__route {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--stone);
}
.corr__route a {
  color: var(--gold);
  border-bottom: 1px solid rgba(213, 176, 52, 0.4);
  padding-bottom: 1px;
}
.corr__route a:hover { border-bottom-color: var(--gold); }

/* The input + send are DISABLED in preview — shown, dimmed, non-interactive */
.corr__form {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.2rem 1.1rem;
  border-top: 1px solid rgba(243, 241, 236, 0.1);
  opacity: 0.4;
}
.corr__input {
  flex: 1;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(243, 241, 236, 0.22);
  padding: 0.45rem 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--stone);
  border-radius: 0;
}
.corr__input::placeholder { color: var(--concrete); }
.corr__input:disabled { cursor: not-allowed; }
.corr__send {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: not-allowed;
}
.corr__send img { width: 100%; height: 100%; display: block; border-radius: 50%; }

@media (max-width: 47.9375rem) {
  .corr__panel {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
  }
}

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

/* ---------- Seal life: stamp in, lift, press, wax ring ---------- */
.corr__seal img { opacity: 0; }
.corr--arrived .corr__seal img {
  animation: seal-stamp 0.9s var(--ease-cine) both;
}
@keyframes seal-stamp {
  0%   { opacity: 0; transform: scale(1.7); }
  55%  { opacity: 1; transform: scale(0.9); }
  75%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.corr--arrived .corr__seal:hover img,
.corr--arrived .corr__seal:focus-visible img {
  animation: none;
  opacity: 1;
  transform: scale(1.08) rotate(-8deg) translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
}
.corr--arrived .corr__seal:active img {
  animation: none;
  opacity: 1;
  transform: scale(0.85) rotate(-3deg);
  transition-duration: 0.12s;
}

/* wax ring — a thin gold impression breathing out */
.corr__seal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  pointer-events: none;
}
.corr--ping .corr__seal::after { animation: seal-ring 1.9s var(--ease-out) both; }
@keyframes seal-ring {
  0%   { opacity: 0.75; transform: scale(1); }
  100% { opacity: 0;    transform: scale(2.1); }
}

@media (prefers-reduced-motion: reduce) {
  .corr__seal img { opacity: 1 !important; animation: none !important; transform: none !important; }
  .corr__seal::after { animation: none !important; }
}

/* ============================================================
   03b · ON THE GROUND — the site as a small planet
============================================================ */
.ground {
  background: var(--black);
  padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
}
.ground__globe {
  position: relative;
  height: min(78vh, 46rem);
  min-height: 22rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.ground__canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.ground__cap {
  margin-top: 1.2rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete);
}
/* the orbit — resting hairline ring; scroll draws its gold meridian */
.ground__orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ground__orbit-ghost {
  stroke: rgba(213, 176, 52, 0.14);
  stroke-width: 1;
}
.ground__orbit-lit {
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.85;
  filter: drop-shadow(0 0 4px rgba(213, 176, 52, 0.35));
}
.ground__orbit-node {
  fill: var(--gold);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.ground__orbit-node.is-lit { opacity: 0.9; }
/* no WebGL → the same planet, baked as a still */
.ground__still { display: none; }
.ground.is-unsupported .ground__canvas { display: none; }
.ground.is-unsupported .ground__still {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.82) contrast(1.05);
}
/* the sky dissolves into the page black — no ring, no blue, matching the live globe */
.ground.is-unsupported .ground__globe::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(closest-side at 50% 50%,
    rgba(10, 10, 10, 0) 40%,
    rgba(10, 10, 10, 0.35) 54%,
    rgba(10, 10, 10, 0.85) 68%,
    rgba(10, 10, 10, 1) 78%);
}

@media (max-width: 47.9375rem) {
  .ground__globe { height: min(60vh, 26rem); }
}

/* ============================================================
   LEGAL PAGES — Privacy / Terms (shared, standalone)
   Static documents in the Westholm register: ivory on black,
   Montserrat labels, generous measure. No hero, no motion system.
============================================================ */
.legal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem var(--gutter);
  border-bottom: 1px solid rgba(243, 241, 236, 0.1);
}
.legal__home { display: inline-flex; align-items: center; gap: 0.7rem; }
.legal__home img { width: 2rem; height: 2rem; }
.legal__home span {
  font-family: var(--title);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ivory);
}
.legal__back {
  font-family: var(--title);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.legal__back:hover { color: var(--gold); border-bottom-color: rgba(213, 176, 52, 0.5); }

.legal {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(4rem, 10vw, 8rem);
}
.legal__eyebrow {
  font-family: var(--title);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}
.legal__title {
  margin-top: 1rem;
  font-family: var(--title);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--ivory);
}
.legal__meta {
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: var(--concrete);
}
.legal__meta strong { color: var(--stone); font-weight: 400; }
.legal__rule {
  height: 1px;
  background: rgba(243, 241, 236, 0.14);
  margin: 2.6rem 0;
}
.legal h2 {
  margin-top: 2.6rem;
  margin-bottom: 0.9rem;
  font-family: var(--title);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin-bottom: 1rem; color: var(--stone); line-height: 1.8; }
.legal ul.legal__list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.legal__list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.55rem;
  color: var(--stone);
  line-height: 1.7;
}
.legal__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7rem;
  width: 0.4rem; height: 1px;
  background: var(--gold);
}
.legal a[href^="mailto"], .legal a[href^="http"], .legal a.legal__inline {
  color: var(--gold);
  border-bottom: 1px solid rgba(213, 176, 52, 0.4);
  padding-bottom: 1px;
}
.legal a:hover { border-bottom-color: var(--gold); }
.legal__note {
  margin-top: 2.6rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid rgba(213, 176, 52, 0.3);
  border-radius: 3px;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--stone);
}
.legal__return {
  margin-top: 3.2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(243, 241, 236, 0.12);
}
.legal__return a {
  font-family: var(--title);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.legal__foot {
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px solid rgba(243, 241, 236, 0.1);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--concrete);
  text-align: center;
}