/* ============================================================
   AURANG GROUP — HERO
   1. Tokens
   2. Reset & base
   3. The space (background)
   4. Intro / loader
   5. Navigation
   6. Hero
   7. Entrance
   8. Responsive
   9. Reduced motion
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --ink:        #060608;

  --gold:       #d9b274;   /* muted metallic gold */
  --champagne:  #e8d6b2;
  --silver:     #c6cad0;

  --white:      #f1ebe1;
  --dim:        rgba(241, 235, 225, .58);
  --faint:      rgba(241, 235, 225, .32);
  --hair:       rgba(241, 235, 225, .12);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad-x: clamp(1.25rem, 4.6vw, 5rem);
  --ease:  cubic-bezier(.16, .84, .24, 1);

  /* driven by the engine: 0 at first light, 1 once the logo has formed.
     Without JS it stays 1, so the page is simply shown. */
  --intro: 1;
  /* group progress, 0..1, written by the engine from scroll */
  --gp: 1;
  --mx: 0;                 /* eased pointer position, -1..1 */
  --my: 0;
}
.js { --intro: 0; --gp: 0; }

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* nothing moves until the logo has formed */
body.is-loading { overflow: hidden; height: 100%; }

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1 { margin: 0; }

::selection { background: rgba(217, 178, 116, .2); color: var(--white); }
:focus-visible { outline: 1px solid rgba(217, 178, 116, .7); outline-offset: 6px; }

/* ============================================================
   3. THE SPACE
   Not a black page: a large dark room. Every layer is nearly
   invisible on its own; together they give the page depth.
   Back to front:
     base      charcoal field, lifting very slightly to the centre
     far       two vast blurred masses, warm and cool graphite
     grid      a receding floor and tall wall bays (SVG)
     light     one diffused source behind the logo
     haze      a faint band along the horizon and a slow shaft
     vignette  the room falls away into its corners
   Stacking of the whole page:
     0 space · 2 hero words · 3 particles · 4 grain · 5 content
     6 menu · 7 nav · 8 loader
   ============================================================ */
.space, .field, .grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.space { z-index: 0; overflow: hidden; }
.field { z-index: 3; width: 100%; height: 100%; }
.grain { z-index: 4; }
/* a section's own particle canvas (js/main.js, stage fields): The Group's
   compass, and the symbol while it rests in a section. In The Group it
   shares the particle layer; inside the businesses (a layer of its own)
   it sits beneath everything there, as the page canvas does. */
.stage-field { position: absolute; pointer-events: none; }
.group > .stage-field { z-index: 3; }
.biz > .stage-field { z-index: 0; }
.jny > .stage-field { z-index: 0; }
/* the ambient dust of the hero and Contact (js/main.js, ambient dust):
   in the hero it floats beneath the words and the logo; in Contact,
   beneath everything but the section's own haze */
.ambient { position: absolute; left: 0; top: 0; pointer-events: none; }
.hero > .ambient { z-index: 1; }
.ctc > .ambient { z-index: 0; }

.space > * { position: absolute; }

.space__base {
  inset: 0;
  background:
    radial-gradient(72% 62% at 50% 46%, #19191c 0%, #131315 34%, #0d0d0f 64%, #080709 100%);
  opacity: calc(var(--intro) / .32);
}

.space__far { inset: -8%; opacity: calc(var(--intro) / .45); }
.space__mass {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.space__mass--a {
  width: 72vmax; height: 72vmax;
  left: -18vmax; top: -30vmax;
  background: radial-gradient(circle, rgba(62, 57, 52, .42) 0%, rgba(62, 57, 52, 0) 62%);
  translate: calc(var(--mx) * 4px) calc(var(--my) * 3px);
  animation: drift-a 70s ease-in-out infinite alternate;
}
.space__mass--b {
  width: 84vmax; height: 84vmax;
  right: -34vmax; bottom: -44vmax;
  background: radial-gradient(circle, rgba(34, 36, 43, .46) 0%, rgba(34, 36, 43, 0) 62%);
  translate: calc(var(--mx) * 4px) calc(var(--my) * 3px);
  animation: drift-b 86s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3vw, 2vh, 0) scale(1.08); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-3vw, -2vh, 0) scale(1); }
}

.space__light {
  left: 50%; top: 47%;
  width: min(120vmin, 1300px);
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(176, 168, 156, .12) 0%,
    rgba(128, 122, 114, .055) 26%,
    rgba(70, 67, 63, .018) 46%,
    rgba(40, 39, 38, 0) 62%);
  opacity: calc((var(--intro) - .3) / .6);
  /* the engine moves it after the symbol by offset, not by position:
     a translate is composited, a left/top would be laid out every frame */
  translate: calc(-50% + var(--ldx, 0px) + var(--mx) * 12px) calc(-50% + var(--ldy, 0px) + var(--my) * 8px);
  animation: breathe 14s ease-in-out infinite alternate;
}
@keyframes breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

.space__haze {
  inset: 0;
  background:
    radial-gradient(64% 16% at 50% 66%, rgba(168, 160, 148, .06), rgba(168, 160, 148, 0) 72%),
    linear-gradient(112deg, transparent 32%, rgba(210, 200, 186, .026) 46%, transparent 60%);
  filter: blur(18px);
  opacity: calc((var(--intro) - .4) / .5);
  translate: calc(var(--mx) * 9px) calc(var(--my) * 5px);
}

.space__vignette {
  inset: 0;
  background:
    radial-gradient(118% 96% at 50% 46%,
      rgba(5, 5, 7, 0) 36%,
      rgba(5, 5, 7, .5) 70%,
      rgba(4, 4, 6, .88) 100%),
    linear-gradient(180deg, rgba(5, 5, 7, .45) 0%, rgba(5, 5, 7, 0) 18%);
}

