/* ==========================================================================
   Marble Consulting Group — editorial layer
   Handcrafted section archetypes: grid-breaking, image treatments, galleries,
   timelines, quote cards, cinematic bands. Built on the tokens in main.css.
   Every section is meant to compose differently — this is a kit, not a template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Media frames — the shared, cinematically-graded image treatment
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--obsidian-raised);
  isolation: isolate;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
}

/* Consistent grade + legibility scrim, applied to every placeholder */
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 6, 8, 0.12) 0%, rgba(6, 6, 8, 0) 30%, rgba(6, 6, 8, 0.06) 60%, rgba(6, 6, 8, 0.78) 100%),
    radial-gradient(120% 80% at 80% 10%, rgba(156, 120, 72, 0.10), transparent 60%);
  mix-blend-mode: normal;
}

.media--plain::after { background: linear-gradient(180deg, transparent 55%, rgba(6, 6, 8, 0.6)); }
.media--flat img { transform: none; }

.media:hover img { transform: scale(1.05); }

/* aspect variants */
.media--wide   { aspect-ratio: 16 / 9; }
.media--video  { aspect-ratio: 16 / 10; }
.media--photo  { aspect-ratio: 3 / 2; }
.media--tall   { aspect-ratio: 4 / 5; }
.media--port   { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1 / 1; }
.media--pano   { aspect-ratio: 21 / 9; }

/* gold hairline frame inset */
.media--frame::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  z-index: 2;
  border: 1px solid rgba(192, 156, 96, 0.28);
  border-radius: 2px;
  pointer-events: none;
}

.media__sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(192, 156, 96, 0.14) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 1s var(--ease-out);
}
.media:hover .media__sheen { transform: translateX(120%); }

/* caption / label sitting on the image */
.media__cap {
  position: absolute;
  left: 1.5rem;
  bottom: 1.35rem;
  right: 1.5rem;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.media__cap .eyebrow { margin-bottom: 0; }

.media__tag {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.6rem);
  color: var(--white);
  line-height: 1.2;
}

/* tiny "placeholder" honesty marker, unobtrusive */
.media__ph {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 4;
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 232, 230, 0.55);
  background: rgba(6, 6, 8, 0.45);
  border: 1px solid rgba(232, 232, 230, 0.14);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Cinematic full-bleed band
   -------------------------------------------------------------------------- */

.cine {
  position: relative;
  min-height: clamp(30rem, 70vh, 46rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.cine__bg {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
}
.cine__bg img { width: 100%; height: 100%; object-fit: cover; }

.cine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 6, 8, 0.55) 0%, rgba(6, 6, 8, 0.2) 35%, rgba(6, 6, 8, 0.65) 78%, var(--obsidian) 100%),
    radial-gradient(100% 60% at 15% 100%, rgba(6,6,8,0.7), transparent 60%);
}

.cine__inner {
  position: relative;
  padding-block: clamp(1.74rem, 1.16rem + 3.48vw, 4.06rem);
  max-width: 52rem;
}

.cine__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 4vw, 4.75rem);
  line-height: 1.04;
  color: var(--white);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.cine__title em { font-style: italic; color: var(--gold-light); }

.cine--tall { min-height: clamp(34rem, 86vh, 54rem); align-items: center; }

/* --------------------------------------------------------------------------
   Editorial split — asymmetric, with an overlapping copy card
   -------------------------------------------------------------------------- */

.ed {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(1.08rem, 0.72rem + 2.88vw, 3.6rem);
}
.ed--flip { grid-template-columns: 0.85fr 1.15fr; }
.ed--flip .ed__media { order: 2; }

.ed__copy { position: relative; z-index: 2; }
.ed--overlap .ed__copy {
  margin-left: -6rem;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  background: linear-gradient(160deg, rgba(16,16,22,0.92), rgba(10,10,14,0.92));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
}
.ed--flip.ed--overlap .ed__copy { margin-left: 0; margin-right: -6rem; }

@media (max-width: 900px) {
  .ed, .ed--flip { grid-template-columns: 1fr; }
  .ed--flip .ed__media { order: 0; }
  .ed--overlap .ed__copy,
  .ed--flip.ed--overlap .ed__copy { margin: -3rem 1rem 0; }
}

/* offset double-image stack */
.stackmedia { position: relative; padding: 0 2rem 3rem 0; }
.stackmedia__a { position: relative; z-index: 1; }
.stackmedia__b {
  position: absolute;
  right: 0; bottom: 0;
  width: 52%;
  z-index: 2;
  border: 4px solid var(--obsidian);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.8);
}
@media (max-width: 560px){ .stackmedia__b{ width: 46%; } }

/* --------------------------------------------------------------------------
   Big background typography (ghost words behind a section)
   -------------------------------------------------------------------------- */

.bgword {
  position: absolute;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.01em;
  font-size: clamp(6rem, 18vw, 20rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(156, 120, 72, 0.10);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* scrolling marquee strip */
.marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-neutral);
  border-bottom: 1px solid var(--border-neutral);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  /* no ground of its own: the site has ONE, and it is fixed. See .ground. */
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-run 34s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  color: var(--ink);
}
.marquee__track b { color: var(--gold-light); font-weight: 500; }
.marquee__track i {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  margin: 0 0.5rem;
  vertical-align: middle;
}
@keyframes marquee-run { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   Industries — asymmetric image grid with hover reveal
   -------------------------------------------------------------------------- */

.indus {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
.indus__cell { position: relative; grid-column: span 2; }
.indus__cell--lg { grid-column: span 3; }
.indus__cell--wide { grid-column: span 4; }

.indus__link { display: block; position: relative; }
.indus .media { aspect-ratio: 4 / 5; }
.indus__cell--lg .media,
.indus__cell--wide .media { aspect-ratio: 16 / 11; }

.indus__label {
  position: absolute;
  left: 1.25rem; bottom: 1.1rem; right: 1.25rem;
  z-index: 4;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem;
}
.indus__label h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.9rem);
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
}
.indus__label span { font-size: var(--text-sm); color: var(--gold-light); }
.indus__cell .media img { filter: saturate(0.9) brightness(0.9); }
.indus__cell:hover .media img { filter: saturate(1) brightness(1); }

@media (max-width: 900px) {
  .indus { grid-template-columns: repeat(2, 1fr); }
  .indus__cell, .indus__cell--lg, .indus__cell--wide { grid-column: span 1; }
  .indus__cell--wide { grid-column: span 2; }
}

/* --------------------------------------------------------------------------
   Horizontal scroll rail (culture / gallery)
   -------------------------------------------------------------------------- */

.railwrap { position: relative; overflow: hidden; }
.rail {
  display: flex;
  gap: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
  padding-inline: var(--gutter);
  will-change: transform;
}
/* no-JS / reduced-motion fallback: native horizontal scroll */
.rail--scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
.rail__item {
  flex: 0 0 clamp(17rem, 32vw, 26rem);
  scroll-snap-align: start;
}
.rail__item .media { aspect-ratio: 3 / 4; }
.rail__item p { margin-top: 0.85rem; color: var(--vein); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   Timeline (story / career path)
   -------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------
   Testimonial / quote cards (honest placeholder framing)
   -------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------
   Leadership / profile
   -------------------------------------------------------------------------- */

.profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem,1rem+1.5vw,2rem); }
.profile { position: relative; }
.profile .media { aspect-ratio: 4 / 5; margin-bottom: 1.1rem; }
.profile img { filter: grayscale(0.35) saturate(0.85); }
.profile:hover img { filter: grayscale(0) saturate(1); }
.profile h3 { font-family: var(--font-sans); font-size: 1.2rem; font-weight: 600; color: var(--white); }
.profile__role { color: var(--gold); font-size: var(--text-sm); letter-spacing: 0.08em; margin-top: 0.15rem; }
.profile__bio { color: var(--vein); font-size: 0.95rem; margin-top: 0.6rem; }
@media (max-width: 820px){ .profiles{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .profiles{ grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Process flow (visual steps with connectors)
   -------------------------------------------------------------------------- */

.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.flow__step { position: relative; padding: clamp(1.5rem,1.2rem+1vw,2.25rem) clamp(1rem,0.8rem+1vw,1.75rem); border-left: 1px solid var(--border-neutral); }
.flow__step:first-child { border-left: none; }
.flow__ico { width: 2.75rem; height: 2.75rem; border: 1px solid var(--border-gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); margin-bottom: 1.25rem; }
.flow__ico svg { width: 1.25rem; height: 1.25rem; }
.flow__n { font-size: var(--text-xs); letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-bottom: 0.5rem; }
.flow__step h3 { font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; color: var(--white); margin-bottom: 0.5rem; }
.flow__step p { color: var(--vein); font-size: 0.95rem; }
@media (max-width: 900px){ .flow{ grid-template-columns: 1fr 1fr; } .flow__step:nth-child(3){border-left:none;} .flow__step:nth-child(n+3){border-top:1px solid var(--border-neutral);} }
@media (max-width: 520px){ .flow{ grid-template-columns: 1fr; } .flow__step{ border-left:none; border-top:1px solid var(--border-neutral);} .flow__step:first-child{border-top:none;} }

/* --------------------------------------------------------------------------
   Big number feature rows
   -------------------------------------------------------------------------- */

.bignum { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: clamp(1.5rem,1rem+3vw,4rem); align-items: center; padding: clamp(2rem,1.5rem+2vw,3.5rem) 0; border-top: 1px solid var(--border-neutral); }
.bignum:last-child { border-bottom: 1px solid var(--border-neutral); }
.bignum__v { font-family: var(--font-display); font-size: clamp(3rem,2rem+4vw,6rem); line-height: 0.95; color: var(--gold-light); }
.bignum__k { color: var(--vein); font-size: var(--text-lg); max-width: 36rem; }
.bignum__k b { color: var(--ink); font-weight: 500; }
@media (max-width: 640px){ .bignum{ grid-template-columns: 1fr; gap: 0.75rem; } }

/* --------------------------------------------------------------------------
   Section headers — a few distinct rhythms so pages don't repeat
   -------------------------------------------------------------------------- */

.shead--wide { max-width: 60rem; }
.shead--split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,1rem+3vw,4rem); align-items: end; }
.shead--split .shead__lead { color: var(--vein); font-size: var(--text-lg); }
@media (max-width: 820px){ .shead--split{ grid-template-columns: 1fr; } }

.kicker-lg {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  font-style: italic;
  color: var(--gold-light);
  line-height: 1.4;
  max-width: 44rem;
}

/* --------------------------------------------------------------------------
   Two-audience split (brands / people)
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Reveal helpers used by the editorial layer
   -------------------------------------------------------------------------- */

.reveal-img .media img { clip-path: inset(0 0 0 0); }
.up { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--reveal-delay, 0s); }
.up.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Home hero — asymmetric type + cinematic media
   -------------------------------------------------------------------------- */

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(1.44rem, 0.72rem + 2.88vw, 3.6rem);
  align-items: center;
  width: 100%;
}
.hero--home .hero__content { max-width: none; }
.hero__media { position: relative; }
.hero__media .media { aspect-ratio: 4 / 5; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.85); }
.hero__media--float { transform: translateY(0); }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { display: none; }
}

/* eyebrow that reads on top of imagery */
.eyebrow--light { color: var(--ink); }
.eyebrow--light::before { background: linear-gradient(90deg, transparent, var(--ink)); }

/* section index number tag */
.snum {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--gold-shadow);
  letter-spacing: 0.1em;
}

/* generic full-width section that carries its own dark ground */
.slab { position: relative; overflow: hidden; }
.slab--raise {
  /* no ground of its own: the site has ONE, and it is fixed. See .ground. */ border-block: 1px solid var(--border-neutral); }

/* legal content inside accordion panels */
.accordion__content ul { margin-top: 0.75rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.accordion__content li { color: var(--vein); line-height: 1.7; }
.accordion__content li::marker { color: var(--gold); }
.accordion__content h4 { color: var(--ink); font-family: var(--font-sans); font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.4rem; }
.accordion__content a { color: var(--gold-light); }
.policy-accordion .accordion__trigger { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); }
.policy-accordion .accordion__item { scroll-margin-top: 4.16rem; }

/* Policy — readable legal parts with an engraved number */
.legal__part + .legal__part { margin-top: clamp(2.24rem, 1.92rem + 1.92vw, 3.84rem); }
.legal__parthead {
  display: flex; gap: clamp(1rem, 0.8rem + 1vw, 1.6rem); align-items: baseline;
  padding-bottom: var(--space-3); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-gold); scroll-margin-top: 4.16rem;
}
.legal__partnum {
  font-family: var(--font-display); font-weight: 500; line-height: 1;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  color: rgba(192, 156, 96, 0.4);
  -webkit-text-stroke: 1px var(--gold-shadow);
}
.legal__body h2.legal__parttitle {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-h2); line-height: 1.02; color: var(--white);
  margin: 0 0 0.35rem;
}
.legal__part section { scroll-margin-top: 4.16rem; }
.legal__part section + section { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.legal__part section h3 {
  font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600;
  color: var(--white); margin-bottom: 0.7rem; scroll-margin-top: 4.16rem;
}
.legal__nav-title + ol { margin-bottom: var(--space-4); }
.legal__chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.85rem; border: 1px solid var(--border-gold);
  border-radius: 999px; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light);
  background: var(--gold-wash);
}

/* ==========================================================================
   Nav dropdown — "Policy" opens THE LEGAL DRAWER.

   Not a glass card: a machined obsidian plate, tethered to the trigger by a
   drawn gold hairline (the same tether grammar as `.stop`), carrying the
   premium-container DNA the numbers strip once used — brushed surface, a
   1px gold gradient ring, a bespoke asymmetric corner silhouette, a
   one-shot light sweep on
   open and a cursor-tracked gold spotlight.

   ONE state rule drives everything. `.nav__has-sub` publishes three custom
   properties (--o openness 0..1, --vis, --pe) and every descendant reads
   them, so the open state is declared once and the no-JS hover/focus
   fallback costs two extra selectors instead of a duplicated stylesheet.
   `html.has-js-nav` is set by main.js: with JS present, main.js owns hover
   so `aria-expanded` can never drift out of sync with what is on screen.
   ========================================================================== */

.nav__has-sub { position: relative; --o: 0; --vis: hidden; --pe: none; }

.nav__has-sub.is-open,
html:not(.has-js-nav) .nav__has-sub:hover,
html:not(.has-js-nav) .nav__has-sub:focus-within { --o: 1; --vis: visible; --pe: auto; }

.nav__sub-trigger { display: inline-flex; align-items: center; gap: 0.42rem; }
.nav__has-sub.is-open > .nav__sub-trigger,
html:not(.has-js-nav) .nav__has-sub:hover > .nav__sub-trigger { color: var(--gold-light); }
.nav__chev {
  width: 0.7rem; height: 0.7rem; color: var(--gold);
  transform: rotate(calc(var(--o) * 180deg));
  transition: transform 0.42s var(--ease-out), color 0.3s ease;
}
/* active state when on a policy page */
.nav__has-sub:has(.nav__subitem[aria-current="page"]) .nav__sub-trigger { color: var(--white); }

