/* ============================================================
   CINEMA LIVE — The Photograph Alive · Live Film Cut · Oakmeade Partners
   Verdant's design system carried by the founding scene: a
   full-page fixed looping film (the Oaktree technique) — here
   AI-generated live footage of the photograph's scene, one
   continuous wide perspective dissolved into a seamless
   loop — plays beneath
   translucent sections. Gold is precious: hairlines only.
   ============================================================ */

:root {
  /* palette */
  --abyss: #04140b;
  --panel: #0a2417;
  --panel-2: #0d2c1c;
  --emerald: #2fa96a;
  --leaf: #5fd08e;
  --gold: #c9a04e;
  --gilt: #e9c87e;
  --ivory: #f2ecdd;
  --sage: #8fae9b;
  --hairline: rgba(201, 160, 78, 0.30);
  --hairline-dim: rgba(201, 160, 78, 0.16);
  --shadow: rgba(1, 8, 5, 0.55);

  /* type */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Outfit', 'Helvetica Neue', sans-serif;

  /* scale — minor-third-ish fluid ramp, showcase-bold at the top end */
  --fs-hero: clamp(2.85rem, 0.9rem + 8vw, 8.25rem);
  --fs-h2: clamp(2.2rem, 1.1rem + 3.9vw, 5rem);
  --fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  --fs-quote: clamp(1.65rem, 1rem + 2.9vw, 3.7rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem; /* 11px small-caps kickers */

  /* rhythm */
  --gutter: clamp(1.375rem, 5vw, 5.5rem);
  --section-pad: clamp(5.5rem, 8rem + 4vh, 10.5rem);
  --nav-h: 84px;
  --measure: 62ch;

  --ease-verdant: cubic-bezier(0.22, 0.85, 0.3, 1);
  --ease-hover: cubic-bezier(0.33, 1, 0.4, 1);
}

@media (max-width: 700px) {
  :root { --section-pad: 4.75rem; }
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--abyss);
  scrollbar-color: #143824 #04140b; /* Firefox */
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--abyss);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(201, 160, 78, 0.9); color: var(--abyss); }

/* film grain — a whisper of texture over the abyss so no surface reads
   flat. The tile is an inline SVG turbulence: zero network requests. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* skip link — hidden until focused, then a gold pill above everything */
.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 500;
  transform: translateY(-260%);
  padding: 0.75em 1.5em;
  background: var(--panel);
  color: var(--gilt);
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease-hover);
}
.skip-link:focus-visible { transform: none; }

img { max-width: 100%; display: block; }

a { color: var(--gilt); text-decoration: none; transition: color 0.35s var(--ease-hover); }

:focus { outline: none; }
:focus-visible {
  outline: 1.5px solid var(--gilt);
  outline-offset: 4px;
  border-radius: 2px;
}

/* thin luxe scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--abyss); }
::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 6px; border: 2px solid var(--abyss); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ============================================================
   THE PHOTOGRAPH ALIVE — full-page fixed background layers.
   The looping film (or its Ken Burns fallback) sits at z-index 0;
   every content section paints above it at z-index 1+.
   ============================================================ */
.bg-video-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* the no-JS / no-video ground: the same photograph, given a slow CSS
   Ken Burns drift so the page never loses its breath entirely */
.bg-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
}
.bg-fallback picture, .bg-fallback img { width: 100%; height: 100%; }
.bg-fallback img {
  object-fit: cover;
  object-position: center 42%;
  filter: brightness(0.7) saturate(0.85);
  animation: kenburns 36s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.07) translateX(1.4%); }
}
body.no-video .bg-video-wrap { display: none; }
body.no-video .bg-fallback { display: block; }

/* all content rides above the photograph */
main { position: relative; z-index: 1; }

/* ---------- utility type ---------- */
.kicker {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
  color: var(--gold);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.85em;
}
.section-num::after {
  content: '';
  width: clamp(2.5rem, 4vw, 4.5rem);
  height: 1px;
  background: var(--hairline);
  align-self: center;
  transform: scaleX(var(--snum, 1));
  transform-origin: left center;
}
.section-num .sn-label {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sage);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 380;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ivory);
}
h1 em, h2 em, h3 em, .quote-text em {
  font-style: italic;
  font-weight: 340;
  color: var(--gilt);
}

