/* ==========================================================================
   TAYRONA CAPITAL — v2 CINEMATIC REDESIGN
   Dark, editorial, high-impact. Built on the v1 brand tokens, reworked
   for a near-black flagship experience. Register: LVMH x Cartier.
   ========================================================================== */

:root {
  /* ---- Raw palette (from v1 tokens) ---- */
  --gold:            #BCA56D;
  --gold-soft:       #CBB783;
  --gold-deep:       #8E7B4C;
  --blue:            #082E6B;
  --patrimoine:      #0A1733;
  --noir:            #14110E;   /* Noir Patrimoine */
  --oxblood:         #3A1614;
  --stone:           #C7BFB1;
  --sable:           #0E0B08;   /* near-black, warm */
  --vellum:          #F6F0E4;   /* near-white, warm */
  --vellum-mid:      #EDE8DF;

  /* ---- Cinematic surfaces ---- */
  --bg:              #0B0907;   /* page base, deepest warm black */
  --bg-raise:        #110E0A;   /* raised panel */
  --bg-blue:         #070F22;   /* deep patrimoine-tinted black */
  --ink:             #0E0B08;

  /* ---- Text on dark ---- */
  --text:            #EDE7DA;   /* primary on dark */
  --text-dim:        #A89F8E;   /* muted warm grey */
  --text-faint:      #6E665A;   /* faintest, for fine print */
  --text-gold:       var(--gold);

  /* ---- Lines ---- */
  --line:            rgba(246, 240, 228, 0.12);
  --line-soft:       rgba(246, 240, 228, 0.07);
  --line-gold:       rgba(188, 165, 109, 0.42);

  /* ---- Type ---- */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mono:  'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elegant: cubic-bezier(0.22, 1, 0.36, 1);
  --rev:  1200ms;

  /* ---- Layout ---- */
  --maxw:    1440px;
  --content: 1240px;
  --narrow:  860px;
  --margin:  clamp(1.25rem, 5vw, 6rem);
}

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }

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

/* ---- Film grain overlay (cinematic texture) ---- */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 6s steps(6) infinite;
  mix-blend-mode: overlay;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, 1%); }
  80%  { transform: translate(3%, 2%); }
  100% { transform: translate(0, 0); }
}

/* Phones and tablets: the fixed, blended grain layer over video is costly on iOS (stutter, flicker) and barely visible at that size. */
@media (hover: none) and (pointer: coarse) { .grain { display: none; } }

/* ---- Vignette (subtle screen edge darkening) ---- */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8000;
  box-shadow: inset 0 0 220px 40px rgba(0, 0, 0, 0.55);
}
/* Phones and tablets: size the vignette to the full screen with the browser toolbar
   hidden (100vh), so the strip the toolbar uncovers on a fast scroll is already
   shaded instead of showing bright until the fixed layer catches up. */
@media (hover: none) and (pointer: coarse) { .vignette { bottom: auto; height: 100vh; } }

/* ==========================================================================
   TYPE SCALE
   ========================================================================== */
.eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-soft);
  display: inline-block;
}
.eyebrow .num { color: var(--gold); }
.eyebrow .tick {
  width: 26px;
  height: 1px;
  background: var(--line-gold);
  display: inline-block;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.75rem, 6.4vw, 6rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.h2 {
  font-size: clamp(2.15rem, 4.3vw, 3.85rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.h2 em { font-style: italic; color: var(--gold-soft); }

.h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.lead {
  font-size: clamp(1.1rem, 1.4vw, 1.375rem);
  line-height: 1.7;
  color: var(--text);
  font-weight: 300;
}

.body {
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--text-dim);
  font-weight: 400;
}
.body + .body { margin-top: 1.5rem; }

.kicker {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--gold-soft);
}

/* ==========================================================================
   CONTAINERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.container--wide { max-width: var(--maxw); }
.container--narrow { max-width: var(--narrow); }

.section {
  position: relative;
  padding-block: clamp(6rem, 12vh, 11rem);
}
.section--tight { padding-block: clamp(4rem, 8vh, 7rem); }

.rule-gold {
  width: 38px;
  height: 1px;
  background: var(--gold);
  display: block;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 7000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--margin);
  transition: background-color 0.5s var(--ease-out),
              padding 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out),
              backdrop-filter 0.5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background-color: rgba(11, 9, 7, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  padding-block: 1rem;
  border-bottom-color: var(--line-soft);
}
/* Homepage: nav stays translucent over the hero video, solid once past it */
.home .nav.scrolled {
  background-color: rgba(11, 9, 7, 0.28);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border-bottom-color: transparent;
}
.home .nav.scrolled.nav--solid {
  background-color: rgba(11, 9, 7, 0.92);
  border-bottom-color: var(--line-soft);
}
body:not(.home) .nav:not(.scrolled)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(var(--nav-frost-rgb, 11, 9, 7), var(--nav-frost-a1, 0.44)) 0%,
    rgba(var(--nav-frost-rgb, 11, 9, 7), var(--nav-frost-a2, 0.16)) 58%,
    rgba(var(--nav-frost-rgb, 11, 9, 7), 0) 100%);
  -webkit-backdrop-filter: blur(var(--nav-frost-blur, 7px)) saturate(115%);
  backdrop-filter: blur(var(--nav-frost-blur, 7px)) saturate(115%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  pointer-events: none;
}
.nav__brand {
  display: flex;
  align-items: center;
  transition: opacity 0.4s var(--ease-out);
}
.nav__brand:hover { opacity: 0.82; }
.nav__logo {
  height: 82px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
  transition: height 0.5s var(--ease-out);
}
.nav.scrolled .nav__logo { height: 62px; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--vellum);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.4s var(--ease-out);
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.nav__link::after {
  /* full-width gold underline that grows from the centre outward on hover,
     rendered as a soft gold gradient rule with tapered ends (not a flat bar) */
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold-soft) 50%, var(--gold) 80%, transparent);
  box-shadow: 0 0 5px rgba(188, 165, 109, 0.45);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s var(--ease-out);
}
.nav__link:hover { color: var(--vellum); }
.nav__link:hover::after { transform: scaleX(1); }
/* Active section: the current parent stays underlined (same gradient rule) so
   "you are here" persists on sub-pages, e.g. Tayrona Maisons while on Qvinto. */
.nav__link--active::after { transform: scaleX(1); }
/* Inquire: the one action, set apart in gold rather than a boxed button
   so it speaks the brand's editorial language, not generic web UI. */
.nav__link--cta {
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.7rem;
  transition: color 0.4s var(--ease-out);
}
.nav__link--cta:hover { color: var(--gold-soft); }

/* ---- Nav dropdowns ---- */
.nav__item { position: relative; display: flex; align-items: center; }