.grain {
  opacity: .05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%223%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================
   4. INTRO / LOADER — a single hairline, nothing more
   ============================================================ */
.loader {
  position: fixed;
  z-index: 8;
  left: 50%;
  bottom: clamp(2.2rem, 7vh, 4rem);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.is-loading .loader { opacity: 1; transition-delay: 1.2s; }

.loader__rule {
  display: block;
  width: 92px; height: 1px;
  background: rgba(241, 235, 225, .1);
  overflow: hidden;
}
.loader__rule i {
  display: block;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(217, 178, 116, .2), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
}

/* ============================================================
   5. NAVIGATION — floats, no bar
   ============================================================ */
.nav {
  position: fixed;
  z-index: 7;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(env(safe-area-inset-top) + clamp(1.3rem, 3vh, 2.2rem)) var(--pad-x);
}

.brand { display: flex; align-items: baseline; gap: .6rem; }
.brand__name,
.brand__sub {
  font-family: "Break", var(--serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.7vw, 1.65rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}
.brand__name { color: var(--gold); }
.brand__sub { color: #c9cdd3; }

.nav__links { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); }
.nav__links a {
  position: relative;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: .4rem;
  transition: color .45s var(--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;
  transition: transform .55s var(--ease);
}
.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.burger {
  display: none;
  position: relative;
  width: 34px; height: 34px;
  margin-right: -6px;
  padding: 0; border: 0;
  background: none;
  cursor: pointer;
}
.burger span {
  position: absolute;
  left: 6px;
  width: 22px; height: 1px;
  background: var(--white);
  transition: transform .5s var(--ease), width .5s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; width: 14px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { width: 22px; transform: translateY(-3px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(6, 6, 8, .95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  /* closed, it must not sit invisibly over the page catching taps */
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.menu[hidden] { display: none; }
.menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .6s var(--ease), visibility 0s;
}
.menu ul { display: grid; gap: clamp(1.1rem, 3.4vh, 2rem); text-align: center; }
.menu a {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .4s var(--ease);
}
.menu a:hover { color: var(--gold); }

/* ============================================================
   6. HERO
   A full-viewport composition. .hero has no z-index on purpose:
   it must not form a stacking context, so its words can sit
   beneath the particle canvas while its small print sits above.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
}

/* Invisible anchor with the logo's own proportions. The engine forms
   the particle symbol inside it: ~44% of the hero's height. */
.hero__stage {
  position: absolute;
  left: 50%; top: 47%;
  width: min(60vw, 44svh * 150 / 110);
  aspect-ratio: 150 / 110;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.eyebrow {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  top: calc(env(safe-area-inset-top) + clamp(3.6rem, 7vh, 4.6rem));
  text-align: center;
  font-size: clamp(.58rem, .78vw, .72rem);
  font-weight: 600;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .84);
}
.eyebrow i { font-style: normal; color: var(--gold); opacity: .8; padding: 0 .3em 0 .1em; }

/* ---------- architectural typography ---------- */
.hero__words {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: 0;
  pointer-events: none;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.4rem, 9.4vw, 11rem);
  line-height: .86;
  letter-spacing: -.012em;
  will-change: transform;
}
.word { position: absolute; display: block; }
/* the inner span carries the entrance; the outer one takes the parallax */
.word > span {
  display: block;
  padding: .06em .04em .12em;
  background: linear-gradient(180deg, #f7f2e9 0%, #ece3d2 62%, #d8cbb3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the italic words carry the brand's warmth — champagne, never bright gold */
.word em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.02em;
}
.word--business > span,
.word--vision > span {
  background-image: linear-gradient(180deg, #f1e3c4 0%, #dcc394 70%, #c7aa76 100%);
}

/* asymmetric, staggered — architecture around the symbol, not a heading */
.word--more     { left: var(--pad-x);  top: 10%; }
.word--business { right: var(--pad-x); top: 19%; text-align: right; }
.word--one      { left: var(--pad-x);  bottom: 17%; }
.word--vision   { right: var(--pad-x); bottom: 8%; text-align: right; }

/* ---------- small print ---------- */
.hero__foot {
  position: absolute;
  z-index: 5;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: calc(env(safe-area-inset-bottom) + clamp(1.3rem, 3.2vh, 2.2rem));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.places {
  font-size: clamp(.86rem, 1vw, .96rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .92);
}
.places i { font-style: normal; color: var(--gold); opacity: .75; padding: 0 .2em; }

.hero__line {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(.86rem, 1vw, .96rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .92);
}
.hero__line i {
  display: block;
  width: clamp(28px, 3.4vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 178, 116, 0), var(--gold));
}

/* ============================================================
   7. ENTRANCE — the words and small print arrive only once the
   logo has formed: the last layer of the hierarchy
   ============================================================ */
.js .stagger,
.js .word > span { opacity: 0; }

.is-ready .stagger {
  animation: rise 1.4s var(--ease) both;
  animation-delay: var(--d, 0s);
}
.is-ready .word > span {
  animation: word-in 2.4s var(--ease) both;
  animation-delay: var(--wd, 0s);
}
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes word-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(1.025); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .word--business { top: 17%; }
  .word--one      { bottom: 18%; }
}

/* Phone — its own composition: the words pair up above and below
   the symbol, which fills the width between them. */
@media (max-width: 720px) {
  .nav__links { display: none; }
  .burger { display: block; }

  .eyebrow { font-size: .54rem; letter-spacing: .28em; }

  .hero__stage { top: 48%; width: min(90vw, 40svh * 150 / 110); }

  .hero__words { font-size: clamp(3.2rem, 17vw, 5rem); }
  .word--more     { top: 12%; }
  .word--business { top: calc(12% + .84em); }
  .word--one      { bottom: calc(13% + .84em); }
  .word--vision   { bottom: 13%; }

  .hero__foot .places { display: none; }
  .hero__foot { justify-content: flex-end; }
  .hero__line { font-size: .8rem; letter-spacing: .14em; gap: .7rem; }

  /* the room is smaller on a phone: fewer, quieter planes */
  .space__haze { display: none; }
}

/* short landscape screens */
@media (max-height: 620px) and (min-width: 721px) {
  .hero__words { font-size: clamp(2.6rem, 6.4vw, 6rem); }
  .hero__stage { width: min(50vw, 48svh * 150 / 110); }
}

/* Desktop only — phones and the 768 tablet keep their own composition.
   The four words follow the sketch: More with business tucked beneath it,
   business starting under the "ore"; One above vision on the right, the
   One on the same line as business, the e of One over the v of vision. */
@media (min-width: 861px) {
  .word--more     { top: 15%; left: calc(var(--pad-x) - .03em + 2px); }
  .word--business { top: calc(15% + .86em); left: calc(var(--pad-x) + .95em); right: auto; text-align: left; }
  .word--one      { top: calc(15% + .86em); bottom: auto; left: auto; right: calc(var(--pad-x) + 1.66em); }
  .word--vision   { top: calc(15% + 1.36em); bottom: auto; }
}

/* ============================================================
   9. REDUCED MOTION — the formation is kept, the drama is not
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .is-ready .stagger,
  .is-ready .word > span { animation: fade 1s ease both; animation-delay: var(--d, var(--wd, 0s)); }
  .space__mass, .space__light { animation: none; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ============================================================
   10. THE GROUP
   The second chapter of the same world. The symbol arrives here
   on the canvas; this file only lays out the type around it.

   Every element opens on --gp (group progress, written by the
   engine from scroll): --s is where it starts, --e how long it
   takes. No transitions — the scroll itself is the easing.
   ============================================================ */

.group {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding:
    clamp(6rem, 13vh, 9rem) var(--pad-x)
    clamp(7rem, 15vh, 10rem);
}

.js .group__text > *,
.js .gnode,
.js .group__foot {
  opacity: clamp(0, calc((var(--gp) - var(--s)) / var(--e)), 1);
  transform: translateY(calc(22px * (1 - clamp(0, (var(--gp) - var(--s)) / var(--e), 1))));
}
/* the diagram's labels only fade in: they hold their place beside the
   diagram rather than rising into it with the scroll */
.js .gnode { transform: none; }

.group__text {
  position: relative;
  z-index: 5;
  max-width: 34rem;
}

/* 01 ─── THE GROUP */
.glabel {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: .58rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--dim);
}
.glabel span { color: var(--white); }
.glabel i {
  display: block;
  width: clamp(34px, 4vw, 62px);
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 178, 116, .7), rgba(217, 178, 116, .1));
}

.group__title {
  margin: clamp(1.4rem, 3vh, 2.2rem) 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.9rem, 5.6vw, 5.4rem);
  line-height: .94;
  letter-spacing: -.012em;
  color: var(--white);
}
.group__title em {
  display: inline-block;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #f1e3c4 0%, #dcc394 70%, #c7aa76 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 .06em .08em 0;
}

.group__eyebrow {
  margin-top: clamp(1.4rem, 3vh, 2rem);
  font-size: clamp(.62rem, .82vw, .74rem);
  line-height: 2;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .78);
}

.group__copy {
  margin-top: clamp(1.3rem, 2.6vh, 1.9rem);
  max-width: 30rem;
  font-size: clamp(.92rem, 1.08vw, 1.02rem);
  line-height: 1.85;
  color: var(--dim);
}

/* ○ EXPLORE OUR BUSINESSES */
.gcta {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: clamp(2rem, 4.5vh, 3.2rem);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--white);
}
.gcta__ring {
  position: relative;
  display: block;
  width: clamp(48px, 4vw, 62px);
  aspect-ratio: 1;
  border: 1px solid rgba(217, 178, 116, .4);
  border-radius: 50%;
  transition: border-color .7s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease);
}
.gcta__ring::before,
.gcta__ring::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--gold);
  transition: background .7s var(--ease);
}
.gcta__ring::before { width: 9px; height: 1px; transform: translate(-50%, -50%); }
.gcta__ring::after  { width: 1px; height: 9px; transform: translate(-50%, -50%); }
.gcta:hover .gcta__ring {
  border-color: rgba(233, 205, 153, .85);
  transform: scale(1.06);
  box-shadow: 0 0 26px rgba(217, 178, 116, .14);
}
.gcta:hover .gcta__ring::before,
.gcta:hover .gcta__ring::after { background: #f3e2bd; }

/* ---------- the compass ---------- */
.group__stage {
  position: relative;
  z-index: 5;
  justify-self: center;
  width: min(100%, 64vh, 660px);
  aspect-ratio: 1;
  pointer-events: none;
}

.gnodes { position: absolute; inset: 0; }
.gnode {
  position: absolute;
  font-size: clamp(.8rem, .95vw, .92rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .94);
  white-space: nowrap;
}
/* each label arrives with its own triangle, in the light's order */
.gnode--right  { --s: .62; --e: .05; }   /* D, where the light starts */
.gnode--top    { --s: .70; --e: .05; }   /* A */
.gnode--left   { --s: .79; --e: .05; }   /* B */
.gnode--bottom { --s: .88; --e: .05; }   /* C */

/* positioned with `translate`, not `transform`: the reveal above owns
   transform, and these two properties compose instead of clobbering */
/* Each label sits the same small step beyond the outer point of its
   triangle. The triangles' outer points lie 8.83% in from each edge of the
   stage (ring 0.72 x logo 0.47, plus the triangle's own radius). */
.gnode--top    { top: 8.83%;  left: 50%; translate: -50% calc(-100% - .85em); }
.gnode--bottom { top: 91.17%; left: 50%; translate: -50% .85em; }
.gnode--left   { top: 50%; right: 91.17%; translate: -.85em -50%; }
.gnode--right  { top: 50%; left: 91.17%; translate: .85em -50%; }
/* the small point of light beside the two side labels, as in the reference */
.gnode--left::after,
.gnode--right::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin: 0 0 2px .8em;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(217, 178, 116, .8);
}
.gnode--right::before { margin: 0 .8em 2px 0; }