.lede { color: var(--sage); max-width: var(--measure); }

/* masked line reveals — .mask wraps each display line */
.mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mask > .line { display: block; will-change: transform; }

/* gold hairline that draws itself */
.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(201, 160, 78, 0.05));
  transform-origin: left center;
  border: none;
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.02em 2.1em;
  border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--gilt);
  background: var(--btn-bg);
  cursor: pointer;
  transition:
    background-color 0.45s var(--ease-hover),
    color 0.45s var(--ease-hover),
    border-color 0.45s var(--ease-hover),
    box-shadow 0.45s var(--ease-hover),
    transform 0.45s var(--ease-hover);
  will-change: transform;
}
.btn-gold {
  background: linear-gradient(160deg, rgba(201, 160, 78, 0.16), rgba(201, 160, 78, 0.05));
  box-shadow: inset 0 0 0 0 rgba(201, 160, 78, 0);
}
.btn-gold:hover {
  background: var(--gold);
  color: var(--abyss);
  box-shadow: 0 6px 32px -6px rgba(201, 160, 78, 0.45);
}
.btn-ghost {
  border-color: rgba(242, 236, 221, 0.28);
  color: var(--ivory);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gilt);
  box-shadow: 0 6px 28px -8px rgba(201, 160, 78, 0.35);
}
.btn:active { transform: translateY(1px) scale(0.99); }

/* ---------- scroll progress ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gilt));
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 200;
  pointer-events: none;
}

/* ---------- navigation ---------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  transition: background-color 0.5s ease, backdrop-filter 0.5s ease, border-color 0.5s ease, height 0.5s ease;
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled {
  height: 68px;
  background: rgba(4, 20, 11, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline-dim);
}

.wordmark {
  justify-self: start;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ivory);
  white-space: nowrap;
}
.wordmark:hover { color: var(--gilt); }
.wordmark .wm-tail { color: var(--sage); font-weight: 300; letter-spacing: 0.34em; }

.nav-links {
  display: flex;
  gap: clamp(1.4rem, 2.6vw, 2.75rem);
  list-style: none;
}
.nav-links a {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  position: relative;
  padding: 0.4em 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease-hover);
}
.nav-links a:hover { color: var(--ivory); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left center; }

.nav-right { justify-self: end; display: flex; align-items: center; gap: 1rem; }

.portal-pill {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gilt);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.72em 1.6em;
  transition: background-color 0.4s var(--ease-hover), color 0.4s var(--ease-hover), box-shadow 0.4s var(--ease-hover);
  white-space: nowrap;
}
.portal-pill:hover {
  background: var(--gold);
  color: var(--abyss);
  box-shadow: 0 4px 24px -6px rgba(201, 160, 78, 0.5);
}

/* hamburger (mobile) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--hairline-dim);
  border-radius: 50%;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--gilt);
  transition: transform 0.4s var(--ease-hover), opacity 0.3s;
}
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 20, 11, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu ul { list-style: none; display: grid; gap: 0.4rem; }
.mobile-menu a {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(2rem, 9vw, 3rem);
  color: var(--ivory);
  line-height: 1.35;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.6s var(--ease-verdant), opacity 0.6s ease, color 0.3s;
}
.mobile-menu a small {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.mobile-menu a:hover { color: var(--gilt); }
body.menu-open .mobile-menu a { transform: translateY(0); opacity: 1; }
body.menu-open .mobile-menu li:nth-child(1) a { transition-delay: 0.08s; }
body.menu-open .mobile-menu li:nth-child(2) a { transition-delay: 0.14s; }
body.menu-open .mobile-menu li:nth-child(3) a { transition-delay: 0.2s; }
body.menu-open .mobile-menu li:nth-child(4) a { transition-delay: 0.26s; }
body.menu-open .mobile-menu li:nth-child(5) a { transition-delay: 0.32s; }
.mobile-menu .mm-foot {
  margin-top: 3rem;
  color: var(--sage);
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  /* hide the whole <nav> — an empty grid track here used to push
     .nav-right onto a second row and break the header */
  .site-nav nav { display: none; }
  .nav-toggle { display: flex; }
  .site-nav { grid-template-columns: 1fr auto; }
}
@media (max-width: 480px) {
  .portal-pill { padding: 0.66em 1.1em; letter-spacing: 0.14em; }
  /* keep the full wordmark on phones; tighten tracking so
     "Oakmeade Partners" clears the menu toggle down to 320px */
  .wordmark,
  .wordmark .wm-tail { font-size: 0.875rem; letter-spacing: 0.24em; }
}