/* the wrapper only positions and fades; the plate inside is the object */
.nav__submenu {
  position: absolute;
  top: calc(100% + 1.35rem);   /* clears the pill; the bridge below spans it */
  left: 50%;
  width: 24rem;
  transform: translateX(-50%);
  opacity: var(--o);
  visibility: var(--vis);
  pointer-events: var(--pe);
  /* visibility flips INSTANTLY on open (delay 0) and only after the fade on
     close (delay 0.34s). A plain `visibility 0.34s` leaves the drawer still
     computing as hidden for the frame the class lands on, and a synchronous
     items[0].focus() from the keyboard handler is then silently dropped. */
  transition: opacity 0.34s var(--ease-out),
    visibility 0s linear calc((1 - var(--o)) * 0.34s);
  z-index: 130;
}

/* the tether — an invisible hover bridge across the gap, carrying a gold
   hairline that draws downward from the trigger and lands on the plate */
.nav__sub-bridge { position: absolute; top: -1.5rem; left: 0; right: 0; height: 1.6rem; }
.nav__sub-bridge i {
  position: absolute; left: 50%; top: 0.15rem; bottom: -1px; width: 1px;
  background: linear-gradient(180deg, rgba(192, 156, 96, 0), rgba(192, 156, 96, 0.85));
  transform: translateX(-50%) scaleY(var(--o));
  transform-origin: 50% 0;
  transition: transform 0.45s var(--ease-out);
  transition-delay: calc(var(--o) * 0.04s);
}
.nav__sub-bridge i::after {
  content: ""; position: absolute; left: 50%; bottom: -2px;
  width: 3px; height: 3px; background: var(--gold-light);
  transform: translateX(-50%) rotate(45deg);
}

/* ---- the plate ---------------------------------------------------------- */
.nav__sub-panel {
  position: relative;
  isolation: isolate;
  padding: 0.7rem 0.7rem 0.55rem;
  border-radius: 4px 18px 4px 18px;
  background-color: rgba(8, 8, 12, 0.945);
  background-image:
    /* the footer hairline row can land on the hero's giant white display
       type; this seats it without flattening the glass across the plate */
    linear-gradient(0deg, rgb(34 31 27 / 0.55), rgb(34 31 27 / 0) 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.012) 0 2px, rgba(255, 255, 255, 0) 2px 7px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='sn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.85 0 0 0 0 0.72 0 0 0 0 0.5 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sn)'/%3E%3C/svg%3E");
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow:
    0 38px 80px -30px rgba(0, 0, 0, 0.92),
    0 10px 26px -16px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(calc((1 - var(--o)) * -14px)) scale(calc(0.965 + 0.035 * var(--o)));
  transform-origin: 50% 0;
  transition: transform 0.46s var(--ease-out);
}

/* 1px gold gradient ring (mask-composite, so the fill stays transparent) */
.nav__sub-panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(155deg,
    rgba(244, 220, 164, 0.6), rgba(156, 120, 72, 0.16) 34%,
    rgba(156, 120, 72, 0.12) 64%, rgba(192, 156, 96, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* one-shot light sweep the moment the drawer opens */
.nav__sub-panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(112deg, transparent 30%, rgba(244, 220, 164, 0.15) 48%, transparent 66%);
  background-size: 230% 100%;
  background-position: 150% 0;
}
.nav__has-sub.is-open .nav__sub-panel::after,
html:not(.has-js-nav) .nav__has-sub:hover .nav__sub-panel::after {
  animation: nav-sub-sweep 1.05s var(--ease-out) 0.14s both;
}
@keyframes nav-sub-sweep {
  0% { opacity: 0; background-position: 150% 0; }
  20% { opacity: 1; }
  100% { opacity: 0; background-position: -70% 0; }
}

/* cursor-tracked gold spotlight (main.js writes --smx / --smy) */
.nav__sub-glow {
  position: absolute; inset: 0; border-radius: inherit;
  z-index: 0; pointer-events: none;
  background: radial-gradient(13rem 9rem at var(--smx, 50%) var(--smy, 0%),
    rgba(192, 156, 96, 0.17), rgba(192, 156, 96, 0) 72%);
  opacity: 0; transition: opacity 0.5s ease;
}
.nav__sub-panel:hover .nav__sub-glow { opacity: 1; }

/* ---- the drawer's contents ---------------------------------------------- */
.nav__sub-eyebrow,
.nav__subitem,
.nav__sub-foot {
  opacity: var(--o);
  transform: translateY(calc((1 - var(--o)) * 8px));
}

.nav__sub-eyebrow {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.2rem 0.4rem 0.6rem;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
  transition-delay: calc(var(--o) * 0.07s);
}
.nav__sub-eyebrow i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(156, 120, 72, 0.45), transparent); }

.nav__subitem {
  position: relative; z-index: 1; overflow: hidden;
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem 0.7rem 0.72rem;
  border-radius: 3px 12px 3px 12px;
  color: var(--ink);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out),
    background-color 0.3s ease, color 0.3s ease;
}
.nav__subitem:nth-of-type(1) { transition-delay: calc(var(--o) * 0.13s); }
.nav__subitem:nth-of-type(2) { transition-delay: calc(var(--o) * 0.2s); }
.nav__subitem + .nav__subitem { margin-top: 0.12rem; }

/* the gold marker that grows down the left edge */
.nav__subitem::before {
  content: ""; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 2px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-shadow));
  transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform 0.36s var(--ease-out);
}
/* a reflection that sweeps the row on hover */
.nav__subitem::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(244, 220, 164, 0.11) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform 0.9s var(--ease-out);
}

.nav__subitem:hover,
.nav__subitem:focus-visible { background-color: rgba(156, 120, 72, 0.1); color: var(--white); transform: translateX(3px); }
.nav__subitem:hover::after { transform: translateX(130%); }
.nav__subitem:hover::before,
.nav__subitem:focus-visible::before,
.nav__subitem[aria-current="page"]::before { transform: scaleY(1); }
.nav__subitem[aria-current="page"] { background-color: rgba(156, 120, 72, 0.11); color: var(--white); }

.nav__subitem__n {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: rgba(156, 120, 72, 0.6);
  transition: color 0.3s ease;
}
.nav__subitem:hover .nav__subitem__n,
.nav__subitem[aria-current="page"] .nav__subitem__n { color: var(--gold-light); }

.nav__subicon {
  width: 2.3rem; height: 2.3rem; flex: none;
  display: grid; place-items: center;
  color: var(--gold-light);
  border-radius: 2px 10px 2px 10px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 62%), rgba(156, 120, 72, 0.06);
  box-shadow: inset 0 0 0 1px rgba(156, 120, 72, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: box-shadow 0.34s ease, background 0.34s ease, transform 0.45s var(--ease-out);
}
.nav__subitem:hover .nav__subicon,
.nav__subitem[aria-current="page"] .nav__subicon {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 62%), rgba(156, 120, 72, 0.14);
  box-shadow: inset 0 0 0 1px rgba(192, 156, 96, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 7px 18px -11px rgba(192, 156, 96, 0.7);
}
.nav__subitem:hover .nav__subicon { transform: translateY(-1px); }
.nav__subicon svg { width: 1.05rem; height: 1.05rem; }

.nav__subitem__txt b {
  display: block; font-family: var(--font-sans);
  font-size: 0.94rem; font-weight: 600; color: inherit;
  letter-spacing: 0; line-height: 1.25;
}
.nav__subitem__txt small {
  display: block; font-size: 0.765rem; line-height: 1.35;
  color: var(--vein); margin-top: 0.16rem;
  transition: color 0.3s ease;
}
.nav__subitem:hover .nav__subitem__txt small { color: #a8a8a5; }

.nav__subitem__go {
  width: 0.9rem; height: 0.9rem; color: var(--gold);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.38s var(--ease-out);
}
.nav__subitem:hover .nav__subitem__go,
.nav__subitem:focus-visible .nav__subitem__go,
.nav__subitem[aria-current="page"] .nav__subitem__go { opacity: 1; transform: none; color: var(--gold-light); }

.nav__sub-foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin: 0.45rem 0.15rem 0;
  padding: 0.6rem 0.6rem 0.15rem;
  border-top: 1px solid rgba(156, 120, 72, 0.15);
  font-size: 0.755rem; color: #9d9d9a;
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out), color 0.3s ease;
  transition-delay: calc(var(--o) * 0.27s);
}
.nav__sub-foot b { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; color: var(--gold-light); transition: color 0.3s ease; }
.nav__sub-foot b::after { content: "→"; transition: transform 0.36s var(--ease-out); }
.nav__sub-foot:hover { color: var(--ink); }
.nav__sub-foot:hover b { color: #f0d9a6; }
.nav__sub-foot:hover b::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .nav__submenu,
  .nav__sub-panel,
  .nav__sub-bridge i,
  .nav__sub-eyebrow,
  .nav__subitem,
  .nav__subitem::after,
  .nav__sub-foot { transition-duration: 0.01ms; transition-delay: 0s; }
  .nav__sub-panel { transform: none; }
  .nav__sub-panel::after { animation: none; }
}

/* mobile menu: the drawer flattens into an inline typographic list */
@media (max-width: 1020px) {
  .nav__has-sub { --o: 1; --vis: visible; --pe: auto; }
  .nav__submenu {
    position: static; width: auto; transform: none;
    margin: 0.9rem 0 0 1.15rem;
  }
  .nav__sub-bridge { display: none; }
  .nav__sub-panel {
    padding: 0 0 0 1.05rem;
    border-radius: 0;
    background: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
    transform: none;
    border-left: 1px solid rgba(156, 120, 72, 0.24);
  }
  .nav__sub-panel::before,
  .nav__sub-panel::after,
  .nav__sub-glow { display: none; }
  .nav__sub-eyebrow { margin: 0 0 0.7rem; }
  .nav__subicon,
  .nav__subitem__go,
  .nav__subitem::before,
  .nav__subitem::after { display: none; }
  .nav__subitem {
    grid-template-columns: auto 1fr; gap: 0.7rem;
    padding: 0.42rem 0; border-radius: 0; overflow: visible;
  }
  .nav__subitem:hover,
  .nav__subitem:focus-visible,
  .nav__subitem[aria-current="page"] { background: none; transform: none; }
  .nav__subitem__n { align-self: start; margin-top: 0.5rem; }
  .nav__subitem__txt b {
    font-family: var(--font-display); font-size: 1.32rem; font-weight: 500;
    color: var(--vein); transition: color 0.3s ease;
  }
  .nav__subitem:hover .nav__subitem__txt b,
  .nav__subitem[aria-current="page"] .nav__subitem__txt b { color: var(--gold-light); }
  .nav__subitem__txt small { font-size: 0.78rem; }
  .nav__sub-foot { display: none; }
  .nav__chev { display: none; }
  .nav__sub-trigger { pointer-events: none; }
}

/* ==========================================================================
   The process — floating 3D marble step-plates on a perspective stage.
   Beveled gold edges, layered depth (translateZ parallax), cursor tilt.
   ========================================================================== */