/* ---------- the closing line ---------- */
.group__foot {
  position: absolute;
  z-index: 5;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(2.4rem, 6vh, 4rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: clamp(1.4rem, 3vh, 2rem);
  border-top: 1px solid rgba(241, 235, 225, .07);
}
.facts { display: flex; gap: clamp(2rem, 5vw, 5rem); }
.facts li { display: grid; gap: .5rem; }
.facts b {
  position: relative;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  line-height: 1;
  color: var(--white);
}
.facts b::after {
  content: "";
  position: absolute;
  top: 50%; left: calc(100% + .7rem);
  width: clamp(26px, 3vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 178, 116, .5), rgba(217, 178, 116, 0));
}
.facts span {
  font-size: clamp(.86rem, 1vw, .96rem);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .78);
}
.group__foot .places { text-align: right; }

/* ============================================================
   THE GROUP — responsive
   ============================================================ */
@media (max-width: 1080px) {
  .group { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
  .group__stage { width: min(100%, 60vh, 560px); }
}

/* stacked: text first, then the compass with room to breathe */
@media (max-width: 860px) {
  .group {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: clamp(3rem, 8vh, 5rem);
    padding-bottom: clamp(9rem, 20vh, 12rem);
  }
  .group__text { max-width: 100%; }
  .group__stage {
    justify-self: center;
    width: min(92vw, 460px);
  }
  .group__foot { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .group__foot .places { text-align: left; }
}

@media (max-width: 720px) {
  .group { padding-top: clamp(5rem, 11vh, 7rem); }
  .group__title { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .group__eyebrow { font-size: .6rem; letter-spacing: .24em; line-height: 1.9; }
  .group__copy { font-size: .92rem; }
  .gnode { font-size: .78rem; letter-spacing: .12em; }
  .facts { gap: 1.6rem; }
  .facts b { font-size: 1.6rem; }
  .facts b::after { display: none; }
  .facts { flex-wrap: wrap; row-gap: 1rem; }
  .facts span { font-size: .72rem; letter-spacing: .06em; }
}

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

/* the nav gains a soft backdrop once the page moves, so content
   passing beneath it never collides with the wordmark */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -44px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 6, 8, .94) 0%, rgba(6, 6, 8, .62) 52%, rgba(6, 6, 8, 0) 100%);
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.nav.is-scrolled::before { opacity: 1; }

/* ============================================================
   11. THE BUSINESSES — one line, four destinations
   The line itself is SVG, built from this layout by the engine
   (js/main.js, section 10): #bizOrigin under the identity and one
   .dest__node above each destination are the only fixed points,
   so the curves follow whatever the type does.

   Nothing here is scroll-bound. The section opens on .is-in and
   the four destinations arrive together on .is-lit, both set by
   the engine's viewport trigger.
   ============================================================ */
.biz {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding:
    clamp(2.8rem, 6vh, 5.5rem) var(--pad-x)
    clamp(2.2rem, 4vh, 3.4rem);
}

/* the floor the whole composition stands on: one pool of warm light
   and the far edge of an ellipse, both almost out of sight */
.biz__floor {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 5vh, 4rem);
  width: min(150%, 1700px);
  aspect-ratio: 5 / 2;
  translate: -50% 0;
  border-radius: 50%;
  border: 1px solid rgba(217, 178, 116, .07);
  background: radial-gradient(60% 46% at 50% 62%, rgba(214, 170, 106, .05) 0%, rgba(214, 170, 106, 0) 70%);
  -webkit-mask-image: radial-gradient(64% 74% at 50% 50%, #000 0%, #000 42%, transparent 82%);
  mask-image: radial-gradient(64% 74% at 50% 50%, #000 0%, #000 42%, transparent 82%);
  pointer-events: none;
}

.biz__net {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ---------- the head: editorial left, identity centre, note right ---------- */
.biz__head {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.biz__lead { max-width: 32rem; }

.biz__title {
  margin: clamp(1.2rem, 2.6vh, 2rem) 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  line-height: .96;
  letter-spacing: -.012em;
  color: var(--white);
}
.biz__title em {
  display: inline-block;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #f1e3c4 0%, #dcc394 70%, #c7aa76 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 .06em .08em 0;
}

.biz__copy {
  margin-top: clamp(1.2rem, 2.6vh, 1.8rem);
  font-size: clamp(.86rem, 1vw, .96rem);
  line-height: 1.95;
  color: var(--dim);
}

/* the identity — the particle symbol settles inside .biz__stage */
.biz__id {
  justify-self: center;
  width: clamp(132px, 15vw, 208px);
  text-align: center;
}
.biz__eyebrow {
  font-size: .5rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--faint);
}
.biz__stage {
  width: 100%;
  aspect-ratio: 150 / 110;
  margin-top: clamp(.6rem, 1.6vh, 1.1rem);
}
.biz__wordmark {
  margin-top: clamp(.4rem, 1.2vh, .9rem);
  font-size: .56rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .8);
}
/* the single point the whole line system grows from */
.biz__origin {
  display: block;
  width: 1px;
  height: 1px;
  margin: clamp(1.1rem, 2.6vh, 2rem) auto 0;
}

.biz__note {
  justify-self: end;
  max-width: 15rem;
  font-size: .54rem;
  line-height: 2.4;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .7);
}
.biz__note i {
  display: block;
  width: clamp(34px, 4vw, 62px);
  height: 1px;
  margin-bottom: clamp(.8rem, 2vh, 1.3rem);
  background: linear-gradient(90deg, rgba(217, 178, 116, .7), rgba(217, 178, 116, .1));
}

/* ---------- the four destinations ---------- */
.dests {
  position: relative;
  z-index: 4;
  /* takes the room left between the identity and the closing line, so
     the surfaces below reach the floor */
  flex: 1 1 auto;
  padding-top: clamp(2.2rem, 6.5vh, 7rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 2.2vw, 2.6rem);
}

.dest {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.25rem, 3.6vh, 2.6rem);
}
/* the endpoint the branch travels to — measured, never drawn */
.dest__node {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 1px;
}