/* ---------- hero — fully transparent over the living photograph ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
/* the scrim lives on ::before — there is no scrim div; the photograph
   itself is the fixed page background showing straight through */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 20, 11, 0.55) 0%, transparent 22%),
    linear-gradient(0deg, rgba(4, 20, 11, 0.94) 0%, rgba(4, 20, 11, 0.64) 24%, rgba(4, 20, 11, 0.22) 44%, transparent 56%),
    linear-gradient(100deg, rgba(4, 20, 11, 0.68) 0%, rgba(4, 20, 11, 0.28) 32%, transparent 54%);
  pointer-events: none;
}
/* narrow viewports: the copy runs full-width across the trunk and
   sunburst — the scrim must hold the whole lower band, not just the left */
@media (max-width: 700px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(4, 20, 11, 0.6) 0%, transparent 24%),
      linear-gradient(0deg, rgba(4, 20, 11, 0.97) 0%, rgba(4, 20, 11, 0.88) 26%, rgba(4, 20, 11, 0.55) 48%, rgba(4, 20, 11, 0.18) 64%, transparent 76%);
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 var(--gutter) clamp(5.5rem, 12vh, 8.5rem);
  max-width: 1680px;
  margin: 0 auto;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 1.1em;
  margin-bottom: clamp(1.2rem, 2.6vh, 2rem);
}
.hero-kicker::before {
  content: '';
  width: 2.6rem;
  height: 1px;
  background: var(--gold);
}
.hero-title {
  font-size: var(--fs-hero);
  font-weight: 350;
  line-height: 0.98;
  letter-spacing: -0.022em;
  max-width: 11em;
  text-shadow: 0 2px 40px rgba(2, 10, 6, 0.6);
}
.hero-sub {
  margin-top: clamp(1.3rem, 3vh, 2.1rem);
  max-width: 46ch;
  color: var(--sage);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
  text-shadow: 0 1px 18px rgba(2, 10, 6, 0.8);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.8rem, 4vh, 2.75rem);
}

.hero-scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: var(--sage);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.hero-scroll .scroll-line {
  display: block;
  width: 1px;
  height: clamp(3rem, 7vh, 4.5rem);
  background: linear-gradient(180deg, var(--gold), transparent);
  overflow: hidden;
  position: relative;
}
.hero-scroll .scroll-line::after {
  content: '';
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, transparent, var(--gilt));
  animation: scrollhint 2.6s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
@keyframes scrollhint { 0% { top: -100%; } 55%, 100% { top: 100%; } }

@media (max-width: 700px) {
  .hero-scroll { display: none; }
  .hero-inner { padding-bottom: 4.5rem; }
}

/* ---------- generic section scaffolding ---------- */
.section {
  position: relative;
  padding: var(--section-pad) var(--gutter);
  scroll-margin-top: 70px;
}
.section-inner { max-width: 1240px; margin: 0 auto; }
.section-head { margin-bottom: clamp(2.6rem, 6vh, 4.5rem); }
.section-head h2 {
  font-size: var(--fs-h2);
  margin-top: clamp(1.1rem, 2.4vh, 1.8rem);
  max-width: 15em;
}
.section-head .rule { margin-top: clamp(1.6rem, 3.4vh, 2.6rem); }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.35em; }
.prose .em-first { color: var(--ivory); font-weight: 400; }