.nav__panel {
  position: absolute;
  top: 100%;
  left: -1.3rem;
  margin-top: 1.05rem;
  min-width: 244px;
  padding: 0.65rem 0;
  background: var(--nav-panel-bg, #0A1733);
  border: 1px solid var(--line-soft);
  border-top: 1px solid var(--line-gold);
  box-shadow: 0 28px 64px -22px rgba(0, 0, 0, 0.72);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out), visibility 0.42s var(--ease-out);
  pointer-events: none;
  z-index: 50;
}
.nav__panel--right { left: auto; right: -1.3rem; }
/* invisible bridge so the cursor can cross the gap without the panel closing */
.nav__panel::before {
  content: '';
  position: absolute;
  top: -1.05rem; left: 0; right: 0; height: 1.05rem;
}
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__sub {
  display: block;
  padding: 0.52rem 1.5rem;
  position: relative;
}
.nav__panel-title {
  display: block;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0.8;
  padding: 0.2rem 1.5rem 0.7rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-soft);
}
/* Current page inside a dropdown: short gold rule under the name, echoing the parent's underline */
.nav__sub[aria-current="page"] .nav__sub-name { position: relative; display: inline-block; }
.nav__sub[aria-current="page"] .nav__sub-name::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold-soft) 50%, var(--gold) 80%, transparent); box-shadow: 0 0 5px rgba(188, 165, 109, 0.45); }
.nav__sub-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0.62;
  margin-bottom: 0.2rem;
  transition: opacity 0.35s var(--ease-out);
}
.nav__sub-name {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.04rem;
  line-height: 1.18;
  color: var(--vellum);
  transition: color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.nav__sub:hover .nav__sub-name,
.nav__sub:focus-visible .nav__sub-name { color: var(--gold-soft); transform: translateX(4px); }
.nav__sub:hover .nav__sub-kicker,
.nav__sub:focus-visible .nav__sub-kicker { opacity: 1; }

/* anchor targets clear the fixed nav */
.section[id], .maison[id], .venture[id], .gfd__program[id], .nbi__item[id] { scroll-margin-top: 108px; }

.nav__toggle { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
/* Shared hero — safe default reused by about/history/governance/principles */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
/* Homepage-only scroll hero (index.html uses class="hero hero--home") */
.hero--home {
  height: 220vh;
  display: block;      /* cancel the shared flex so the sticky track can grow */
  overflow: visible;   /* overflow:hidden on an ancestor would break position:sticky */
}
.hero--home .hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.hero--home .hero__dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}
/* Scroll-fade backdrop + statement */
.scene-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg);
  will-change: background-color;
  pointer-events: none;
}
#top { position: relative; z-index: 1; }
/* Lenis smooth-scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* Statement: tall track, inner pins while the lines reveal one by one */
.intro {
  position: relative;
  z-index: 3;
  background: transparent;
  height: 300vh;
}
.intro__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3rem, 8vh, 6rem) var(--margin);
  overflow: hidden;
}
.intro__bg{position:absolute;inset:0;z-index:0;opacity:0}
.intro__bg picture{position:absolute;inset:-6% 0;display:block}
.intro__img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block;transform:scale(1.12);will-change:transform}
.intro__veil{position:absolute;inset:0;background:rgba(28,16,6,.34)}
.intro__glow{position:absolute;inset:0;background:rgba(28,16,6,.22)}
.intro__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.6rem, 3.4vh, 2.6rem);
}
.intro__title {
  color: var(--vellum);
  font-size: clamp(3rem, 8vw, 7rem);
  margin: 0;
}
.intro__statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1.25;
  color: var(--gold-soft);
  margin: 0;
}
.intro__inner{text-shadow:0 1px 2px rgba(0,0,0,.45)}
/* Masked line-rise reveal (scroll-linked, Ameria-style) */
.intro-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.2em 0.4em 0.3em; margin: -0.2em -0.4em -0.3em; }
.intro__eyebrow,.intro__statement{text-shadow:0 0 3px rgba(20,11,3,.28),0 1px 6px rgba(20,11,3,.22)}
.intro-rise { display: inline-block; will-change: transform; }
.hero__media {
  position: absolute;
  inset: -8% 0 0 0;
  height: 116%;
  z-index: 0;
  will-change: transform;
  overflow: hidden;
}
.hero__photo, .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero__photo {
  will-change: transform;
  transform-origin: 62% 48%;
  animation: heroPush 14s ease-in-out infinite alternate;
}
.hero__still { position: absolute; inset: 0; z-index: 0; display: block; }
.hero--home .hero__media { inset: 0; height: 100%; }
.hero__photo--still { animation: none; transform: none; }
.hero__video { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero--home .hero__video { display: none; } }
.hero__video {
  /* Clean 1920x1080 master: no baked letterbox, so no zoom past bars needed. */
  transform: none;
  backface-visibility: hidden;
}
/* Top scrim: the dawn sky carries a sun flare, keep the white nav legible. */
.hero--home .hero__navscrim {
  position: absolute;
  inset: 0 0 auto 0;
  height: 34vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,7,11,0.52) 0%, rgba(6,7,11,0.34) 26%, rgba(6,7,11,0.16) 58%, rgba(6,7,11,0) 100%);
}
.hero--home .v-hero-media { z-index: 1; }
/* iOS Safari: the sticky panel is 100vh (toolbar-hidden height), so lift the controls by the toolbar height to keep them on screen. Desktop: lvh = svh, no change. */
@supports (height: 1svh) { .hero--home .v-hero-media { bottom: calc(clamp(20px, 4vw, 44px) + 100lvh - 100svh); } }
@keyframes heroPush {
  from { transform: scale(1.03); }
  to   { transform: scale(1.16); }
}
.hero__grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 7, 11, 0.30) 0%, rgba(6, 7, 11, 0.06) 34%, transparent 56%),
    linear-gradient(180deg, rgba(7, 8, 12, 0.26) 0%, rgba(7, 8, 12, 0.04) 18%, rgba(7, 8, 12, 0) 42%, rgba(6, 6, 8, 0.34) 82%, rgba(6, 6, 8, 0.60) 100%);
}
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__media::before {
  /* legacy gradient scene — disabled now that a photo is used */
  content: none;
}
.hero__media::after {
  content: none;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(7, 6, 5, 0.82) 0%,
    rgba(7, 6, 5, 0.52) 13%,
    rgba(7, 6, 5, 0.18) 30%,
    rgba(7, 6, 5, 0.02) 48%,
    rgba(7, 6, 5, 0.00) 64%,
    rgba(7, 6, 5, 0.00) 100%);
}
.hero__art-note {
  position: absolute;
  bottom: 2.4rem; right: var(--margin);
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 240, 228, 0.30);
  text-align: right;
  line-height: 1.9;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--margin) clamp(4rem, 9vh, 7rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__eyebrow { margin-bottom: 2rem; }
.hero__title {
  color: var(--vellum);
  max-width: none;
  margin: 0 0 2.5rem;
}
.hero__statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.25;
  color: var(--vellum);
  margin: 0 0 1.5rem;
  max-width: none;
}
@media (min-width: 700px) {
  .hero__statement { white-space: nowrap; }
}
.hero__sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  color: var(--gold-soft);
  max-width: 40ch;
}
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero__cue-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cueDrop 2.4s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes cueDrop {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(20px); opacity: 0; }
}

/* ==========================================================================
   REVEAL ANIMATION
   Visible by default. While JS drives it: hidden (:not(.in)) -> animate (.in)
   -> STATIC visible (.shown, added by JS after the animation window). The
   .shown override guarantees content is painted even in renderers that
   freeze CSS animations at their first keyframe (headless capture).
   ========================================================================== */