.dest__index {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .56rem;
  letter-spacing: .3em;
  color: var(--dim);
}
.dest__index i {
  display: block;
  flex: 1;
  max-width: clamp(28px, 4vw, 58px);
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 178, 116, .55), rgba(217, 178, 116, .05));
}

.dest__name {
  margin: clamp(.9rem, 2vh, 1.4rem) 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.02rem, 1.45vw, 1.42rem);
  line-height: 1.32;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--white);
}

.dest__what {
  margin-top: clamp(.8rem, 1.8vh, 1.2rem);
  /* three lines are reserved whether or not they are used, so the
     four destinations read as one row */
  min-height: 4.8em;
  font-size: clamp(.86rem, 1vw, .96rem);
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .8);
}

.dest__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.1rem, 2.6vh, 1.8rem);
  font-size: .54rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .78);
  transition: color .6s var(--ease);
}
.dest__arrow {
  position: relative;
  display: block;
  width: clamp(34px, 2.8vw, 42px);
  aspect-ratio: 1;
  border: 1px solid rgba(217, 178, 116, .34);
  border-radius: 50%;
  transition: border-color .7s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease);
}
.dest__arrow::before,
.dest__arrow::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transition: background .7s var(--ease), border-color .7s var(--ease);
}
.dest__arrow::before {
  width: 11px; height: 1px;
  background: var(--gold);
  transform: translate(-50%, -50%);
}
.dest__arrow::after {
  width: 5px; height: 5px;
  border: 1px solid var(--gold);
  border-left: 0; border-bottom: 0;
  transform: translate(-92%, -50%) rotate(45deg);
}
.dest:hover .dest__cta { color: var(--white); }
.dest:hover .dest__arrow {
  border-color: rgba(233, 205, 153, .85);
  transform: scale(1.06);
  box-shadow: 0 0 24px rgba(217, 178, 116, .13);
}
.dest:hover .dest__arrow::before { background: #f3e2bd; }
.dest:hover .dest__arrow::after { border-color: #f3e2bd; }

/* the surface each destination stands on — a place for its
   photography once we have it, and until then simply a dark plane
   catching a little of the same warm light */
.dest__plate {
  position: relative;
  display: block;
  flex: 1;
  /* tall enough on every desktop screen for its logo to read */
  min-height: clamp(120px, 18vh, 210px);
  margin-top: clamp(1.1rem, 2.8vh, 2rem);
  background:
    linear-gradient(180deg, rgba(241, 235, 225, .05) 0%, rgba(241, 235, 225, .008) 22%, rgba(6, 6, 8, 0) 64%),
    radial-gradient(130% 56% at 50% 100%, rgba(214, 170, 106, .06) 0%, rgba(214, 170, 106, 0) 72%),
    linear-gradient(168deg, rgba(19, 18, 21, .62) 0%, rgba(9, 9, 11, .3) 62%);
  border-top: 1px solid rgba(217, 178, 116, .18);
  transition: border-color .8s var(--ease);
}
.dest__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(168deg, rgba(241, 235, 225, .035) 0%, rgba(241, 235, 225, 0) 38%);
}
.dest:hover .dest__plate { border-top-color: rgba(233, 205, 153, .5); }
/* each destination's own mark, centred on its surface and scaled to fit it */
.dest__logo {
  position: absolute;
  z-index: 1;
  left: 10%;
  top: 14%;
  width: 80%;
  height: 72%;
  object-fit: contain;
}
/* the desktop surfaces are wide and short: the logo takes more of their height */
@media (min-width: 861px) {
  .dest__logo { top: 9%; height: 82%; }
}

/* ---------- the closing line ---------- */
.biz__foot {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(1.4rem, 3.4vh, 2.6rem);
}
.biz__tag {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: clamp(.86rem, 1vw, .96rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .92);
}
.biz__tag i {
  display: block;
  width: clamp(34px, 5vw, 70px);
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 178, 116, .1), rgba(217, 178, 116, .7));
}