/* ---------- approach — a translucent veil over the photograph ---------- */
.section.approach {
  background: rgba(4, 20, 11, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline-dim);
  border: 1px solid var(--hairline-dim);
}
.pillar {
  position: relative;
  background: linear-gradient(175deg, rgba(10, 36, 23, 0.92) 0%, rgba(7, 26, 16, 0.88) 100%);
  padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1.4rem, 2.2vw, 2.2rem) clamp(2.2rem, 3.4vw, 3.2rem);
  transition: transform 0.5s var(--ease-hover), box-shadow 0.5s var(--ease-hover);
  outline: 1px solid transparent;
  outline-offset: -1px;
}
.pillar::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 160, 78, 0);
  transition: border-color 0.5s var(--ease-hover);
  pointer-events: none;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -18px var(--shadow), 0 0 0 1px rgba(201, 160, 78, 0.35), 0 0 34px -8px rgba(201, 160, 78, 0.28);
  z-index: 1;
}
.pillar:hover::after { border-color: rgba(201, 160, 78, 0.45); }
.pillar-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 340;
  font-size: 1.05rem;
  color: var(--gold);
  display: block;
  margin-bottom: clamp(1.6rem, 3.4vh, 2.6rem);
}
.pillar h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pillar p { color: var(--sage); font-size: 0.9375rem; line-height: 1.7; }
/* in the wide band, reserve title space so every card's body copy
   starts on the same baseline */
@media (min-width: 1081px) {
  .pillar h3 { min-height: 1.1em; }
}
.pillar-leaf {
  position: absolute;
  top: clamp(1.8rem, 3vw, 2.8rem);
  right: clamp(1.4rem, 2.2vw, 2.2rem);
  width: 14px; height: 14px;
  opacity: 0.55;
  transition: opacity 0.5s, transform 0.6s var(--ease-hover);
}
.pillar:hover .pillar-leaf { opacity: 1; transform: rotate(-14deg) scale(1.15); }

/* title-only pillar cards: no numerals, no leaf — the name sits
   centered in its box */
.pillar {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2.6rem, 4vw, 3.6rem) clamp(1.4rem, 2.2vw, 2.2rem);
}
.pillar h3 { margin-bottom: 0; }

@media (max-width: 1080px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- quote — the photograph shows through, barely veiled ---------- */
.quote-section {
  position: relative;
  padding: clamp(8rem, 22vh, 15rem) var(--gutter);
  isolation: isolate;
}
/* only a light darkening scrim: opaque abyss at the top and bottom edges
   (so the hero's scrim and the approach veil blend seamlessly), a thin
   mid-alpha veil across the middle where the photograph burns through */
.quote-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--abyss) 0%, rgba(4, 20, 11, 0.36) 20%, rgba(4, 20, 11, 0.36) 80%, var(--abyss) 100%),
    radial-gradient(ellipse 90% 70% at 50% 46%, rgba(4, 20, 11, 0), rgba(4, 20, 11, 0.34));
  pointer-events: none;
}
/* the credo is set like a page from a book: left-aligned in a centred
   measure so the drop cap actually anchors the first line (a floated
   ::first-letter fights centred text and leaves a hole) */
.quote-inner { max-width: 920px; margin: 0 auto; text-align: left; }
.quote-text {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: var(--fs-quote);
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--ivory);
  text-shadow: 0 2px 34px rgba(2, 10, 6, 0.85);
}
/* drop cap: ::first-letter serves the no-JS / reduced-motion page;
   when JS splits the credo into words (.is-split) the cap becomes
   a real span (.qcap) so it can be choreographed like the rest */
.quote-text:not(.is-split)::first-letter {
  font-size: 2.9em;
  font-weight: 400;
  float: left;
  line-height: 0.78;
  padding: 0.05em 0.13em 0 0;
  color: var(--gilt);
  font-style: italic;
}
.quote-text .qcap {
  font-size: 2.9em;
  font-weight: 400;
  float: left;
  line-height: 0.78;
  padding: 0.05em 0.13em 0 0;
  color: var(--gilt);
  font-style: italic;
}
.quote-text .qw { will-change: opacity; }
.quote-cite {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  font-style: normal;
  color: var(--gold);
  font-size: var(--fs-label);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(2, 10, 6, 0.95), 0 1px 3px rgba(2, 10, 6, 0.8);
}
.quote-cite::before {
  content: '';
  width: clamp(2.4rem, 6vw, 5rem);
  height: 1px;
  background: var(--hairline);
}