.steps3d {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.step3d-cell { perspective: 1050px; }

.step3d {
  position: relative;
  display: flex; flex-direction: column;
  min-height: clamp(17rem, 13rem + 9vw, 21rem);
  padding: clamp(1.6rem, 1.3rem + 1.2vw, 2.35rem);
  border-radius: 9px;
  background:
    radial-gradient(120% 82% at 86% 0%, rgba(156, 120, 72, 0.12), transparent 55%),
    linear-gradient(158deg, #1c1c23 0%, var(--surface) 62%, #100f14 100%);
  box-shadow:
    inset 0 1px 0 rgba(244, 220, 164, 0.16),
    inset 0 0 0 1px rgba(156, 120, 72, 0.08),
    0 34px 55px -34px rgba(0, 0, 0, 0.92);
  transform-style: preserve-3d;
  transition: transform 0.32s var(--ease-out), box-shadow 0.4s ease;
  will-change: transform;
}
.step3d::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(62% 48% at 50% 0%, rgba(192, 156, 96, 0.16), transparent 72%);
  opacity: 0; transition: opacity 0.4s ease;
}
.step3d-cell:hover .step3d {
  box-shadow:
    inset 0 1px 0 rgba(244, 220, 164, 0.3),
    inset 0 0 0 1px rgba(156, 120, 72, 0.24),
    0 46px 72px -34px rgba(0, 0, 0, 0.95),
    0 0 60px -20px rgba(156, 120, 72, 0.32);
}
.step3d-cell:hover .step3d::after { opacity: 1; }

.step3d__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.step3d__n {
  font-family: var(--font-display); font-weight: 500; line-height: 0.8;
  font-size: clamp(2.75rem, 2rem + 2.6vw, 4rem);
  color: rgba(232, 232, 230, 0.06);
  -webkit-text-stroke: 1px rgba(192, 156, 96, 0.5);
  transform: translateZ(40px);
  transition: color 0.4s ease, -webkit-text-stroke-color 0.4s ease;
}
.step3d-cell:hover .step3d__n { color: var(--gold-light); -webkit-text-stroke-color: transparent; }
.step3d__ico {
  width: 2.6rem; height: 2.6rem; flex: none;
  display: grid; place-items: center; color: var(--gold-light);
  border: 1px solid var(--border-gold); border-radius: 50%;
  transform: translateZ(32px);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.step3d__ico svg { width: 1.15rem; height: 1.15rem; }
.step3d-cell:hover .step3d__ico { border-color: var(--gold); background: rgba(156, 120, 72, 0.14); }
.step3d__body { margin-top: auto; padding-top: 1.75rem; transform: translateZ(20px); }
.step3d__tag { display: block; margin-bottom: 0.6rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.step3d__t { font-family: var(--font-sans); font-size: 1.2rem; font-weight: 600; color: var(--white); margin-bottom: 0.55rem; line-height: 1.25; }
.step3d__p { color: var(--vein); font-size: 0.98rem; line-height: 1.6; }

/* the fourth step — the differentiator, lit in gold */
.step3d--key {
  background:
    radial-gradient(130% 90% at 78% 0%, rgba(156, 120, 72, 0.26), transparent 56%),
    linear-gradient(158deg, #221d12 0%, #100c09 64%, #130f0b 100%);
  box-shadow:
    inset 0 1px 0 rgba(244, 220, 164, 0.32),
    inset 0 0 0 1px rgba(156, 120, 72, 0.28),
    0 40px 66px -34px rgba(0, 0, 0, 0.92),
    0 0 70px -26px rgba(156, 120, 72, 0.38);
}
.step3d--key .step3d__n { color: var(--gold-light); -webkit-text-stroke-color: transparent; }
.step3d--key .step3d__ico { border-color: var(--gold); background: rgba(156, 120, 72, 0.16); }

@media (max-width: 1000px) { .steps3d { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .steps3d { grid-template-columns: 1fr; }
  .step3d { min-height: 0; }
  .step3d-cell { perspective: none; }
  .step3d__n, .step3d__ico, .step3d__body { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .step3d { transition: box-shadow 0.4s ease; }
}

/* ==========================================================================
   The process — "the commission"

   Not four steps. One object, transforming, driven entirely by scroll.

   Scattered shards (a raw territory) -> a lattice assembles around them (the
   team) -> the solid resolves and a gold core ignites (the close) -> the core
   DETACHES and travels away, leaving the structure standing (you take it from
   here). The last beat is the handoff expressed as an object.

   The BASE styles below are a plain, readable four-item list that needs no
   JavaScript at all. `.is-live` - added by initForge only at >=901px with
   full motion - is what turns the block into the sticky scroll stage and
   moves the beats into their crossfading positions. Nothing is hidden until
   something is running that can bring it back.
   ========================================================================== */

.forge {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--section) 0;
  /* no ground of its own: the site has ONE, and it is fixed. See .ground. */
}

.forge__head {
  position: relative;
  z-index: 3;
  max-width: 48rem;
  /* The 48rem box sat flush left inside a 80rem container, so the heading read
     as left-of-centre rather than either properly left or properly centred.
     Centred here: the beats below are pinned left, so the header acts as the
     section's title card rather than the first item in the left column. */
  margin-inline: auto;
  text-align: center;
  /* The head sat in the middle of a screen of empty ground: the section's own
     top padding above it, and this gap below it before the first beat. Both
     are roughly halved - a heading needs air, not a paragraph of it. */
  margin-bottom: clamp(1.15rem, 0.95rem + 1.1vw, 1.85rem);
}
.forge__head .eyebrow { justify-content: center; }
.forge__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.forge__title em { font-style: italic; color: var(--gold-light); }

/* ---- base (no JS, reduced motion, and every width under 901px) ---- */
.forge__track { position: relative; }
.forge__stage { position: relative; }
.forge__canvas { display: none; }
.forge__fog,
.forge__vignette,
.forge__meter { display: none; }

.forge__beats {
  list-style: none;
  display: grid;
  gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  padding-bottom: var(--section);
}
.fbeat { position: relative; padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.fbeat__mark {
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.fbeat__tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
}
.fbeat__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.fbeat__p {
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--vein);
  max-width: 32rem;
}
.fbeat--last .fbeat__h { color: var(--gold-light); }

/* ==========================================================================
   LIVE — the sticky, scroll-driven stage
   ========================================================================== */

/* 340svh meant this one section held the viewport for 3.4 full screens of
   scrolling to deliver four short beats. 220svh gives each beat ~55svh,
   which is still a comfortable crossfade and returns 1.2 screens of scroll
   to the rest of the page. */
/* Was 220svh. Same transformation, less distance - see the note on
   .skyhero__track in editorial-2.css. */
.forge.is-live .forge__track { height: 150svh; }

.forge.is-live .forge__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.forge.is-live .forge__canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* volumetric haze sitting in front of the object, so the far side of the
   wireframe reads as further away rather than merely dimmer */
.forge.is-live .forge__fog {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(58% 54% at 52% 46%, rgba(128, 96, 48, 0.1), transparent 68%);
}
/* keeps the corners black so the stage reads as a room, not a panel */
.forge.is-live .forge__vignette {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(4, 4, 6, 0.72) 100%);
}

.forge.is-live .forge__hud {
  position: relative;
  z-index: 4;
  width: 100%;
  pointer-events: none;
}
.forge.is-live .forge__beats {
  display: block;
  padding-bottom: 0;
  max-width: 30rem;
}
/* All four beats occupy the same cell and are crossfaded by scroll. GSAP
   owns opacity and y here, so no start values are declared in CSS. */
.forge.is-live .fbeat {
  position: absolute;
  left: 0;
  /* Was top:50% - dead centre of a 100svh pinned stage, which put ~370px of
     empty ground between the section header and the first line of text. The
     beat only needs to clear the header, not sit in the middle of the screen. */
  top: 34%;
  width: min(30rem, 42vw);
  margin-top: -4rem;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.forge.is-live .fbeat__p { max-width: 26rem; }

/* scroll meter — a single hairline that fills as the object resolves */
.forge.is-live .forge__meter {
  display: block;
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(2rem, 5vh, 4rem);
  width: min(22rem, 40vw);
  height: 1px;
  background: rgba(156, 120, 72, 0.16);
  pointer-events: none;
}
.forge.is-live .forge__meter span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

@media (max-width: 1100px) {
  .forge.is-live .fbeat { width: min(26rem, 46vw); }
}

@media (prefers-reduced-motion: reduce) {
  .forge__canvas { display: none; }
}

/* ==========================================================================
   NAVBAR — floating luxury glass. Border-beam, light sheen, gold active dot,
   brushed-gold CTA with metallic sweep. Rolls-Royce-dashboard restraint.
   ========================================================================== */

@property --nav-beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* the wrapper only positions; the pill is the object */
.nav {
  top: 0;
  padding-inline: 0;
  background: none;
  backdrop-filter: none;
  border-bottom: none;
  pointer-events: none;
  transition: top 0.5s var(--ease-out), padding 0.5s var(--ease-out);
}
.nav.is-scrolled {
  top: clamp(0.85rem, 1.5vw, 1.7rem);
  padding-inline: clamp(0.9rem, 3vw, 2rem);
  background: none; backdrop-filter: none; border-bottom-color: transparent;
}
html.is-loading .nav { opacity: 1; }

/* full-width bar at the top of the page, floating glass pill once scrolled */
.nav__inner {
  position: relative;
  isolation: isolate;
  pointer-events: auto;
  width: 100%;
  max-width: clamp(90rem, 100vw, 200rem);
  margin-inline: auto;
  height: clamp(4.6rem, 4rem + 1.4vw, 5.35rem);
  padding-inline: max(var(--gutter), calc((100% - 80rem) / 2));
  border-radius: 0;
  border: 1px solid transparent;
  border-bottom-color: rgba(156, 120, 72, 0.12);
  background-color: rgba(10, 10, 14, 0.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='nn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.85 0 0 0 0 0.72 0 0 0 0 0.5 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nn)'/%3E%3C/svg%3E");
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: max-width 0.6s var(--ease-out), border-radius 0.6s var(--ease-out),
    height 0.45s var(--ease-out), padding 0.5s var(--ease-out),
    background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease,
    opacity 0.8s ease 0.1s, transform 0.8s var(--ease-out) 0.1s;
}
html.is-loading .nav__inner { opacity: 0; transform: translateY(-14px); }

/* stronger glass on scroll, subtly shorter */
.nav.is-scrolled .nav__inner {
  max-width: 90rem;
  height: clamp(4rem, 3.7rem + 0.7vw, 4.55rem);
  padding-inline: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  border-radius: 22px;
  border-color: rgba(156, 120, 72, 0.22);
  border-bottom-color: rgba(156, 120, 72, 0.22);
  background-color: rgba(9, 9, 13, 0.76);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* the gold border-beam is a signature of the floating pill only, not the full-width bar */
.nav:not(.is-scrolled) .nav__inner::before { opacity: 0; }

/* signature detail 1 — a gold beam that travels the border every ~9s */
.nav__inner::before {
  content: "";
  position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--nav-beam), transparent 0 76%, rgba(192,156,96,0.55) 86%, rgba(244,220,164,0.95) 91%, rgba(192,156,96,0.5) 95%, transparent 98%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: nav-beam 9s linear infinite;
  opacity: 0.9;
}
@keyframes nav-beam { to { --nav-beam: 360deg; } }

/* signature detail 2 — a soft light sheen drifts across the glass */
.nav__inner::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(244, 220, 164, 0.05) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 160% 0;
  animation: nav-sheen 11s ease-in-out infinite;
}
@keyframes nav-sheen { 0% { background-position: 160% 0; } 34%, 100% { background-position: -60% 0; } }

/* logo — presence + soft gold shimmer on hover, no rotation */
.wordmark__mono { filter: drop-shadow(0 2px 10px rgba(156, 120, 72, 0.28)); transition: filter 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.wordmark:hover .wordmark__mono { transform: translateY(-1px); filter: drop-shadow(0 3px 16px rgba(192, 156, 96, 0.55)) brightness(1.12); }
.wordmark__name { position: relative; background: linear-gradient(100deg, var(--white) 0%, var(--white) 40%, #f4dca4 50%, var(--white) 60%, var(--white) 100%); background-size: 250% 100%; background-position: 120% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 0.9s var(--ease-out); }
.wordmark:hover .wordmark__name { background-position: -40% 0; }

/* links — no default underline; center-grow on hover; gold color shift */
.nav__link { color: var(--ink); font-weight: 500; letter-spacing: 0.012em; padding: 0.55rem 0.1rem; transition: color 0.35s ease; }
.nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: 0.15rem;
  width: 0; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 8px rgba(192, 156, 96, 0.5);
  transition: width 0.4s var(--ease-out);
}
.nav__link:hover { color: var(--gold-light); }
.nav__link:hover::after,
.nav__link:focus-visible::after { width: 100%; transform: translateX(-50%); }

/* active — an elegant gold dot with a soft breathing glow (never an underline) */
.nav__link[aria-current="page"] { color: var(--white); }
.nav__link[aria-current="page"]::after { width: 0; }
.nav__link[aria-current="page"]::before {
  content: ""; position: absolute; left: 50%; bottom: -0.15rem;
  width: 5px; height: 5px; border-radius: 50%; transform: translateX(-50%);
  background: var(--gold-light);
  animation: nav-dot 3.4s ease-in-out infinite;
}
@keyframes nav-dot {
  0%, 100% { box-shadow: 0 0 7px 0 rgba(192, 156, 96, 0.5); opacity: 0.85; }
  50% { box-shadow: 0 0 13px 2px rgba(192, 156, 96, 0.85); opacity: 1; }
}

/* the Policy drawer's own block owns its offset (1.35rem clears the pill and
   is exactly what the .nav__sub-bridge hover bridge is sized to span) */

/* the contact footer belongs only to the mobile overlay */
.nav__menu-foot { display: none; }

/* CTA — brushed-gold pill with a metallic sweep */
.nav__cta {
  border: none;
  color: var(--obsidian);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(150deg, #f1d79d 0%, #cda76a 46%, #9c7848 100%);
  box-shadow: 0 8px 22px -10px rgba(156, 120, 72, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease, filter 0.4s ease;
}
.nav__cta:hover { color: var(--obsidian); transform: translateY(-1px) scale(1.025); box-shadow: 0 14px 30px -10px rgba(156, 120, 72, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.55); filter: brightness(1.03); }
.nav__cta::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.4) 50%, transparent 66%);
  transform: translateX(-135%);
  transition: transform 0.75s var(--ease-out);
}
.nav__cta:hover::after { transform: translateX(135%); }
.nav__cta > * { position: relative; z-index: 1; }
.nav__cta .btn__arrow { color: var(--obsidian); }

/* --------------------------------------------------------------------------
   Mobile fullscreen menu — editorial, with marble texture + contact
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  /* drop backdrop-filter so the fixed fullscreen menu escapes to the viewport
     (a backdrop-filter ancestor would otherwise be its containing block) */
  .nav__inner,
  .nav.is-scrolled .nav__inner { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__inner { background-color: rgba(10, 10, 14, 0.84); }
  .nav__menu { background: rgb(34 31 27 / 0.98); justify-content: flex-start; padding: 6.75rem var(--gutter) 2.75rem; overflow-y: auto; }
  .nav__links { gap: var(--space-2); }
  .nav__menu::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(50rem 34rem at 88% 6%, rgba(156, 120, 72, 0.12), transparent 60%),
      radial-gradient(40rem 30rem at 0% 100%, rgba(156, 120, 72, 0.06), transparent 62%);
  }
  .nav__menu::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='800'%3E%3Cdefs%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='4' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='60'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23w)' fill='none' stroke='%239c7848' stroke-opacity='0.4'%3E%3Cpath d='M120 -40 C 200 220 60 420 180 640 S 120 860 260 980' stroke-width='1'/%3E%3Cpath d='M340 -20 C 260 200 420 380 320 600 S 440 820 360 1000' stroke-width='0.7'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover; background-position: center;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent 85%); mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent 85%);
  }
  .nav__menu .nav__cta {
    align-self: flex-start;
    padding: 1rem 2rem;
    font-size: 1rem;
  }
  .nav__menu-foot {
    display: block;
    margin-top: var(--space-5);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease-out) 0.5s, transform 0.5s var(--ease-out) 0.5s;
  }
  .nav__menu.is-open .nav__menu-foot { opacity: 1; transform: none; }
  .nav__menu-foot p { font-size: var(--text-sm); color: var(--vein); line-height: 1.6; }
  .nav__menu-foot a { color: var(--gold-light); }
  .nav__menu-social { display: flex; gap: 1rem; margin-top: 1.25rem; }
  .nav__menu-social a { width: 2.5rem; height: 2.5rem; border: 1px solid var(--border-gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); transition: background 0.3s ease, border-color 0.3s ease; }
  .nav__menu-social a:hover { background: var(--gold-wash); border-color: var(--gold); }
  .nav__menu-social svg { width: 1.05rem; height: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__inner::before, .nav__inner::after { animation: none; }
  .nav__link[aria-current="page"]::before { animation: none; }
  html.is-loading .nav__inner { opacity: 1; transform: none; }
  .wordmark__name { background-position: 0 0; }
}


@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .up { opacity: 1; transform: none; }
  .media img, .media:hover img { transform: none; }
}

/* ==========================================================================
   CLEAN PASS — replace photographic media with crafted marble panels.
   The AI stock reads as cheap; this restores the calm, on-brand material look
   while keeping the page structure intact. All media frames become marble.
   ========================================================================== */

.media img,
.cine__bg { display: none !important; }
.media__ph { display: none !important; }

/* the contact map is the one iframe on the site and the only `.media` the
   clean pass must not paint over */
.media:has(iframe) { background: var(--obsidian-raised); }
.media:has(iframe)::after { background: none; }

.media {
  background-color: var(--obsidian-raised);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='520'%3E%3Cdefs%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='58'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23v)' fill='none' stroke='%239c7848'%3E%3Cpath d='M-40 430 C 100 350 190 390 300 285 S 430 165 470 120' stroke-width='1' opacity='0.42'/%3E%3Cpath d='M-20 170 C 90 205 175 150 290 195 S 410 265 450 245' stroke-width='0.7' opacity='0.3'/%3E%3Cpath d='M70 560 C 170 445 260 480 340 365 S 440 255 470 245' stroke-width='0.5' opacity='0.22'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(150% 130% at 12% -12%, rgba(156, 120, 72, 0.16), transparent 52%),
    linear-gradient(155deg, #15151b 0%, var(--obsidian-raised) 58%, #0d0c11 100%);
  background-size: cover, cover, cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* softer upward grade now there is no photo to darken */
.media::after {
  background:
    linear-gradient(180deg, transparent 52%, rgba(6, 6, 8, 0.5) 100%),
    radial-gradient(120% 80% at 85% 6%, rgba(192, 156, 96, 0.10), transparent 55%);
}

/* gentle per-panel variation so a grid of panels never reads as one tile */
.indus__cell:nth-child(2n) .media,
.rail__item:nth-child(2n) .media { background-position: right center; }
.indus__cell:nth-child(3n) .media,
.rail__item:nth-child(3n) .media { filter: brightness(1.05) hue-rotate(-6deg); }
.ed--flip .media { background-position: right center; }

/* the map keeps its own surface — no marble behind the iframe */

/* cinematic bands become a rich obsidian slab with a gold floor-glow */
.cine {
  background:
    radial-gradient(70% 60% at 18% 118%, rgba(156, 120, 72, 0.16), transparent 60%),
    linear-gradient(180deg, var(--obsidian-raised), var(--obsidian));
}
.cine::after { background: none; }

.hero__media .media { box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04); }

/* ==========================================================================
   Why brands choose Marble — editorial, non-boxy: oversized brushed-gold
   numerals separated by hairlines, with a sticky intro. No cards, no boxes.
   ========================================================================== */

.reasons {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2rem, 1.5rem + 3vw, 5rem);
  align-items: start;
}
.reasons__lead { margin-top: 1.25rem; color: var(--vein); font-size: var(--text-lg); line-height: 1.7; max-width: 27rem; }
.reasons__intro .link-line { margin-top: var(--space-4); }
@media (min-width: 901px) { .reasons__intro { position: sticky; top: 6.5rem; } }

.reasons__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(44rem 28rem at 86% 18%, rgba(156, 120, 72, 0.09), transparent 62%);
}

