/* ============================================
   DWELLTRY, Global Styles
   Colors: #0F1117 (bg) · #F0A800 (gold) · #F5F4F0 (cream) · #1A1A1A (dark text)
   Fonts: Cormorant Garamond (display) · Jost (body/nav)
============================================ */

:root {
  /* Brand palette, pure black + white + DWELLTRY yellow (was cream/gold).
     Pre-change colors backed up to `_color-backup/{style,home}.css.original`
     so we can revert by restoring those files. */
  --bg-dark:    #000000;
  --bg-light:   #FFFFFF;
  --gold:       #F0A800;   /* the "yellow", kept exactly */
  --cream:      #FFFFFF;   /* was the warm off-white; now pure white */
  --text-dark:  #000000;
  --text-light: #FFFFFF;
  --border-dark: rgba(255,255,255,0.10);
  --border-light: rgba(0,0,0,0.12);
  --nav-h: 132px;
}

/* ── Reset ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Section snapping is handled in JS (see js/home.js → sectionSnap).
     Native CSS snap is disabled because the two pinned sections
     (About 200vh, ADU Types 500vh) each need to be ONE snap unit while
     still allowing free scroll through their internal stages. */
  scroll-snap-type: none;
  /* Page scrollbar fully hidden, the right-side dot rail is now the
     navigation. Firefox + Chromium/WebKit. */
  scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Regular (non-pinned) main sections fill the viewport so two
   sections never share screen. The pinned wrappers carry their own
   taller heights elsewhere. The footer is intentionally NOT a snap
   target and is sized by its content. */
.hero,
.cta-banner,
.services-section,
.projects-section,
.begin-section,
.munis-section,
.discovery-section {
  min-height: 100vh;
}

/* Keep section content clear of the fixed nav bar, every snap
   target other than the full-bleed hero is pushed down by --nav-h
   so titles and headers sit just below the nav, not behind it. */
.cta-banner,
.services-section,
.projects-section,
.begin-section,
.munis-section,
.discovery-section {
  padding-top: calc(var(--nav-h) + 1rem);
}
/* Sections whose content should sit centered when the viewport is taller than the content */
.cta-banner,
.services-section,
.projects-section,
.begin-section,
.munis-section,
.discovery-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-pin-wrap,
.adu-h-wrap { position: relative; }

body {
  font-family: 'Jost', sans-serif;
  background: var(--bg-dark);
  color: var(--text-light);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Typography scale ───────────────────── */
.display {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.label {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.body-text {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  font-size: 1rem;
}

/* ── Page transition overlay ────────────── */
#page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  z-index: 9999;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: bottom;
}

#page-transition.enter {
  animation: curtainIn 0.55s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

#page-transition.exit {
  animation: curtainOut 0.55s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes curtainIn {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes curtainOut {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}

/* Legacy ticker, fully removed from layout. Other pages still have
   the HTML; this hides it until those pages are updated. */
.ticker-wrap { display: none !important; }

/* ── Cursor follower, single solid hard-yellow dot, always same color ── */
.cursor-dot { display: none; }
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  background: #f9c215;
  /* Hidden while the splash is up; JS adds `body.splash-done` after
     the intro animation, which fades the cursor in. */
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: width 0.18s ease, height 0.18s ease, opacity 0.55s ease 0.25s;
}
body.splash-done .cursor-ring { opacity: 0.95; }
.cursor-ring.hover {
  /* tiny scale-up only, color stays identical */
  width: 26px;
  height: 26px;
  opacity: 1;
}
@media (hover: none), (max-width: 900px) {
  .cursor-dot,
  .cursor-ring { display: none; }
}

/* ── Navigation, black bar, center logo, expanding panel ── */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above the backdrop (500) and the panel (998) so the bar never dims
     when the menu opens, and clicks always land. */
  z-index: 1100;
  height: var(--nav-h);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0 1.75rem;
}

.nav-bar-trigger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.55rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 1rem;
  line-height: 1;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
  color: var(--cream);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: auto;
}
.nav-bar-trigger:hover { transform: translate(-50%, -50%) scale(1.08); }
/* When menu is open: hide trigger so close-X can take its place */
body.nav-open .nav-bar-trigger {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}
/* In-bar close button, solid gold circle with a thick white X */
.nav-bar-close {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  margin-left: -26px;
  background: var(--gold);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6) rotate(-90deg);
  transition: opacity 0.35s ease 0.1s, transform 0.55s cubic-bezier(0.2,0.85,0.25,1) 0.1s, background 0.25s, box-shadow 0.25s;
  box-shadow: 0 0 0 rgba(240,168,0,0);
  z-index: 5;
}
body.nav-open .nav-bar-close {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) rotate(0);
}
.nav-bar-close:hover {
  background: #F9C215;
  box-shadow: 0 0 22px rgba(240,168,0,0.65);
}
.nav-bar-close span {
  position: absolute;
  width: 22px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}