.reveal { opacity: 1; }
html.js .reveal:not(.in) {
  opacity: 0;
  transform: translateY(28px);
}
.reveal.in {
  animation: revealIn var(--rev) var(--ease-out) var(--d, 0ms) both;
}
.reveal.shown {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
@keyframes revealIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

.reveal-line { display: block; overflow: hidden; }
.reveal-line > * { display: block; opacity: 1; }
html.js .reveal-line:not(.in) > * {
  opacity: 0;
  transform: translateY(105%);
}
.reveal-line.in > * {
  animation: revealLine var(--rev) var(--ease-elegant) var(--d, 0ms) both;
}
.reveal-line.shown > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
@keyframes revealLine {
  from { opacity: 0; transform: translateY(105%); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   ABOUT (editorial timeline)
   ========================================================================== */
.about {
  background-color: var(--bg-blue);
  border-top: 1px solid var(--line-soft);
}
.about__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  max-width: 20ch;
  grid-column: 1;
  grid-row: 2;
}
.about__layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: clamp(1.6rem, 3.5vh, 2.6rem);
  align-items: start;
}
.about__eyebrow { grid-column: 1 / -1; grid-row: 1; }
.about__lede { grid-column: 2; grid-row: 2; }
.about__timeline { grid-column: 2; grid-row: 3; }
.about__lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 1.9vw, 1.75rem);
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  max-width: none;
}
.about__lede em { font-style: italic; color: var(--gold-soft); }
.about__timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tl {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 1.8rem;
  padding-block: 1.8rem;
  border-top: 1px solid var(--line-soft);
}
.tl:last-child { border-bottom: 1px solid var(--line-soft); }
.tl__year {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  padding-top: 0.35rem;
}
.tl__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dim);
}
.about__coda {
  margin-top: clamp(3.5rem, 7vh, 6rem);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  color: var(--gold-soft);
  letter-spacing: 0.01em;
}
.about__more {
  text-align: center;
  margin-top: 2.2rem;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  position: relative;
  padding-bottom: 0.45rem;
  transition: color 0.4s var(--ease-out);
}
.text-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s var(--ease-out);
}
.text-link:hover { color: var(--vellum); }
.text-link:hover::after { transform: scaleX(1); }
.text-link .arrow { transition: transform 0.4s var(--ease-out); }
.text-link:hover .arrow { transform: translateX(5px); }

/* Gold-gradient "special line" — matches the maison/venture inquire links */
.about__more .text-link::after,
.maisons .text-link::after,
.gfd .text-link::after,
.nbi .text-link::after,
.ventures .text-link::after,
.principles .text-link::after {
  background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold-soft) 50%, var(--gold) 80%, transparent);
  box-shadow: 0 0 5px rgba(188, 165, 109, 0.45);
}

/* ==========================================================================
   MODEL (full-bleed statement)
   ========================================================================== */
.model {
  background-color: #0b0907;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.model__bg{position:absolute;inset:-20% 0;z-index:0;background-image:url("assets/group-fibre-sorting.webp");background-image:image-set(url("assets/group-fibre-sorting.avif") type("image/avif"),url("assets/group-fibre-sorting.webp") type("image/webp"));background-size:cover;background-position:center 50%;will-change:transform;pointer-events:none}
.model::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(14,9,5,.58);
  pointer-events: none;
}
.model > .container { position: relative; z-index: 2; }
.model__title { text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 22px rgba(0,0,0,.55); }
.model__inner { position: relative; max-width: 60rem; margin-inline: auto; }
.model__eyebrow { margin-bottom: 2.5rem; white-space: nowrap; }
.model__statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--vellum);
  margin-bottom: 2.5rem;
  text-wrap: balance;
}
.model__statement em { font-style: italic; color: var(--gold-soft); }
.model__title { margin: 0 auto; text-wrap: balance; }
.model__body { font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.8; color: var(--text); max-width: 60ch; margin: clamp(1.6rem, 3vh, 2.2rem) auto 0; text-wrap: pretty; text-shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 18px rgba(0,0,0,.45); }
.model__text { max-width: 74ch; margin: clamp(1.6rem, 3vh, 2.2rem) auto 0; }
.model__text .model__body { margin: 0; max-width: none; text-align: left; }
.model__divs + .model__body { margin-top: 1.1rem; }
.model__divs .model__body + .model__body { margin-top: 1.1rem; }
.model__div { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.3em; line-height: 1; letter-spacing: 0.005em; color: var(--gold-soft); }
.model__slogan { position: relative; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 1.85vw, 1.7rem); line-height: 1.5; color: var(--gold-soft); margin: clamp(2rem, 4vh, 2.6rem) auto 0; padding-top: 1.9rem; }
.model__slogan::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: clamp(2.75rem, 4vw, 3.75rem); height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.model__sub {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 54rem;
  margin: 0 auto 0.8rem;
  text-wrap: balance;
}
.model__sub--accent {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--gold-soft);
  margin-top: 2rem;
}

/* ==========================================================================
   THE MANDATE (positioning statement beneath The Group)
   ========================================================================== */
.mandate {
  background-color: var(--bg);
  background-image: url("assets/about-bg.webp");
  background-image: image-set(url("assets/about-bg.avif") type("image/avif"), url("assets/about-bg.webp") type("image/webp"));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.mandate__inner { max-width: 52rem; margin-inline: auto; }
@media (max-width: 600px) { .mandate { background-position: 80% top; } .mandate__closer { text-wrap: balance; } }
@media (min-width: 601px) and (max-width: 760px), (min-width: 601px) and (max-aspect-ratio: 5/4) and (max-width: 900px) { .mandate { background-position: 96% top; } }
.mandate__eyebrow { display: block; margin-bottom: clamp(1.4rem, 3vh, 2rem); }
.mandate__title { margin: 0 auto; text-wrap: balance; }
.mandate__body { font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.8; color: var(--text); max-width: 56ch; margin: clamp(1.6rem, 3vh, 2.2rem) auto 0; text-align: left; text-wrap: pretty; }
.mandate__body--cont { margin-top: 1.1rem; }
.mandate__closer { position: relative; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 1.85vw, 1.7rem); line-height: 1.45; color: var(--gold-soft); margin: clamp(2rem, 4vh, 2.6rem) auto 0; padding-top: 1.9rem; }
.mandate__closer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: clamp(2.75rem, 4vw, 3.75rem); height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); }

/* ==========================================================================
   MAISONS
   ========================================================================== */
.maisons { background-color: #000; border-top: 1px solid var(--line-soft); overflow: hidden; isolation: isolate; }
.maisons::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("assets/maisons-bg.webp"); background-image: image-set(url("assets/maisons-bg.avif") type("image/avif"), url("assets/maisons-bg.webp") type("image/webp")); background-size: cover; background-position: center bottom; background-repeat: no-repeat; transform: scale(1); transform-origin: 100% 100%; }
@media (max-width: 600px) { .maisons::before { background-position: 100% bottom; } }
.maisons .section__head .eyebrow,.ventures .section__head .eyebrow{text-shadow:0 0 2px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.75)}
.section__head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: start;
  column-gap: 3rem;
  row-gap: clamp(1.6rem, 3.5vh, 2.6rem);
  margin-bottom: clamp(3rem, 6vh, 5rem);
}
.section__head > .eyebrow { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
.section__head-main { grid-column: 1; grid-row: 2; max-width: 18ch; }
.section__head-intro {
  grid-column: 2; grid-row: 2;
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 1.9vw, 1.75rem);
  line-height: 1.5;
  color: var(--text);
  max-width: 42ch;
  justify-self: end;
  align-self: start;
}
/* Division blocks: one standard for the gold division line and the intro */
.division-line { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.3; color: var(--gold-soft); margin: clamp(1rem, 2vh, 1.4rem) 0 0; text-wrap: balance; }
.division-line--end { margin-top: clamp(1.8rem, 3.5vh, 2.4rem); }
.division-line--close { text-align: center; margin: clamp(2.4rem, 5vh, 3.4rem) auto clamp(1.8rem, 3.5vh, 2.4rem); max-width: 40ch; }
.division-intro { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.5; color: var(--text); margin: clamp(1.8rem, 3.5vh, 2.4rem) 0 0; max-width: 42ch; text-wrap: pretty; }
.section__head-intro em { font-style: italic; color: var(--gold-soft); }