/* ---------- the reveal: position, not scroll ---------- */
.js .biz__lead > *,
.js .biz__id > *,
.js .biz__note,
.js .biz__foot > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .biz.is-in .biz__lead > *,
.js .biz.is-in .biz__id > *,
.js .biz.is-in .biz__note,
.js .biz.is-in .biz__foot > * {
  opacity: 1;
  transform: none;
}
.js .biz__lead > :nth-child(2) { --d: .1s; }
.js .biz__lead > :nth-child(3) { --d: .2s; }
.js .biz__note { --d: .26s; }
.js .biz__foot > * { --d: .34s; }

/* the destinations wait for the four lights to arrive, then come
   together — the stagger is barely there on purpose */
.js .dest {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
.js .biz.is-lit .dest {
  opacity: 1;
  transform: none;
}

/* ---------- the line itself ---------- */
.biz__net .ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* three layers instead of one thick stroke: bloom, glow, core */
.biz__net .ln--bloom { stroke: rgba(212, 166, 100, .055); stroke-width: 6; }
.biz__net .ln--glow  { stroke: rgba(228, 190, 128, .13);  stroke-width: 2.2; }
.biz__net .ln--core  { stroke: rgba(246, 228, 190, .62);  stroke-width: 1; }
.biz__net .ln { transition: stroke .7s var(--ease); }

/* hovering a destination lifts its own branch, and only its own */
.biz__net .arm--hot .ln--bloom { stroke: rgba(222, 178, 110, .1); }
.biz__net .arm--hot .ln--glow  { stroke: rgba(236, 202, 146, .22); }
.biz__net .arm--hot .ln--core  { stroke: rgba(252, 240, 214, .9); }
.biz__net .dot--hot .dot__halo { opacity: .85; animation: none; }
.biz__net .dot--hot .dot__core { fill: #fff6e4; }

.biz__net .dot__halo { opacity: 0; transition: opacity .9s var(--ease); }
.biz__net .dot__core { fill: #f7e7c8; }

@media (prefers-reduced-motion: no-preference) {
  /* once lit, each endpoint keeps the faintest pulse of life */
  .biz.is-seen .biz__net .dot--on:not(.dot--hot) .dot__halo { animation: dot-breathe 7s var(--ease) infinite; }
}
@keyframes dot-breathe {
  0%, 100% { opacity: .4; }
  50%      { opacity: .64; }
}

/* ---------- THE BUSINESSES — responsive ---------- */
@media (max-width: 1080px) {
  /* the note goes, but its column stays: the identity has to keep
     the centre of the composition */
  .biz__note { visibility: hidden; }
  .dests { padding-top: clamp(2rem, 5.5vh, 5.5rem); gap: clamp(.8rem, 1.8vw, 1.6rem); }
  .dest__name { letter-spacing: .05em; }
}

/* phone and small tablet: the line becomes a vertical spine and the
   four destinations stack along it */
@media (max-width: 860px) {
  .biz {
    padding-top: clamp(4rem, 9vh, 6rem);
    padding-bottom: clamp(3.5rem, 8vh, 5rem);
  }
  .biz__head {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: clamp(1.6rem, 4vh, 2.6rem);
  }
  .biz__id { justify-self: center; width: clamp(120px, 34vw, 170px); }
  .biz__stage { margin-top: clamp(1.2rem, 3.5vh, 2.4rem); }

  /* Everything framing the logo stands above it here, so it all opens
     as the logo comes into the section rather than waiting for the
     line: the same reveal and the same stagger, started earlier. */
  .js .biz.is-near .biz__lead > *,
  .js .biz.is-near .biz__id > * {
    opacity: 1;
    transform: none;
  }
  .biz__title { font-size: clamp(2.3rem, 9vw, 3.4rem); }

  .dests {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: clamp(3.5rem, 9vh, 6rem);
    padding-left: clamp(2.6rem, 10vw, 4.5rem);
  }
  .dest {
    padding-top: clamp(2rem, 4.5vh, 2.8rem);
    padding-bottom: clamp(2rem, 4.5vh, 2.8rem);
  }
  .dest__node { left: calc(-1 * clamp(2.6rem, 10vw, 4.5rem) + clamp(1.1rem, 4.4vw, 2rem)); }
  .dest__name { font-size: clamp(1.05rem, 4.6vw, 1.35rem); }
  .dest__what { min-height: 0; }
  .dest__plate {
    min-height: clamp(110px, 24vh, 190px);
    margin-top: clamp(1.2rem, 3vh, 1.8rem);
  }
  .biz__foot { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .biz__floor { bottom: 0; width: 190%; }
}

@media (max-width: 720px) {
  .dest__what { line-height: 2.1; min-height: 0; }
  .biz__wordmark { letter-spacing: .34em; }
}

/* ============================================================
   12. THE JOURNEY — from an idea to something real
   Typography only. The path and its five glowing moments are the
   particle system (js/main.js): this file places the five
   .jn__node anchors the path is measured through, and the words
   beside them.

   Nothing here is scroll-bound. The head opens on .is-in when the
   section arrives; the five moments open on .is-lit, set once the
   particles have become the path.
   ============================================================ */
.jny {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  min-height: 100svh;
  padding:
    clamp(4rem, 11vh, 7.5rem) var(--pad-x)
    clamp(3rem, 8vh, 5rem);
}

.jny__head {
  position: relative;
  z-index: 4;
  max-width: 34rem;
}

.jny__title {
  margin: clamp(1.2rem, 2.6vh, 2rem) 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
  line-height: .96;
  letter-spacing: -.012em;
  color: var(--white);
}
.jny__title em {
  display: inline-block;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #f1e3c4 0%, #dcc394 70%, #c7aa76 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 .06em .08em 0;
}

.jny__copy {
  margin-top: clamp(1.2rem, 2.6vh, 1.8rem);
  font-size: clamp(.86rem, 1vw, .96rem);
  line-height: 1.95;
  color: var(--dim);
}

/* the stage the path is measured in: the whole section on desktop,
   so the route can rise into the open space beside the headline */
.jny__stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.jns { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

/* each moment is a point; its words hang off it */
.jn {
  position: absolute;
  left: var(--jx);
  top: var(--jy);
  width: 0;
  height: 0;
}
.jn__node {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
}

/* a gently rising route with one soft dip: IDEA low on the left,
   NEXT high on the right */
.jn:nth-child(1) { --jx: 10%; --jy: 82%; --i: 0; }
.jn:nth-child(2) { --jx: 31%; --jy: 62%; --i: 1; }
.jn:nth-child(3) { --jx: 51%; --jy: 72%; --i: 2; }
.jn:nth-child(4) { --jx: 71%; --jy: 46%; --i: 3; }
.jn:nth-child(5) { --jx: 88%; --jy: 24%; --i: 4; }

.jn__txt {
  position: absolute;
  left: clamp(.9rem, 1.4vw, 1.4rem);
  width: max-content;
  max-width: 17rem;
}
.jn--below .jn__txt { top: clamp(1rem, 2.2vh, 1.6rem); }
.jn--above .jn__txt { bottom: clamp(1rem, 2.2vh, 1.6rem); }
/* the last moment sits near the edge: its words lead into it instead */
.jn--end .jn__txt {
  left: auto;
  right: clamp(.9rem, 1.4vw, 1.4rem);
  text-align: right;
}

.jn__index {
  font-size: .54rem;
  letter-spacing: .3em;
  color: var(--dim);
}
.jn__name {
  margin: .5rem 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.9vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
}
.jn__what {
  margin-top: .5rem;
  font-size: clamp(.86rem, 1vw, .96rem);
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .8);
}

/* ---------- the reveal: position and particles, never scroll ---------- */
.js .jny__head > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
.js .jny__head > :nth-child(2) { transition-delay: .1s; }
.js .jny__head > :nth-child(3) { transition-delay: .2s; }
.js .jny.is-in .jny__head > * { opacity: 1; transform: none; }

.js .jn__txt {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.4s var(--ease), transform 1.6s var(--ease);
  transition-delay: calc(var(--i) * 80ms);
}
.js .jny.is-lit .jn__txt { opacity: 1; transform: none; }

/* ---------- THE JOURNEY — responsive ---------- */
@media (max-width: 1080px) {
  .jn:nth-child(1) { --jx: 9%;  --jy: 84%; }
  .jn:nth-child(2) { --jx: 29%; --jy: 64%; }
  .jn:nth-child(3) { --jx: 50%; --jy: 76%; }
  .jn:nth-child(4) { --jx: 70%; --jy: 52%; }
  .jn:nth-child(5) { --jx: 87%; --jy: 30%; }
  .jn__txt { max-width: 13rem; }
}

/* phone and small tablet: the journey runs down the page, the path
   weaving gently on the left and each moment reading beside it */
@media (max-width: 860px) {
  .jny { padding-bottom: clamp(3rem, 8vh, 4.5rem); }
  .jny__title { font-size: clamp(2.3rem, 9vw, 3.4rem); }

  .jny__stage {
    position: relative;
    inset: auto;
    height: clamp(720px, 150vw, 980px);
    margin-top: clamp(2.5rem, 6vh, 3.5rem);
  }
  .jn:nth-child(1) { --jx: 10%; --jy: 7%; }
  .jn:nth-child(2) { --jx: 19%; --jy: 29%; }
  .jn:nth-child(3) { --jx: 8%;  --jy: 51%; }
  .jn:nth-child(4) { --jx: 20%; --jy: 72%; }
  .jn:nth-child(5) { --jx: 11%; --jy: 93%; }

  /* each moment spans the stage, with its node moved along it, so the
     words can share one column to the right of the whole path */
  .jn { left: 0; width: 100%; }
  .jn__node { left: var(--jx); }
  .jn__txt,
  .jn--end .jn__txt {
    top: 0;
    bottom: auto;
    right: auto;
    left: 34%;
    transform: translateY(-50%);
    text-align: left;
    max-width: 62%;
  }
  .js .jn__txt { transform: translateY(calc(-50% + 8px)); }
  .js .jny.is-lit .jn__txt { transform: translateY(-50%); }

  /* read one by one down the page, the moments open as the path's
     stage comes into view rather than waiting for it to light */
  .js .jny.is-near .jn__txt { opacity: 1; transform: translateY(-50%); }
}

/* ============================================================
   13. CONTACT — movement dissolves into falling light
   The falling field is the particle system itself (js/main.js);
   this file only sets the words, the form and the footer over it.
   Everything sits above the canvas, so the light passes behind
   the type, never across it.

   Nothing here is scroll-bound: the section opens on .is-in when
   it arrives, and the form opens only when asked for.
   ============================================================ */
.ctc {
  position: relative;
  z-index: 5;
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding:
    clamp(5rem, 12vh, 8rem) var(--pad-x)
    clamp(1.4rem, 3vh, 2.2rem);
}

/* a faint warmth from above, where the light seems to fall from */
.ctc__haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 46% at 50% 0%, rgba(214, 170, 106, .1) 0%, rgba(214, 170, 106, 0) 72%),
    radial-gradient(70% 40% at 50% 100%, rgba(214, 170, 106, .035) 0%, rgba(214, 170, 106, 0) 70%);
}

.ctc__grid {
  position: relative;
  z-index: 4;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 6rem);
}

/* ---------- the words ---------- */
.ctc__lead { position: relative; max-width: 36rem; }
/* the light falls behind the words a little more quietly */
.ctc__lead::before {
  content: "";
  position: absolute;
  inset: -18% -30% -18% -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(6, 6, 8, .5), rgba(6, 6, 8, 0));
}