.reasonlist { list-style: none; border-top: 1px solid var(--border-neutral); }

.reasonrow {
  position: relative;
  display: grid;
  grid-template-columns: clamp(4.5rem, 8vw, 7rem) 1fr;
  gap: clamp(1rem, 0.85rem + 1.2vw, 1.9rem);
  align-items: baseline;
  padding: clamp(1.1rem, 0.95rem + 0.8vw, 1.7rem) 0;
  border-bottom: 1px solid var(--border-neutral);
  transition: padding-left 0.45s var(--ease-out);
}
/* a gold hairline that draws across the row on hover — reads as craft, not a box */
.reasonrow::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width 0.55s var(--ease-out);
}
.reasonrow:hover::before { width: 100%; }
.reasonrow:hover { padding-left: 1rem; }

.reasonrow__v {
  font-family: var(--font-display);
  font-weight: 500;
  /* Was clamp(2.6rem … 4.25rem). The figure is a marker for the claim beside
     it, not the claim itself; at 68px it out-shouted every heading in the
     row and forced the section to a full screen. */
  font-size: clamp(1.85rem, 1.4rem + 1.5vw, 2.6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--gold-light);
  background: linear-gradient(152deg, #f4dca4 0%, #c8a468 42%, #86682f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.45s var(--ease-out);
}
.reasonrow:hover .reasonrow__v { transform: translateY(-2px); }
.reasonrow__v span { font-size: 0.42em; vertical-align: top; margin-left: 0.05em; -webkit-text-fill-color: var(--gold); }

.reasonrow__body h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.reasonrow__body p { color: var(--vein); font-size: 0.95rem; line-height: 1.6; max-width: 34rem; }

@media (max-width: 900px) { .reasons { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .reasonrow { grid-template-columns: 1fr; gap: 0.5rem; }
  .reasonrow:hover { padding-left: 0; }
  .reasonrow__v { line-height: 1; }
}

/* ==========================================================================
   Who we are — a statement paired with a marble monolith (real gold monogram
   embossed in stone, gold veins, slow sheen). Edge-bleeding, non-boxy.
   ========================================================================== */

.who2 { position: relative; overflow: hidden; }
.who2 > .container { position: relative; z-index: 2; }
.who2__copy { position: relative; max-width: 40rem; }
@media (min-width: 981px) { .who2__copy { max-width: min(42rem, 47%); } }

.who2__statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
  margin-top: var(--space-3);
}
.who2__statement em { font-style: italic; color: var(--gold-light); }
.who2__lead {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  color: var(--ink);
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.72;
  max-width: 34rem;
}
.who2__lead strong { color: var(--white); font-weight: 500; }
.who2__copy .link-line { margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }

/* the marble monolith, pinned to the right and bleeding off the edge */
.who2__slab {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(42vw, 39rem);
  z-index: 1;
  overflow: hidden;
  border-left: 1px solid var(--border-gold);
  background:
    radial-gradient(120% 80% at 72% 16%, rgba(156, 120, 72, 0.14), transparent 55%),
    linear-gradient(160deg, #17171d 0%, var(--obsidian-raised) 55%, var(--surface) 100%);
}
.who2__veins { position: absolute; inset: -6% -5%; width: 110%; height: 112%; opacity: 0.9; pointer-events: none; }
.who2__mono {
  position: absolute; top: 50%; left: 50%;
  width: 58%; height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.24;
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.55))
    drop-shadow(0 -1px 0 rgba(244, 220, 164, 0.28))
    drop-shadow(0 0 46px rgba(156, 120, 72, 0.35));
  animation: who2-float 9s ease-in-out infinite;
}
@keyframes who2-float {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 12px)); }
}
.who2__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(244, 220, 164, 0.10) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: who2-sheen 10s ease-in-out 2.5s infinite;
}
@keyframes who2-sheen {
  0% { transform: translateX(-130%); }
  20%, 100% { transform: translateX(130%); }
}
.who2__slabcap {
  position: absolute;
  left: clamp(1.35rem, 2vw, 2.25rem);
  bottom: clamp(1.35rem, 2vw, 2.25rem);
  z-index: 3;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 980px) {
  .who2__slab {
    position: relative;
    width: auto;
    height: clamp(15rem, 52vw, 22rem);
    margin-top: var(--space-6);
    border-left: none;
    border-top: 1px solid var(--border-gold);
  }
  .who2__copy { max-width: none; }
  .who2__mono { width: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .who2__mono, .who2__sheen { animation: none; }
}

/* ==========================================================================
   Industries — "five worlds"

   Not five cards. Five SCENES the camera travels through.

   Each world is a real CSS perspective scene holding three planes at
   different translateZ: an atmosphere far behind, the photograph on the mid
   plane, and a near element in front. GSAP flies the scene forward in Z, so
   the planes separate at different rates because of the perspective itself
   rather than by faking parallax with per-element offsets.

   Type lives OUTSIDE the 3D context on purpose. Transformed text resamples
   and goes soft, and the names are the one thing that must stay crisp.

   Each world gets its own light colour and position, its own plane
   arrangement, its own aspect and its own label placement, so no two read
   as the same layout.

   GSAP owns .world__scene's transform. Hover moves nothing - it only shifts
   filter and the frame hairline - so no CSS transition can fight a tween.
   ========================================================================== */

.worlds {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--section);
  /* no ground of its own: the site has ONE, and it is fixed. See .ground. */
}


/* ---- head ----

   ON THE GRID. `.worlds__head` carries `.container`, and a max-width here
   overrides the container's own - at which point `margin-inline: auto`
   CENTRES the shortened box. On a 1760px screen that put this heading at
   x=459 while the scenes below it ran the full width: a floating text block
   with a hole beside it. The measure belongs on the type, not the container.

   Title and lead now share a baseline-aligned split, so the head reads as one
   line of the page rather than a column drifting in the middle of it. */
.worlds__head {
  position: relative;
  z-index: 3;
  margin-bottom: clamp(1.92rem, 1.28rem + 2.56vw, 3.84rem);
}
.worlds__title {
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 1.2rem + 2.8vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.worlds__title em { font-style: italic; color: var(--gold-light); }
.worlds__lead {
  margin-top: 0;
  max-width: 34rem;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--vein);
  text-wrap: pretty;
}

@media (max-width: 900px) {

}

.world {
  position: relative;
  overflow: clip;                 /* planes grow as the camera flies in */
  padding-block: clamp(1.8rem, 1.44rem + 2.16vw, 3.6rem);
  padding-inline: var(--gutter);
}

.world__scene {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  /* NO transform declared here. GSAP owns it, or the values compound. */
}

/* the photograph — the mid plane, and the element that defines the layout */
.world__plate {
  position: relative;
  transform: translateZ(-120px);
  overflow: hidden;
  border-radius: 4px;
  background: var(--obsidian-raised);
  box-shadow: 0 60px 120px -46px rgba(0, 0, 0, 0.92);
}
.world__plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.68) saturate(0.82) contrast(1.05);
  transition: filter 0.8s var(--ease-out);
}
/* the link lives INSIDE the stage, so this is a descendant hover, not a
   sibling combinator */
.world__stage:hover .world__plate img,
.world__link:focus-visible ~ .world__plate img { filter: brightness(0.9) saturate(0.95) contrast(1.05); }






/* A ROSTER ENTRY, NOT A CAPTION. "AT&T · Telecommunications" was one
   undifferentiated string, so the client and the category carried the same
   rank and neither read as data. They are two different things: the account
   name is the headline, the category is a field. Index, category, name, rule,
   description - the same order a real client list is set in. */
.world__cat {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: clamp(0.5rem, 0.4rem + 0.4vw, 0.8rem);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  /* GSAP tracks this in on arrival — no transition, or the tween fights it */
}
.world__cat em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  opacity: 0.75;
}
.world__cat em::after {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: 1px;
  margin-left: 0.65rem;
  vertical-align: 0.28em;
  background: currentColor;
  opacity: 0.7;
}
/* the tower's label is right-aligned, so its row has to run the other way */
.world--tower .world__cat { flex-direction: row-reverse; }
.world--tower .world__cat em::after { margin-left: 0; margin-right: 0.65rem; }

.world__name {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.024em;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem);
}
/* GSAP owns this transform. No start value in CSS. */
.world__name > span { display: block; color: var(--ink); }

/* drawn on arrival, from the side the label is set to */
.world__rule {
  display: block;
  margin-top: clamp(0.7rem, 0.55rem + 0.6vw, 1.1rem);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(156, 120, 72, 0));
}
.world__rule i {
  display: block;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  background: inherit;
}
.world--tower .world__rule { background: linear-gradient(270deg, var(--gold), rgba(156, 120, 72, 0)); }
.world--tower .world__rule i { transform-origin: right center; }

.world__desc {
  display: block;
  margin-top: clamp(0.6rem, 0.5rem + 0.5vw, 1rem);
  max-width: 26rem;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--vein);
  text-wrap: pretty;
}
.world--tower .world__desc { margin-left: auto; }
.world__desc b { color: var(--gold-light); font-weight: 500; }

/* ---- the turn: the roster ends, the aside begins ---- */
.worlds__turn {
  position: relative;
  z-index: 3;
  margin-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(0.5rem, 1vw, 1.5rem);
}
.worlds__turn__t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.9rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--vein);
  max-width: 34rem;
  text-wrap: balance;
}
.worlds__turn__t em { font-style: italic; color: var(--gold-light); }
.worlds__turn__rule {
  display: block;
  margin-top: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(156, 120, 72, 0) 78%);
}
.worlds__turn__rule i {
  display: block;
  height: 100%;
  transform-origin: left center;
  background: inherit;
}

/* the two asides are not accounts: their names sit a size down from the
   roster so the three brands keep the weight */
.world--aside .world__name { font-size: clamp(1.4rem, 1rem + 1.9vw, 2.6rem); }

/* ---- 01 · the tower. Tall, far, and the coolest light here. ---- */
.world--tower .world__plate {
  width: 40%;
  margin-left: 56%;
  aspect-ratio: 3 / 4;
}




/* ---- 02 · the shop floor. Wide, bleeding left. ---- */
.world--floor .world__plate {
  width: 58%;
  margin-left: -6%;
  aspect-ratio: 16 / 9;
}




/* ---- 03 · the doorway. The nearest plate in the section. ---- */
.world--door .world__plate {
  width: 34%;
  margin-left: 14%;
  aspect-ratio: 1 / 1;
  transform: translateZ(60px);          /* pulled toward the camera */
}




/* ---- 04 · the desk. Type sits on the plate. ---- */
.world--desk .world__plate {
  width: 44%;
  margin-left: 50%;
  aspect-ratio: 4 / 5;
  transform: translateZ(-200px);
}




/* ---- 05 · the street. Widest, and the camera flies furthest into it. ---- */
.world--street .world__plate {
  width: 88%;
  margin-left: 12%;
  aspect-ratio: 21 / 9;
  transform: translateZ(-260px);
}




/* ---- the invariant ---- */
.worlds__constant {
  position: relative;
  z-index: 3;
  margin-top: clamp(2.16rem, 1.8rem + 2.16vw, 3.96rem);
  padding-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  border-top: 1px solid var(--border-gold);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 0.95rem + 1.5vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--vein);
  text-wrap: balance;
}
.worlds__constant em { font-style: italic; color: var(--gold-light); }

/* ------------------------------------------------------------------
   Under 900px the perspective is dropped entirely. Depth needs
   horizontal room to read, and text sitting on a photograph is the
   first thing to become unreadable at that size.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .world { overflow: visible; padding-block: clamp(1.5rem, 1.25rem + 2vw, 2.5rem); }

  .world__scene { transform: none !important; transform-style: flat; }
  /* Every per-world plate rule has to be named here. `.world__plate` alone is
     one class and loses to `.world--tower .world__plate`, so the two that
     were missing from this list kept their DESKTOP geometry on a phone: the
     tower rendered 40% wide pushed 56% right (a 134px image on a 375px
     screen) and the floor bled off-canvas at 58% with a negative margin. */
  .world__plate,
  .world--tower .world__plate,
  .world--floor .world__plate,
  .world--door .world__plate,
  .world--desk .world__plate,
  .world--street .world__plate {
    width: 100%;
    margin-left: 0;
    aspect-ratio: 4 / 3;
    transform: none;
  }
  .world--street .world__plate { aspect-ratio: 16 / 9; }




  .world__name { font-size: clamp(1.35rem, 1rem + 2.6vw, 2rem); }
  .world--aside .world__name { font-size: clamp(1.2rem, 0.95rem + 2.2vw, 1.75rem); }

  /* Every label is left-aligned at this size, including the tower's - so its
     roster row, its rule and its note all have to run forward again or the
     one entry set right on desktop stays mirrored against a left column. */
  .world--tower .world__cat { flex-direction: row; }
  .world--tower .world__cat em::after { margin-left: 0.65rem; margin-right: 0; }
  .world--tower .world__rule { background: linear-gradient(90deg, var(--gold), rgba(156, 120, 72, 0)); }
  .world--tower .world__rule i { transform-origin: left center; }
  .world--tower .world__desc { margin-left: 0; }
}

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

/* ==========================================================================
   Home hero — cinematic obsidian: luminous marble veins that draw in, an
   embossed monogram watermark bleeding off-edge, drifting gold specks.
   Type-led, non-boxy.
   ========================================================================== */

.hero--home { min-height: 100svh; }
.hero--home .hero__content { max-width: 62rem; position: relative; z-index: 3; }
.hero--home h1 { font-size: clamp(3rem, 1.5rem + 5.4vw, 5.85rem); line-height: 1.02; }