.nav-bar-close span:first-child { transform: rotate(45deg); }
.nav-bar-close span:last-child  { transform: rotate(-45deg); }
.nav-bar-mark {
  height: 72px;
  width: auto;
  object-fit: contain;
  /* No glow at rest, only on hover. */
  filter: none;
  transition: filter 0.35s ease, transform 0.35s ease, opacity 0.35s ease;
  display: block;
}
.nav-bar-trigger:hover .nav-bar-mark {
  filter:
    drop-shadow(0 0 20px rgba(249,194,21,0.48))
    drop-shadow(0 0 8px rgba(249,194,21,0.38))
    drop-shadow(0 0 34px rgba(240,168,0,0.25));
}
body.nav-open .nav-bar-mark {
  opacity: 0.65;
  filter: none;
}
.nav-bar-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.9;
  text-align: center;
  line-height: 1;
}

/* Far-right CTA, same .btn-ghost design as the hero button.
   Hidden by default; only appears while the menu is open.
   .btn-ghost.nav-bar-cta double-class to win over .btn-ghost's
   `position: relative`. */
.btn-ghost.nav-bar-cta {
  position: absolute;
  right: 1.75rem;
  top: 50%;
  transform: translate(24px, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Closing, fast disappearance. */
  transition: opacity 0.22s ease 0s, transform 0.25s ease 0s, visibility 0s linear 0.25s, color 0.35s ease;
}
body.nav-open .btn-ghost.nav-bar-cta {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
  /* Opening, slower graceful entrance (0.3s faster than before). */
  transition: opacity 0.85s ease 0.55s, transform 0.9s cubic-bezier(0.2,0.85,0.25,1) 0.55s, visibility 0s linear 0s, color 0.35s ease;
}
body.nav-open .btn-ghost.nav-bar-cta:hover {
  transform: translate(0, -50%) scale(1.03);
}

/* Compact DROP-DOWN panel (slides from top, 9to5studio-style)
   Sits below ticker+nav-bar, height is content-driven (not full viewport)
   so the bottom of the page peeks through. */
.nav-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  width: 100vw;
  max-height: min(72vh, 580px);
  background: #000;
  /* Above the backdrop (500) so panel links remain clickable/hoverable, and below the nav-bar (1100) so the bar always covers any bleed-through. */
  z-index: 1050;
  transform: translateY(-110%);
  /* Hidden when closed so no content can bleed into the closed header.
     visibility transitions AFTER the transform completes on close, and IMMEDIATELY at the start of opening. */
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1), visibility 0s linear 0.7s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid rgba(240,168,0,0.25);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
}
.nav-panel.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1), visibility 0s linear 0s;
}
/* inner content needs its own scroll, since the outer is clip-hidden */
.nav-panel-inner {
  overflow-y: auto;
}
body.nav-open { overflow: hidden; }

/* Dim backdrop while opening, physically starts BELOW the nav-bar
   (and below the opened panel) so neither the bar nor the menu can
   ever look dimmed. Only dims page content underneath. */
