/* ═══════════════════════════════════════════════════════════════
   THYNK WEALTH COMMUNITY — "MIDNIGHT"
   Design system · v2
   Cinematic dark. Image-first. Champagne gold on blue-black.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
  /* ground */
  --night:    #0A0C11;
  --night-2:  #0F1218;
  --night-3:  #151922;
  --night-4:  #1C212B;
  --void:     #06080C;

  /* metal */
  --gold:     #C9A961;
  --gold-2:   #E6CE94;
  --gold-3:   #8A7440;
  --gold-grad: linear-gradient(135deg, #E6CE94 0%, #C9A961 46%, #8A7440 100%);

  /* ink */
  --pearl:    #F1EEE7;
  --muted:    #939AA8;
  --muted-2:  #6E7686;

  /* glass */
  --glass:    rgba(255,255,255,.055);
  --glass-2:  rgba(255,255,255,.085);
  --glassbd:  rgba(255,255,255,.13);
  --glassbd-2:rgba(255,255,255,.22);
  --glow:     rgba(201,169,97,.16);

  /* elevation */
  --lift-1: 0 14px 30px -18px rgba(0,0,0,.8);
  --lift-2: 0 26px 60px -32px rgba(0,0,0,.9);
  --lift-3: 0 44px 96px -44px rgba(0,0,0,.95);

  /* type */
  --serif: "Big Caslon", "Hoefler Text", "Iowan Old Style", Cambria, Georgia, serif;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* metrics */
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --maxw: 1400px;
  --narrow: 780px;
  --navh: 68px;
  --ease: cubic-bezier(.2,.7,.25,1);
}

/* ── 2. BASE ───────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night);
  color: var(--pearl);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--gold); color: #14161C; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: var(--narrow); }
.wrap--mid { max-width: 1080px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #14161C; padding: .8rem 1.2rem;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── 3. TYPOGRAPHY HELPERS ─────────────────────────────────── */
.label {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin: 0;
}
.label::before { content: ""; width: 18px; height: 1px; background: var(--gold-3); }
.label--bare::before { display: none; }
.label--dim { color: var(--muted); }
.label--dim::before { background: var(--muted-2); }

.lead { font-size: 1.08rem; color: var(--muted); max-width: 58ch; }
.prose { color: var(--muted); }
.prose b, .prose strong { color: var(--pearl); font-weight: 600; }
.prose a { color: var(--gold-2); text-decoration: none; border-bottom: 1px solid rgba(230,206,148,.4); }
.prose a:hover { border-bottom-color: var(--gold-2); }

.gold { color: var(--gold-2); }
.italic { font-style: italic; }

.h-xl { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.06; }
.h-lg { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.1; }
.h-md { font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.14; }
.h-sm { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.2; }

/* ── 4. PLACEHOLDER / SCENE SYSTEM ─────────────────────────── */
/* Every .ph is a photographic slot. Drop a real <img> or
   background-image in and delete the .ph__tag. Nothing else changes. */
.ph { position: relative; overflow: hidden; isolation: isolate; background-color: #23262E; background-size: cover; background-position: center; }
/* Real photography sits above the gradient scene, below grain + vignette.
   If an image is missing or blocked, the gradient still holds the composition. */
.ph > img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; border: 0;
}
/* Keep faces in frame on wide crops of portrait sources: anchor near the
   upper third so the crop takes from the bottom, not the top. */
.ph > img.pos-top { object-position: center 30%; }
.ph > img.pos-bottom { object-position: center 78%; }
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
.ph::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 120px 30px rgba(0,0,0,.5);
}
.ph__tag {
  position: absolute; right: .7rem; top: .7rem; z-index: 8;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,.9); background: rgba(6,8,12,.55);
  border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px);
  padding: .4rem .55rem; border-radius: 2px; max-width: calc(100% - 1.4rem);
}
.ph__tag--bl { right: auto; top: auto; left: .7rem; bottom: .7rem; }