/* ---------- contact — veiled, with the dawn beneath ---------- */
.contact {
  text-align: center;
  isolation: isolate;
  background: rgba(4, 20, 11, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.contact::before {
  /* a faint dawn beneath the correspondence — the sunburst's afterglow */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 44% 30% at 50% 72%, rgba(201, 160, 78, 0.055), transparent 72%),
    radial-gradient(ellipse 80% 55% at 50% 108%, rgba(47, 169, 106, 0.07), transparent 75%);
  pointer-events: none;
}
.contact .section-head { margin-bottom: clamp(2rem, 5vh, 3.4rem); }
.contact .section-head h2 { margin-inline: auto; }
.contact .section-num { justify-content: center; }
.contact .section-num::after { display: none; }
.contact-copy { max-width: 52ch; margin: 0 auto; color: var(--sage); }
.contact-mail {
  display: inline-block;
  margin-top: clamp(2.2rem, 5vh, 3.4rem);
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.45rem, 0.85rem + 2.9vw, 3.5rem);
  letter-spacing: -0.01em;
  color: var(--ivory);
  position: relative;
  padding-bottom: 0.18em;
  overflow-wrap: anywhere;
}
.contact-mail::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gilt));
  transform: scaleX(0.18);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-verdant);
}
.contact-mail:hover { color: var(--gilt); }
.contact-mail:hover::after { transform: scaleX(1); }
.contact-note {
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  color: var(--sage);
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- footer — near-opaque, the photograph rests ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--hairline-dim);
  background: linear-gradient(180deg, rgba(4, 20, 11, 0.96), rgba(3, 15, 8, 0.98));
  overflow: hidden;
}
.leaf-canvas {
  position: absolute;
  inset: 1px 0 0 0;
  width: 100%;
  height: calc(100% - 1px);
  pointer-events: none;
}
.footer-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3.4rem, 8vh, 5.5rem) var(--gutter) clamp(2rem, 5vh, 3rem);
  display: grid;
  gap: clamp(2.2rem, 5vh, 3.6rem);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4rem;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-brand .wordmark { font-size: 1.05rem; }
.footer-tag { margin-top: 0.9rem; color: var(--sage); font-size: 0.875rem; max-width: 34ch; }
.footer-cols { display: flex; gap: clamp(2.4rem, 6vw, 5.5rem); flex-wrap: wrap; }
.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.55rem; }
.footer-col a { color: var(--sage); font-size: 0.9rem; font-weight: 300; }
.footer-col a:hover { color: var(--gilt); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.4rem;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--hairline-dim);
  padding-top: 1.6rem;
  color: var(--sage);
  font-size: 0.8125rem;
}
.footer-bottom .credit a { color: var(--sage); border-bottom: 1px solid var(--hairline-dim); padding-bottom: 1px; }
.footer-bottom .credit a:hover { color: var(--gilt); border-color: var(--gold); }

/* ============================================================
   GUIDE page
   ============================================================ */
.guide-hero {
  padding: calc(var(--nav-h) + clamp(4rem, 10vh, 7rem)) var(--gutter) clamp(3.5rem, 8vh, 5.5rem);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 115%, rgba(47, 169, 106, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 108%, rgba(233, 200, 126, 0.10), transparent 75%);
}
.guide-hero .section-inner, .guide-body .section-inner { max-width: 940px; }
.guide-hero h1 {
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.2rem);
  margin-top: 1.4rem;
  line-height: 1.0;
}
.guide-hero .lede { margin-top: 1.8rem; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); }