/* Backdrop covers the WHOLE viewport (below the bar + panel) and blurs
   page content behind. Sits above the page (z-index 500) but BELOW the
   panel (1050) and the bar (1100), so the menu stays sharp on top. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(10px) saturate(0.85);
  backdrop-filter: blur(10px) saturate(0.85);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, backdrop-filter 0.45s ease;
}
.nav-backdrop.open { opacity: 1; pointer-events: all; }

/* OLD right-side X, removed in favor of the centered in-bar close.
   Hidden completely so it can't render or capture clicks. */
.nav-panel-close { display: none !important; }
.nav-panel-close--legacy {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: border-color 0.25s, background 0.25s, transform 0.3s;
}
.nav-panel-close:hover {
  border-color: var(--gold);
  background: rgba(240,168,0,0.08);
  transform: rotate(90deg);
}
.nav-panel-close span {
  position: absolute;
  width: 18px;
  height: 1px;
  background: var(--cream);
}
.nav-panel-close span:first-child { transform: rotate(45deg); }
.nav-panel-close span:last-child  { transform: rotate(-45deg); }

.nav-panel-inner {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) 3.2fr;
  gap: 0;
  padding: 0;
  min-height: auto;
  background: #000;
}

/* LEFT: small framed D logo */
.nav-panel-hero {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.5rem 1.5rem;
  position: relative;
  overflow: hidden;
}
/* Logo + caption stack, tightly grouped and centered. */
.nav-panel-hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  position: relative;
  z-index: 1;
  transform: translateY(-1.5rem);
}
/* Radial bg glow removed, logo only glows on hover now. */