/* layered gold light for depth */
.hero__aura {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(54rem 38rem at 86% 0%, rgba(156, 120, 72, 0.20), transparent 60%),
    radial-gradient(44rem 34rem at 0% 100%, rgba(156, 120, 72, 0.08), transparent 62%);
}

/* rich vein field that draws itself in after the preloader clears */
.hero--home .vein-field { inset: -8% -4%; opacity: 0.66; z-index: 1; }
.hero--home .vein-field path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hero-draw 3.6s var(--ease-out) 2.4s forwards; }
.hero--home .vein-field path:nth-of-type(2) { animation-delay: 2.6s; }
.hero--home .vein-field path:nth-of-type(3) { animation-delay: 2.85s; }
.hero--home .vein-field path:nth-of-type(4) { animation-delay: 3.05s; }
.hero--home .vein-field path:nth-of-type(5) { animation-delay: 3.25s; }
@keyframes hero-draw { to { stroke-dashoffset: 0; } }

/* embossed monogram watermark, bleeds off the right */
.hero__brandmark {
  position: absolute; top: 50%; right: clamp(-11rem, -6vw, -3rem);
  width: clamp(30rem, 48vw, 62rem); height: auto;
  z-index: 1; pointer-events: none;
  transform: translateY(-50%);
  opacity: 0;
  filter: drop-shadow(0 0 60px rgba(156, 120, 72, 0.30));
  -webkit-mask-image: radial-gradient(62% 62% at 50% 50%, #000 40%, transparent 80%);
  mask-image: radial-gradient(62% 62% at 50% 50%, #000 40%, transparent 80%);
  animation: hero-brand-in 2.2s ease 2.5s forwards, hero-floaty 12s ease-in-out 4.7s infinite;
}
@keyframes hero-brand-in { to { opacity: 0.13; } }
@keyframes hero-floaty { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 15px)); } }

/* drifting gold specks */
.hero__specks { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero__specks span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 9px 1px rgba(192, 156, 96, 0.6);
  opacity: 0;
  animation: hero-speck 10s ease-in-out infinite;
}
@keyframes hero-speck {
  0% { opacity: 0; transform: translateY(14px); }
  30% { opacity: 0.7; }
  70% { opacity: 0.45; }
  100% { opacity: 0; transform: translateY(-46px); }
}

/* refined bottom bar */
.hero__foot {
  position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 2.4vw, 2.25rem);
  z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  width: 100%; max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto; padding-inline: var(--gutter);
}
.hero__foot .scroll-cue { position: static; }
.hero__note { font-size: var(--text-sm); color: var(--vein); letter-spacing: 0.02em; max-width: 22rem; text-align: right; line-height: 1.5; }
.hero__note b { color: var(--gold-light); font-weight: 500; }
@media (max-width: 720px) { .hero__note { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero--home .vein-field path { animation: none; stroke-dashoffset: 0; }
  .hero__brandmark { animation: none; opacity: 0.1; }
  .hero__specks span { animation: none; opacity: 0; }
}

/* ==========================================================================
   Two channels — a diptych sharing one luminous gold seam. No boxes.
   ========================================================================== */

.duo2 {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(1.44rem, 0.72rem + 2.88vw, 4.32rem);
  align-items: stretch;
  margin-top: clamp(1.8rem, 1.44rem + 2.16vw, 3.24rem);
}

.duo2__seam {
  position: relative;
  background: linear-gradient(180deg, transparent, var(--gold-shadow) 14%, var(--gold-shadow) 86%, transparent);
  opacity: 0.75;
}
.duo2__seam::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--obsidian), 0 0 16px rgba(192, 156, 96, 0.55);
}

.duo2__col {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease-out);
}

.duo2__ico {
  width: 2.9rem; height: 2.9rem;
  color: var(--gold-light);
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  transition: transform 0.5s var(--ease-out), color 0.4s ease;
}
.duo2__ico svg { width: 100%; height: 100%; }
.duo2__col:hover .duo2__ico { transform: translateY(-3px); }

.duo2__kicker {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.duo2__h {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3.05rem);
  line-height: 1.08; color: var(--white);
  margin-bottom: 1.1rem;
}
.duo2__h em { font-style: italic; color: var(--gold-light); }
.duo2__p { color: var(--vein); font-size: var(--text-lg); line-height: 1.7; max-width: 30rem; }

.duo2__dest {
  margin-top: auto;
  padding-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  display: inline-flex; align-items: center; gap: 0.65rem;
  color: var(--vein); font-size: 0.95rem; letter-spacing: 0.02em;
}
.duo2__dest svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--gold); transition: transform 0.35s var(--ease-out); }
.duo2__col:hover .duo2__dest svg { transform: translateX(5px); }
.duo2__dest b { color: var(--ink); font-weight: 500; }

@media (max-width: 760px) {
  .duo2 { grid-template-columns: 1fr; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
  .duo2__seam { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-shadow) 14%, var(--gold-shadow) 86%, transparent); }
  .duo2__dest { margin-top: 1.5rem; }
}

/* ============================================================
   Inside Marble — fanned 3D card stack (Section 06)
   A depth-arranged deck: the centre card is lifted and upright,
   the rest fan back with tilt and perspective. Drag / arrows / dots.
   ============================================================ */
.cardstack {
  width: min(100%, 80rem);
  margin-inline: auto;
  /* cards are centred with translateX(-50%); their untransformed layout boxes
     (left:50% + width) would otherwise push page scrollWidth past the viewport.
     Clip the horizontal bleed; vertical (card lift) stays visible. The box is
     wide enough (80rem) that the fanned side cards sit inside it, never cut. */
  overflow-x: clip;
}
.cardstack__stage {
  position: relative;
  width: 100%;
  height: clamp(300px, 20rem + 4vw, 23rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 1600px;
  perspective-origin: 50% 45%;
  touch-action: pan-y;
}
.cardstack__stage:focus-visible { outline: none; }
/* a warm gold pool of light behind the deck */
.cardstack__glow {
  position: absolute;
  left: 50%; bottom: 2%;
  width: min(74%, 46rem); height: 62%;
  transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 100%, rgba(156, 120, 72, 0.22), rgba(156, 120, 72, 0.05) 46%, transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}
.cardstack__deck {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* the deck plane sits at z:0 in front of the pushed-back side cards; if it
     caught pointer events it would occlude them, so hits fall through to cards */
  pointer-events: none;
}

/* the card */
.fcard {
  position: absolute;
  left: 50%;
  bottom: clamp(0.75rem, 2vw, 1.75rem);
  width: clamp(11rem, 33vw, 26rem);
  aspect-ratio: 3 / 2;
  transform-origin: 50% 128%;
  transform: translateX(-50%);
  border-radius: 18px;
  overflow: hidden;
  transform-style: preserve-3d;
  background: var(--obsidian-raised);
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 0.78);
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, opacity;
  transition: transform 0.62s var(--ease-out), opacity 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
}
.fcard.is-active { cursor: grab; box-shadow: 0 46px 90px -34px rgba(0, 0, 0, 0.82), 0 0 0 1px rgba(192, 156, 96, 0.28); }
.fcard.is-active:active { cursor: grabbing; }

.fcard__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.58) saturate(0.82) contrast(0.98);
  transition: filter 0.6s var(--ease-out), transform 6s var(--ease-out);
  transform: scale(1.02);
}
.fcard.is-active .fcard__img { filter: brightness(1) saturate(1) contrast(1); transform: scale(1); }

/* readability gradient */
.fcard__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 6, 8, 0.9) 0%, rgba(6, 6, 8, 0.42) 30%, rgba(6, 6, 8, 0.04) 58%, transparent 74%);
  pointer-events: none;
}
/* gold hairline frame + inner sheen */
.fcard__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(156, 120, 72, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 30px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.fcard.is-active .fcard__ring { border-color: rgba(192, 156, 96, 0.55); }

.fcard__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1rem, 0.7rem + 1vw, 1.6rem);
  transform: translateY(6px);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out) 0.05s, transform 0.5s var(--ease-out) 0.05s;
}
.fcard.is-active .fcard__body { opacity: 1; transform: translateY(0); }
.fcard__tag {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.4rem;
}
.fcard__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.12;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* controls: arrows flanking the gold dot rail */
.cardstack__ctrl {
  margin-top: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.6rem);
}
.fnav {
  flex: none;
  width: clamp(2.75rem, 2.4rem + 1vw, 3.15rem);
  height: clamp(2.75rem, 2.4rem + 1vw, 3.15rem);
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(156, 120, 72, 0.32);
  background: rgba(12, 12, 16, 0.5);
  color: var(--gold-light);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.fnav:hover {
  color: var(--obsidian);
  border-color: transparent;
  background: linear-gradient(150deg, #f1d79d, #cda76a 46%, #9c7848);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(156, 120, 72, 0.7);
}
.fnav:active { transform: translateY(0) scale(0.96); }
.fnav:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.fnav svg { display: block; }

.cardstack__dots {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-inline: 0.5rem;
}
.fdot {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(156, 120, 72, 0.3);
  cursor: pointer;
  transition: width 0.4s var(--ease-out), background-color 0.3s, box-shadow 0.3s;
}
.fdot:hover { background: rgba(192, 156, 96, 0.6); }
.fdot[aria-selected="true"] {
  width: 22px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 10px rgba(192, 156, 96, 0.55);
}
.fdot:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* before JS upgrades it: a graceful horizontal scroll so nothing looks broken */
.cardstack:not(.is-ready) .cardstack__deck {
  position: static;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
}
.cardstack:not(.is-ready) .cardstack__stage { height: auto; display: block; perspective: none; }
.cardstack:not(.is-ready) .fcard {
  position: relative;
  left: auto; bottom: auto;
  transform: none;
  flex: 0 0 clamp(15rem, 60vw, 22rem);
  scroll-snap-align: center;
}
.cardstack:not(.is-ready) .fcard__img,
.cardstack:not(.is-ready) .fcard__body { filter: none; opacity: 1; transform: none; }
.cardstack:not(.is-ready) .cardstack__glow { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fcard, .fcard__img, .fcard__body { transition: none; }
}
@media (max-width: 560px) {
  .cardstack__stage { height: clamp(280px, 72vw, 340px); }
  .fcard { border-radius: 14px; }
  .fcard__body { padding: 0.85rem 0.95rem; }
}

/* ============================================================
   Proof over promises — a museum of evidence (Section 10)
   Bespoke exhibits, broken grid, engraved-gold numerals, wax seals.
   ============================================================ */
.proofx {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(3.12rem, 2.08rem + 5.2vw, 6.24rem);
  /* no ground of its own: the site has ONE, and it is fixed. See .ground. */
}
/* soft gold spotlight from the top, a near-invisible marble wash */
.proofx__spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% 6%, rgba(156, 120, 72, 0.12), transparent 68%),
    radial-gradient(40% 30% at 88% 82%, rgba(156, 120, 72, 0.07), transparent 70%);
}
.proofx__vein {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'%3E%3Cg fill='none' stroke='%239c7848' stroke-width='0.6' opacity='0.4'%3E%3Cpath d='M-50 210 C 250 120 480 300 760 190 S 1150 250 1300 150'/%3E%3Cpath d='M-50 520 C 300 460 520 600 820 500 S 1150 560 1300 470'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover; mix-blend-mode: soft-light;
}
/* giant outlined words drifting behind the exhibits */
.proofx__ghost {
  position: absolute; z-index: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(6rem, 17vw, 19rem); line-height: 0.8; letter-spacing: 0.01em;
  color: transparent; -webkit-text-stroke: 1px rgba(156, 120, 72, 0.08);
}
.proofx__ghost--a { top: 3%; left: -3%; }
.proofx__ghost--b { bottom: 12%; right: -5%; -webkit-text-stroke-color: rgba(138, 138, 138, 0.055); }

.proofx__head { position: relative; z-index: 2; max-width: 66rem; }
.proofx__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 1.3rem + 6vw, 6.6rem);
  line-height: 0.96; letter-spacing: -0.022em; color: var(--ink);
  margin-top: clamp(0.9rem, 0.5rem + 1.4vw, 1.7rem);
}
.proofx__lead {
  margin-top: clamp(1.2rem, 0.9rem + 1vw, 1.9rem);
  color: var(--vein); font-size: var(--text-lg); max-width: 34rem; line-height: 1.5;
}

.proofx__exhibits {
  position: relative; z-index: 2;
  width: min(100%, 82rem);
  margin: clamp(3rem, 2rem + 5vw, 6.5rem) auto 0;
  padding-inline: var(--gutter);
  display: flex; flex-direction: column;
}

/* ---- shared panel parts ---- */
.evpanel { position: relative; }
.ev__frame {
  position: relative; overflow: hidden;
  border-radius: 5px; background: var(--obsidian-raised);
  border: 1px solid var(--border-gold);
  box-shadow: 0 50px 100px -46px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ev__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(0.82) contrast(1.02) saturate(0.94);
  will-change: transform;
}
.ev__grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 5, 7, 0.9) 0%, rgba(5, 5, 7, 0.24) 42%, transparent 72%),
    linear-gradient(115deg, rgba(5, 5, 7, 0.55), transparent 46%);
}
.ev__grade--deep { background:
    linear-gradient(to top, rgba(5, 5, 7, 0.94) 0%, rgba(5, 5, 7, 0.4) 46%, rgba(5,5,7,0.12) 78%),
    linear-gradient(245deg, rgba(5, 5, 7, 0.6), transparent 48%); }