.guide-section { padding: clamp(3rem, 7vh, 5rem) var(--gutter); }
.guide-section .section-inner { max-width: 940px; }
.guide-section h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.7em;
}
.guide-section h2 .gnum {
  font-style: italic;
  font-weight: 340;
  font-size: 0.62em;
  color: var(--gold);
}
.guide-section .prose { color: var(--sage); }
.guide-section .prose strong { color: var(--ivory); font-weight: 400; }
.guide-section .prose a { border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.guide-section .prose a:hover { color: var(--ivory); border-color: var(--gilt); }
.guide-hr { margin: 0 var(--gutter); }
.guide-hr > div {
  max-width: 940px; margin: 0 auto; height: 1px;
  background: linear-gradient(90deg, var(--hairline), transparent);
}

/* palette swatches — fixed 4/2 columns so the 8 chips always fill
   complete rows (auto-fit left olive voids in the last row) */
.swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline-dim);
  border: 1px solid var(--hairline-dim);
  margin-top: 2rem;
}
@media (max-width: 700px) {
  .swatches { grid-template-columns: repeat(2, 1fr); }
}
.swatch { background: var(--panel); padding: 0; }
.swatch-chip { height: 86px; }
.swatch-meta { padding: 0.9rem 1rem 1.1rem; }
.swatch-meta .sw-name { display: block; font-size: 0.8125rem; color: var(--ivory); font-weight: 400; }
.swatch-meta .sw-hex {
  display: block; margin-top: 0.25rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem; color: var(--sage); letter-spacing: 0.06em;
}