.nav-panel-hero-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-panel-hero-logo {
  width: min(72%, 220px);
  height: auto;
  filter: none;
  opacity: 0;
  /* Resting state = below + slightly small, slides UP into view on open. */
  transform: translateY(30px) scale(0.92);
  transition: opacity 0.55s ease 0.18s, transform 0.7s cubic-bezier(0.2,0.85,0.25,1) 0.18s, filter 0.35s ease;
  display: block;
}
.nav-panel.open .nav-panel-hero-logo {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Closing, slide UP and out (same direction as the panel).
   All inner elements share the SAME 0.22/0.26 timing so the logo
   exits in lock-step with headings + items + foot. */
.nav-panel.closing .nav-panel-hero-logo {
  opacity: 0;
  transform: translateY(-22px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.26s ease;
  transition-delay: 0s !important;
}
.nav-panel-hero-frame:hover .nav-panel-hero-logo {
  filter:
    drop-shadow(0 0 24px rgba(249,194,21,0.48))
    drop-shadow(0 0 8px rgba(249,194,21,0.35))
    drop-shadow(0 0 38px rgba(240,168,0,0.25));
}
.nav-panel-hero-foot {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease 0.5s, transform 0.6s cubic-bezier(0.2,0.85,0.25,1) 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
.nav-panel-hero-foot .slash-motif {
  color: var(--gold);
  margin-right: 0.35rem;
}
.nav-panel.open .nav-panel-hero-foot {
  opacity: 0.55;
  transform: translateY(0);
}
.nav-panel.closing .nav-panel-hero-foot {
  opacity: 0;
  transform: translateY(-22px);
  transition: opacity 0.22s ease, transform 0.26s ease;
  transition-delay: 0s !important;
}

/* RIGHT: 3 columns, Navigation gets extra width so its inner 2-col
   grid (Home/Munis/ADU/Services left, Projects/Who Are We/Contact right)
   has room to breathe. */
.nav-panel-cols {
  display: grid;
  grid-template-columns: 2.4fr 0.9fr 1.3fr;
  gap: 1.75rem;
  padding: 1.75rem 2.25rem 1.75rem;
  align-content: start;
  background: #000;
}

/* Navigation: 2-column grid, column-flow so Home/Munis/ADU stack on
   the left, Projects/Services/Who-Are-We on the right. */
.nav-panel-nav-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 1.75rem;
  row-gap: 0.4rem;
  min-width: 0;
}
.nav-panel-nav-grid li { white-space: nowrap; }
.nav-panel-col li a { white-space: nowrap; }

.nav-panel-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nav-panel-heading {
  font-family: 'Jost', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(18px);
  padding-bottom: 0.7rem;
  position: relative;
  display: block;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2,0.85,0.25,1);
}
/* Animated underline, wipes left → right on open */
.nav-panel-heading::after {
  content: '';
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  width: 0;
  height: 1px;
  background: rgba(255,255,255,0.18);
  transform-origin: left center;
  transition: width 0.65s cubic-bezier(0.65,0,0.35,1);
}
.nav-panel.open .nav-panel-heading {
  opacity: 0.95;
  transform: translateY(0);
}
.nav-panel.open .nav-panel-heading::after {
  width: 100%;
}
/* per-column stagger of the wipe (Nav / Follow / Info) */
.nav-panel.open .nav-panel-col:nth-child(1) .nav-panel-heading { transition-delay: 0.22s; }
.nav-panel.open .nav-panel-col:nth-child(2) .nav-panel-heading { transition-delay: 0.32s; }
.nav-panel.open .nav-panel-col:nth-child(3) .nav-panel-heading { transition-delay: 0.42s; }
.nav-panel.open .nav-panel-col:nth-child(1) .nav-panel-heading::after { transition-delay: 0.32s; }
.nav-panel.open .nav-panel-col:nth-child(2) .nav-panel-heading::after { transition-delay: 0.42s; }
.nav-panel.open .nav-panel-col:nth-child(3) .nav-panel-heading::after { transition-delay: 0.52s; }
/* Closing, heading slides UP and out, underline collapses right→left fast */
.nav-panel.closing .nav-panel-heading {
  opacity: 0;
  transform: translateY(-22px);
  transition: opacity 0.22s ease, transform 0.26s ease;
  transition-delay: 0s !important;
}
.nav-panel.closing .nav-panel-heading::after {
  width: 0;
  transition: width 0.22s ease;
  transition-delay: 0s !important;
}

.nav-panel-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.nav-panel-col li {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.25;
  color: var(--cream);
  opacity: 0;
  /* Resting = below their position; slides UP into view on open. */
  transform: translateY(26px);
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.2,0.85,0.25,1);
}
.nav-panel-info li { font-size: 1.18rem; line-height: 1.55; }
.nav-panel.open .nav-panel-col li { opacity: 1; transform: translateY(0); }
.nav-panel.open .nav-panel-col li:nth-child(1) { transition-delay: 0.42s; }
.nav-panel.open .nav-panel-col li:nth-child(2) { transition-delay: 0.48s; }
.nav-panel.open .nav-panel-col li:nth-child(3) { transition-delay: 0.54s; }
.nav-panel.open .nav-panel-col li:nth-child(4) { transition-delay: 0.60s; }
.nav-panel.open .nav-panel-col li:nth-child(5) { transition-delay: 0.66s; }
.nav-panel.open .nav-panel-col li:nth-child(6) { transition-delay: 0.72s; }
.nav-panel.open .nav-panel-col li:nth-child(7) { transition-delay: 0.78s; }
.nav-panel.open .nav-panel-col li:nth-child(8) { transition-delay: 0.84s; }
.nav-panel.open .nav-panel-col li:nth-child(9) { transition-delay: 0.90s; }

/* Closing, every item slides UP and out (same direction as the panel).
   Fast, near-simultaneous so the panel can start retreating right after.
   !important on opacity beats `.nav-panel.open .nav-panel-info li { opacity: 0.85 }`
   during the brief overlap when the panel has both `.open` and `.closing`. */
/* Close = everything fades out together (no stagger) so the menu
   exits in one synchronized motion instead of cascading. */
.nav-panel.closing .nav-panel-col li,
.nav-panel.closing .nav-panel-info li {
  opacity: 0 !important;
  transform: translateY(-22px);
  transition: opacity 0.22s ease, transform 0.26s ease;
  transition-delay: 0s !important;
}