.ctc__title {
  margin: clamp(1.3rem, 3vh, 2.2rem) 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.7rem, 5.2vw, 5.4rem);
  line-height: 1;
  letter-spacing: .005em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f6ecda 0%, #e6d2ab 58%, #c9ab77 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .06em;
}

.ctc__copy {
  margin-top: clamp(1.4rem, 3vh, 2rem);
  font-size: clamp(.84rem, 1vw, .95rem);
  line-height: 2;
  letter-spacing: .12em;
  color: rgba(241, 235, 225, .8);
}

.ctc__open {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.ctc__mail {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
  padding-bottom: .35rem;
  font-size: .78rem;
  letter-spacing: .16em;
  color: var(--white);
  border-bottom: 1px solid rgba(217, 178, 116, .3);
  transition: border-color .6s var(--ease), color .6s var(--ease);
}
.ctc__mail:hover { color: #f3e2bd; border-bottom-color: rgba(233, 205, 153, .8); }
.ctc__lead .ctc__places { display: block; margin-top: 1.1rem; }

/* ---------- the conversation ---------- */
.ctc__eyebrow {
  font-size: clamp(.72rem, .9vw, .84rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .88);
}

.ctc__panel {
  position: relative;
  margin-top: clamp(1rem, 2.4vh, 1.5rem);
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  border: 1px solid rgba(217, 178, 116, .16);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(20, 19, 22, .6) 0%, rgba(9, 9, 11, .72) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(241, 235, 225, .04);
}

/* closed: a single quiet line and an invitation */
.ctc__closed {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .9s var(--ease), opacity .6s var(--ease);
}
.ctc__closed-in {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.ctc__invite {
  font-size: .86rem;
  line-height: 1.7;
  color: var(--dim);
}
.ctc__begin {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem 1.1rem;
  background: none;
  border: 1px solid rgba(217, 178, 116, .45);
  border-radius: 2px;
  font-family: inherit;
  font-size: .56rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #f3e2bd;
  cursor: pointer;
  transition: border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.ctc__begin:hover { border-color: rgba(233, 205, 153, .9); box-shadow: 0 0 22px rgba(217, 178, 116, .12); }

/* the arrow shared by both buttons */
.ctc__begin i,
.ctc__send i {
  position: relative;
  display: block;
  width: 13px;
  height: 1px;
  background: currentColor;
}
.ctc__begin i::after,
.ctc__send i::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 5px; height: 5px;
  border: 1px solid currentColor;
  border-left: 0; border-bottom: 0;
  transform: translateY(-50%) rotate(45deg);
}

/* open: the form unfolds, field by field */
.ctc__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s var(--ease);
}
.ctc__form {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 1s;
}
.ctc__form > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}

.ctc__panel[data-open="true"] .ctc__closed { grid-template-rows: 0fr; opacity: 0; }
.ctc__panel[data-open="true"] .ctc__reveal { grid-template-rows: 1fr; }
.ctc__panel[data-open="true"] .ctc__form { visibility: visible; transition: visibility 0s; }
.ctc__panel[data-open="true"] .ctc__form > * {
  opacity: 1;
  transform: none;
  transition-delay: calc(.3s + var(--f, 0) * 70ms);
}

.fld {
  position: relative;
  display: block;
}
.fld + .fld { margin-top: .7rem; }
.fld input,
.fld textarea {
  display: block;
  width: 100%;
  padding: 1.45rem .95rem .55rem;
  background: rgba(6, 6, 8, .38);
  border: 1px solid rgba(241, 235, 225, .1);
  border-radius: 2px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: .9rem;
  color: var(--white);
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.fld textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.fld input:hover,
.fld textarea:hover { border-color: rgba(241, 235, 225, .2); }
.fld input:focus,
.fld textarea:focus {
  outline: none;
  border-color: rgba(217, 178, 116, .6);
  background: rgba(10, 10, 12, .5);
  box-shadow: inset 0 0 0 1px rgba(217, 178, 116, .14), inset 0 0 26px rgba(217, 178, 116, .05);
}

/* the label rests inside the field and lifts once it is used */
.fld span {
  position: absolute;
  left: .95rem;
  top: 1.02rem;
  font-size: .8rem;
  color: var(--dim);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .45s var(--ease), color .45s var(--ease), letter-spacing .45s var(--ease);
}
.fld span em { font-style: normal; color: var(--faint); }
.fld input:focus + span,
.fld input:not(:placeholder-shown) + span,
.fld textarea:focus + span,
.fld textarea:not(:placeholder-shown) + span {
  transform: translateY(-.62rem) scale(.72);
  letter-spacing: .14em;
  color: var(--gold);
}

.ctc__send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .95rem;
  width: 100%;
  margin-top: 1.1rem;
  padding: 1.05rem 1rem;
  background: rgba(217, 178, 116, .04);
  border: 1px solid rgba(217, 178, 116, .62);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #f3e2bd;
  cursor: pointer;
  transition: background .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.ctc__send:hover {
  background: rgba(217, 178, 116, .08);
  border-color: rgba(233, 205, 153, .95);
  box-shadow: 0 0 30px rgba(217, 178, 116, .12);
}
.ctc__note:empty { display: none; }
.ctc__note {
  margin-top: .9rem;
  font-size: .74rem;
  line-height: 1.7;
  color: rgba(241, 235, 225, .72);
}

/* sending: the button quietens and its arrow drifts while the request is out */
.ctc__form[aria-busy="true"] .ctc__send { cursor: progress; opacity: .72; }
.ctc__form[aria-busy="true"] .ctc__send:hover {
  background: rgba(217, 178, 116, .04);
  border-color: rgba(217, 178, 116, .62);
  box-shadow: none;
}
.ctc__form[aria-busy="true"] .ctc__send i { animation: ctc-sending 1.4s var(--ease) infinite; }
@keyframes ctc-sending {
  0%, 100% { transform: translateX(-3px); opacity: .4; }
  50%      { transform: translateX(3px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ctc__form[aria-busy="true"] .ctc__send i { animation: none; }
}

/* not sent: the words say so, marked by a hairline of the gold */
.ctc__note.is-error {
  padding-left: .8rem;
  border-left: 1px solid rgba(217, 178, 116, .7);
  color: rgba(241, 235, 225, .9);
}

/* received: the fields give way to a quiet thank-you in the same panel */
.ctc__form.is-sent > :not(.ctc__done) { display: none; }
.ctc__done { padding-block: clamp(.2rem, .8vw, .6rem); }
.ctc__done:focus { outline: none; }
.ctc__done .ctc__eyebrow { color: #f3e2bd; }
.ctc__done .ctc__invite { margin-top: .85rem; }
.ctc__done .ctc__again { margin-top: 1.4rem; }

/* ---------- the footer ---------- */
.foot {
  position: relative;
  z-index: 4;
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-top: clamp(1.3rem, 3vh, 1.8rem);
  border-top: 1px solid rgba(241, 235, 225, .08);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.foot__brand { display: inline-grid; justify-items: center; line-height: 1; }
.foot__name,
.foot__sub {
  font-family: "Break", var(--serif);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  margin-right: -.14em;
}
.foot__name { color: var(--gold); }
.foot__sub { margin-top: .35rem; color: #c9cdd3; }

.foot__biz {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.foot__biz li {
  padding: .35rem clamp(.9rem, 1.8vw, 1.8rem);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .7);
  border-left: 1px solid rgba(241, 235, 225, .1);
}
.foot__biz li:last-child { border-right: 1px solid rgba(241, 235, 225, .1); }

.foot__end {
  display: grid;
  justify-items: end;
  gap: .7rem;
}
.foot__social { display: flex; gap: 1.1rem; }
.foot__social a {
  display: block;
  width: 18px;
  height: 18px;
  color: rgba(241, 235, 225, .62);
  transition: color .5s var(--ease);
}
.foot__social a:hover { color: var(--gold); }
.foot__social svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.foot__copy {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(241, 235, 225, .7);
}

/* ---------- the reveal: position, never scroll ---------- */
.js .ctc__lead > *,
.js .ctc__talk,
.js .foot {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
.js .ctc__lead > :nth-child(2) { transition-delay: .1s; }
.js .ctc__lead > :nth-child(3) { transition-delay: .2s; }
.js .ctc__lead > :nth-child(n+4) { transition-delay: .28s; }
.js .ctc__talk { transition-delay: .24s; }
.js .foot { transition-delay: .36s; }
.js .ctc.is-in .ctc__lead > *,
.js .ctc.is-in .ctc__talk,
.js .ctc.is-in .foot { opacity: 1; transform: none; }

/* ---------- CONTACT — responsive ---------- */
@media (max-width: 1080px) {
  .ctc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); gap: clamp(2rem, 5vw, 4rem); }
  .foot { grid-template-columns: auto minmax(0, 1fr); }
  .foot__end { grid-column: 1 / -1; grid-template-columns: auto auto auto; justify-content: space-between; align-items: center; justify-items: start; }
}

@media (max-width: 860px) {
  .ctc { padding-top: clamp(4rem, 9vh, 6rem); }
  .ctc__grid { grid-template-columns: 1fr; align-items: start; gap: clamp(2.6rem, 6vh, 3.4rem); }
  .ctc__title { font-size: clamp(2.5rem, 11vw, 3.8rem); }
  /* the quiet behind the words stays inside the screen */
  .ctc__lead::before { inset: -12% 0 -12% -6%; }
  /* a blurred surface over moving light is costly on a phone: a
     deeper, solid-feeling glass instead */
  .ctc__panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(180deg, rgba(16, 15, 18, .9) 0%, rgba(9, 9, 11, .94) 100%);
  }
  .ctc__closed-in { flex-direction: column; align-items: flex-start; }

  .foot { grid-template-columns: 1fr; justify-items: start; gap: 1.5rem; }
  .foot__biz { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .foot__biz li,
  .foot__biz li:last-child { padding: .3rem 0; border: 0; }
  .foot__end { grid-column: auto; grid-template-columns: 1fr; justify-items: start; }
}

/* ============================================================
   14. FINAL POLISH
   ============================================================ */

/* Contact: placeholder details beneath the conversation */
.ctc__info {
  margin: clamp(1.6rem, 3.6vh, 2.3rem) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 2rem;
}
.ctc__info div { min-width: 0; }
.ctc__info dt {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.ctc__info dd {
  margin: .4rem 0 0;
  font-size: clamp(.8rem, .95vw, .9rem);
  letter-spacing: .04em;
  color: rgba(241, 235, 225, .84);
  overflow-wrap: anywhere;
}
.ctc__info dd a { color: inherit; transition: color .4s var(--ease); }
.ctc__info dd a:hover { color: #f3e2bd; }

/* phones: no room beyond the Group's side triangles, so their labels sit
   centred just above them; a soft dark edge keeps the ring line from
   passing through the letters */
@media (max-width: 560px) {
  .gnode { text-shadow: 0 0 12px rgba(6, 6, 8, .95), 0 0 4px rgba(6, 6, 8, .9); }
  .gnode--left  { right: auto; left: 16.16%; top: 43.65%; translate: -50% calc(-100% - .55em); }
  .gnode--right { left: 83.84%; top: 43.65%; translate: -50% calc(-100% - .55em); }
  .ctc__info { grid-template-columns: 1fr; }
}

/* phones: the room holds still. Its slow drifts are imperceptible there
   but ask the compositor to repaint large blurred layers every frame. */
@media (max-width: 860px) {
  .space__mass,
  .space__light { animation: none; }
}

/* two-column Group between 861 and 1220: the diagram's column is too narrow
   for the side labels to sit beyond their triangles, so, as on phones, they
   sit centred just above them */
@media (min-width: 861px) and (max-width: 1220px) {
  .gnode { text-shadow: 0 0 12px rgba(6, 6, 8, .95), 0 0 4px rgba(6, 6, 8, .9); }
  .gnode--left  { right: auto; left: 16.16%; top: 43.65%; translate: -50% calc(-100% - .55em); }
  .gnode--right { left: 83.84%; top: 43.65%; translate: -50% calc(-100% - .55em); }
}

/* ============================================================
   15. ACCESSIBILITY & NO-SCRIPT FALLBACKS
   Nothing here changes the page as it is seen with scripts running.
   ============================================================ */

/* text for search engines and screen readers that the visuals already say */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* keyboard users can jump past the navigation; unseen until focused */
.skip-link {
  position: fixed;
  z-index: 10;
  left: 1rem;
  top: 1rem;
  padding: .7rem 1.1rem;
  background: var(--ink);
  color: var(--white);
  border: 1px solid rgba(217, 178, 116, .5);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* links that are not live yet */
[role="link"][aria-disabled="true"] { cursor: default; }

.foot__biz a { transition: color .4s var(--ease); }
.foot__biz a:hover { color: #f3e2bd; }

/* without scripts (or if the engine never loads) the page is plain,
   fully readable HTML: it scrolls, nothing waits on the opening, and
   the contact form is simply open */
html:not(.js) body.is-loading { overflow: visible; height: auto; }
html:not(.js) .loader { display: none; }
html:not(.js) .ctc__closed { display: none; }
html:not(.js) .ctc__reveal { grid-template-rows: 1fr; }
html:not(.js) .ctc__form { visibility: visible; transition: none; }
html:not(.js) .ctc__form > * { opacity: 1; transform: none; }