/* type specimens */
.specimen {
  border: 1px solid var(--hairline-dim);
  background: linear-gradient(175deg, var(--panel), rgba(7, 26, 16, 0.9));
  padding: clamp(1.6rem, 4vw, 2.8rem);
  margin-top: 1.6rem;
}
.specimen + .specimen { margin-top: 1rem; }
.specimen .sp-label {
  font-size: var(--fs-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: block;
  margin-bottom: 1.2rem;
}
.specimen .sp-display {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.specimen .sp-display em { color: var(--gilt); font-weight: 340; }
.specimen .sp-body { color: var(--sage); max-width: 56ch; }
.specimen .sp-caps {
  display: block; margin-top: 1.2rem;
  font-size: var(--fs-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
  font-weight: 500;
}

/* annotated code excerpt */
.code-block {
  margin-top: 2rem;
  border: 1px solid var(--hairline-dim);
  background: #061a10;
  border-radius: 6px;
  overflow: hidden;
}
.code-block .cb-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--hairline-dim);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}
.code-block .cb-bar b { color: var(--gold); font-weight: 500; }
.code-block pre {
  overflow-x: auto;
  padding: 1.3rem 1.4rem 1.5rem;
}
.code-block code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  line-height: 1.75;
  color: #cfe5d6;
  white-space: pre;
}
.code-block .c-com { color: #6f8f7c; font-style: italic; }
.code-block .c-key { color: var(--leaf); }
.code-block .c-str { color: var(--gilt); }
.code-block .c-num { color: #e9a86a; }
.code-block .c-fn  { color: #9ecfff; }

/* motion table */
.motion-list { list-style: none; margin-top: 1.8rem; display: grid; gap: 1px; background: var(--hairline-dim); border: 1px solid var(--hairline-dim); }
.motion-list li {
  background: var(--panel);
  padding: 1.15rem 1.35rem;
  display: grid;
  grid-template-columns: minmax(130px, 200px) 1fr;
  gap: 1.5rem;
  align-items: baseline;
}
.motion-list b { color: var(--gilt); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.04em; }
.motion-list span { color: var(--sage); font-size: 0.9rem; }
@media (max-width: 620px) { .motion-list li { grid-template-columns: 1fr; gap: 0.3rem; } }

.guide-credit {
  text-align: center;
  padding: clamp(3.5rem, 9vh, 6rem) var(--gutter);
}
.guide-credit .rule { max-width: 220px; margin: 0 auto 2.2rem; }
.guide-credit p {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.2rem, 1rem + 1.4vw, 1.8rem);
  max-width: 30em;
  margin: 0 auto;
  color: var(--ivory);
  line-height: 1.45;
}
.guide-credit p em { color: var(--gilt); }
.guide-credit .sub { margin-top: 1.4rem; color: var(--sage); font-size: 0.875rem; font-family: var(--font-body); }

/* ============================================================
   PORTAL page
   ============================================================ */
.portal-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 62% 44% at 50% 112%, rgba(233, 200, 126, 0.10), transparent 72%),
    radial-gradient(ellipse 85% 65% at 50% 118%, rgba(47, 169, 106, 0.12), transparent 75%),
    var(--abyss);
}
.portal-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.portal-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
}
.portal-card {
  width: min(440px, 100%);
  background: linear-gradient(172deg, rgba(10, 36, 23, 0.94), rgba(6, 22, 14, 0.96));
  border: 1px solid var(--hairline);
  padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.7rem, 4vw, 2.8rem) clamp(2rem, 4vw, 2.6rem);
  position: relative;
  box-shadow: 0 40px 80px -30px rgba(1, 8, 5, 0.8);
}
.portal-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid var(--hairline-dim);
  pointer-events: none;
}
.portal-emblem {
  width: 44px; height: 44px;
  margin: 0 auto 1.4rem;
  display: block;
  color: var(--gold);
}
.portal-card h1 {
  text-align: center;
  font-size: clamp(1.9rem, 1.5rem + 2vw, 2.7rem);
  font-weight: 380;
  margin-bottom: 0.6rem;
}
.portal-card .portal-sub {
  text-align: center;
  color: var(--sage);
  font-size: 0.9rem;
  margin-bottom: 2.1rem;
}
.field { margin-bottom: 1.45rem; position: relative; }
.field label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
}
.field input {
  width: 100%;
  background: rgba(4, 20, 11, 0.55);
  border: 1px solid rgba(143, 174, 155, 0.22);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  padding: 0.85em 1em;
  border-radius: 2px;
  transition: border-color 0.35s var(--ease-hover), box-shadow 0.35s var(--ease-hover), background-color 0.35s;
  caret-color: var(--gilt);
}
.field input::placeholder { color: rgba(143, 174, 155, 0.45); }
.field input:hover { border-color: rgba(143, 174, 155, 0.4); }
.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201, 160, 78, 0.35), 0 0 24px -6px rgba(201, 160, 78, 0.25);
  background: rgba(4, 20, 11, 0.8);
}
.portal-form .btn { width: 100%; margin-top: 0.4rem; }
.portal-msg {
  min-height: 1.4em;
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: center;
  color: var(--sage);
  transition: color 0.3s;
}
.portal-msg.is-error { color: #e0a67a; }
.portal-msg.is-ok { color: var(--leaf); }
.portal-links {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hairline-dim);
}
.portal-links a {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.portal-links a:hover { color: var(--gilt); border-color: var(--gold); }
.portal-note {
  margin-top: 1.6rem;
  text-align: center;
  color: rgba(143, 174, 155, 0.75);
  font-size: 0.75rem;
  line-height: 1.6;
  max-width: 34ch;
  margin-inline: auto;
}
.portal-foot {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1.4rem var(--gutter) 2rem;
  color: var(--sage);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
@keyframes cardshake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
  88% { transform: translateX(2px); }
}
.portal-card.is-shaking { animation: cardshake 0.5s var(--ease-hover); }

/* ---------- reveal helpers (JS sets initial states; keep content
   visible for no-JS and reduced motion) ---------- */
.js .will-reveal { /* placeholder — gsap owns transforms */ }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
  .hero-scroll .scroll-line::after { display: none; }
  .bg-fallback img { animation: none !important; }
}

/* ---------- pre-paint entrance state (FOUC guard) ----------
   A one-line script in <head> flips no-js -> js before first
   paint, so these initial states apply only when JS will run
   the entrance. Values mirror main.js's gsap.set exactly (the
   masked lines hide by transform, everything else by opacity).
   Reduced-motion skips the entrance entirely, so the guard must
   not apply there — hence the media query. No-JS keeps the page
   fully visible. */
@media (prefers-reduced-motion: no-preference) {
  .js .site-nav .wordmark,
  .js .site-nav .nav-links li,
  .js .site-nav .portal-pill,
  .js .site-nav .nav-toggle,
  .js [data-hero="kicker"],
  .js [data-hero="sub"],
  .js [data-hero="ctas"],
  .js [data-hero="scroll"] { opacity: 0; }
  .js [data-hero="line"] {
    transform: translateY(115%) rotate(2.6deg);
    transform-origin: 0% 100%;
  }
}