.nav-panel-col a {
  position: relative;
  display: inline-block;
  transition: color 0.25s, transform 0.3s;
  pointer-events: auto;
}
/* Belt-and-braces: when the panel is open every interactive child
   must accept hovers/clicks, guards against any inherited
   pointer-events:none from earlier transition states. */
.nav-panel.open * { pointer-events: auto; }
.nav-panel-col a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav-panel-col a:hover { color: var(--gold); transform: translateX(6px); }
.nav-panel-col a:hover::after { width: 100%; }
.np-arrow { font-size: 0.85rem; opacity: 0.55; margin-left: 0.25rem; }

.nav-panel-info li {
  font-family: 'Jost', sans-serif;
  font-size: 1.15rem;
  line-height: 1.55;
  font-weight: 300;
  opacity: 0.85;
}
.nav-panel.open .nav-panel-info li { opacity: 0.85; }
.np-mute {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.78;
  display: inline-block;
  margin-bottom: 0.3rem;
}

.nav-panel-foot {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Mobile collapse of the menu grid */
@media (max-width: 900px) {
  .nav-panel-inner { grid-template-columns: 1fr; }
  .nav-panel-hero { padding: 3rem 2rem 2rem; min-height: 28vh; }
  .nav-panel-hero-logo { width: 50%; max-width: 200px; }
  .nav-bar-cta { display: none; }
  .nav-panel-nav-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }
}

.nav-logo {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  line-height: 1.1;
}

.nav-logo-mark {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-logo .sub {
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  opacity: 0.5;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-links a {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-light);
  position: relative;
  padding-bottom: 3px;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { opacity: 1; }
.nav-links a.active::after { width: 100%; }

.nav-cta {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bg-dark) !important;
  background: var(--gold);
  padding: 0.55rem 1.25rem;
  opacity: 1 !important;
  transition: background 0.2s !important;
}

.nav-cta::after { display: none !important; }
.nav-cta:hover { background: #d99500 !important; }

/* ── Page header offset ─────────────────── */
.page-top {
  padding-top: var(--nav-h);
}

/* ── Section utilities ──────────────────── */
.section-dark  { background: var(--bg-dark); color: var(--text-light); }
.section-light { background: var(--bg-light); color: var(--text-dark); }

.section-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.45;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-label::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: currentColor;
}

/* ── Gold slash motif ───────────────────── */
.slash-motif {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  color: var(--gold);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  font-family: 'Jost', sans-serif;
}

/* ── Ghost button ───────────────────────── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 2rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s;
  background: transparent;
}

.btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.btn-ghost:hover { color: var(--bg-dark); }
.btn-ghost:hover::before { transform: scaleX(1); }

.btn-ghost span { position: relative; z-index: 1; }
.btn-ghost .arrow { position: relative; z-index: 1; font-size: 1rem; }

/* ── Solid button ───────────────────────── */
.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 2rem;
  background: var(--gold);
  color: var(--bg-dark);
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s;
  border: none;
}

.btn-solid:hover { background: #d99500; }

/* ── Reveal animations ──────────────────── */
/* Content is visible BY DEFAULT. The hidden/animated state only
   applies once JS confirms it's running (html.js-ready). If JS
   fails or hangs, everything stays visible, never a blank page. */
.reveal.reveal-left {
  transition: opacity 0.75s ease, transform 0.75s ease;
}

html.js-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
}

html.js-ready .reveal-left {
  opacity: 0;
  transform: translateX(-28px);
}

html.js-ready .reveal.visible, html.js-ready .reveal-left.visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* stagger delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ── Horizontal scroll container ────────── */
.h-scroll-outer {
  overflow: hidden;
  position: relative;
}

.h-scroll-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* ── Gold line divider ───────────────────── */
.gold-rule {
  width: 48px;
  height: 2px;
  background: var(--gold);
  display: block;
}