/* Maisons header uses the default two-column layout so the intro lines up
   with the Tayrona Ventures intro. */

.maisons__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.maison {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.3fr 360px;
  align-items: center;
  gap: 1.75rem;
  padding: 1.75rem 1.75rem 1.75rem 0;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.6s var(--ease-out);
  overflow: hidden;
}
.maison::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold) 20%, var(--gold-soft) 50%, var(--gold) 80%, transparent);
  box-shadow: 0 0 5px rgba(188, 165, 109, 0.45);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.6s var(--ease-out);
}
.maison:hover { background-color: var(--bg-raise); }
.maison:hover::before { transform: scaleY(1); }
.maison__index {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  transition: color 0.5s var(--ease-out), padding-left 0.5s var(--ease-out);
}
.maison:hover .maison__index { color: var(--gold); padding-left: 0.8rem; }
.maison__id { }
.maison__head { padding-left: clamp(1.4rem, 2vw, 2rem); }
.maison__descriptor {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.7rem;
}
.maison__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--vellum);
  letter-spacing: -0.01em;
  transition: transform 0.6s var(--ease-out);
}
.maison:hover .maison__name { transform: translateX(0.4rem); }
.maison__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.1rem, 2.4vh, 1.7rem);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
}
.maison__more .arrow { display: inline-block; transition: transform 0.4s var(--ease-out); }
.maison:hover .maison__more { opacity: 1; transform: translateY(0); }
.maison:hover .maison__more .arrow { transform: translateX(3px); }
@media (hover: none) { .maison__more { opacity: 0.7; transform: none; } }
.maison__desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-dim);
}
.maison__media {
  width: 100%;
  height: 280px;
  align-self: center;
  border: 1px solid var(--line-soft);
  transition: border-color 0.6s var(--ease-out), transform 0.9s var(--ease-out);
}
.maison:hover .maison__media { border-color: var(--line-gold); transform: scale(1.02); }

/* per-house lighting wash across the whole row — glow from the top-left, over the title */
#qvinto        { background-image: radial-gradient(135% 280% at 1% -18%, #1d6149 0%, #0e3528 36%, #08160f 100%); }
#ameria-riva   { background-image: radial-gradient(135% 280% at 1% -18%, #8a7150 0%, #3c2e1c 36%, #15110a 100%); }
#tayrona-cacao { background-image: radial-gradient(135% 280% at 1% -18%, #6f4727 0%, #2e1d11 36%, #120b06 100%); }
#rudis-sylva   { background-image: radial-gradient(135% 280% at 1% -18%, #545f6c 0%, #20262e 36%, #0b0e12 100%); }
#sagana        { background-image: radial-gradient(135% 280% at 1% -18%, #0d6e51 0%, #00382a 38%, #04130d 100%); }

/* Qvinto maison card links to the Qvinto sub-page. A stretched-link overlay
   makes the whole row clickable; the image-slot is raised above it so its
   drop / browse / reframe controls keep working. */
.maison--linked { cursor: pointer; transition: background-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.maison__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: 0;
  color: transparent;
}
.maison--linked .maison__media { position: relative; z-index: 2; }
/* A plain image has no controls, so clicks pass through it to the link. */
.maison--linked .maison__media--img { pointer-events: none; }
/* one restrained hover: a soft brighten toward each house's own glow tint */
.maison--linked:hover { box-shadow: inset 0 0 90px -24px var(--maison-glow, rgba(47, 203, 155, 0.5)); }
#qvinto        { --maison-glow: rgba(47, 203, 155, 0.5); }
#ameria-riva   { --maison-glow: rgba(214, 178, 120, 0.5); }
#tayrona-cacao { --maison-glow: rgba(199, 137, 88, 0.5); }
#rudis-sylva   { --maison-glow: rgba(150, 178, 212, 0.45); }
#sagana        { --maison-glow: rgba(40, 200, 158, 0.5); }

/* ==========================================================================
   GFD — Structured Capital
   ========================================================================== */
.gfd {
  background: #0A0E18; /* GFD Ink, official GFD palette */
  border-top: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
.gfd__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.gfd__sticky { position: sticky; top: clamp(120px, 15vh, 150px); }
.gfd__statement {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.3;
  color: var(--gold-soft);
  margin: 2.5rem 0;
}
.gfd__programs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.gfd__program {
  display: block;
  padding-block: 1.3rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.5s var(--ease-out);
}
.gfd__program:hover { padding-left: 0.7rem; }
.gfd__program-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.gfd__program-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  color: var(--text);
}
.gfd__program-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  text-decoration: none;
}
.gfd__program-link .gfd__program-name { transition: color 0.4s ease; }
.gfd__program:hover .gfd__program-name { color: var(--gold-soft); }
.gfd__program-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
}
.gfd__program-more .arrow { transition: transform 0.4s var(--ease-out); }
.gfd__program:hover .gfd__program-more { opacity: 1; transform: translateX(0); }
.gfd__program:hover .gfd__program-more .arrow { transform: translateX(3px); }
@media (hover: none) { .gfd__program-more { opacity: 0.7; transform: none; } }
.gfd__top-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   NATION BUILDING INITIATIVES (homepage block, GFD pattern)
   ========================================================================== */
.nbi { position: relative; background: #140F09; border-top: 1px solid var(--line-soft); overflow: hidden; } /* NBI Umber Ground */
.nbi::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; right: -60%; background: linear-gradient(105deg, rgba(74,58,38,0) 30%, rgba(92,72,46,.45) 42%, rgba(110,88,58,.6) 50%, rgba(92,72,46,.45) 58%, rgba(74,58,38,0) 70%); transform: translate3d(calc((var(--nbi-p, .5) - .5) * 60%), 0, 0); pointer-events: none; will-change: transform; } /* scroll-driven light sweep */
@media (prefers-reduced-motion: reduce) { .nbi::before { transform: none; } }
.nbi > .container { position: relative; z-index: 1; }
.nbi .gfd__sticky { position: static; }
.nbi .gfd__sticky > .h2, .gfd .gfd__sticky > .h2 { margin-top: 1.25rem; }