.ev__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* engraved-gold numerals */
.ev__num {
  position: absolute; z-index: 3; display: flex; align-items: flex-start;
  font-family: var(--font-display); font-weight: 600;
  line-height: 0.78; letter-spacing: -0.03em;
  font-size: clamp(3.4rem, 1.6rem + 9.5vw, 9.5rem);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6));
}
.ev__fig {
  background: linear-gradient(176deg, #fbeec3 0%, #e6c584 34%, #c09c60 62%, #9c7848 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ev__unit {
  font-style: normal; font-size: 0.3em; color: var(--gold-light);
  margin-top: 0.3em; margin-left: 0.12em; letter-spacing: 0;
}
.ev__unit--pre { margin-left: 0; margin-right: 0.04em; }

/* meta column */
.ev__meta { position: relative; z-index: 3; }
.ev__exhibit {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--vein);
}
.ev__exhibit b { color: var(--gold-light); font-weight: 600; }
.ev__label {
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.05;
  margin-top: 0.7rem;
}
.ev__label--lg { font-size: clamp(2rem, 1.3rem + 3.4vw, 4rem); }
.ev__text {
  margin-top: 0.85rem; color: var(--vein); max-width: 24rem; line-height: 1.5;
  font-size: 1rem;
}
.ev__rule {
  height: 1px; margin: clamp(1.1rem, 0.8rem + 1vw, 1.6rem) 0;
  background: linear-gradient(90deg, rgba(156, 120, 72, 0.5), rgba(156, 120, 72, 0.06) 60%, transparent);
  max-width: 22rem;
}
.ev__src {
  font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
}
/* supporting-fact chips — revealed on hover (always shown on touch) */
.ev__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 clamp(1.1rem, 0.8rem + 1vw, 1.6rem); }
.ev__facts li {
  font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold-light); padding: 0.4rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--border-gold); background: rgba(156, 120, 72, 0.06);
}
@media (hover: hover) {
  .ev__facts { opacity: 0; transform: translateY(10px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
  .evpanel:hover .ev__facts, .evpanel:focus-within .ev__facts { opacity: 1; transform: none; }
}

/* wax / foil seal */
.ev__seal {
  position: absolute; z-index: 4; width: clamp(74px, 8vw, 108px); height: clamp(74px, 8vw, 108px);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
}
.ev__seal svg { width: 100%; height: 100%; display: block; }
.ev__seal-ring { stroke: rgba(192, 156, 96, 0.75); stroke-width: 1; fill: rgba(12, 10, 8, 0.35); }
.ev__seal-ring--thin { stroke: rgba(192, 156, 96, 0.4); stroke-width: 0.6; fill: none; }
.ev__seal-text {
  fill: var(--gold-light); font-family: var(--font-sans); font-weight: 600;
  font-size: 8.4px; letter-spacing: 1.3px;
}
.ev__seal-mark {
  fill: var(--gold-light);
  font-family: var(--font-display); font-weight: 600; font-size: 40px;
}
.ev__seal-spin { transform-box: fill-box; transform-origin: center; animation: ev-seal-spin 34s linear infinite; }
@keyframes ev-seal-spin { to { transform: rotate(360deg); } }

/* ---- Exhibit 01 : image left, number spilling over the seam ---- */
.evpanel--one {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  width: min(100%, 66rem);
  margin-left: clamp(-2.5rem, -3vw, 0rem);
}
.evpanel--one .ev__frame--wide { aspect-ratio: 16 / 11; }
.evpanel--one .ev__meta { padding-bottom: clamp(0.5rem, 1vw, 1.75rem); }
.evpanel--one .ev__num--one { left: clamp(0.75rem, 2.5vw, 2.75rem); bottom: clamp(-1.6rem, -1vw, -0.6rem); }
.evpanel--one .ev__seal { top: clamp(-1.2rem, -1vw, -0.6rem); left: calc(66% - clamp(37px, 4vw, 54px)); }

/* ---- Exhibit 02 : layered document presentation, pulled up + rotated ---- */
.evpanel--docs {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center; gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  width: min(100%, 60rem); align-self: flex-end;
  margin-top: clamp(-2rem, 2rem - 6vw, 3rem);
  transform: rotate(-1deg);
}
.ev__docs { position: relative; padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2.5rem); }
.ev__doc { border-radius: 6px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.ev__doc--photo {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  border: 1px solid var(--border-gold); background: var(--obsidian-raised);
  transform: rotate(3.5deg) translateX(6%);
}
.ev__doc--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8) saturate(0.92); }
.ev__doc--paper {
  position: absolute; left: 0; bottom: clamp(0.5rem, 1vw, 1.25rem);
  width: min(76%, 20rem); padding: clamp(1rem, 2vw, 1.5rem);
  background: linear-gradient(158deg, #14130f, #0b0a08);
  border: 1px solid var(--border-gold-strong);
  transform: rotate(-2.5deg);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ev__paper-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.ev__paper-kicker { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vein); }
.ev__paper-foil {
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--obsidian); font-weight: 700; padding: 0.22rem 0.5rem; border-radius: 2px;
  background: linear-gradient(140deg, #f4dca4, #c8a468 55%, #9c7848);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.ev__doc-line { display: block; height: 5px; border-radius: 3px; margin: 0.5rem 0; background: rgba(156, 120, 72, 0.16); }
.ev__doc-line--short { width: 55%; }
.ev__doc-sign {
  display: block; width: 42%; height: 22px; margin-top: 0.9rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' fill='none'%3E%3Cpath d='M4 30 C 18 6 26 34 40 20 S 66 4 78 24 92 30 116 12' stroke='%23c09c60' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
  opacity: 0.85;
}
.evpanel--docs .ev__meta--docs { padding-block: clamp(0.5rem, 1vw, 1.5rem); }
.evpanel--docs .ev__seal--docs { top: clamp(-0.5rem, 1vw, 1rem); right: clamp(-0.5rem, 1vw, 1.25rem); }

/* ---- Exhibit 03 : mirrored, darker, number over image, rotated + bleeding right ---- */
.evpanel--three {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: end; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  width: min(100%, 68rem); align-self: flex-end;
  margin-top: clamp(1.8rem, 0.72rem + 2.88vw, 4.32rem);
  margin-right: clamp(-3rem, -3.5vw, 0rem);
  transform: rotate(1deg);
}
.evpanel--three .ev__frame--wide { grid-column: 2; aspect-ratio: 16 / 10; }
.evpanel--three .ev__meta--right { grid-column: 1; grid-row: 1; text-align: right; padding-bottom: clamp(0.5rem, 1vw, 1.75rem); }
.evpanel--three .ev__meta--right .ev__text,
.evpanel--three .ev__meta--right .ev__facts { margin-left: auto; }
.evpanel--three .ev__meta--right .ev__facts { justify-content: flex-end; }
.evpanel--three .ev__meta--right .ev__rule { margin-left: auto; }
.evpanel--three .ev__num--three { right: clamp(0.75rem, 2.5vw, 2.75rem); bottom: clamp(-1.6rem, -1vw, -0.6rem); }
.evpanel--three .ev__seal--three { top: clamp(-1.2rem, -1vw, -0.6rem); right: clamp(0.5rem, 3vw, 3rem); }

/* subtle straighten-on-hover reward */
@media (hover: hover) {
  .evpanel--docs, .evpanel--three { transition: transform 0.7s var(--ease-out); }
  .evpanel--docs:hover, .evpanel--three:hover { transform: rotate(0deg); }
}

/* ---- closing statement + CTA ---- */
.proofx__close {
  position: relative; z-index: 2; text-align: center;
  margin-top: clamp(2.6rem, 1.56rem + 4.16vw, 5.2rem);
}
.proofx__statement {
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(2rem, 1.1rem + 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.018em;
}
.proofx__close .btn { margin-top: clamp(1.75rem, 1rem + 2vw, 2.9rem); }
/* cinematic fade into the next section */
.proofx::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12rem; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--obsidian)); pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ev__seal-spin { animation: none; }
}

/* ---- responsive: unbreak the grid on small screens ---- */
@media (max-width: 860px) {
  .evpanel--one, .evpanel--three {
    grid-template-columns: 1fr; gap: clamp(3rem, 2rem + 4vw, 4rem);
    width: 100%; margin-left: 0; margin-right: 0; transform: none;
  }
  .evpanel--docs { grid-template-columns: 1fr; width: 100%; margin-top: 2rem; transform: none; }
  .evpanel--three .ev__frame--wide { grid-column: 1; }
  .evpanel--three .ev__meta--right { grid-column: 1; grid-row: 2; text-align: left; }
  .evpanel--three .ev__meta--right .ev__text,
  .evpanel--three .ev__meta--right .ev__rule,
  .evpanel--three .ev__meta--right .ev__facts { margin-left: 0; }
  .evpanel--three .ev__meta--right .ev__facts { justify-content: flex-start; }
  .ev__num { position: relative; left: auto !important; right: auto !important; bottom: auto !important; margin-top: 1rem; }
  .evpanel--one .ev__num, .evpanel--three .ev__num { padding-inline: 0.25rem; }
  .evpanel--one .ev__seal { left: auto; right: 0.5rem; top: 0.5rem; }
  .proofx__exhibits { gap: clamp(2.52rem, 1.44rem + 4.32vw, 3.6rem); }
}
@media (max-width: 560px) {
  .ev__doc--paper { position: relative; width: 100%; transform: none; margin-top: -2.5rem; }
  .ev__doc--photo { transform: none; }
  .ev__docs { padding: 0; }
}

/* ============================================================
   The record — a struck ledger.

   Deliberately not tiles. Four entries ruled across a single
   sheet, each figure right-aligned onto a shared digit column
   the way a ledger actually sets them, with the entry index
   tabbed off to the left. The only containers are hairlines.

   Motion lives in js/motion.js (initLedger): the rules draw
   themselves in, the figures roll up on mechanical reels, and
   hovering an entry pulls focus off the other three.
   ============================================================ */
.ledger {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.24rem, 1.44rem + 3.2vw, 4.16rem);
  border-top: 1px solid var(--border-neutral);
  border-bottom: 1px solid var(--border-neutral);
  background:
    radial-gradient(72% 120% at 50% -12%, rgba(156, 120, 72, 0.07), transparent 62%),
    linear-gradient(180deg, rgba(156, 120, 72, 0.03), transparent 55%);
}

/* a soft band of light that rakes down the sheet as it scrolls past */
.ledger__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.ledger__sheen i {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(192, 156, 96, 0), rgba(232, 208, 156, 0.07) 48%, rgba(192, 156, 96, 0));
  transform: translateY(-140%);
}

/* ---- masthead ---- */

.ledger__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(0.85rem, 0.6rem + 1vw, 1.35rem);
}

/* the printer's double rule that closes a table head */
.ledger__headrule {
  position: relative;
  display: block;
  height: 4px;
  margin-bottom: clamp(0.5rem, 0.25rem + 1vw, 1.1rem);
}
.ledger__headrule i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  transform-origin: left;
}
.ledger__headrule i:first-child {
  top: 0;
  background: linear-gradient(90deg, var(--gold), rgba(156, 120, 72, 0.22) 58%, rgba(156, 120, 72, 0.07));
}
.ledger__headrule i:last-child {
  bottom: 0;
  background: linear-gradient(90deg, rgba(138, 138, 138, 0.3), rgba(138, 138, 138, 0.08) 62%, transparent);
}

.ledger__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.ledger__stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vein);
}
.ledger__stamp i {
  display: block;
  width: clamp(1.75rem, 4vw, 3.25rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  transform-origin: left;
}

/* ---- the entries ---- */

.ledger__list {
  position: relative;
  z-index: 1;
  --ledger-tab: 3.25rem;
  --ledger-gap: clamp(1.25rem, 0.5rem + 2.5vw, 4rem);
  /* 4.35x the figure's own type size at every width, so the money column is
     the same width on all four entries and the widest figure still clears
     the column rule. Keep in step with .ledger__value's font-size. */
  --ledger-amount: clamp(10.875rem, 5.8725rem + 21.315vw, 23.925rem);
}

/* the amount column is ruled off, the way the money column always is */
.ledger__col {
  position: absolute;
  top: 0.35rem;
  bottom: 0.9rem;
  right: calc(var(--ledger-amount) + var(--ledger-gap) * 0.5);
  width: 1px;
  transform-origin: top;
  background: linear-gradient(180deg, rgba(156, 120, 72, 0.3), rgba(156, 120, 72, 0.06) 78%, transparent);
  pointer-events: none;
}

.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--ledger-gap);
  padding: clamp(1.1rem, 0.75rem + 1.2vw, 2rem) 0 clamp(0.95rem, 0.7rem + 0.9vw, 1.55rem);
  transition: opacity 0.45s var(--ease-out);
}

/* the wash that lifts the entry under the pointer */
.ledger__row::before {
  content: "";
  position: absolute;
  inset: 0 clamp(-1.5rem, -1vw, -0.75rem);
  z-index: -1;
  background: linear-gradient(90deg, rgba(156, 120, 72, 0.085), rgba(156, 120, 72, 0.025) 42%, transparent 74%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}

/* the rule the entry is posted on, with its gold tab at the index column */
.ledger__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  transform-origin: left;
  background: linear-gradient(90deg, rgba(138, 138, 138, 0.26), rgba(138, 138, 138, 0.1) 58%, rgba(138, 138, 138, 0));
  pointer-events: none;
}
.ledger__rule i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--ledger-tab);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold-light), rgba(156, 120, 72, 0));
  transition: filter 0.5s var(--ease-out);
}

.ledger__term {
  display: grid;
  grid-template-columns: var(--ledger-tab) minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(0.5rem, 1.2vw, 1rem);
}

.ledger__index {
  position: relative;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--gold-light);
  padding-bottom: 0.3rem;
}
/* the marker that drops beside the index of the entry being read */
.ledger__index::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1.6rem;
  width: 5px;
  height: 5px;
  background: var(--gold-light);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.ledger__copy {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: transform 0.5s var(--ease-out);
}

.ledger__name {
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.25rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.ledger__note {
  font-size: var(--text-sm);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--vein);
  max-width: 30rem;
}

/* ---- the figures ---- */