/* ── Number display ─────────────────────── */
.big-number {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(5rem, 10vw, 9rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}

/* ── Scrollbar ──────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

/* ── Mobile nav toggle ──────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav-burger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--cream);
  transition: transform 0.3s, opacity 0.3s;
}

/* ── Mobile menu ────────────────────────── */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  z-index: 998;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu a {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--cream);
  transition: color 0.2s;
}

.mobile-menu a:hover { color: var(--gold); }

/* ── Responsive breakpoints ─────────────── */
@media (max-width: 900px) {
  .nav-panel-inner { padding: 4.5rem 2rem 1.5rem; }
  .nav-panel-cols { grid-template-columns: 1fr; gap: 1.75rem; }
  .nav-panel-col li { font-size: 1.4rem; }
}

@media (max-width: 600px) {
  :root { --nav-h: 60px; }
}

/* ============================================
   Splash intro, black full-screen overlay shown on every page load.
   Logo fades + rises first, slogan follows, then the whole overlay
   fades out. JS adds `body.splash-done` to trigger the exit.
============================================ */
body:not(.splash-done) { overflow: hidden; }   /* lock scroll until the splash exits */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
body.splash-done .splash {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}
.splash-logo {
  width: clamp(120px, 14vw, 180px);
  height: auto;
  opacity: 0;
  transform: translateY(40px);
  animation: splashLogoIn 0.85s cubic-bezier(0.2,0.7,0.2,1) forwards;
  animation-delay: 0.15s;
  filter: drop-shadow(0 0 16px rgba(240,168,0,0.45));
}
.splash-slogan {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: var(--cream);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(28px);
  animation: splashSloganIn 0.75s cubic-bezier(0.2,0.7,0.2,1) forwards;
  animation-delay: 0.85s;
}
.splash-slogan em {
  font-style: italic;
  color: var(--gold);
}
@keyframes splashLogoIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes splashSloganIn {
  to { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════
   ACTIVE PAGE HIGHLIGHT in nav-panel menu
   The page currently being viewed gets a gold color + a soft
   gold glow behind it. The CSS targets a link with .is-active,
   which is set by a tiny JS helper based on window.location.
══════════════════════════════════════ */
.nav-panel-nav-grid a.is-active {
  color: var(--gold);
  position: relative;
  text-shadow: 0 0 14px rgba(240,168,0,0.45);
}
.nav-panel-nav-grid a.is-active::before {
  content: '';
  position: absolute;
  inset: -4px -10px;
  background: radial-gradient(60% 80% at 50% 50%, rgba(240,168,0,0.22), transparent 70%);
  z-index: -1;
  pointer-events: none;
  border-radius: 8px;
}
.nav-panel-nav-grid a.is-active::after {
  width: 100% !important;
  background: var(--gold);
  opacity: 0.5;
}

/* ════════════════════════════════════════
   ACTIVE NAV LINK — current page glows gold (stronger halo)
══════════════════════════════════════ */
.nav-panel-nav-grid a.is-active,
.nav-panel-nav-grid li a.is-active {
  color: var(--gold) !important;
  text-shadow:
    0 0 24px rgba(240,168,0,0.85),
    0 0 10px rgba(240,168,0,0.6),
    0 0 4px rgba(240,168,0,0.5);
  position: relative;
  /* Make this link its own stacking context so the gold halo below
     can sit between the link's background and the text without being
     hidden behind the nav-panel's own background layers. */
  isolation: isolate;
}
.nav-panel-nav-grid a.is-active::before {
  content: '';
  position: absolute;
  inset: -10px -18px;
  background:
    radial-gradient(58% 85% at 50% 50%,
      rgba(240,168,0,0.55),
      rgba(240,168,0,0.2) 55%,
      transparent 78%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
  border-radius: 14px;
}
.nav-panel-nav-grid a.is-active::after {
  background: var(--gold) !important;
  opacity: 0.85;
}

/* The same gold halo also applies to the mobile-only "Schedule a Call"
   pill if it happens to be the active link's row — keep it visible. */
.nav-panel-cta.is-active::before { content: none; }