.nbi__cta { margin-top: clamp(1.8rem, 3.5vh, 2.6rem); }
.nbi__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.nbi__item { border-bottom: 1px solid var(--line); transition: padding-left 0.5s var(--ease-out); }
.nbi__item:hover { padding-left: 0.7rem; }
.nbi__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1.2rem; padding-block: 1.4rem; text-decoration: none; color: inherit; }
.nbi__text { display: flex; flex-direction: column; gap: 0.3rem; }
.nbi__label { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); opacity: 0.8; }
.nbi__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.2rem, 1.8vw, 1.6rem); color: var(--text); transition: color 0.4s ease; }
.nbi__desc { font-size: 0.92rem; line-height: 1.65; color: var(--text-dim); max-width: 46ch; text-wrap: pretty; margin-top: 0.2rem; }
.nbi__item:hover .nbi__name { color: var(--gold-soft); }
.nbi__more { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity 0.4s ease, transform 0.4s var(--ease-out); }
.nbi__more .arrow { display: inline-block; transition: transform 0.4s var(--ease-out); }
.nbi__item:hover .nbi__more { opacity: 1; transform: translateX(0); }
.nbi__item:hover .nbi__more .arrow { transform: translateX(3px); }
@media (hover: none) { .nbi__more { opacity: 0.7; transform: none; } }
@media (max-width: 600px) { .nbi__link { grid-template-columns: minmax(0, 1fr); } }

/* Project Pillars: its own section after GFD, shared standard for NBI and GFD */
.pillars-sec { background: var(--bg); }
.pillars-sec .gfd__pillars { margin-top: 0; padding-block: 0; }
.gfd__pillars {
  background: transparent;
  padding-block: clamp(2rem, 4vh, 3.25rem);
  margin-top: clamp(2.5rem, 5vh, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gfd__pillars-inner { position: relative; }

/* Horizontal pillars rail — one full-width slide at a time */
.pillars-rail {
  position: relative;
  margin-top: clamp(2.25rem, 4.5vh, 3.25rem);
  display: flex;
  gap: clamp(2rem, 5vw, 5rem);
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: max(var(--margin), calc((100% - var(--content)) / 2));
  padding-block: 0.4rem;
  scrollbar-width: none;
  cursor: grab;
}
.pillars-rail::-webkit-scrollbar { display: none; }
.pillars-rail.is-grabbing { cursor: grabbing; }
.pillars-rail:focus-visible { outline: 1px solid var(--line-gold); outline-offset: 6px; }

.pillar-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  text-align: left;
}
.pillar-slide__media {
  display: block;
  width: 100%;
  height: clamp(300px, 42vh, 430px);
  border: 1px solid var(--line-soft);
}
.pillar-slide__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.08;
  color: var(--vellum);
  margin: 0 0 clamp(1rem, 2vh, 1.5rem);
}
.pillar-slide__body {
  font-family: var(--sans);
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.75;
  color: var(--text-dim);
  margin: 0;
  max-width: 48ch;
  text-wrap: pretty;
}
.pillar-card__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
  max-width: 16rem;
}
.pillar-card__num {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  color: var(--gold);
}
.pillar-card__tick {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line-gold), transparent);
}

/* Four-pillar criteria chart — brief version on the homepage, mirrors the GFD page */
.gfd__pillars { --v-accent-soft: #7FA6D2; }
.gfd__pillars .v-chain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-gold);
  text-align: left;
  margin-top: clamp(2.25rem, 4.5vh, 3.25rem);
}
.gfd__pillars .v-step {
  position: relative;
  padding: clamp(1.6rem, 2.4vw, 2.2rem) clamp(1.1rem, 1.6vw, 1.6rem) clamp(2rem, 3vh, 2.6rem);
  border-right: 1px solid var(--line-soft);
}
.gfd__pillars .v-step:last-child { border-right: 0; }
.gfd__pillars .v-step__num {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--v-accent-soft);
  display: block;
  margin-bottom: 1rem;
}
.gfd__pillars .v-step__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  line-height: 1.12;
  color: var(--text);
  margin: 0 0 0.7rem;
  letter-spacing: -0.01em;
  min-height: 2.24em;
}
.gfd__pillars .v-step__desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0;
  text-wrap: pretty;
}
.gfd__pillars .v-step::before {
  content: '';
  position: absolute;
  top: -3px; left: clamp(1.1rem, 1.6vw, 1.6rem);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px 1px rgba(188, 165, 109, 0.6);
}
@media (max-width: 1024px) {
  .gfd__pillars .v-chain { grid-template-columns: repeat(2, 1fr); }
  .gfd__pillars .v-step:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  .gfd__pillars .v-chain { grid-template-columns: 1fr; }
  .gfd__pillars .v-step { border-right: 0; }
}

/* Dot markers */
.pillars-dots {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
}

/* ---- Vertical alternating stack variant ---- */
.pillars-stack {
  margin-top: clamp(2.75rem, 5.5vh, 4.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 8vh, 7rem);
}
.pillar-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  text-align: left;
}
.pillar-row--reverse .pillar-row__media { order: 2; }
.pillar-row--reverse .pillar-row__text { order: 1; }
.pillar-row__media {
  display: block;
  width: 100%;
  height: clamp(320px, 44vh, 460px);
  border: 1px solid var(--line-soft);
}
.pillar-row__text { max-width: 30rem; }
.pillar-row--reverse .pillar-row__text { justify-self: end; }

.pillars-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid rgba(188, 165, 109, 0.5);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.45s var(--ease-out), border-color 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.pillars-dot:hover { border-color: var(--gold); }
.pillars-dot.is-active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.15);
}

.gfd__give {
  margin: clamp(3rem, 6vh, 5rem) auto 0;
  max-width: 70ch;
  text-align: center;
}
.gfd__give .body { text-wrap: pretty; }

.gfd__slogan {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.65vw, 1.65rem);
  color: var(--gold);
  margin-top: clamp(1.6rem, 3vh, 2.4rem);
  text-align: center;
  white-space: nowrap;
}

.gfd__coda {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  color: var(--vellum);
  margin-top: 3.5rem;
}

/* ==========================================================================
   VENTURES
   ========================================================================== */
.ventures { background-color: #000; border-top: 1px solid var(--line-soft); background-image: url("assets/ventures-bg.webp"); background-image: image-set(url("assets/ventures-bg.avif") type("image/avif"), url("assets/ventures-bg.webp") type("image/webp")); background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
.ventures__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2vw, 2rem);
  margin-top: clamp(3rem, 6vh, 5rem);
}
.venture {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  padding: 2.2rem;
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  transition: transform 0.7s var(--ease-out), border-color 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.venture::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.55;
  transition: opacity 0.8s var(--ease-out), transform 1.2s var(--ease-out);
}
.venture:hover {
  transform: translateY(-8px);
  border-color: var(--line-gold);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--glow-edge),
    0 0 46px 2px var(--glow);
}
.venture:hover::before { opacity: 0.8; transform: scale(1.05); }
.venture::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold-soft) 50%, var(--gold) 80%, transparent);
  box-shadow: 0 0 5px rgba(188, 165, 109, 0.45);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.6s var(--ease-out);
  z-index: 1;
}
.venture:hover::after { transform: scaleX(1); }
/* Linked venture card: a stretched overlay link makes the whole card
   clickable (the "Explore" arrow stays as the visible affordance). */