.ledger__value {
  margin: 0;
  min-width: var(--ledger-amount);
  /* the numeral's own baseline sits higher in its box than the note's does;
     this drops it back onto the same line so the entry actually rules across */
  margin-bottom: -0.076em;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 1.35rem + 4.9vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.038em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Every character sits in its own 1em box so a rolling digit reel and a
   static glyph line up on exactly the same baseline. */
.ledger__fig {
  display: inline-flex;
  align-items: flex-start;
}
.ledger__reel,
.ledger__glyph {
  display: block;
  height: 1em;
  line-height: 1;
}
.ledger__reel { overflow: hidden; }
.ledger__strip { display: block; will-change: transform; }
.ledger__digit {
  display: block;
  height: 1em;
  line-height: 1;
}

/* The numerals are struck metal, not flat type. Solid ink is the floor —
   the gradient is only clipped into the glyphs where the browser can do it,
   so a figure can never end up painted in transparent. */
.ledger__fig,
.ledger__digit,
.ledger__glyph { color: var(--ink); }

.ledger__fig--gold,
.ledger__fig--gold .ledger__digit,
.ledger__fig--gold .ledger__glyph { color: var(--gold-light); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ledger__fig,
  .ledger__digit,
  .ledger__glyph {
    background-image: linear-gradient(180deg, #ffffff 0%, #f4eee2 50%, #d8c7a9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-image 0.5s var(--ease-out);
  }
  .ledger__fig--gold,
  .ledger__fig--gold .ledger__digit,
  .ledger__fig--gold .ledger__glyph {
    background-image: linear-gradient(180deg, #f6e0ab 0%, #d3ac6c 52%, #9c7848 100%);
  }
}

/* ---- reading an entry: the other three step back ---- */

@media (hover: hover) and (pointer: fine) {
  .ledger__list.is-read:hover .ledger__row { opacity: 0.34; }
  .ledger__list.is-read:hover .ledger__row:hover { opacity: 1; }
}

.ledger__row:hover::before { opacity: 1; }
.ledger__row:hover .ledger__index::after { opacity: 1; transform: none; }
.ledger__row:hover .ledger__copy { transform: translateX(6px); }
.ledger__row:hover .ledger__rule i { filter: brightness(1.55); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ledger__row:hover .ledger__fig,
  .ledger__row:hover .ledger__fig .ledger__digit,
  .ledger__row:hover .ledger__fig .ledger__glyph {
    background-image: linear-gradient(180deg, #ffffff 0%, #fbf1dc 46%, #e8cf9a 100%);
  }
  .ledger__row:hover .ledger__fig--gold,
  .ledger__row:hover .ledger__fig--gold .ledger__digit,
  .ledger__row:hover .ledger__fig--gold .ledger__glyph {
    background-image: linear-gradient(180deg, #fff3d6 0%, #e8c98a 52%, #c09c60 100%);
  }
}

/* ---- narrow ---- */

@media (max-width: 760px) {
  .ledger__list { --ledger-tab: 2.25rem; }
  .ledger__col { display: none; }
  .ledger__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(0.6rem, 2vw, 1rem);
  }
  .ledger__value {
    min-width: 0;
    margin-bottom: 0;
    text-align: left;
    padding-left: calc(var(--ledger-tab) + 0.5rem);
  }
  .ledger__fig { justify-content: flex-start; }
  .ledger__note { max-width: 24rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ledger__sheen { display: none; }
  .ledger__copy,
  .ledger__row,
  .ledger__rule i { transition: none; }
}


/* ============================================================
   Who we are — "the long wall" (Section 01)

   One continuous canvas. Photographs hang at fixed positions in a single
   3D space and the camera TRAVELS along them: sideways down the wall while
   pushing forward into it.

   Deliberately a different camera language from the Industries section
   directly below, which is five DISCRETE scenes entered and left in turn.
   This is one uninterrupted traverse. Two adjacent sections sharing a
   camera language would be exactly the uniformity that reads as generated.

   The section's spine survives: panels sit progressively CLOSER as you
   advance (z -1100 to -60), so travelling the wall is literally closing
   the distance. Everything Marble does happens in the last three feet.

   The BASE styles are a plain readable set of chapters plus a simple photo
   gallery, needing no JavaScript. `.is-live` - added by initWall only at
   >=901px with full motion - is what turns it into the travelling stage.
   Nothing is hidden until something is running that can bring it back.
   ============================================================ */

.wall {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--section) 0;
  /* no ground of its own: the site has ONE, and it is fixed. See .ground. */
}

/* THE HEAD SITS ON THE PAGE GRID, NOT IN THE MIDDLE OF THE SCREEN.

   `.wall__head` carries the `.container` class, and a `max-width` here
   overrides the container's own - at which point the container's
   `margin-inline: auto` CENTRES the shortened box. On a 1760px screen that
   put this headline at x=459 while the section's own chapters and panels
   (`.wall__hud`, also `.container`) sat at x=195: the heading floated 264px
   inboard of the pictures it belongs to, with a 469px hole beside it. Below
   ~1360px the two coincide, which is why it only shows on a wide monitor.

   The container's width is left alone now. The reading measure is set on the
   TYPE instead, which is where it belongs. */
.wall__head {
  position: relative;
  z-index: 4;
  margin-bottom: clamp(2.25rem, 1.75rem + 2.4vw, 3.75rem);
}
.wall__title {
  max-width: 21ch;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96;
  font-weight: 500;
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.024em;
  color: var(--ink);
  /* The <br> fixes the first break; the second segment was then free to wrap
     and dropped "hire." onto a line of its own. Balance splits that segment
     evenly instead of leaving a one-word line, at every width. */
  text-wrap: balance;
}
.wall__title em { font-style: italic; color: var(--gold-light); }

/* The lead and the two channels share one rule, so the head LANDS on a line
   instead of trailing off into the gap above the stage, and the deck runs the
   full grid instead of leaving the right half of the screen empty. */
.wall__deck {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 0.75rem + 3vw, 4rem);
  align-items: start;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  padding-top: clamp(1.35rem, 1rem + 1.8vw, 2.25rem);
  border-top: 1px solid var(--border-gold);
}

.wall__lead {
  margin-top: 0;
  max-width: 38rem;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--vein);
  text-wrap: pretty;
}

.wall__channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 0.6rem + 1.8vw, 2.25rem);
}
.wchan__t {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.wchan__t::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.wchan__d {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--vein);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .wall__deck { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .wall__channels { grid-template-columns: minmax(0, 1fr); }
}

/* ---- base: a plain gallery + a readable chapter list ---- */
.wall__track { position: relative; }
.wall__stage { position: relative; }

.wall__scene {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.5rem + 1.2vw, 1.5rem);
}
.wpanel {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--border-gold);
  background: var(--obsidian-raised);
  aspect-ratio: 4 / 3;
}
.wpanel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.66) saturate(0.8) contrast(1.05);
}
.wpanel__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 5, 7, 0.6), transparent 60%);
}

.wall__haze,
.wall__vignette,
.wall__meter { display: none; }

.wall__chapters {
  list-style: none;
  display: grid;
  gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--section);
}
.wchap { position: relative; padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.wchap__mark {
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.55rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.wchap__h {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96;
  font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 1.9vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.wchap__p {
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--vein);
  max-width: 32rem;
}
.wchap__p b { color: var(--gold-light); font-weight: 500; }
.wchap--last .wchap__h { color: var(--gold-light); }

/* ============================================================
   LIVE — the sticky travelling stage
   ============================================================ */

.wall.is-live .wall__track { height: 400svh; }

.wall.is-live .wall__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: 50% 50%;
}

.wall.is-live .wall__scene {
  display: block;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  /* NO transform here. GSAP owns it, or the values compound. */
}

/* Panels hang at fixed positions in the space. `left` is a percentage of
   the stage (a percentage TRANSLATE would resolve against the element's own
   width, which is the trap here), and only Y and Z go through transform. */
.wall.is-live .wpanel {
  position: absolute;
  left: var(--x);
  top: 50%;
  width: var(--w);
  height: auto;
  aspect-ratio: var(--ar);
  transform: translate3d(0, calc(-50% + var(--y)), var(--z));
  border-color: var(--border-gold-strong);
  box-shadow: 0 60px 120px -44px rgba(0, 0, 0, 0.92);
}

/* progressively nearer as you move along: the distance closing */
.wall.is-live .wpanel--a { --x: 4%;   --y: -170px; --z: -1100px; --w: 30%; --ar: 4/5; }
.wall.is-live .wpanel--b { --x: 30%;  --y: 150px;  --z: -880px;  --w: 26%; --ar: 1/1; }
.wall.is-live .wpanel--c { --x: 58%;  --y: -200px; --z: -640px;  --w: 30%; --ar: 3/4; }
.wall.is-live .wpanel--d { --x: 88%;  --y: 140px;  --z: -430px;  --w: 26%; --ar: 4/3; }
.wall.is-live .wpanel--e { --x: 118%; --y: -70px;  --z: -250px;  --w: 28%; --ar: 5/4; }
.wall.is-live .wpanel--f { --x: 150%; --y: 170px;  --z: -80px;   --w: 34%; --ar: 16/9; }

/* atmosphere between the viewer and the far end of the wall */
.wall.is-live .wall__haze {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(60% 56% at 44% 48%, rgba(128, 96, 48, 0.11), transparent 70%);
}
.wall.is-live .wall__vignette {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: none /* the vignette belongs to .ground; a stage that lit its own
     screen edges made a hard seam at every one of its boundaries */;
}

/* Full-bleed scrim, on the STAGE rather than the HUD. The HUD carries the
   .container class, so a pseudo on it starts at the container edge and left
   a hard unscrimmed seam down the left of the viewport.

   The mask is what makes this work: backdrop-filter does NOT fade with a
   background gradient - it applies flat across the whole element and would
   cut a hard blur edge. Masking the element fades the tint AND the blur out
   together, so the glass dissolves instead of ending. */
.wall.is-live .wall__stage::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(76%, 72rem);
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 5, 7, 0.84) 0%, rgba(5, 5, 7, 0.62) 42%, rgba(5, 5, 7, 0.24) 76%, transparent 100%);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
}

.wall.is-live .wall__hud {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wall.is-live .wall__chapters {
  display: block;
  padding: 0;
  height: 100%;
}
/* every chapter occupies the same cell and is crossfaded by scroll */
.wall.is-live .wchap {
  position: absolute;
  left: 0;
  top: 50%;
  width: min(30rem, 42vw);
  margin-top: -4.5rem;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.wall.is-live .wchap__p { max-width: 26rem; }
.wall.is-live .wchap--last .link-line { pointer-events: auto; }

.wall.is-live .wall__meter {
  display: block;
  position: absolute;
  z-index: 5;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(2rem, 5vh, 4rem);
  width: min(22rem, 40vw);
  height: 1px;
  background: rgba(156, 120, 72, 0.16);
  pointer-events: none;
}
.wall.is-live .wall__meter span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

@media (max-width: 1100px) {
  .wall.is-live .wchap { width: min(26rem, 46vw); }
}

@media (max-width: 560px) {
  .wall__scene { grid-template-columns: 1fr; }
}

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

/* ==========================================================================
   Leadership — "the lens finds him"

   ONE frame, and the frame is a lens.

   THE CAMERA DOES NOT TRAVEL. `.wall` moves sideways through one space and
   `.worlds` pushes through five; a third travelling camera would be the
   uniformity that reads as generated. Here the viewer stays still and the
   LAYERS separate at different rates.

   WHAT MOVES INSTEAD IS THE FOCUS. A focal plane travels back to front
   through the composition - the room, then the week's numbers, then the
   figure, then the close - and each plate is sharp only while the plane is
   on it. `.latent` develops (density), `.cuts` register (position),
   `.forge` turns (rotation), `.clk` runs on wall-clock time. A rack is none
   of those, and it is the movement a lens actually makes.

   THE RACK IS A CROSS-FADE, NOT AN ANIMATED FILTER. `.lpl__soft` is a
   second, pre-blurred copy of the plate's own image; only its opacity
   moves. Animating `filter: blur()` on five full-height plates would
   re-rasterise all five every frame - this way each blur is rasterised once
   and the rack is a compositor job.

   NO TWO PLATES ARE BUILT THE SAME. Different width, aspect, depth, grade,
   frame and caption treatment (inside-top, inside-foot, outside-margin,
   and none at all on the anchor). Five identical rounded rectangles at five
   depths is still five identical rounded rectangles.

   NO LIKENESS. `.lpl--anchor` is a drop-in slot and carries no caption,
   ever: swap its two srcs for real photography of Derrick and the
   composition is already built around it.

   BASE styles are a plain readable stack needing no JavaScript. `.is-live`
   (initLiving, >=901px, full motion) turns on the frame.
   ========================================================================== */

.lp {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--section);
  /* no ground of its own: the site has ONE, and it is fixed. See .ground. */
}
.lp__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  /* no grain of its own: .grain::after covers the whole site */
  background: none;
  background-size: 3px 3px;
}

/* ---- base: a readable stack, no JS required ----------------------------
   An asymmetric two-row arrangement rather than a uniform grid: the same
   argument the live frame makes, made with column spans. */
.lp__track { position: relative; }
.lp__stage { position: relative; }

/* gutters to match `.container`, so the frame and the type it belongs to
   share one left edge when the stack is what renders */
.lp__scene {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.5rem + 1.2vw, 1.5rem);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}
.lpl { position: relative; margin: 0; }
.lpl--far   { grid-column: 1 / 8;  }
.lpl--board { grid-column: 8 / 13; }
.lpl--anchor{ grid-column: 1 / 5;  }
.lpl--floor { grid-column: 5 / 10; }
.lpl--close { grid-column: 10 / 13; }

.lpl__win {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--border-gold);
  background: var(--obsidian-raised);
  aspect-ratio: 4 / 3;
}
.lpl--far .lpl__win   { aspect-ratio: 16 / 9; }
.lpl--anchor .lpl__win{ aspect-ratio: 4 / 5; }
.lpl--close .lpl__win { aspect-ratio: 1 / 1; }

.lpl__win img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.66) saturate(0.78) contrast(1.05);
}
.lpl__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 5, 7, 0.6), transparent 62%);
}
/* the blurred twin only exists once the rack does */
.lpl__soft { display: none; }
.lpl__sheen { display: none; }
.lpl--glass { display: none; }
.lp__pool,
.lp__reticle,
.lp__veil,
.lp__vignette { display: none; }

/* ---- the captions ------------------------------------------------------
   Base: they sit under their plate as ordinary editorial captions. Live:
   each one moves to its own place on the plate and is revealed by the
   focus rack. */
.lpl__cap {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--vein);
}
.lpl__cap b {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.lpl__cap span { display: block; margin-top: 0.28rem; }
.lpl__rule {
  display: block;
  width: 2rem;
  height: 1px;
  margin-bottom: 0.55rem;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.lp__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -0.024em;
  color: var(--ink);
}
/* Masked reveal line. Opens ink room on BOTH edges - Inter's ink box sits
   above and below its line box, and 0.05em clipped the ascenders and the
   descenders of the italic. The negative margins hand the space straight
   back to the layout, so position and rhythm are unchanged; only the
   clipping edge moves. Kept in em so it holds at every clamp() size. */
.lp__h > span { display: block; overflow: hidden;
  padding-top: 0.16em; padding-bottom: 0.22em;
  margin-top: -0.16em; margin-bottom: -0.17em; }
.lp__h em { font-style: italic; color: var(--gold-light); }

.lp__philosophy {
  margin-top: clamp(1.1rem, 0.9rem + 1.2vw, 1.75rem);
  max-width: 30rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.7rem);
  line-height: 1.34;
  color: var(--gold-light);
  font-style: italic;
}
.lp__body {
  margin-top: clamp(1rem, 0.85rem + 1vw, 1.6rem);
  max-width: 32rem;
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--vein);
}
.lp__body--second { margin-top: 0.8rem; }

/* The signature. A VERTICAL rule with the name set against it - team.html
   signs with a horizontal rule above the name, and two pages signing the
   same way is exactly the repetition this rebuild exists to avoid. */
.lp__sign {
  position: relative;
  margin-top: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  padding-left: clamp(0.9rem, 0.7rem + 0.6vw, 1.3rem);
}
.lp__sign-rule {
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.2em;
  width: 1px;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, var(--gold-light), rgba(156, 120, 72, 0.05));
}
.lp__name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.1;
  color: var(--ink);
}
.lp__role {
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.lp__note {
  margin-top: clamp(0.9rem, 0.8rem + 0.8vw, 1.4rem);
  padding-top: clamp(0.85rem, 0.75rem + 0.8vw, 1.25rem);
  border-top: 1px solid var(--border-gold);
  max-width: 30rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gold-light);
}
.lp__act { margin-top: clamp(1.1rem, 0.9rem + 0.9vw, 1.7rem); }

/* ==========================================================================
   LIVE — the single frame
   ========================================================================== */

.lp.is-live { padding-block: 0; }
.lp.is-live .lp__track { height: 340svh; }

.lp.is-live .lp__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 50%;
}

/* the source of the light, sitting behind the figure rather than centred
   on the section, so the frame is lit from somewhere */
.lp.is-live .lp__pool {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(38% 46% at 68% 46%, rgba(192, 156, 96, 0.15), transparent 68%),
    radial-gradient(58% 60% at 74% 62%, rgba(120, 92, 56, 0.09), transparent 72%);
}