.sc-tower  { background-image: radial-gradient(58% 42% at 74% 14%, rgba(255,226,178,.7), rgba(255,226,178,0) 62%), linear-gradient(178deg, #C7A87F 0%, #8E8798 26%, #4E5262 56%, #262A36 100%); }
.sc-tower2 { background-image: radial-gradient(50% 46% at 22% 20%, rgba(255,214,160,.55), rgba(255,214,160,0) 60%), linear-gradient(190deg, #A79279 0%, #6C6C7E 32%, #3B3F4E 64%, #1E212B 100%); }
.sc-coast  { background-image: radial-gradient(48% 38% at 78% 22%, rgba(255,232,196,.6), rgba(255,232,196,0) 64%), linear-gradient(180deg, #A9C2C8 0%, #6D97A2 36%, #2F5D68 68%, #16323B 100%); }
.sc-resort { background-image: radial-gradient(44% 40% at 30% 24%, rgba(255,236,200,.55), rgba(255,236,200,0) 62%), linear-gradient(176deg, #D3BE9C 0%, #8FA79E 34%, #4A6B6A 68%, #1F3234 100%); }
.sc-farm   { background-image: radial-gradient(52% 44% at 26% 18%, rgba(255,240,190,.55), rgba(255,240,190,0) 66%), linear-gradient(178deg, #B5C793 0%, #7D9A54 34%, #48642F 68%, #22371A 100%); }
.sc-solar  { background-image: radial-gradient(44% 40% at 70% 16%, rgba(255,228,158,.8), rgba(255,228,158,0) 60%), linear-gradient(178deg, #D6B478 0%, #7C7F8C 40%, #3A4250 72%, #1E232D 100%); }
.sc-plant  { background-image: radial-gradient(50% 42% at 30% 20%, rgba(200,222,232,.5), rgba(200,222,232,0) 64%), linear-gradient(178deg, #8A98A2 0%, #586874 36%, #33424C 68%, #1A2229 100%); }
.sc-city   { background-image: radial-gradient(46% 40% at 62% 78%, rgba(255,196,120,.5), rgba(255,196,120,0) 62%), linear-gradient(178deg, #262B3E 0%, #43405A 34%, #6B5750 66%, #1F1C26 100%); }
.sc-people { background-image: radial-gradient(50% 46% at 34% 24%, rgba(255,216,172,.6), rgba(255,216,172,0) 62%), linear-gradient(172deg, #9C8069 0%, #6B5646 36%, #3E342C 70%, #201C18 100%); }
.sc-people2{ background-image: radial-gradient(46% 44% at 68% 28%, rgba(255,222,186,.52), rgba(255,222,186,0) 62%), linear-gradient(168deg, #8C7A6A 0%, #5E5044 38%, #332C26 72%, #1B1815 100%); }
.sc-room   { background-image: radial-gradient(40% 46% at 76% 30%, rgba(255,206,146,.55), rgba(255,206,146,0) 60%), linear-gradient(176deg, #4A3F35 0%, #322B25 40%, #1D1A17 100%); }
.sc-stadium{ background-image: radial-gradient(58% 34% at 50% 8%, rgba(214,232,255,.5), rgba(214,232,255,0) 62%), linear-gradient(178deg, #64758A 0%, #3D4D5F 38%, #212B37 100%); }
.sc-forum  { background-image: radial-gradient(44% 42% at 24% 22%, rgba(255,222,190,.5), rgba(255,222,190,0) 62%), linear-gradient(176deg, #5C526B 0%, #3B3646 40%, #1F1D26 100%); }
.sc-desk   { background-image: radial-gradient(40% 44% at 66% 24%, rgba(255,228,180,.42), rgba(255,228,180,0) 60%), linear-gradient(174deg, #3E3B44 0%, #2B2932 42%, #17161C 100%); }
.sc-csr    { background-image: radial-gradient(48% 42% at 32% 22%, rgba(255,232,190,.5), rgba(255,232,190,0) 62%), linear-gradient(174deg, #9A8A6C 0%, #64705A 38%, #33422F 72%, #1A2118 100%); }

/* scrims */
.scrim { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(6,8,12,.12) 0%, rgba(6,8,12,.4) 46%, rgba(6,8,12,.9) 100%); }
.scrim--full { background: linear-gradient(180deg, rgba(6,8,12,.72) 0%, rgba(6,8,12,.42) 38%, rgba(6,8,12,.86) 100%); }
.scrim--l { background: linear-gradient(96deg, rgba(6,8,12,.92) 0%, rgba(6,8,12,.56) 46%, rgba(6,8,12,.14) 100%); }
.scrim--r { background: linear-gradient(264deg, rgba(6,8,12,.92) 0%, rgba(6,8,12,.56) 46%, rgba(6,8,12,.14) 100%); }
.scrim--flat { background: rgba(6,8,12,.66); }

/* ── 5. ANNOUNCEMENT BAR ───────────────────────────────────── */
.announce {
  position: relative; z-index: 60;
  background: linear-gradient(90deg, rgba(138,116,64,.28), rgba(201,169,97,.14) 50%, rgba(138,116,64,.28));
  border-bottom: 1px solid rgba(201,169,97,.24);
  font-size: 11.5px; letter-spacing: .1em;
}
.announce__in {
  max-width: var(--maxw); margin: 0 auto; padding: .55rem var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap;
  text-align: center;
}
.announce b { color: var(--gold-2); font-weight: 600; }
.announce a { color: var(--pearl); text-decoration: none; border-bottom: 1px solid rgba(241,238,231,.4); }
.announce a:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }

/* ── 6. NAV ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 55;
  background: rgba(10,12,17,.86); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  min-height: var(--navh);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--pearl); }
.brand__mk {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--glassbd); background: var(--glass);
  transition: border-color .25s var(--ease);
}
.brand:hover .brand__mk { border-color: var(--gold-3); }
.brand__tx { font-family: var(--serif); font-size: 1.04rem; letter-spacing: .03em; line-height: 1.16; white-space: nowrap; }
.brand__tx small { display: block; font-family: var(--sans); font-size: 8.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }

.nav__links { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  position: relative; font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; font-weight: 600; padding: .3rem 0;
  transition: color .22s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--gold); transition: right .3s var(--ease);
}
.nav__links a:hover, .nav__links a:focus-visible { color: var(--pearl); outline: none; }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { right: 0; }
.nav__links a[aria-current="page"] { color: var(--gold-2); }

.nav__cta {
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase; font-weight: 700;
  background: var(--gold-grad); color: #14161C; padding: .8rem 1.4rem;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 22px -12px rgba(201,169,97,.7);
  transition: filter .22s var(--ease), transform .22s var(--ease);
}
.nav__cta:hover, .nav__cta:focus-visible { filter: brightness(1.12); transform: translateY(-1px); outline: none; }

.burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--glassbd);
  background: var(--glass); cursor: pointer; padding: 0; place-items: center;
}
.burger span { display: block; width: 17px; height: 1px; background: var(--pearl); position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1px; background: var(--pearl);
  transition: transform .28s var(--ease), top .2s;
}
.burger span::before { top: -5px; } .burger span::after { top: 5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav__links, .nav__in > .nav__cta { display: none; }
  .burger { display: grid; }
}

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 54; background: rgba(6,8,12,.97);
  backdrop-filter: blur(14px);
  padding: calc(var(--navh) + 2.5rem) var(--gutter) 2.5rem;
  display: flex; flex-direction: column; gap: .2rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
.drawer.open { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  font-family: var(--serif); font-size: 1.55rem; color: var(--pearl); text-decoration: none;
  padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: baseline; gap: .9rem;
}
.drawer a i { font-style: normal; font-family: var(--sans); font-size: 10px; letter-spacing: .2em; color: var(--gold-3); }
.drawer a:hover, .drawer a:focus-visible { color: var(--gold-2); outline: none; }
.drawer__cta { margin-top: 1.6rem; }
.drawer__meta { margin-top: auto; padding-top: 2rem; color: var(--muted); font-size: .9rem; }

/* ── 7. BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  padding: 1.05rem 2rem; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  font-family: var(--sans); line-height: 1;
  transition: background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease), filter .24s var(--ease);
}
.btn--gold { background: var(--gold-grad); color: #14161C; box-shadow: 0 12px 30px -16px rgba(201,169,97,.75); }
.btn--gold:hover, .btn--gold:focus-visible { filter: brightness(1.12); transform: translateY(-2px); outline: none; }
.btn--glass { border-color: var(--glassbd); color: var(--pearl); background: var(--glass); backdrop-filter: blur(10px); }
.btn--glass:hover, .btn--glass:focus-visible { border-color: var(--gold-2); color: var(--gold-2); outline: none; }
.btn--ghost { border-color: var(--glassbd); color: var(--pearl); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--glass-2); border-color: var(--glassbd-2); outline: none; }
.btn--sm { padding: .78rem 1.35rem; font-size: 10px; }
.btn--wide { width: 100%; }
.btn--link {
  padding: 0; border: 0; background: none; color: var(--gold-2);
  border-bottom: 1px solid rgba(230,206,148,.34); border-radius: 0;
}
.btn--link:hover { border-bottom-color: var(--gold-2); }

.btnrow { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── 8. TICKER ─────────────────────────────────────────────── */
.ticker {
  position: relative; overflow: hidden; border-block: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, var(--night-2), var(--night));
  padding: .1rem 0;
}
.ticker--gold { background: linear-gradient(180deg, rgba(201,169,97,.1), rgba(201,169,97,.03)); }
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(50px, 10vw, 160px); z-index: 4; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--night), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--night), transparent); }
.ticker__track {
  display: flex; align-items: center; gap: 2.6rem; width: max-content;
  padding: .95rem 0; white-space: nowrap;
  animation: tick 58s linear infinite;
}
.ticker__track--rev { animation-direction: reverse; animation-duration: 72s; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.tick {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.tick b { color: var(--pearl); font-weight: 600; }
.tick em { font-style: normal; color: var(--gold-2); }
.tick__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; }
.tick__sep { color: var(--gold-3); font-size: 13px; }

/* ── 9. LAYOUT / SECTIONS ──────────────────────────────────── */
.sec { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.sec--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.sec--flush-t { padding-top: 0; }
.sec--flush-b { padding-bottom: 0; }
.sec--dark { background: var(--night-2); }
.sec--darker { background: var(--void); }

.sechead { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 1.6rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4.5vw, 3.2rem); }
.sechead h2 { margin: .9rem 0 0; }
.sechead p { margin: 0; color: var(--muted); max-width: 52ch; }
.sechead--center { grid-template-columns: 1fr; text-align: center; justify-items: center; max-width: 720px; margin-inline: auto; }
.sechead--center p { margin-top: 1rem; }
@media (max-width: 880px) { .sechead { grid-template-columns: 1fr; gap: 1.1rem; } }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--wide-l { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
.split--wide-r { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.split--top { align-items: start; }
@media (max-width: 900px) { .split, .split--wide-l, .split--wide-r { grid-template-columns: 1fr; } }

.rule { height: 1px; background: rgba(255,255,255,.09); border: 0; margin: 0; }

/* ── 10. HERO ──────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; }
.hero > .ph { position: absolute; inset: 0; }
/* padding-block, NOT the padding shorthand — the shorthand would zero out the
   horizontal gutter these inherit from .wrap and stick text to the viewport edge. */
.hero__in { position: relative; z-index: 6; width: 100%; text-align: center; padding-block: 4rem 0; }
.hero h1 { font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: 1.06; margin: 1.3rem auto 1.4rem; max-width: 17ch; }
.hero__sub { max-width: 50ch; margin: 0 auto 2.3rem; color: rgba(241,238,231,.8); font-size: 1.06rem; }
.hero .btnrow { justify-content: center; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 7;
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
  display: grid; justify-items: center; gap: .5rem;
}
.hero__scroll i { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, var(--gold), transparent); }

/* inner-page hero */
.phero { position: relative; min-height: 56svh; display: flex; align-items: flex-end; }
.phero > .ph { position: absolute; inset: 0; }
.phero__in { position: relative; z-index: 6; width: 100%; padding-block: 4rem clamp(2rem, 4vw, 3.5rem); }
.phero h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.06; margin: 1.1rem 0 1rem; max-width: 18ch; }
.phero p { max-width: 52ch; color: rgba(241,238,231,.8); margin: 0; }
.crumb { display: flex; align-items: center; gap: .55rem; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.crumb a { text-decoration: none; color: var(--muted); }
.crumb a:hover { color: var(--gold-2); }
.crumb span { color: var(--gold-3); }

/* ── 11. GLASS ─────────────────────────────────────────────── */
.glass {
  background: var(--glass); border: 1px solid var(--glassbd);
  backdrop-filter: blur(18px) saturate(1.3); box-shadow: var(--lift-2);
}
.glassbar { display: grid; grid-template-columns: repeat(4, 1fr); }
.glassbar .cell { padding: 1.4rem 1.4rem; border-left: 1px solid var(--glassbd); }
.glassbar .cell:first-child { border-left: 0; }
.cell b { display: block; font-family: var(--serif); font-size: 1.65rem; font-weight: 400; line-height: 1; margin-bottom: .42rem; color: var(--gold-2); }
.cell span { font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
@media (max-width: 760px) {
  .glassbar { grid-template-columns: 1fr 1fr; }
  .glassbar .cell:nth-child(odd) { border-left: 0; }
  .glassbar .cell:nth-child(-n+2) { border-bottom: 1px solid var(--glassbd); }
}

/* ── 12. STAT BAND ─────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 3rem); }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.2rem; }
.stat__n {
  font-family: var(--serif); font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: .96;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; margin-bottom: .5rem;
}
.stat h3 { font-family: var(--sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; margin-bottom: .45rem; }
.stat p { margin: 0; color: var(--muted); font-size: .9rem; }

/* ── 13. CARDS ─────────────────────────────────────────────── */
.card {
  background: var(--night-2); border: 1px solid rgba(255,255,255,.07);
  padding: 1.8rem 1.6rem 2rem; position: relative; overflow: hidden;
  transition: background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: var(--gold-grad); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.card:hover { background: var(--night-3); border-color: var(--glassbd); transform: translateY(-5px); }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: 1.18rem; line-height: 1.24; margin: .75rem 0 .55rem; }
.card p { margin: 0; color: var(--muted); font-size: .94rem; }
.card__ico { width: 34px; height: 34px; color: var(--gold); }
.card--flat { background: transparent; border-color: rgba(255,255,255,.1); }
.card--flat:hover { background: var(--night-2); }

/* numbered card */
.ncard { display: grid; grid-template-columns: 54px 1fr; gap: 1.2rem; padding: 1.6rem 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.ncard__n { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-3); line-height: 1; font-variant-numeric: tabular-nums; padding-top: .15rem; }
.ncard h3 { font-size: 1.14rem; line-height: 1.24; margin-bottom: .4rem; }
.ncard p { margin: 0; color: var(--muted); font-size: .94rem; }

/* image card */
.icard { position: relative; overflow: hidden; text-decoration: none; color: var(--pearl); display: block; box-shadow: var(--lift-2); }
.icard > .ph { position: absolute; inset: 0; transition: transform .7s var(--ease); }
.icard:hover > .ph, .icard:focus-visible > .ph { transform: scale(1.06); }
.icard__body { position: relative; z-index: 6; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem; }
.icard h3 { font-size: 1.3rem; line-height: 1.18; margin: .5rem 0 .35rem; }
.icard p { margin: 0; font-size: .9rem; color: rgba(241,238,231,.76); max-width: 42ch; }
.icard__rule { width: 20px; height: 1px; background: var(--gold-2); margin-top: .85rem; transition: width .45s var(--ease); }
.icard:hover .icard__rule { width: 56px; }

/* framed image + caption below */
.fcard { text-decoration: none; color: inherit; display: block; }
.fcard__frame { overflow: hidden; box-shadow: var(--lift-2); }
.fcard__frame .ph { height: 100%; transition: transform .7s var(--ease); }
.fcard:hover .ph, .fcard:focus-visible .ph { transform: scale(1.05); }
.fcard h3 { font-size: 1.2rem; margin: .9rem 0 .4rem; }
.fcard p { margin: 0; color: var(--muted); font-size: .93rem; }

.r-11 { aspect-ratio: 1/1; } .r-43 { aspect-ratio: 4/3; } .r-32 { aspect-ratio: 3/2; }
.r-34 { aspect-ratio: 3/4; } .r-169 { aspect-ratio: 16/9; } .r-219 { aspect-ratio: 21/9; }
.r-45 { aspect-ratio: 4/5; }

/* ── 14. BENTO ─────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 212px; gap: clamp(.7rem, 1.4vw, 1.1rem); }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } }
@media (max-width: 600px)  { .bento { grid-template-columns: 1fr; grid-auto-rows: 190px; } }
.t-w2 { grid-column: span 2; } .t-h2 { grid-row: span 2; }
@media (max-width: 600px) { .t-w2 { grid-column: span 1; } .t-h2 { grid-row: span 1; } }

/* ── 15. CAROUSEL ──────────────────────────────────────────── */
.carousel {
  display: flex; gap: clamp(.7rem, 1.4vw, 1.1rem); overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: .7rem;
  scrollbar-width: thin; scrollbar-color: var(--gold-3) transparent;
}
.carousel::-webkit-scrollbar { height: 4px; }
.carousel::-webkit-scrollbar-thumb { background: var(--gold-3); }
.carousel > * { scroll-snap-align: start; flex: 0 0 clamp(270px, 33vw, 400px); }
.carousel--tall > * { height: 460px; }
.carousel--short > * { height: 340px; }

/* ── 16. FEATURE BAND (text over image) ────────────────────── */
.feature { position: relative; min-height: 78svh; display: flex; align-items: center; overflow: hidden; }
.feature > .ph { position: absolute; inset: 0; }
.feature__card { position: relative; z-index: 6; max-width: 560px; }
.feature__card h2 { margin: 1rem 0 1.1rem; }
.feature__card p { color: rgba(241,238,231,.8); }
.feature__card ul { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .58rem; }
.feature__card li { font-size: .95rem; color: rgba(241,238,231,.86); padding-left: 1.2rem; position: relative; }
.feature__card li::before { content: ""; position: absolute; left: 0; top: .74em; width: 7px; height: 1px; background: var(--gold-2); }

/* ── 17. QUOTE / TESTIMONIAL ───────────────────────────────── */
.quote { position: relative; padding: 2rem 0 0; }
.quote__mark { font-family: var(--serif); font-size: 4rem; line-height: .6; color: var(--gold-3); }
.quote blockquote { margin: 1rem 0 1.4rem; font-family: var(--serif); font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.36; }
.quote figcaption { display: flex; align-items: center; gap: .9rem; }
.quote figcaption .ph { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.quote figcaption b { display: block; font-size: .95rem; font-weight: 600; }
.quote figcaption span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pill-ph {
  display: inline-block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  color: var(--gold-2); border: 1px dashed rgba(230,206,148,.45); padding: .28rem .5rem; margin-bottom: .9rem;
}

/* ── 18. ACCORDION ─────────────────────────────────────────── */
.acc { border-top: 1px solid rgba(255,255,255,.1); }
.acc details { border-bottom: 1px solid rgba(255,255,255,.1); }
.acc summary {
  list-style: none; cursor: pointer; padding: 1.35rem 3rem 1.35rem 0; position: relative;
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.34;
  transition: color .22s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; position: absolute; right: .4rem; top: 1.85rem; width: 13px; height: 1px;
  background: var(--gold); transition: transform .3s var(--ease);
}
.acc summary::before {
  content: ""; position: absolute; right: 1rem; top: 1.24rem; width: 1px; height: 13px;
  background: var(--gold); transition: transform .3s var(--ease), opacity .3s;
}
.acc details[open] summary { color: var(--gold-2); }
.acc details[open] summary::before { transform: rotate(90deg); opacity: 0; }
.acc summary:hover { color: var(--gold-2); }
.acc__body { padding: 0 3rem 1.5rem 0; color: var(--muted); }
.acc__body p { margin-bottom: .8rem; }
.acc__body ul { margin: .4rem 0 .8rem; padding-left: 1.1rem; }
.acc__body li { margin-bottom: .35rem; }

/* ── 19. TIMELINE ──────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 2.2rem 2.6rem; border-left: 1px solid rgba(255,255,255,.12); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: .5rem; width: 9px; height: 9px;
  border-radius: 50%; background: var(--night); border: 1px solid var(--gold);
}
.timeline .yr { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.timeline h3 { font-size: 1.14rem; margin: .4rem 0 .35rem; }
.timeline p { margin: 0; color: var(--muted); font-size: .94rem; }

/* ── 20. TABLE ─────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; min-width: 0; max-width: 100%; border: 1px solid rgba(255,255,255,.09); }
table.tw { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .94rem; }
table.tw th {
  text-align: left; font-family: var(--sans); font-weight: 700; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  padding: .9rem 1.1rem; background: var(--night-2); border-bottom: 1px solid rgba(255,255,255,.1);
}
table.tw td { padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: top; color: var(--muted); }
table.tw tr:last-child td { border-bottom: 0; }
table.tw tbody tr:hover td { background: var(--night-2); }
table.tw td b { color: var(--pearl); font-weight: 600; }
.tag {
  display: inline-block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: .24rem .5rem; border: 1px solid var(--glassbd); color: var(--muted); white-space: nowrap;
}
.tag--gold { color: var(--gold-2); border-color: rgba(201,169,97,.4); background: rgba(201,169,97,.08); }
.tag--live { color: #7FD1A4; border-color: rgba(127,209,164,.4); background: rgba(127,209,164,.08); }

/* ── 21. FORMS ─────────────────────────────────────────────── */
.form { display: grid; gap: 1.1rem; }
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form__pair { grid-template-columns: 1fr; } }
.fd label { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; font-weight: 700; }
.fd input, .fd textarea, .fd select {
  width: 100%; padding: .85rem 1rem; background: rgba(255,255,255,.045);
  border: 1px solid var(--glassbd); color: var(--pearl);
  font-family: var(--sans); font-size: .97rem; resize: vertical;
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.fd input::placeholder, .fd textarea::placeholder { color: var(--muted-2); }
.fd input:focus, .fd textarea:focus, .fd select:focus { outline: none; border-color: var(--gold-2); background: rgba(255,255,255,.075); }
.fd select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.fd select option { background: var(--night-2); color: var(--pearl); }
.fnote { font-size: .85rem; color: var(--muted-2); margin: 0; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .88rem; color: var(--muted); }
.check input { width: 15px; height: 15px; margin-top: .28rem; accent-color: var(--gold); }

/* ── 22. NEWSLETTER ────────────────────────────────────────── */
.news { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 820px) { .news { grid-template-columns: 1fr; } }
.news__form { display: flex; gap: .6rem; flex-wrap: wrap; }
.news__form input { flex: 1 1 240px; padding: 1rem 1.1rem; background: rgba(255,255,255,.05); border: 1px solid var(--glassbd); color: var(--pearl); font-family: var(--sans); font-size: .97rem; }
.news__form input:focus { outline: none; border-color: var(--gold-2); }

/* ── 23. FOOTER ────────────────────────────────────────────── */
.foot { background: var(--void); border-top: 1px solid rgba(255,255,255,.08); padding: clamp(3rem, 7vw, 5rem) 0 2rem; }
.foot__top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.2fr; gap: 2rem; }
@media (max-width: 1000px) { .foot__top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 620px) { .foot__top { grid-template-columns: 1fr 1fr; } }
.foot h4 { font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.1rem; font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot a { color: var(--muted); text-decoration: none; font-size: .93rem; transition: color .2s var(--ease); }
.foot a:hover, .foot a:focus-visible { color: var(--gold-2); outline: none; }
.foot__motto { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.22; margin: 0 0 .9rem; }
.foot__legal {
  margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.09);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
.social { display: flex; gap: .55rem; margin-top: 1.2rem; }
.social a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--glassbd); color: var(--muted);
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.social a:hover { border-color: var(--gold-3); color: var(--gold-2); }

/* ── 24. LEGAL PROSE ───────────────────────────────────────── */
.legal { max-width: 74ch; }
.legal h2 { font-size: 1.45rem; margin: 2.6rem 0 .9rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; }
.legal p, .legal li { color: var(--muted); }
.legal ul, .legal ol { padding-left: 1.2rem; margin: .6rem 0 1.2rem; }
.legal li { margin-bottom: .5rem; }
.legal b { color: var(--pearl); font-weight: 600; }
.toc { position: sticky; top: calc(var(--navh) + 1.5rem); }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.toc a { font-size: .9rem; color: var(--muted); text-decoration: none; display: block; padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.12); }
.toc a:hover { color: var(--gold-2); border-left-color: var(--gold); }
@media (max-width: 900px) { .toc { position: static; margin-bottom: 2rem; } }

.notice {
  border: 1px dashed rgba(230,206,148,.4); background: rgba(201,169,97,.06);
  padding: 1.1rem 1.2rem; font-size: .9rem; color: var(--muted);
}
.notice b { color: var(--gold-2); }

/* ── 25. UTILITIES ─────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.rv.in { opacity: 1; transform: none; }

.totop {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 45;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--glassbd); backdrop-filter: blur(10px);
  color: var(--pearl); text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, border-color .22s;
}
.totop.on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { border-color: var(--gold-3); color: var(--gold-2); }

.mt0 { margin-top: 0; } .mt1 { margin-top: 1rem; } .mt2 { margin-top: 2rem; } .mt3 { margin-top: 3rem; }
.mb0 { margin-bottom: 0; } .mb1 { margin-bottom: 1rem; } .mb2 { margin-bottom: 2rem; }
.center { text-align: center; }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-2); outline-offset: 3px;
}

/* ── 26. MOTION PREFERENCES ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   v3 ADDITIONS
   Hero slideshow · richer reveals · testimonials · chatbot ·
   footer identity · solid panels · mobile pass
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO SLIDESHOW ────────────────────────────────────────── */
.slides { position: absolute; inset: 0; z-index: 1; }
.slides .slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 1.8s var(--ease);
  will-change: opacity, transform;
}
.slides .slide.is-on { opacity: 1; animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.11); } }

.slides__dots {
  position: absolute; left: 50%; bottom: clamp(4.6rem, 9vw, 6.2rem); transform: translateX(-50%);
  z-index: 8; display: flex; gap: .5rem;
}
.slides__dots button {
  width: 26px; height: 2px; padding: 0; border: 0; cursor: pointer;
  background: rgba(241,238,231,.28); transition: background .3s var(--ease);
}
.slides__dots button[aria-current="true"] { background: var(--gold); }
.slides__dots button:hover { background: var(--gold-2); }
@media (max-width: 620px) { .slides__dots { bottom: 3.4rem; } .slides__dots button { width: 18px; } }

/* ── RICHER REVEALS ────────────────────────────────────────── */
.rv { transition-delay: var(--d, 0ms); }
.rv[data-rv="left"]  { transform: translateX(-26px); }
.rv[data-rv="right"] { transform: translateX(26px); }
.rv[data-rv="scale"] { transform: scale(.955); }
.rv[data-rv="blur"]  { filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.rv.in[data-rv="left"], .rv.in[data-rv="right"], .rv.in[data-rv="scale"] { transform: none; }
.rv.in[data-rv="blur"] { filter: none; }

/* soft glow on hover, on top of the existing lift */
.card:hover { box-shadow: 0 26px 60px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(201,169,97,.16); }
.icard:hover { box-shadow: var(--lift-3), 0 0 0 1px rgba(201,169,97,.22); }

/* nav condenses once you scroll */
.nav { transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.nav.is-stuck { background: rgba(8,10,14,.94); box-shadow: 0 10px 30px -22px rgba(0,0,0,.9); }
.nav.is-stuck .nav__in { min-height: 58px; }
.nav__in { transition: min-height .3s var(--ease); }

/* ── SOLID PANEL (forms over photography) ──────────────────── */
/* .glass alone is far too transparent to read a form against a photo. */
.panel-solid {
  background: linear-gradient(165deg, rgba(17,21,28,.97), rgba(10,13,18,.985));
  border: 1px solid rgba(201,169,97,.22);
  box-shadow: var(--lift-3), 0 0 0 1px rgba(0,0,0,.4);
  backdrop-filter: blur(22px) saturate(1.2);
}
.panel-solid .fd input, .panel-solid .fd textarea, .panel-solid .fd select {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18);
}
.panel-solid .fd input:focus, .panel-solid .fd textarea:focus { background: rgba(255,255,255,.1); }

/* ── TESTIMONIALS ──────────────────────────────────────────── */
.tmarq { position: relative; overflow: hidden; }
.tmarq::before, .tmarq::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(30px, 8vw, 130px); z-index: 4; pointer-events: none;
}
.tmarq::before { left: 0; background: linear-gradient(90deg, var(--night), transparent); }
.tmarq::after { right: 0; background: linear-gradient(270deg, var(--night), transparent); }
.sec--dark .tmarq::before { background: linear-gradient(90deg, var(--night-2), transparent); }
.sec--dark .tmarq::after { background: linear-gradient(270deg, var(--night-2), transparent); }

.tmarq__track {
  display: flex; gap: 1.1rem; width: max-content;
  animation: tmarq 64s linear infinite;
}
.tmarq:hover .tmarq__track, .tmarq:focus-within .tmarq__track { animation-play-state: paused; }
@keyframes tmarq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.tcard {
  flex: 0 0 clamp(280px, 30vw, 400px);
  background: var(--night-3); border: 1px solid rgba(255,255,255,.08);
  padding: 1.7rem 1.6rem 1.6rem; display: flex; flex-direction: column;
  transition: border-color .28s var(--ease), transform .28s var(--ease);
}
.tcard:hover { border-color: rgba(201,169,97,.35); transform: translateY(-4px); }
.tcard__q { font-family: var(--serif); font-size: 2.2rem; line-height: .5; color: var(--gold-3); margin-bottom: .9rem; }
.tcard blockquote { margin: 0 0 1.3rem; font-size: .97rem; line-height: 1.6; color: var(--pearl); flex: 1; }
.tcard figcaption { display: flex; align-items: center; gap: .8rem; border-top: 1px solid rgba(255,255,255,.09); padding-top: 1rem; }
.tcard__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--serif); font-size: .95rem;
  color: #14161C; background: var(--gold-grad);
}
.tcard figcaption b { display: block; font-size: .92rem; font-weight: 600; color: var(--pearl); }
.tcard figcaption span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tcard__stars { color: var(--gold); font-size: .8rem; letter-spacing: .1em; margin-bottom: .7rem; }

/* ── CHATBOT ───────────────────────────────────────────────── */
.cbot__open {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 70;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.2rem; border: 0; cursor: pointer;
  background: var(--gold-grad); color: #14161C;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 16px 36px -16px rgba(201,169,97,.8);
  transition: transform .25s var(--ease), filter .25s var(--ease), opacity .25s;
}
.cbot__open:hover { transform: translateY(-2px); filter: brightness(1.1); }
.cbot__open[hidden] { display: none; }
.cbot__open .dot { width: 7px; height: 7px; border-radius: 50%; background: #2E9E63; box-shadow: 0 0 0 3px rgba(46,158,99,.25); }

.cbot {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 71;
  width: min(380px, calc(100vw - 2.4rem));
  height: min(560px, calc(100svh - 2.4rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(170deg, #12161E, #0A0C11);
  border: 1px solid rgba(201,169,97,.28);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.cbot.open { opacity: 1; visibility: visible; transform: none; }
.cbot__head {
  display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(90deg, rgba(201,169,97,.14), transparent);
}
.cbot__mk { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid rgba(201,169,97,.4); }
.cbot__head b { display: block; font-family: var(--serif); font-size: .98rem; font-weight: 400; }
.cbot__head span { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cbot__close {
  margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.16); color: var(--muted);
  width: 30px; height: 30px; cursor: pointer; display: grid; place-items: center; font-size: 15px; line-height: 1;
  transition: color .2s, border-color .2s;
}
.cbot__close:hover { color: var(--gold-2); border-color: var(--gold-3); }

.cbot__log { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .8rem; scrollbar-width: thin; scrollbar-color: var(--gold-3) transparent; }
.cbot__log::-webkit-scrollbar { width: 4px; }
.cbot__log::-webkit-scrollbar-thumb { background: var(--gold-3); }
.msg { max-width: 86%; padding: .75rem .95rem; font-size: .91rem; line-height: 1.55; }
.msg--bot { align-self: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); color: var(--pearl); }
.msg--me { align-self: flex-end; background: var(--gold-grad); color: #14161C; font-weight: 500; }
.msg a { color: var(--gold-2); }
.msg--me a { color: #14161C; }
.msg--typing span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-right: 3px; animation: blink 1.2s infinite; }
.msg--typing span:nth-child(2) { animation-delay: .2s; }
.msg--typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

.cbot__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem 1.1rem; border-top: 1px solid rgba(255,255,255,.09); }
.cbot__chips button {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--pearl);
  font-family: var(--sans); font-size: 11.5px; padding: .5rem .8rem; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.cbot__chips button:hover { border-color: var(--gold-3); color: var(--gold-2); background: rgba(201,169,97,.08); }
.cbot__foot { padding: .7rem 1.1rem .9rem; border-top: 1px solid rgba(255,255,255,.09); text-align: center; }
.cbot__foot a { font-size: 11px; color: var(--muted); text-decoration: none; letter-spacing: .05em; }
.cbot__foot a:hover { color: var(--gold-2); }

@media (max-width: 620px) {
  .cbot { right: .6rem; bottom: .6rem; width: calc(100vw - 1.2rem); height: min(72svh, calc(100svh - 1.2rem)); }
  .cbot__open { right: .8rem; bottom: .8rem; padding: .78rem 1rem; font-size: 10px; }
  .totop { right: .8rem; bottom: 4.8rem; }
}

/* ── FOOTER IDENTITY ───────────────────────────────────────── */
.foot__brand { display: inline-flex; align-items: center; gap: .85rem; margin-bottom: 1.3rem; text-decoration: none; color: var(--pearl); }
.foot__brand .brand__mk { width: 44px; height: 44px; }
.foot__brand .brand__tx { font-size: 1.12rem; }
.foot__by {
  width: 100%; text-align: center; padding-top: 1.1rem; margin-top: .4rem;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
.foot__by a { color: var(--gold-3); text-decoration: none; transition: color .22s var(--ease); }
.foot__by a:hover { color: var(--gold-2); }

/* ── MOBILE PASS ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { min-height: 92svh; }
  .phero { min-height: 46svh; }
  .feature { min-height: auto; padding-block: clamp(3rem, 9vw, 5rem); }
  .feature__card { max-width: none; }
}
@media (max-width: 620px) {
  :root { --navh: 60px; }
  body { font-size: 15.5px; }
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .phero h1 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .h-lg { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .h-md { font-size: clamp(1.3rem, 5.6vw, 1.7rem); }
  .hero__sub, .phero p { font-size: 1rem; }
  .btn { padding: .95rem 1.5rem; font-size: 10.5px; }
  .announce__in { padding-block: .5rem; font-size: 10.5px; }
  .sec { padding-block: clamp(2.6rem, 11vw, 3.6rem); }
  .card { padding: 1.4rem 1.25rem 1.6rem; }
  .ncard { grid-template-columns: 40px 1fr; gap: .9rem; padding: 1.2rem 0; }
  .acc summary { font-size: 1.02rem; padding-right: 2.4rem; }
  .acc__body { padding-right: 0; }
  .glassbar .cell { padding: 1.05rem 1rem; }
  .cell b { font-size: 1.35rem; }
  .stat__n { font-size: clamp(2.1rem, 12vw, 2.8rem); }
  .foot__motto { font-size: 1.5rem; }
  .foot__legal { flex-direction: column; gap: .5rem; font-size: 9.5px; }
  .split, .grid { gap: 1.5rem; }
  .tcard { flex-basis: 80vw; }
  .toc { position: static; }
}
@media (max-width: 400px) {
  .brand__tx { font-size: .92rem; }
  .brand__mk { width: 34px; height: 34px; }
}

/* ── MOTION PREFERENCES (v3) ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .slides .slide.is-on { animation: none; }
  .tmarq__track { animation: none; }
  .cbot, .cbot__open { transition: none; }
}

/* Inline grid-template-columns on the apply panel outranks the stylesheet,
   so stacking it on mobile needs !important. */
@media (max-width: 760px) {
  .panel-solid { grid-template-columns: 1fr !important; }
  .panel-solid > div[style*="border-right"] {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(201,169,97,.22);
  }
  .apply, .apply__media { min-height: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   v4 — bug fixes + chatbot restyle
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. FORM OVER PHOTOGRAPHY WAS UNCLICKABLE ──────────────────
   .panel-solid sat at position:static / z-index:auto while the
   .scrim above it holds z-index:3 — so the scrim captured every
   click. It needs its own stacking context above the scrim. */
.panel-solid { position: relative; z-index: 6; }
.feature > .wrap, .feature .wrap { position: relative; z-index: 6; }
/* the scrim is decoration only — never let it take pointer events */
.scrim { pointer-events: none; }

/* ── 2. HERO DOTS: OUT OF ABSOLUTE POSITIONING ─────────────────
   Absolutely positioned they collided with the stat bar and the
   scroll cue. In normal flow they can't overlap anything. */
.slides__dots {
  position: static; transform: none;
  justify-content: center; margin-top: 1.6rem;
}
@media (max-width: 620px) {
  .slides__dots { margin-top: 1.2rem; }
  .hero__scroll { display: none; }   /* no room for it on a phone */
}

/* ── 3. BENTO: WIDE-SHORT TILES WERE CRAMPED ───────────────────
   t-w2 tiles are only one row tall; label + heading + paragraph
   left 39px of headroom. Drop the paragraph there and give every
   tile a little more height. */
.bento { grid-auto-rows: 232px; }
.t-w2:not(.t-h2) .icard__body p:not(.label) { display: none; }
.icard__body { padding: 1.5rem 1.4rem 1.4rem; }
.icard h3 { font-size: 1.24rem; }
@media (max-width: 1000px) { .bento { grid-auto-rows: 218px; } }
@media (max-width: 600px) {
  .bento { grid-auto-rows: 208px; }
  .t-w2:not(.t-h2) .icard__body p:not(.label) { display: block; }  /* full width again, room returns */
}

/* ── 4. CHATBOT LAUNCHER — circular, modern ────────────────────
   Was a boxy uppercase pill. Now a round gold action button that
   expands to reveal its label on hover/focus. */
.cbot__open {
  right: 1.4rem; bottom: 1.4rem;
  width: 58px; height: 58px; padding: 0;
  border-radius: 999px; overflow: hidden;
  gap: 0; justify-content: center;
  box-shadow: 0 14px 34px -12px rgba(201,169,97,.55), 0 0 0 1px rgba(255,255,255,.14) inset;
  transition: width .38s var(--ease), border-radius .38s var(--ease),
              transform .25s var(--ease), box-shadow .3s var(--ease);
}
.cbot__open .cbot__ico {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center; color: #14161C;
}
.cbot__open .cbot__lbl {
  max-width: 0; opacity: 0; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #14161C;
  transition: max-width .38s var(--ease), opacity .28s var(--ease), padding .38s var(--ease);
  padding-right: 0;
}
.cbot__open:hover, .cbot__open:focus-visible {
  width: 168px; border-radius: 999px; transform: translateY(-3px);
  box-shadow: 0 20px 42px -14px rgba(201,169,97,.7), 0 0 0 1px rgba(255,255,255,.2) inset;
}
.cbot__open:hover .cbot__lbl, .cbot__open:focus-visible .cbot__lbl {
  max-width: 110px; opacity: 1; padding-right: 1.3rem;
}
/* live pulse ring */
.cbot__open::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 1px solid rgba(201,169,97,.75); pointer-events: none;
  animation: cbotpulse 2.8s ease-out infinite;
}
@keyframes cbotpulse {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.cbot__open:hover::after { animation: none; opacity: 0; }
/* unread dot */
.cbot__open .dot {
  position: absolute; top: 12px; right: 12px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #2E9E63; box-shadow: 0 0 0 2px #14161C;
}
.cbot__open:hover .dot { display: none; }
@media (max-width: 620px) {
  .cbot__open { right: 1rem; bottom: 1rem; width: 54px; height: 54px; }
  .cbot__open .cbot__ico { width: 54px; height: 54px; }
  .cbot__open:hover, .cbot__open:focus-visible { width: 54px; }
  .cbot__open:hover .cbot__lbl { max-width: 0; opacity: 0; padding-right: 0; }
  .totop { right: 1rem; bottom: 5.2rem; }
}

/* ── 5. MOBILE DRAWER: FIRST ITEM WAS BEHIND THE HEADER ────────
   Announcement bar + sticky nav stack to ~144px; the drawer only
   cleared 100px, so "Home" was hidden underneath. JS measures the
   real header height into --drawer-top. */
.drawer { padding-top: calc(var(--drawer-top, 150px) + 1.8rem); }

/* ── 6. GOLD SURFACES ALWAYS CARRY BLACK TEXT ──────────────────
   One rule so no future gold element can drift to light text. */
.btn--gold, .btn--gold:hover, .btn--gold:focus-visible,
.nav__cta, .nav__cta:hover, .nav__cta:focus-visible,
.cbot__open, .cbot__open:hover,
.msg--me, .msg--me a,
.tcard__av, .skip, .skip:hover, .skip:focus,
.pill-gold {
  color: #14161C !important;
}
.btn--gold svg, .nav__cta svg, .cbot__open svg { color: #14161C; fill: currentColor; }

/* Bento headroom: fixed row heights were clipping text against the top edge.
   Let tiles grow to fit their content instead of forcing a rigid row. */
.bento { grid-auto-rows: minmax(232px, auto); }
@media (max-width: 1000px) { .bento { grid-auto-rows: minmax(218px, auto); } }
@media (max-width: 600px)  { .bento { grid-auto-rows: minmax(215px, auto); } }
/* guarantee a minimum gap between the tile top and its first line of text */
.icard__body { padding-top: 2.6rem; }

/* ═══════════════════════════════════════════════════════════════
   v5 — LIGHT-FIRST PALETTE  (~70% light / 30% dark)

   HOW THIS WORKS, so future edits don't fight it:
   The whole stylesheet above is written against --night / --pearl /
   --muted. Rather than rewrite every rule, those tokens are
   RE-POINTED to light values here, and dark sections opt back in
   via .on-dark, which restores the original dark values.

   So: --night is now the LIGHT ground. Read it as "page bg", not
   "night". Anything inside .on-dark flips back automatically.

   One genuinely new token: --gold-ink. Metallic #C9A961 only hits
   ~2.2:1 on white, so gold TEXT uses --gold-ink (dark on light,
   bright on dark) while gold BACKGROUNDS keep the metallic --gold.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --night:    #F8F7F4;   /* page ground        */
  --night-2:  #FFFFFF;   /* cards, alt bands   */
  --night-3:  #F2F0EB;   /* card hover         */
  --night-4:  #E9E6DF;
  --void:     #EFECE4;

  --pearl:    #14161C;   /* ink                */
  --muted:    #5C6068;
  --muted-2:  #83878F;

  --glass:    rgba(20,22,28,.035);
  --glass-2:  rgba(20,22,28,.06);
  --glassbd:  rgba(20,22,28,.13);
  --glassbd-2:rgba(20,22,28,.22);

  --gold:     #C9A961;   /* metallic — backgrounds only */
  --gold-2:   #8A6B24;   /* deep gold — text on light   */
  --gold-3:   #C0A257;   /* hairlines                   */
  --gold-ink: #8A6B24;   /* gold text, light context    */

  --lift-1: 0 10px 24px -16px rgba(20,22,28,.28);
  --lift-2: 0 20px 44px -26px rgba(20,22,28,.32);
  --lift-3: 0 34px 74px -38px rgba(20,22,28,.36);
}

/* ── dark islands ──────────────────────────────────────────── */
/* Dark is opt-in. Only genuine image bands and the footer are dark by
   default; everything else goes dark only by adding .on-dark. */
.on-dark,
.hero, .phero, .feature, .applyband,
.foot, .drawer, .cbot {
  --night:    #0A0C11;
  --night-2:  #0F1218;
  --night-3:  #151922;
  --night-4:  #1C212B;
  --void:     #06080C;

  --pearl:    #F1EEE7;
  --muted:    #939AA8;
  --muted-2:  #6E7686;

  --glass:    rgba(255,255,255,.055);
  --glass-2:  rgba(255,255,255,.085);
  --glassbd:  rgba(255,255,255,.13);
  --glassbd-2:rgba(255,255,255,.22);

  --gold-2:   #E6CE94;
  --gold-3:   #8A7440;
  --gold-ink: #E6CE94;

  --lift-1: 0 14px 30px -18px rgba(0,0,0,.8);
  --lift-2: 0 26px 60px -32px rgba(0,0,0,.9);
  --lift-3: 0 44px 96px -44px rgba(0,0,0,.95);

  color: var(--pearl);
}
.foot { background: #0A0C11; }
.sec--darker { background: var(--void); }
.sec--darker.on-dark, .sec--night { background: #0A0C11; }

/* ── gold TEXT must use --gold-ink, never metallic --gold ──── */
.label, .foot h4, .timeline .yr, .crumb span, .tick em,
.tcard__stars, .quote__mark, .ncard__n, .pane__no,
.acc details[open] summary, .acc summary:hover,
.foot__by a, .cbot__foot a:hover, .stat h3 + p + *,
.band__no { color: var(--gold-ink); }
.label::before { background: var(--gold-3); }
.prose a { color: var(--gold-ink); border-bottom-color: rgba(138,107,36,.4); }
.on-dark .prose a { border-bottom-color: rgba(230,206,148,.4); }
.acc summary::before, .acc summary::after { background: var(--gold-ink); }
.tag--gold { color: var(--gold-ink); border-color: rgba(138,107,36,.38); background: rgba(201,169,97,.12); }
.on-dark .tag--gold { border-color: rgba(201,169,97,.4); background: rgba(201,169,97,.08); }
.stat__n { background: linear-gradient(135deg,#B08F3E,#8A6B24 60%,#6E5418); -webkit-background-clip: text; background-clip: text; }
.on-dark .stat__n { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; }

/* ── surfaces on light ─────────────────────────────────────── */
body { background: var(--night); color: var(--pearl); }
.sec--dark { background: var(--night-2); }
.card { background: var(--night-2); border-color: var(--glassbd); box-shadow: var(--lift-1); }
.card:hover { background: var(--night-3); box-shadow: var(--lift-2), 0 0 0 1px rgba(201,169,97,.3); }
.tcard { background: var(--night-2); border-color: var(--glassbd); }
.on-dark .tcard { background: var(--night-3); }
.rule, .ncard, .acc details, .acc, .stat, .step, .timeline li,
.priv, .foot__legal, .foot__by { border-color: var(--glassbd); }
.tablewrap { border-color: var(--glassbd); }
table.tw th { background: var(--night-3); border-bottom-color: var(--glassbd); color: var(--muted); }
table.tw td { border-bottom-color: var(--glassbd); }
table.tw tbody tr:hover td { background: var(--night-3); }
.notice { background: rgba(201,169,97,.09); border-color: rgba(138,107,36,.4); }
.notice b { color: var(--gold-ink); }
.pill-ph { color: var(--gold-ink); border-color: rgba(138,107,36,.45); }

/* ── header: light and crisp ───────────────────────────────── */
.nav { background: rgba(248,247,244,.92); border-bottom: 1px solid var(--glassbd); }
.nav.is-stuck { background: rgba(248,247,244,.97); box-shadow: 0 8px 26px -20px rgba(20,22,28,.5); }
.brand { color: var(--pearl); }
.brand__mk { border-color: var(--glassbd); background: rgba(20,22,28,.03); }
.brand__mk svg path[stroke] { stroke: #8A6B24; }
.brand__mk svg path[fill] { fill: #B08F3E; }
.nav__links a { color: var(--muted); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--pearl); }
.nav__links a[aria-current="page"] { color: var(--gold-ink); }
.burger { border-color: var(--glassbd); background: rgba(20,22,28,.03); }
.burger span, .burger span::before, .burger span::after { background: var(--pearl); }
.announce {
  background: linear-gradient(90deg, rgba(201,169,97,.2), rgba(201,169,97,.1) 50%, rgba(201,169,97,.2));
  border-bottom-color: rgba(138,107,36,.28);
  color: var(--pearl);
}
.announce b { color: #6E5418; }
.announce a { color: var(--pearl); border-bottom-color: rgba(20,22,28,.35); }
.announce a:hover { color: #6E5418; border-bottom-color: #6E5418; }

/* drawer stays dark — it overlays a photo-led hero */
.drawer { background: rgba(8,10,14,.985); }
.drawer a { color: #F1EEE7; border-bottom-color: rgba(255,255,255,.08); }

/* ── buttons on light ──────────────────────────────────────── */
.btn--glass { background: rgba(20,22,28,.04); border-color: var(--glassbd); color: var(--pearl); }
.btn--glass:hover { border-color: var(--gold-ink); color: var(--gold-ink); }
.btn--ghost { border-color: var(--glassbd); color: var(--pearl); }
.btn--ghost:hover { background: rgba(20,22,28,.05); border-color: var(--pearl); }
.on-dark .btn--glass { background: rgba(255,255,255,.055); color: #F1EEE7; }
.on-dark .btn--glass:hover { border-color: #E6CE94; color: #E6CE94; }
.on-dark .btn--ghost { color: #F1EEE7; }
.on-dark .btn--ghost:hover { background: rgba(255,255,255,.085); }

/* forms on light */
.fd input, .fd textarea, .fd select {
  background: #fff; border-color: var(--glassbd); color: var(--pearl);
}
.fd input:focus, .fd textarea:focus, .fd select:focus { border-color: var(--gold-ink); background: #fff; }
.fd input::placeholder, .fd textarea::placeholder { color: var(--muted-2); }
.glass { background: rgba(20,22,28,.035); border-color: var(--glassbd); box-shadow: var(--lift-1); }
.on-dark .glass { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.13); }

/* tickers on light */
.ticker { background: linear-gradient(180deg,#FFFFFF,#F8F7F4); border-color: var(--glassbd); }
.ticker::before { background: linear-gradient(90deg,#FBFAF8,transparent); }
.ticker::after  { background: linear-gradient(270deg,#F8F7F4,transparent); }
.ticker--gold { background: linear-gradient(180deg, rgba(201,169,97,.16), rgba(201,169,97,.05)); }
.tick { color: var(--muted); }
.tick b { color: var(--pearl); }
.tmarq::before, .tmarq::after,
.sec--dark .tmarq::before, .sec--dark .tmarq::after { background: none; }

/* toc + legal on light */
.toc a { color: var(--muted); border-left-color: var(--glassbd); }
.toc a:hover { color: var(--gold-ink); border-left-color: var(--gold-ink); }
.legal p, .legal li { color: var(--muted); }
.legal b { color: var(--pearl); }

/* totop + chatbot launcher sit on light now */
.totop { background: #fff; border-color: var(--glassbd); color: var(--pearl); box-shadow: var(--lift-1); }
.totop:hover { border-color: var(--gold-ink); color: var(--gold-ink); }

/* ── SPACING: sections were far too airy ───────────────────── */
.sec        { padding-block: clamp(2.6rem, 5vw, 4.4rem); }
.sec--tight { padding-block: clamp(2rem, 3.5vw, 3rem); }
.sechead    { margin-bottom: clamp(1.5rem, 2.6vw, 2.2rem); gap: 1.1rem 3rem; }
.feature    { min-height: 0; padding-block: clamp(3rem, 6vw, 5rem); }
.phero      { min-height: 42svh; }
.phero__in  { padding-block: 3rem clamp(1.6rem, 3vw, 2.6rem); }
.foot       { padding-block: clamp(2.4rem, 5vw, 3.6rem) 1.6rem; }
.foot__legal{ margin-top: 2rem; }
.grid       { gap: clamp(.9rem, 1.6vw, 1.3rem); }
.split      { gap: clamp(1.6rem, 3.5vw, 3rem); }
.ncard      { padding-block: 1.15rem; }
.sec--flush-t { padding-top: 0; }
@media (max-width: 620px) {
  .sec { padding-block: clamp(2.2rem, 7vw, 2.8rem); }
  .feature { padding-block: clamp(2.4rem, 8vw, 3.2rem); }
}

/* keep dark-on-image text readable regardless of token flips */
.hero__sub, .phero p, .feature__card p.prose { color: rgba(241,238,231,.82); }
.feature__card .prose b { color: #fff; }

/* Dark islands that live inside otherwise-light pages.
   Applied per-section so the ~70/30 balance stays deliberate. */
.sec--night { background: #0A0C11; }

/* Hero was 100svh — the single biggest dark block on the page.
   Slightly shorter keeps the light/dark balance closer to 70/30. */
.hero { min-height: 86svh; }
@media (max-width: 900px) { .hero { min-height: 82svh; } }

/* ═══════════════════════════════════════════════════════════════
   v6 — light-theme regressions + brand lockup
   ═══════════════════════════════════════════════════════════════ */

/* Components that ALWAYS sit on a dark-scrimmed photograph must not inherit
   the light theme's ink, or their text goes dark-on-dark and disappears.
   This was hiding every bento mandate caption after the light rebuild. */
.icard, .icard__body, .icard h3, .icard p,
.tile, .tile__body, .pane, .pane__body { color: #F1EEE7; }
.icard__body .label, .tile__body .label, .pane__no { color: #E6CE94; }
.icard__body p { color: rgba(241,238,231,.82); }
.icard__rule, .tile__rule { background: #E6CE94; }

/* Centred section intros were wrapping into a ragged 3-line shape.
   Constrain the measure and let the browser balance the rag. */
.sechead--center p {
  max-width: 46ch; margin-inline: auto;
  text-wrap: balance; line-height: 1.6;
}
.sechead--center h2 { text-wrap: balance; max-width: 20ch; margin-inline: auto; }

/* ── brand lockup: real logo + gold wordmark ───────────────────── */
.brand__mk {
  border: 0; background: none; padding: 0;
  display: grid; place-items: center;
}
.brand__mk img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand:hover .brand__mk { border: 0; }
.brand__tx { color: #D79E34; letter-spacing: .06em; font-weight: 600; }
.brand__tx small { color: var(--muted); letter-spacing: .3em; }
.on-dark .brand__tx small, .foot .brand__tx small { color: rgba(241,238,231,.6); }
.foot__brand .brand__mk { width: 52px; height: 52px; }

/* footer address block */
.foot__addr {
  color: var(--muted); font-size: .93rem; line-height: 1.6;
  margin: 1rem 0 0; display: grid; gap: .3rem;
}
.foot__addr a { color: var(--muted); text-decoration: none; }
.foot__addr a:hover { color: var(--gold-ink); }
.foot__addr .foot__addr-l {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 700;
}

/* the highlighted mandate tile */
.icard--feature { outline: 2px solid rgba(215,158,52,.85); outline-offset: -2px; }
.icard--feature .icard__body::before {
  content: "Featured"; align-self: flex-start;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: #14161C; background: var(--gold-grad);
  padding: .3rem .55rem; margin-bottom: .6rem;
}

/* ═══════════════════════════════════════════════════════════════
   27 · v7 — mandate restructure (Manufacturing featured at 01)
   ═══════════════════════════════════════════════════════════════ */

/* The hero stat bar now carries three cells, not four. The base
   .glassbar is a hard repeat(4,1fr), so opt into a 3-up track. */
.glassbar--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  /* At 2-up an odd count leaves a lone cell; go single-column so the
     three read as a stack rather than a 2+1 orphan. */
  .glassbar--3 { grid-template-columns: 1fr; }
  .glassbar--3 .cell { border-left: 0; border-top: 1px solid var(--glassbd); }
  .glassbar--3 .cell:first-child { border-top: 0; }
}

/* A whole section can now be flagged as the lead mandate. */
.sec--feature { position: relative; background: var(--night-3); }
.sec--feature::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--gold-grad);
}
.secflag {
  display: inline-block; margin-bottom: 1.25rem;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  color: #14161C; background: var(--gold-grad);
  padding: .35rem .7rem;
}

/* Matching emphasis for the featured row of the register table.
   That table sits on .sec--darker, so tint rather than re-ink. */
.tw__hi td { background: rgba(201,169,97,.10); }
.tw__hi td:first-child { box-shadow: inset 2px 0 0 var(--gold); }

/* The hero stat bar now reaches within ~28px of the hero's bottom edge,
   and with three cells its centre cell sits exactly where the scroll cue
   was pinned — the cue was printing "SCROLL" through the middle stat.
   The dots below already signal that the hero continues, so drop it. */
.hero .hero__scroll { display: none; }
/* Let the dot row shrink-wrap so left:50% + translateX(-50%) really centres it. */
.slides__dots { width: max-content; }

/* ═══════════════════════════════════════════════════════════════
   28 · v8 — larger brand mark
   The keyed logo carries its own transparent margin, so at 38px it
   read much smaller than the 68px nav could carry. Grown to fill
   the header properly, with the footer and small-phone sizes kept
   in proportion.
   ═══════════════════════════════════════════════════════════════ */
.brand__mk { width: 54px; height: 54px; }
.brand__tx { font-size: 1.16rem; }
.brand__tx small { font-size: 9px; }
.foot__brand .brand__mk { width: 76px; height: 76px; }
.foot__brand .brand__tx { font-size: 1.3rem; }
@media (max-width: 860px) { .brand__mk { width: 46px; height: 46px; } }
@media (max-width: 400px) {
  .brand__mk { width: 42px; height: 42px; }
  .brand__tx { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   29 · v9 — hyperlinks
   The footer read as three bare mailto strings and every link was a
   plain colour swap on hover. Contact is now two labelled targets,
   and links get a real underline that draws in rather than a colour
   change you have to look for.
   ═══════════════════════════════════════════════════════════════ */

/* ── Footer contact: label above address, in a bordered tile ──── */
.foot__mail { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot__mail a {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem;
  border: 1px solid var(--glassbd);
  background: var(--glass);
  text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.foot__mail a:hover, .foot__mail a:focus-visible {
  border-color: var(--gold-3);
  background: rgba(201,169,97,.08);
  transform: translateX(3px);
  outline: none;
}
.foot__mail svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
.foot__mail span { display: grid; gap: .12rem; min-width: 0; }
.foot__mail b {
  font-family: var(--serif); font-size: .98rem; font-weight: 500;
  color: var(--pearl); letter-spacing: .01em;
}
.foot__mail em {
  font-style: normal; font-size: .8rem; letter-spacing: .02em;
  color: var(--muted); overflow-wrap: anywhere;
}
.foot__mail a:hover b { color: var(--gold-2); }

/* ── Footer nav links: underline wipes in from the left ───────── */
.foot ul:not(.foot__mail) a {
  position: relative; display: inline-block; padding-bottom: 2px;
}
.foot ul:not(.foot__mail) a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.foot ul:not(.foot__mail) a:hover::after,
.foot ul:not(.foot__mail) a:focus-visible::after { transform: scaleX(1); }

/* ── Inline prose links: a proper underline, not a faint border ── */
.prose a, .acc__body a, .legal a {
  color: var(--gold-ink);
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: rgba(201,169,97,.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s var(--ease), color .2s var(--ease);
}
.prose a:hover, .acc__body a:hover, .legal a:hover { text-decoration-color: currentColor; }
.on-dark .prose a, .on-dark .acc__body a { color: var(--gold-3); }

@media (max-width: 860px) { .foot__mail a { padding: .65rem .75rem; } }