.venture--linked { cursor: pointer; }
.venture__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}
.v-emeralds::before { background: radial-gradient(120% 100% at 70% 10%, #14463a 0%, #0a2018 55%, #060d0a 100%); }
.v-teg::before      { background: radial-gradient(120% 100% at 70% 10%, #3a1614 0%, #1d0e0c 55%, #0a0605 100%); }
/* Perimeter glow tints — each tuned to its own venture identity */
.v-emeralds { --glow: rgba(46, 168, 130, 0.28); --glow-edge: rgba(46, 168, 130, 0.34); }
.v-teg      { --glow: rgba(162, 59, 54, 0.28); --glow-edge: rgba(162, 59, 54, 0.34); }
.venture__group {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0;
}
.venture__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1.05;
  color: var(--vellum);
  margin: 1.4rem 0 1.5rem;
  min-height: 2.1em;
  transition: color 0.4s ease;
}
.venture:hover .venture__name { color: var(--gold-soft); }
.venture__desc {
  font-size: 0.92rem;
  line-height: 1.66;
  color: var(--text-dim);
}
.venture__arrow {
  margin-top: auto;
  padding-top: 1.8rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  align-self: flex-start;
  max-width: 100%;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
}
.venture__arrow .arrow {
  display: inline-block;
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}
.venture:hover .venture__arrow { opacity: 1; transform: translateY(0); }
.venture:hover .venture__arrow .arrow { transform: translateX(3px); }
@media (hover: none) { .venture__arrow { opacity: 0.7; transform: none; } }

/* ==========================================================================
   PRINCIPLES
   ========================================================================== */
.principles {
  background-color: var(--ink);
  background-image: linear-gradient(180deg, rgba(3,8,18,.62) 0%, rgba(3,8,18,.48) 30%, rgba(3,8,18,.56) 65%, rgba(3,8,18,.78) 100%), url("assets/home-principles-bg.webp");
  background-image: linear-gradient(180deg, rgba(3,8,18,.62) 0%, rgba(3,8,18,.48) 30%, rgba(3,8,18,.56) 65%, rgba(3,8,18,.78) 100%), image-set(url("assets/home-principles-bg.avif") type("image/avif"), url("assets/home-principles-bg.webp") type("image/webp"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: min(56.25vw, 1100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.principles::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 50%, rgba(3,8,18,.5), rgba(3,8,18,0) 100%);
  pointer-events: none;
}
.principles__inner { position: relative; text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.45); }
.principles__list {
  list-style: none;
  margin: clamp(3rem, 6vh, 5rem) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 2.5vw, 2.5rem);
}
.principles__item {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 1.25;
  color: var(--vellum);
  text-align: center;
  position: relative;
  padding-top: 3rem;
  transition: transform 0.55s var(--ease-out), color 0.55s var(--ease-out);
}
.principles__item::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: clamp(1.5rem, 3.5vh, 2.2rem);
  background: linear-gradient(to bottom, var(--gold), transparent);
  transition: height 0.55s var(--ease-out), filter 0.55s var(--ease-out);
}
.principles__item:hover {
  transform: translateY(-7px) scale(1.04);
  color: #FFFCF4;
}
.principles__item:hover::before {
  height: clamp(2rem, 4.5vh, 2.8rem);
  filter: brightness(1.45);
}
.principles__closing {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.1;
  color: var(--gold-soft);
  letter-spacing: -0.02em;
  max-width: 30ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* ==========================================================================
   LEGACY CLOSE
   ========================================================================== */
.home-close {
  text-align: center;
  background: var(--bg-blue);
}
.home-close__eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(0.6rem, 0.72vw, 0.72rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.6rem;
}
.home-close__logo {
  width: 196px;
  height: 82px;
  display: block;
  margin: 0 auto 2.6rem;
  opacity: 0.95;
}
.home-close__line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  line-height: 1.5;
  color: var(--gold-soft);
  margin: 0 auto;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-top: 1px solid var(--line-gold);
  padding-block: clamp(4rem, 8vh, 7rem) 1.5rem;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.75rem 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.footer__brand { flex: 0 0 auto; }
.footer__col { flex: 0 0 auto; width: max-content; }
.footer__logo-link { display: inline-block; margin-bottom: 1.4rem; }
.footer__logo {
  width: 196px; height: auto; min-height: 82px;
  object-fit: contain; object-position: left center; display: block;
}
.footer__brand .footer__tag { margin: 0 0 0 4px; max-width: 192px; }
.footer__brand-name {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 300;
  color: var(--vellum);
  margin-bottom: 1.4rem;
}
.footer__tag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--gold-soft);
  line-height: 1.5;
  max-width: 26ch;
}
.footer__col-title {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.5;
  min-height: 3em; /* reserve two lines so every column's links align */
  margin-bottom: 1.4rem;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 0.85rem; }
.footer__col a {
  font-size: 0.9rem;
  color: var(--text);
  transition: color 0.4s var(--ease-out);
}
.footer__col a:hover { color: var(--gold-soft); }
.footer__col-title a {
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  transition: color 0.4s var(--ease-out);
}
.footer__col-title a:hover { color: var(--gold-soft); }
/* Footer social icons */
.footer__follow {
  flex: 0 0 100%;
  order: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  margin-top: 0;
}
.footer__social-title { font-size: 0.9rem; color: var(--text); margin: 0; }
.footer__social { display: flex; align-items: center; gap: 1.15rem; }
.footer__social a { color: var(--text); display: inline-flex; transition: color 0.4s var(--ease-out); }
.footer__social a:hover { color: var(--gold-soft); }
.footer__social svg { width: 16px; height: 16px; display: block; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.25rem;
  flex-wrap: wrap;
}
.footer__copy {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.footer__legal { display: flex; gap: 0; flex-wrap: wrap; align-items: baseline; }
.footer__legal a,
.footer__legal button {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.4s var(--ease-out);
  /* button matches the links exactly */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: inherit;
}
.footer__legal a:hover,
.footer__legal button:hover { color: var(--gold-soft); }
/* thin middot between items, dimmed and unaffected by item hover */
.footer__legal > * + *::before {
  content: '\00B7';
  margin: 0 0.7rem;
  color: var(--text-faint);
  opacity: 0.5;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .about__layout { grid-template-columns: 1fr; }
  .about__head, .about__lede, .about__timeline, .about__eyebrow { grid-column: 1; grid-row: auto; }
  .gfd__grid { grid-template-columns: 1fr; gap: 3rem; }
  .gfd__sticky { position: static; }
  .ventures__grid { grid-template-columns: 1fr; }
  .venture { min-height: 360px; }
  .maison { grid-template-columns: 1fr 220px; }
  .maison__media { height: 200px; }
  .maison__desc { display: none; }
  .maison__more { display: none; }
}

/* Collapse point for the four-division bar: below 1200px the full row
   (logo + six items) no longer fits on one line, so the menu takes over. */
.nav__brand { flex-shrink: 0; }
@media (max-width: 1200px) {
  .nav__links { display: none; }
  .nav__panel { display: none; }
  .nav__item { display: block; }
  .nav__links.open {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.8rem;
    padding: var(--margin);
    background: rgba(11, 9, 7, 0.97);
    backdrop-filter: blur(8px);
  }
  .nav__links.open .nav__link { font-size: 1.4rem; font-family: var(--serif); color: var(--vellum); }
  .nav__links.open .nav__link--cta { font-size: 1.4rem; font-family: var(--serif); color: var(--gold); letter-spacing: normal; text-transform: none; }
  .nav__toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 7100;
    padding: 0.4rem;
  }
  .nav__toggle span {
    width: 26px; height: 1.5px;
    background: var(--vellum);
    transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
  }
  .nav.menu-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}
@media (max-width: 680px) {
  .section__head { grid-template-columns: 1fr; }
  .section__head > .eyebrow, .section__head-main, .section__head-intro { grid-column: 1; grid-row: auto; }
  .section__head-intro { justify-self: start; }
  .maison { grid-template-columns: 1fr; }
  .maison__swatch { display: none; }
  .principles__list { grid-template-columns: repeat(2, 1fr); }
  .principles__item + .principles__item::before { display: none; }
  .pillar-slide { grid-template-columns: 1fr; gap: 1.5rem; }
  .pillar-slide__media { height: clamp(200px, 30vh, 280px); }
  .pillar-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .pillar-row--reverse .pillar-row__media { order: 0; }
  .pillar-row--reverse .pillar-row__text { order: 0; justify-self: start; }
  .pillar-row__media { height: clamp(200px, 30vh, 280px); }
  .pillar-row__text { max-width: none; }
  .pillar-card__head { max-width: none; }
  .gfd__slogan { white-space: normal; }
}

/* Six-column footer sitemap (shared by Homepage + History) */
@media (max-width: 1180px) {
  .footer__top { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer__top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .reveal.in, .reveal-line.in > * { animation: none !important; }
  .reveal-line > * { opacity: 1 !important; transform: none !important; }
  .ventures__title span { opacity: 1 !important; transform: none !important; animation: none !important; }
}
@media (max-aspect-ratio: 4/3){.model{background-size:cover;background-position:32% 60%}}
.maisons .section__head .eyebrow,.ventures .section__head .eyebrow{position:relative;isolation:isolate;width:fit-content}
.maisons .section__head .eyebrow::before,.ventures .section__head .eyebrow::before{content:"";position:absolute;inset:-0.9em -1.6em;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 100%)}
.maisons .section__head-main .h2,.ventures .section__head-main .h2{position:relative;isolation:isolate;width:fit-content}
.maisons .section__head-main .h2::before,.ventures .section__head-main .h2::before{content:"";position:absolute;inset:-0.35em -0.6em;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,0) 100%)}
.maison__media--img{overflow:hidden;border-radius:2px;background:#000}
.maison__media--img picture,.maison__media--img img{display:block;width:100%;height:100%}
.maison__media--img img{object-fit:cover;object-position:center}
.home-legacy{position:relative;overflow:hidden;min-height:100vh;padding-top:94px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bg)}
.home-legacy__bg{position:absolute;inset:0;z-index:0;background-image:url("assets/home-legacy-bg.webp");background-image:image-set(url("assets/home-legacy-bg.avif") type("image/avif"),url("assets/home-legacy-bg.webp") type("image/webp"));background-size:cover;background-position:center top}
.home-legacy__veil{position:absolute;inset:0;z-index:1;background-color: rgba(0,0,0,calc(1 - (.42)));-webkit-mask-image:radial-gradient(42% 46% at 50% 56%,#000 0%,rgba(0,0,0,.72) 48%,rgba(0,0,0,.3) 78%,rgba(0,0,0,.1) 100%);mask-image:radial-gradient(42% 46% at 50% 56%,#000 0%,rgba(0,0,0,.72) 48%,rgba(0,0,0,.3) 78%,rgba(0,0,0,.1) 100%)}
.home-legacy .container{position:relative;z-index:2}
.home-legacy .awl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.home-legacy .awl__in{display:block;will-change:transform}
.home-legacy__logo{width:208px;height:auto;min-height:87px;object-fit:contain;display:block;margin:0 auto clamp(2.4rem,4vh,3.4rem);opacity:.95}
.home-legacy__line{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.6rem,2.9vw,2.5rem);line-height:1.5;color:var(--gold-soft);margin:0 auto;max-width:none;text-wrap:balance;text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 18px rgba(0,0,0,.45)}
.home-legacy__line > span{display:block}
@supports not ((backdrop-filter:brightness(1)) or (-webkit-backdrop-filter:brightness(1))){.home-legacy__veil{background:radial-gradient(42% 46% at 50% 56%,rgba(3,10,16,.72) 0%,rgba(3,10,16,.5) 48%,rgba(3,10,16,.2) 78%,rgba(3,10,16,.08) 100%)}}

.ventures__grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.ventures__grid--two{grid-template-columns:1fr}}