.lp.is-live .lp__scene {
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  max-width: none;
  transform-style: preserve-3d;
}

/* Every plane keeps its own depth. GSAP moves each one INDEPENDENTLY rather
   than moving a shared camera, so the frame separates instead of travelling.
   `left`/`width`/`aspect-ratio` stay in CSS; z, y and x belong to the JS
   plane table, which is the single place the depths are tuned. */
.lp.is-live .lpl {
  position: absolute;
  left: var(--x);
  top: 50%;
  width: var(--w);
  height: auto;
  aspect-ratio: auto;
  transform: translate3d(0, -50%, 0);
  will-change: transform;
}
.lp.is-live .lpl__win {
  aspect-ratio: var(--ar);
  border-radius: 2px;
}

/* THE TWIN AND THE PLATE SHARE ONE GRADE, and that is what --grade is for.
   Every plate is lit differently - the room sits at brightness .36, the
   figure at .76 - so a twin carrying a grade of its own would change the
   plate's exposure as it came into and out of focus. Racking would read as
   the lights being adjusted rather than as the lens being turned. Declared
   once per plate below, consumed by both the sharp image and the blur. */
.lp.is-live .lpl__win img { filter: var(--grade); }

/* The blurred twin. One raster, opacity only.
   GATED ON `.is-near`, AND THAT IS A NETWORK DECISION, NOT A VISUAL ONE.
   `.is-live` goes on at boot, and a background-image on a displayed
   element is fetched immediately - five full-size photographs pulled at
   page load, ahead of the lazy <img>s they are copies of, for a section
   two thirds of the way down the homepage. `display: none` suppresses the
   fetch entirely, so the twins stay unloaded until the track is within
   half a viewport of being read (see initLiving's observer). */
.lp.is-live.is-near .lpl__soft {
  display: block;
  position: absolute;
  inset: -6%;                     /* over-sized so the blur has no soft edge */
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(var(--soft, 12px)) var(--grade);
}
.lp.is-live .lpl__grade { z-index: 2; }

/* --- FAR · the room. Frameless and unlit: it is depth, not an object.
       Deliberately over-wide: at z -1010 against a 1600px perspective it
       projects to about 62% of its laid-out size, and anything narrower
       would read as a picture hanging in the middle of the stage rather
       than as the room the stage is in. --- */
.lp.is-live .lpl--far {
  --x: -30%; --w: 160%; --ar: 16/9; --soft: 16px;
  --grade: brightness(0.36) saturate(0.52) contrast(1.06);
}
.lp.is-live .lpl--far .lpl__win { border-color: transparent; border-radius: 0; }
.lp.is-live .lpl--far .lpl__grade {
  background: radial-gradient(72% 74% at 62% 44%, transparent 24%, rgba(5, 5, 7, 0.86) 100%);
}

/* --- BOARD · the week's numbers. Lit on its right edge, tilted off true. */
.lp.is-live .lpl--board {
  --x: 48%; --w: 25%; --ar: 4/3; --soft: 10px;
  --grade: brightness(0.5) saturate(0.66) contrast(1.06);
}
.lp.is-live .lpl--board .lpl__win {
  border-color: rgba(156, 120, 72, 0.16);
  border-right-color: rgba(192, 156, 96, 0.42);
  box-shadow: 0 34px 70px -40px rgba(0, 0, 0, 0.9);
  transform: rotate(-0.8deg);
}

/* --- ANCHOR · the figure. Dominant, framed, and the only plate with a
       shadow deep enough to sit off the page. --- */
.lp.is-live .lpl--anchor {
  --x: 59%; --w: 27%; --ar: 4/5; --soft: 11px;
  --grade: brightness(0.76) saturate(0.86) contrast(1.06);
}
.lp.is-live .lpl--anchor .lpl__win {
  border-color: var(--border-gold-strong);
  box-shadow:
    0 0 0 6px rgba(6, 6, 8, 0.55),
    0 0 0 7px rgba(156, 120, 72, 0.16),
    0 74px 130px -44px rgba(0, 0, 0, 0.95);
}
.lp.is-live .lpl--anchor .lpl__grade {
  background:
    linear-gradient(to top, rgba(5, 5, 7, 0.62), transparent 58%),
    linear-gradient(96deg, rgba(5, 5, 7, 0.42), transparent 46%);
}
/* one slow reflection crossing the anchor, GSAP-driven */
.lp.is-live .lpl__sheen {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(244, 220, 164, 0.18) 48%, rgba(255, 255, 255, 0.08) 52%, transparent 62%);
  background-size: 260% 100%;
  background-position: 180% 0;
}

/* The reticle. Four brackets that start wide of the plate and close onto
   it as the focal plane arrives - the lens finding its subject, which is
   the whole section stated in four hairlines. Lives INSIDE the figure and
   outside `.lpl__win`, so it inherits the plate's exact 3D transform and
   is never clipped by it. */
.lp.is-live .lp__reticle {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.22);
}
.lp.is-live .lp__reticle i {
  position: absolute;
  width: clamp(14px, 1.5vw, 26px);
  height: clamp(14px, 1.5vw, 26px);
  border: 0 solid var(--gold-light);
}
.lp.is-live .lp__reticle i:nth-child(1) { top: -9px; left: -9px; border-top-width: 1px; border-left-width: 1px; }
.lp.is-live .lp__reticle i:nth-child(2) { top: -9px; right: -9px; border-top-width: 1px; border-right-width: 1px; }
.lp.is-live .lp__reticle i:nth-child(3) { bottom: -9px; right: -9px; border-bottom-width: 1px; border-right-width: 1px; }
.lp.is-live .lp__reticle i:nth-child(4) { bottom: -9px; left: -9px; border-bottom-width: 1px; border-left-width: 1px; }

/* --- FLOOR · the training. Wide, low, hairline top edge only. --- */
.lp.is-live .lpl--floor {
  --x: 41%; --w: 28%; --ar: 16/10; --soft: 9px;
  --grade: brightness(0.66) saturate(0.78) contrast(1.05);
}
.lp.is-live .lpl--floor .lpl__win {
  border-color: rgba(156, 120, 72, 0.14);
  border-top-color: rgba(192, 156, 96, 0.4);
  box-shadow: 0 40px 84px -44px rgba(0, 0, 0, 0.92);
  transform: rotate(0.6deg);
}

/* --- CLOSE · nearest photograph, smallest, hardest frame. --- */
.lp.is-live .lpl--close {
  --x: 66%; --w: 14%; --ar: 1/1; --soft: 8px;
  --grade: brightness(0.72) saturate(0.8) contrast(1.06);
}
.lp.is-live .lpl--close .lpl__win {
  border-color: var(--border-gold-strong);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95);
}

/* ---- captions, live ----------------------------------------------------
   Held at zero by the rack (see initLiving) and lifted only while their own
   plate is the sharp one. Three different constructions on purpose. */
.lp.is-live .lpl__cap {
  position: absolute;
  z-index: 5;
  margin: 0;
  width: max-content;
  max-width: 15rem;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px 14px rgba(5, 5, 7, 0.95);
}
.lp.is-live .lpl__cap span { color: var(--ink); font-size: 0.78rem; }
.lp.is-live .lpl__cap b { font-size: 0.6rem; }

.lp.is-live .lpl__cap--in-top {
  top: clamp(0.8rem, 1.2vw, 1.3rem);
  left: clamp(0.8rem, 1.2vw, 1.3rem);
  max-width: 11rem;
}
.lp.is-live .lpl__cap--in-foot {
  bottom: clamp(0.8rem, 1.2vw, 1.3rem);
  left: clamp(0.9rem, 1.4vw, 1.5rem);
  max-width: 13rem;
}
/* The only one that hangs OUTSIDE its plate, set into the margin beside
   it. To the left rather than below: this plate is the nearest and lowest
   in the frame, and a caption under it would be projected off the bottom
   of the stage by the time it is the one in focus. */
.lp.is-live .lpl__cap--out {
  right: calc(100% + 0.9rem);
  bottom: 0.3rem;
  text-align: right;
  max-width: 11rem;
}
.lp.is-live .lpl__cap--out .lpl__rule {
  margin-left: auto;
  background: linear-gradient(270deg, var(--gold), transparent);
}

/* the nearest plane: a single pane of glass catching the light */
.lp.is-live .lpl--glass {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 3/4;
  transform: translate3d(0, -50%, 0);
  border: 1px solid rgba(192, 156, 96, 0.2);
  border-radius: 2px;
  background: linear-gradient(128deg, rgba(232, 232, 230, 0.05), transparent 42%, rgba(192, 156, 96, 0.05));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* the type sits flat, above the frame, so it never resamples */
.lp.is-live .lp__veil {
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  width: min(72%, 68rem);
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 5, 7, 0.9) 0%, rgba(5, 5, 7, 0.66) 44%, rgba(5, 5, 7, 0.24) 76%, transparent 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* the mask fades the tint AND the blur out together; a background
     gradient alone would leave a hard blur edge */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
}
.lp.is-live .lp__vignette {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: none /* the vignette belongs to .ground; a stage that lit its own
     screen edges made a hard seam at every one of its boundaries */;
}

.lp.is-live .lp__type {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
/* THE COLUMN AND THE FRAME ARE MEASURED THE SAME WAY, and that is the
   whole reason these are percentages. The plates are positioned in % of
   the stage, so a type column fixed in rem holds its width while the frame
   closes in on it: at 1440 there is room to spare and at 1081 the headline
   is already under the board plate. Tying both to one measure means the
   two never cross, at any width the frame is live. */
.lp.is-live .lp__philosophy,
.lp.is-live .lp__body,
.lp.is-live .lp__note,
.lp.is-live .lp__sign,
.lp.is-live .lp__act { max-width: min(27rem, 34%); }
/* Sized so BOTH authored lines still set on one line each inside the
   column. Bigger and "Founder-led, and trained" runs out from under the
   veil and across the board plate. */
.lp.is-live .lp__h { max-width: min(32rem, 40%); font-size: clamp(1.7rem, 0.95rem + 1.7vw, 2.45rem); }
.lp.is-live .lp__philosophy { font-size: clamp(1.1rem, 0.85rem + 0.8vw, 1.45rem); }
.lp.is-live .lp__body { font-size: 0.98rem; line-height: 1.6; }

/* the second paragraph is the first thing to go: below this the column is
   too narrow to carry it without pushing the signature off the stage */
@media (max-width: 1240px) {
  .lp.is-live .lp__body--second { display: none; }
}

@media (max-width: 860px) {
  .lpl--far    { grid-column: 1 / 13; }
  .lpl--board  { grid-column: 1 / 7;  }
  .lpl--anchor { grid-column: 7 / 13; }
  .lpl--floor  { grid-column: 1 / 8;  }
  .lpl--close  { grid-column: 8 / 13; }
}
@media (max-width: 560px) {
  .lp__scene { grid-template-columns: 1fr; }
  .lpl--far, .lpl--board, .lpl--anchor, .lpl--floor, .lpl--close { grid-column: 1; }
}

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

/* ==========================================================================
   The path — "the ascent"

   Five landings hang at different heights inside ONE continuous 3D space,
   and scrolling RISES the camera up past them. You can see the next landing
   above you before you reach it, which is what makes it a climb rather than
   a run of slides.

   THE AXIS IS THE POINT. `.wall` travels X, `.worlds` pushes Z through five
   separate scenes, `.lp` holds still while planes separate, `.forge` turns
   an object. Nothing else here moves in Y, and rising is literally what a
   path does.

   No connecting line, no step chips. The numerals are engraved ghosts behind
   each landing, and every landing carries its own width, aspect, side and
   depth so the set never reads as five cards.

   BASE styles are a plain readable list needing no JavaScript. `.is-live`
   (initAscent, >=901px, full motion) turns on the climb.
   ========================================================================== */

.rise {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: var(--section);
  /* no ground of its own: the site has ONE, and it is fixed. See .ground. */
}




















/* ==========================================================================
   LIVE — the climb
   ========================================================================== */

.rise.is-live .rise__track { height: 420svh; }

.rise.is-live .rise__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: 50% 50%;
}

/* the light sits low and rises with you */
.rise.is-live .rise__glow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(48% 42% at 50% 70%, rgba(192, 156, 96, 0.16), transparent 70%);
}

.rise.is-live .rise__scene {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-style: preserve-3d;
  will-change: transform;
  /* NO transform here. GSAP owns it, or the values compound. */
}

/* Each landing hangs 780px above the one below it and a little further
   back, so the climb gains height AND depth. `left` places them
   horizontally: a percentage TRANSLATE would resolve against the element's
   own width, which is the trap. */
.rise.is-live .land {
  position: absolute;
  left: var(--x);
  top: 50%;
  width: var(--w);
  transform: translate3d(0, calc(-50% + (var(--i) * -780px)), calc(var(--i) * -90px));
}
.rise.is-live .land__plate { aspect-ratio: var(--ar); }

/* no two landings share a side, a width, an aspect or a copy position */
.rise.is-live .land--1 { --x: 8%;  --w: 34%; --ar: 4/5; }
.rise.is-live .land--2 { --x: 54%; --w: 38%; --ar: 4/3; }
.rise.is-live .land--3 { --x: 16%; --w: 46%; --ar: 16/9; }
.rise.is-live .land--4 { --x: 58%; --w: 30%; --ar: 1/1; }
.rise.is-live .land--5 { --x: 12%; --w: 44%; --ar: 21/9; }

/* the numeral sits behind its landing as an engraved ghost */
.rise.is-live .land__n {
  position: absolute;
  z-index: 0;
  left: -0.14em;
  top: -0.52em;
  margin: 0;
  font-size: clamp(5rem, 11vw, 11rem);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(192, 156, 96, 0.26);
}
.rise.is-live .land__plate { position: relative; z-index: 1; }
.rise.is-live .land__copy {
  position: relative;
  z-index: 2;
  margin-top: clamp(0.9rem, 0.8rem + 0.8vw, 1.35rem);
}
/* copy alternates side against the plate so the eye keeps moving */
.rise.is-live .land--2 .land__copy,
.rise.is-live .land--4 .land__copy { text-align: right; margin-left: auto; }
.rise.is-live .land__p { max-width: 26rem; }
.rise.is-live .land--2 .land__p,
.rise.is-live .land--4 .land__p { margin-left: auto; }

.rise.is-live .rise__vignette {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: none /* the vignette belongs to .ground; a stage that lit its own
     screen edges made a hard seam at every one of its boundaries */;
}

.rise.is-live .rise__meter {
  display: block;
  position: absolute;
  z-index: 4;
  right: clamp(1.5rem, 3vw, 3rem);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: min(34vh, 18rem);
  background: rgba(156, 120, 72, 0.16);
  pointer-events: none;
}
/* the meter is vertical here, because the journey is */
.rise.is-live .rise__meter span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: top;
  background: linear-gradient(180deg, var(--gold), var(--gold-light));
}

@media (max-width: 560px) {

}

@media (prefers-reduced-motion: reduce) {

}