/* NBI initiatives: hover name in each initiative's colour (Colour System, Nation Building) */
#hbk-tayrona{--nbi-c:#CDB98A}#tayrona-energy{--nbi-c:#7DB9BC}#tayrona-mgo{--nbi-c:#C3CBD3}#tayrona-public-mobility{--nbi-c:#C3D58A}#tayrona-korea{--nbi-c:#B5D0C5}#tayrona-africa{--nbi-c:#DA9A70}
.nbi__item:hover .nbi__name{color:var(--nbi-c,var(--gold-soft))}


/* Open menu must cover the whole screen. The scrolled header's frosted blur would
   otherwise trap the fixed menu inside the header strip, so it is dropped while open. */
.nav.menu-open { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; filter: none !important; }
html:has(.nav.menu-open), body:has(.nav.menu-open) { overflow: hidden; }
/* Logo stays above the open menu so it still takes you home. */
.nav.menu-open .nav__brand { position: relative; z-index: 7100; }
/* Phone menu: expandable divisions. The "+" only exists inside the open menu. */
.nav__expand { display: none; }
@media (max-width: 1200px) {
  .nav__links.open { height: 100vh; height: 100dvh; justify-content: flex-start; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; gap: 1.4rem; padding-top: 9rem; padding-bottom: 3rem; }
  .nav__links.open::-webkit-scrollbar { display: none; }
  /* Pinned to the top: opening a division only pushes the items below it. */
  .nav__links.open .nav__item { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: 0.75rem; width: 100%; max-width: 34rem; }
  .nav__links.open .nav__link { white-space: normal; justify-self: start; }
  .nav__links.open .nav__expand { display: grid; place-items: center; width: 44px; height: 44px; position: relative; color: var(--gold-soft); }
  .nav__expand::before, .nav__expand::after { content: ''; position: absolute; width: 14px; height: 1px; background: currentColor; transition: transform 0.4s var(--ease-out); }
  .nav__expand::after { transform: rotate(90deg); }
  .nav__item.sub-open > .nav__expand::after { transform: rotate(0deg); }
  .nav__links.open .nav__item.sub-open > .nav__panel { display: block; grid-column: 1 / -1; position: static; margin: 0.9rem 0 0.3rem; padding: 0 0 0 1rem; min-width: 0; background: none; border: 0; border-left: 1px solid var(--line-gold); box-shadow: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav__links.open .nav__panel::before, .nav__links.open .nav__panel-title { display: none; }
  .nav__links.open .nav__sub { padding: 0.55rem 0; }
  .nav__links.open .nav__sub-name { font-size: 1.05rem; }
}

/* Scroll performance overrides (Oct 2026)
   The nav no longer blurs what scrolls beneath it, except over the homepage hero
   on desktop. Once condensed, the bar is 92% dark with a clean bottom edge
   and no rule line beneath it. */
.nav.scrolled { background-color: rgba(11, 9, 7, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.home .nav.scrolled.nav--solid { background-color: rgba(11, 9, 7, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
@media (hover: none), (max-width: 768px) {
  .home .nav.scrolled { background-color: rgba(11, 9, 7, 0.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body:not(.home) .nav:not(.scrolled)::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Every page with a hero: translucent over the film, solid once past it (as the homepage) */
.has-hero-nav .nav.scrolled { background-color: rgba(11, 9, 7, 0.28); -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%); border-bottom-color: transparent; }
.has-hero-nav .nav.scrolled.nav--solid { background-color: rgba(11, 9, 7, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
@media (hover: none), (max-width: 768px) {
  .has-hero-nav .nav.scrolled { background-color: rgba(11, 9, 7, 0.5); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Phones and tablets: background plates hold still and sit inside their section, so the
   plate and its veil are always drawn together. As a separate, taller layer the plate
   could show un-veiled for a moment at the edge of the screen on a fast scroll. */
@media (hover: none) and (pointer: coarse) {
  .nation__bg, .gov-bleed__bg, .prin-bleed__bg, .about-block__bg, .q-parallax .q-marble__bg {
    inset: 0 !important; transform: none !important; will-change: auto !important;
  }
}

/* Maison cards on tablet + phone: description restored, image centred in the card. */
@media (max-width: 1024px) {
  .maison { grid-template-columns: minmax(0,1fr) 260px; grid-template-areas: "head media" "body media"; align-items: center; column-gap: 1.6rem; row-gap: 0.9rem; padding: 1.6rem; }
  .maison__head { grid-area: head; padding-left: 0; align-self: end; }
  .maison__body { grid-area: body; align-self: start; }
  .maison__desc { display: block; }
  .maison__media { grid-area: media; height: 220px; }
}
@media (max-width: 760px), (max-aspect-ratio: 5/4) and (max-width: 900px) {
  .maison { grid-template-columns: minmax(0,1fr); grid-template-areas: "head" "media" "body"; padding: clamp(1.2rem, 5vw, 1.6rem); row-gap: 1.1rem; }
  .maison__head, .maison__body { align-self: auto; }
  .maison__media { height: auto; aspect-ratio: 9 / 7; width: 100%; margin-inline: auto; }
  .maison:hover .maison__media { transform: none; }
}

/* Section heads stack on the open Fold and small tablets, not only below 680px. */
@media (max-width: 820px), (max-aspect-ratio: 5/4) and (max-width: 900px) {
  .section__head { grid-template-columns: 1fr; }
  .section__head > .eyebrow, .section__head-main, .section__head-intro { grid-column: 1; grid-row: auto; }
  .section__head-intro { justify-self: start; max-width: 60ch; }
}

/* Touch screens have no hover, so every card shows its Explore link. */
@media (hover: none), (max-width: 1024px) {
  .maison__more, .nbi__more, .venture__arrow, .gfd__program-more { display: inline-flex !important; align-items: center; gap: 0.5rem; opacity: 1 !important; visibility: visible !important; transform: none !important; }
}
/* Ventures cards on tablet + phone: shorter, and always equal height. */
@media (max-width: 1024px) {
  .ventures__grid { grid-auto-rows: 1fr; }
  .venture { min-height: 0; }
}

/* Open Fold / wide stacked cards: a slightly shorter image and a tighter Explore link so each Maison fits on one screen. */
@media (min-width: 601px) and (max-width: 760px), (min-width: 601px) and (max-aspect-ratio: 5/4) and (max-width: 900px) {
  .maison__media { aspect-ratio: 16 / 10; }
  .maison__more { margin-top: 0.9rem; }
}

/* NBI light sweep on phones: the section is several screens tall, so the desktop ray
   became a screen-wide wash that barely moved. Here it is a defined shaft of light
   that crosses the screen once as the section scrolls past. */
@media (max-width: 760px), (max-aspect-ratio: 5/4) and (max-width: 900px) {
  .nbi::before { left: -150%; right: -150%; background: linear-gradient(100deg, rgba(74,58,38,0) calc(50% - 230px), rgba(92,72,46,.38) calc(50% - 110px), rgba(112,89,59,.57) 50%, rgba(92,72,46,.38) calc(50% + 110px), rgba(74,58,38,0) calc(50% + 230px)); transform: translate3d(calc((var(--nbi-p, .5) - .5) * 50%), 0, 0); }
}

/* Long division links on narrow phones: "Explore" on its own line, the division name and arrow kept together. */
.m-br { display: none; }
.text-link .nw { white-space: nowrap; }
@media (max-width: 600px) {
  .text-link--split { display: inline-block; line-height: 2; }
  .text-link--split .m-br { display: inline; }
}

/* Project Pillars stacked: every row of pillars gets its own gold rule with the dot on it. */
@media (max-width: 1024px) {
  .gfd__pillars .v-step:nth-child(n+3) { border-top: 1px solid var(--line-gold); }
}
@media (max-width: 600px) {
  .gfd__pillars .v-step:nth-child(n+2) { border-top: 1px solid var(--line-gold); }
  .gfd__pillars .v-step__name { min-height: 0; }
}

/* Principles band on phones */
.fold-br { display: none; }
@media (max-width: 600px) { .principles__item { white-space: nowrap; font-size: min(1.2rem, 4.8vw); } }
@media (max-width: 600px) { .principles__closing { font-size: min(2rem, 6.2vw); } }

/* Homepage close (all screens): an even veil over the whole photo (as on About), not a dark pool behind the lockup. */
@media all {
  .home-legacy__veil { -webkit-mask-image: none; mask-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: radial-gradient(ellipse 70% 50% at 50% 52%, rgba(6,8,10,.5) 0%, rgba(6,8,10,.36) 60%, rgba(6,8,10,.26) 100%), rgba(6,8,10,.3); }
}

/* Phones held sideways (short screens) */
@media (orientation: landscape) and (max-height: 500px) {
  .nav, .nav.scrolled { padding-block: .55rem; }
  .nav.scrolled, .home .nav.scrolled.nav--solid, .has-hero-nav .nav.scrolled, .has-hero-nav .nav.scrolled.nav--solid { background-color: rgba(11,9,7,.5); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); }
  .section__head { grid-template-columns: minmax(0,1fr) minmax(0,1.25fr) !important; column-gap: clamp(1.5rem,4vw,3rem); }
  .section__head .h2 { min-width: 6.4em; }
}

/* Homepage close on phones held sideways: lockup sits just under the header (same as About), sizes unchanged. */
@media (orientation: landscape) and (max-height: 500px) {
  .home-legacy { align-items: flex-start; padding-top: 80px; }
  .home-legacy .container { transform: none; padding-top: 1.1rem; }
  .home-legacy .home-close__eyebrow { margin-bottom: .7rem; }
  .home-legacy .home-legacy__logo { margin-bottom: 1.4rem; }
}

/* "Long-horizon / value creation" on narrow phones; wider screens keep "Long-horizon value / creation". */
.ph-br { display: none; }
@media (max-width: 600px) { .principles__item .ph-br { display: inline; } .principles__item .dt-br { display: none; } }

/* Phones: plain sections share 64px top and bottom. Parallax plates, drift plates and closings keep their own spacing.
   :where() keeps this at single-class weight, so any page-specific padding still wins. */
@media (max-width: 768px) {
  .section:where(:not([class*="parallax"]):not(.v-drift):not(.q-legacy):not(.v-legacy):not(.home-close)) { padding-block: 64px; }
}