/* ============================================
   DWELLTRY, Homepage Styles
============================================ */

/* ── Hero ───────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;        /* horizontal + vertical centering of content */
  padding: var(--nav-h) 3rem 4rem;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--bg-dark);
  overflow: hidden;
}

/* Background video */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* slow, subtle zoom for life even on a still poster */
  animation: heroZoom 18s ease-out forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Darker at the top, fading clearer toward the bottom so more of the
     video shows through low on the screen. A soft dark pool sits behind
     the bottom-left headline to keep the text readable. */
  background:
    linear-gradient(
      to bottom, rgba(15,17,23,0.97) 0%, rgba(15,17,23,0.82) 35%, rgba(15,17,23,0.50) 70%, rgba(15,17,23,0.42) 100%
    ), radial-gradient(
      120% 80% at 0% 100%, rgba(15,17,23,0.58) 0%, rgba(15,17,23,0) 55%
    );
}

/* Diagonal hatch texture, echoes the logo slash, adds grit + text pop */
.hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 5px
  );
  opacity: 0.55;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-eyebrow {
  margin-bottom: 1.75rem;
}

/* slightly brighter than the default label, but still understated */
.hero-eyebrow .section-label {
  opacity: 0.68;
  color: var(--cream);
  justify-content: center;
}

/* make the primary hero CTA a bit larger than the standard ghost button */
.hero-actions .btn-ghost {
  padding: 1.1rem 2.6rem;
  font-size: 0.76rem;
}

.hero-headline {
  font-size: clamp(3.4rem, 7.2vw, 7rem);
  color: var(--cream);
  margin-bottom: 2rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 1320px;
}
.hero-headline-divider {
  display: inline-block;
  margin: 0 0.4em;
  color: var(--gold);
  font-style: normal;
  font-weight: 300;
  transform: translateY(-0.05em);
}

.hero-headline em {
  font-style: italic;
  color: var(--gold);
}

/* Body-style summary copy, NOT the old uppercase-tracking label */
.hero-sub {
  font-family: 'Jost', sans-serif;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-light);
  opacity: 0.75;
  max-width: 780px;
  line-height: 1.7;
  margin: 0 auto 2.5rem;
}
.hero-eyebrow .section-label { font-size: 0.82rem; }
.hero-actions .btn-ghost { padding: 1.25rem 2.8rem; font-size: 0.85rem; }

/* Hide the old glowing logo mark, hero content is now centered text only */
.hero-logo-mark { display: none !important; }

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.hero-link {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.2s;
}

.hero-link:hover { opacity: 1; }

/* Hero D-logo mark, aligned with headline, fades in, hover scales + glows */
.hero-logo-mark {
  position: absolute;
  left: 72%;
  top: 50%;
  width: clamp(140px, 16vw, 230px);
  aspect-ratio: 130 / 112;
  z-index: 3;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  /* center origin via translate (kept in keyframes so they animate cleanly) */
  transform: translate(-50%, -50%);
  /* invert + hue-rotate flips the PNG's black outline to WHITE on dark bg
     while preserving the gold slash. drop-shadows add the gold halo glow. */
  filter:
    invert(1) hue-rotate(180deg)
    drop-shadow(0 0 26px rgba(240,168,0,0.55))
    drop-shadow(0 0 10px rgba(240,168,0,0.4))
    drop-shadow(0 0 70px rgba(240,168,0,0.22));
  animation: heroLogoFadeIn 1.4s cubic-bezier(0.2,0.8,0.2,1) 0.7s forwards, heroLogoGlow 4.5s ease-in-out 2.1s infinite;
  transition: transform 0.45s cubic-bezier(0.2,0.85,0.25,1), filter 0.5s ease;
}
.hero-logo-mark img.hero-logo-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* Halo behind logo so the dark outline still pops on the dark hero */
.hero-logo-mark::before {
  content: '';
  position: absolute;
  inset: -22%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(240,168,0,0.32) 0%, rgba(240,168,0,0.12) 38%, rgba(240,168,0,0) 70%);
  border-radius: 50%;
  z-index: -1;
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0.85;
}
.hero-logo-mark:hover {
  transform: translate(-50%, -50%) scale(1.18);
  filter:
    invert(1) hue-rotate(180deg)
    drop-shadow(0 0 48px rgba(249,194,21,1))
    drop-shadow(0 0 18px rgba(249,194,21,0.85))
    drop-shadow(0 0 130px rgba(240,168,0,0.55));
  animation-play-state: paused;
}
.hero-logo-mark:hover::before {
  opacity: 1;
  transform: scale(1.18);
}
@keyframes heroLogoFadeIn {
  from { opacity: 0; transform: translate(-50%, -42%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes heroLogoGlow {
  0%, 100% {
    filter:
      invert(1) hue-rotate(180deg)
      drop-shadow(0 0 26px rgba(240,168,0,0.55))
      drop-shadow(0 0 10px rgba(240,168,0,0.4))
      drop-shadow(0 0 70px rgba(240,168,0,0.22));
  }
  50% {
    filter:
      invert(1) hue-rotate(180deg)
      drop-shadow(0 0 38px rgba(249,194,21,0.85))
      drop-shadow(0 0 14px rgba(249,194,21,0.6))
      drop-shadow(0 0 100px rgba(240,168,0,0.38));
  }
}
/* legacy slash kept hidden in case any old markup references it */
.hero-slash { display: none; }

/* Footer brand mark, small D logo above the DWELLTRY wordmark */
.footer-v2-mark {
  width: 64px;
  height: auto;
  aspect-ratio: 130 / 112;
  margin-bottom: 0.4rem;
  filter:
    invert(1) hue-rotate(180deg)
    drop-shadow(0 0 14px rgba(240,168,0,0.45))
    drop-shadow(0 0 4px rgba(240,168,0,0.35));
  display: block;
}

/* Right-side vertical rail: slogan → interactive section dots → scroll.
   Now fixed to the viewport so the dot navigator persists across every
   section. Shifted DOWN by half --nav-h so the slogan clears the fixed
   nav at the top. */
.hero-rail {
  position: fixed;
  right: 2.5rem;
  top: calc(50% + var(--nav-h) / 2);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  z-index: 95;
  max-height: calc(100vh - var(--nav-h) - 2rem);
  pointer-events: auto;
}
/* Generous hit area for hover, the slim dot column itself is hard to
   target, so we extend a transparent gutter on the left side. */
.hero-rail::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: -0.75rem;
  left: -2rem;
}

/* Backdrop, blurs and dims the page when the rail is hovered/focused
   so the section labels read clearly. Sits below the rail, above page
   content. */
.rail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 23, 0.55);
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
body.rail-expanded .rail-backdrop {
  opacity: 1;
}
/* When the rail is expanded, all dots get a stronger resting glow so
   the navigator reads as a clear pickable list, AND the sweep keeps
   running underneath. */
body.rail-expanded .hero-rail-dot {
  background: rgba(240,168,0,0.55);
  box-shadow: 0 0 8px rgba(240,168,0,0.45);
}
body.rail-expanded .hero-rail-dot.is-active {
  background: var(--gold);
  box-shadow: 0 0 16px rgba(240,168,0,0.95), 0 0 4px rgba(240,168,0,0.7);
}

/* Section labels, sit immediately LEFT of each dot, hidden by default, slide in + fade when the rail is expanded. Hover bumps the label
   size + color so the targeted section reads stronger than its peers. */
.hero-rail-dot-label {
  position: absolute;
  right: calc(100% + 1.15rem);
  top: 50%;
  transform: translate(10px, -50%);
  white-space: nowrap;
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.2,0.7,0.2,1), font-size 0.22s ease, color 0.22s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
body.rail-expanded .hero-rail-dot-label {
  opacity: 0.9;
  transform: translate(0, -50%);
  pointer-events: auto;    /* clickable when the rail is open, same effect as clicking the dot */
  cursor: pointer;
}
body.rail-expanded .hero-rail-dot.is-active .hero-rail-dot-label {
  color: var(--gold);
  opacity: 1;
}
.hero-rail-dot:hover .hero-rail-dot-label {
  color: var(--gold);
  opacity: 1;
  font-size: 1.35rem;
  letter-spacing: 0.18em;
  font-weight: 400;
}

/* PAST HERO: collapse the rail to just the dot column.
   1) Hide slogan + "SCROLL" cue completely (display:none collapses the
      flex slot too so the dots recenter, not just fade).
   2) Re-anchor the rail at true viewport center (no nav-h offset).
   3) Stop the glow sweep on every dot, past hero, the only animations
      are the active highlight and hover.
   4) Stronger resting state so the dots are readable against light
      sections (About is cream) without relying on the sweep peak. */
body.past-hero .hero-rail-text, body.past-hero .hero-rail-scroll {
  display: none;
}
body.past-hero .hero-rail {
  top: 50%;                /* true viewport center now that the text is gone */
  right: 1.25rem;          /* hug the right edge (scrollbar is hidden) */
}
/* Pill backdrop ONLY past hero, keeps the hero layout clean while
   guaranteeing readability on every other section's background. */
body.past-hero .hero-rail-dots {
  gap: 1.5rem;             /* more vertical breathing room between dots */
  padding: 1rem 0.35rem;   /* slim pill, narrow horizontally */
  background: rgba(15, 17, 23, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
  backdrop-filter: blur(8px) saturate(0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: 0 8px 28px -10px rgba(0,0,0,0.55);
}
body.past-hero .hero-rail-dot {
  width: 13px;             /* bigger past hero */
  height: 13px;
  animation: none;         /* no sweep outside hero, only active + hover glow */
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 6px rgba(0,0,0,0.45);
}
body.past-hero .hero-rail-dot.is-active, body.past-hero .hero-rail-dot:hover {
  background: var(--gold);
  box-shadow:
    0 0 16px rgba(240,168,0,0.95), 0 0 6px rgba(240,168,0,0.65);
}
/* Drop the active ring past hero, the solid gold fill is the indicator */
body.past-hero .hero-rail-dot.is-active::after { display: none; }
.hero-rail-text.hero-rail-scroll { transition: opacity 0.4s ease; }

/* upright stacked letters, readable top-to-bottom, not rotated */
.hero-rail-text {
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 244, 240, 0.5);
}

/* Interactive section-dot column. On HERO the dots are compact and
   sit between the slogan + "SCROLL" letters as part of the glow sweep
   (the bead of light flows through them continuously). Past hero, they get bigger, gain a faded pill backdrop for readability on any
   bg, and lose the sweep, only the active + hover glow remain. */
.hero-rail-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;             /* compact on hero, fits under "POTENTIAL" */
  padding: 0.25rem 0;
}
.hero-rail-dot {
  width: 7px;              /* compact on hero */
  height: 7px;
  border-radius: 50%;
  background: rgba(240, 168, 0, 0.22);
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, width 0.3s ease, height 0.3s ease;
  animation-name: railDotGlow;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.hero-rail-dot:hover {
  transform: scale(1.6);
  background: var(--gold);
  box-shadow:
    0 0 16px rgba(240,168,0,0.95), 0 0 6px rgba(240,168,0,0.75);
}
/* Active state, a faint ring around the current section's dot. The
   dot itself keeps animating with the same sweep as every other dot
   so the bead of light passes through it continuously (no skip, no
   reverse-look). Static background/scale changes are deliberately
   AVOIDED here because they would fight the keyframe and break the
   visual continuity with the slogan + scroll letters. */
.hero-rail-dot.is-active::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(240,168,0,0.55);
  pointer-events: none;
}
@keyframes railDotGlow {
  0%, 22%, 100% { background: rgba(240,168,0,0.22); box-shadow: none; }
  11%           { background: var(--gold);
                  box-shadow: 0 0 14px rgba(240,168,0,0.85), 0 0 5px rgba(240,168,0,0.6); }
}

.hero-rail-scroll {
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-family: 'Jost', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 244, 240, 0.4);
}

/* ── Single glow that sweeps the whole rail ──
   JS wraps each letter in a .rail-char and assigns animation-delay by
   position, so one bead of light travels top→bottom. White over the
   slogan letters, gold over the line + scroll. */
.rail-char {
  color: rgba(245, 244, 240, 0.5);
  animation-name: railWhite;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.rail-char--gold {
  color: rgba(245, 244, 240, 0.4);
  animation-name: railGold;
}

@keyframes railWhite {
  0%, 22%, 100% { color: rgba(245,244,240,0.5); text-shadow: none; }
  11%           { color: #ffffff;
                  text-shadow: 0 0 10px rgba(255,255,255,0.95), 0 0 5px rgba(255,255,255,0.7); }
}

@keyframes railGold {
  0%, 22%, 100% { color: rgba(245,244,240,0.4); text-shadow: none; }
  11%           { color: var(--gold);
                  text-shadow: 0 0 12px rgba(240,168,0,0.95), 0 0 6px rgba(240,168,0,0.7); }
}

@keyframes railLineGlow {
  0%, 16%, 100% { background: rgba(240,168,0,0.18); box-shadow: none; }
  7%            { background: var(--gold); box-shadow: 0 0 14px 2px rgba(240,168,0,0.75); }
}

/* ── About, pinned scroll reveal ───────── */
.about-pin-wrap {
  position: relative;
  height: 100vh;            /* one snap unit; reveal animations removed */
}

.about-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--nav-h) 3rem 0;   /* clear the fixed nav */
  overflow: hidden;
}

.about-grid {
  display: grid;
  /* Left col compact; CENTER paragraph wider; logo column shifted right (toward dot rail) */
  grid-template-columns: 0.9fr 1.7fr 1fr;
  gap: 3.5rem;
  align-items: center;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  padding-right: 4.5rem;   /* push logo column further right, clear of the dot rail */
}
.about-body { max-width: 680px; }

.about-anim-label { opacity: 1; transform: none; }

.about-col-label {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ── Facts stack, mirrors .projects-stats with the same hover effect ── */
.about-facts {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light);
}
.afact {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding: 1.4rem 0.5rem;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  transition: padding-left 0.35s ease;
}
.afact::before {
  content:'';
  position:absolute;
  left:0; top:50%;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.afact:hover { padding-left: 1.25rem; }
.afact:hover::before { width: 1rem; }
.afact-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
  min-width: 68px;
}
.afact-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.afact-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dark);
}
.afact-sub {
  font-family: 'Jost', sans-serif;
  font-size: 0.74rem;
  color: var(--text-dark);
  opacity: 0.55;
  line-height: 1.4;
}

.about-col-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;             /* tight gap → body sits "a bit higher", just below lead */
}
.about-lead {
  font-size: clamp(2rem, 3.6vw, 3.2rem);     /* bigger */
  color: var(--text-dark);
  line-height: 1.15;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
}
.about-lead em { font-style: italic; color: var(--gold); }

.about-body {
  color: var(--text-dark);
  opacity: 0.7;
  max-width: 560px;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* ── Staged fade-in (re-enabled) ──
   data-stage="1" → lead heading first
   data-stage="2" → body + CTA next
   data-stage="3" → logo badge last
   Triggered by `.playing` class added by JS on entry. */
.about-stage {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.about-pin.playing .about-stage[data-stage="1"] {
  opacity: 1;
  transform: none;
}
.about-pin.playing .about-stage[data-stage="2"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.4s;
}
.about-pin.playing .about-stage[data-stage="3"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.4s;
}
.about-pin.playing .about-body.about-stage[data-stage="2"] {
  opacity: 0.7;             /* keep dimmer resting state for body copy */
}

/* logo trust badge, centered between paragraph and dot rail */
.about-col-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.about-badge-logo {
  width: clamp(180px, 16vw, 240px);
  height: auto;
}
.about-badge-logo.missing { display: none; }
.about-badge-line {
  width: 50px;
  height: 1px;
  background: var(--gold);
}
.about-badge-caption {
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dark);
  opacity: 0.65;
}

/* ── ADU Types, pinned horizontal scroll ── */
.adu-h-wrap {
  position: relative;
  z-index: 2;               /* sits above the cta-banner/FAQ that follows */
  height: 500vh;            /* intro + 4 types worth of vertical scroll */
  /* Solid black fallback so no element from the next section can bleed
     through any gap during the sticky-to-static transition. */
  background: #000;
}
/* Make the next section sit below the ADU wrap so no bleed is possible. */
.adu-h-wrap + .cta-banner,
.adu-h-wrap + .adu-guide-cta { position: relative; z-index: 1; }

/* intro panel, text left, video right, split by a diagonal gold line */
.adu-panel--intro {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  text-align: left;
  position: relative;
  gap: 4rem;
  padding-top: 0;            /* truly center vertically, title is absolute */
}
.adu-intro-text {
  max-width: 560px;
  justify-self: center;
  align-self: center;
  margin-top: calc(var(--nav-h) * -0.5);   /* compensate for the pin's nav-h padding-top */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  opacity: 0.25;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.adu-panel.active .adu-intro-text { opacity: 1; transform: none; }
.adu-intro-text h2 {
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  color: var(--cream);
  line-height: 1.1;
}
.adu-intro-text h2 em { font-style: italic; color: var(--gold); }
.adu-intro-text p {
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0.6;
  max-width: 520px;
}

/* keep text above the video wedge */
.adu-intro-text { position: relative; z-index: 3; }

/* video fills the whole right wedge, clipped along the diagonal */
.adu-intro-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 62% 100%);
  overflow: hidden;
}
.adu-intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroZoom 18s ease-out forwards;   /* same slow zoom as the hero */
}
/* fade, dark gradient from the diagonal edge + hatch, like the hero video */
.adu-intro-media-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(15,17,23,0.96) 0%, rgba(15,17,23,0.55) 16%, rgba(15,17,23,0.18) 38%, rgba(15,17,23,0.05) 100%), repeating-linear-gradient(45deg, rgba(0,0,0,0.20) 0px, rgba(0,0,0,0.20) 1px, transparent 1px, transparent 5px);
}

/* Diagonal gold divider, the BASE line is always solid; a brighter
   "glow bead" pulses down its length on top. Implemented by nesting two
   SVG lines via a stacked overlay (the second is added in HTML inline). */
.adu-intro-divider {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(240,168,0,0.55))
          drop-shadow(0 0 18px rgba(240,168,0,0.22));
}
/* Base line always visible, opacity pulse so it gently breathes */
.adu-intro-divider line {
  animation: aduDiagPulse 2.8s ease-in-out infinite;
}
@keyframes aduDiagPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
/* Overlay the same SVG with a second, brighter dashed line that travels
   DOWN, a continuous glow bead riding on top of the solid base. */
.adu-panel--intro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><line x1='50' y1='0' x2='62' y2='100' stroke='%23ffd24d' stroke-width='3' vector-effect='non-scaling-stroke' stroke-dasharray='12 220' stroke-dashoffset='0'><animate attributeName='stroke-dashoffset' from='0' to='-232' dur='3.2s' repeatCount='indefinite'/></line></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 8px rgba(255,210,77,0.95))
          drop-shadow(0 0 22px rgba(240,168,0,0.6));
  mix-blend-mode: screen;
}

/* glowing 'keep scrolling' hint */
.adu-intro-hint {
  margin-top: 0.85rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,168,0,0.6);
}
.hint-char {
  color: rgba(240,168,0,0.6);
  animation-name: hintGlow;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes hintGlow {
  0%, 24%, 100% { color: rgba(240,168,0,0.6); text-shadow: none; }
  9%            { color: #ffd86b;
                  text-shadow: 0 0 10px rgba(240,168,0,0.9), 0 0 4px rgba(255,255,255,0.5); }
}
.adu-h-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-h);   /* push panels + title clear of the fixed nav */
  background: #000;            /* solid black under panels so no bleed */
}
.adu-h-head {
  position: absolute;
  top: calc(var(--nav-h) + 1.2rem);
  left: 3rem;
  right: 3rem;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.adu-h-title {
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.75;
}

.adu-h-track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}

/* 50/50 fullbleed panels (mirrors the munis split). Vertical gold rail
   between the text and the design column. */
.adu-panel {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  padding: 0;
  position: relative;
}
.adu-panel:not(.adu-panel--intro)::before {
  /* vertical gold divider between text and design */
  content: '';
  position: absolute;
  top: 18%;
  bottom: 12%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(240,168,0,0.05) 8%, rgba(240,168,0,0.6) 50%, rgba(240,168,0,0.05) 92%, transparent 100%);
  box-shadow: 0 0 14px rgba(240,168,0,0.4);
  pointer-events: none;
}

.adu-panel-info {
  max-width: 580px;
  justify-self: center;
  align-self: center;
  padding: 0 clamp(2rem, 4vw, 4rem);
  /* center the text block to TRUE vertical midline of the section
     (panel is 100vh; account for the nav-h padding above the pin) */
  margin-top: calc(var(--nav-h) * -0.5);
  opacity: 0.25;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.adu-panel.active .adu-panel-info { opacity: 1; transform: none; }

/* ── Isometric massing diagram ──
   The HOMES are rendered as white outlines (no fill). The ADU group
   (.adu-iso-adu) is the only thing filled in gold + glow + pulse. */
.adu-iso { width: 100%; height: 100%; display: block; overflow: visible; }
.adu-iso polygon.adu-iso path.adu-iso rect {
  stroke: rgba(255,255,255,0.85);
  stroke-width: 1.3;
  stroke-linejoin: round;
  fill: none;
}
/* leaves / ground accents stay as their own colored fills (set inline by JS).
   The neutral white-outline rule above is the default for all home shapes. */

.adu-iso-adu polygon.adu-iso-adu path.adu-iso-adu rect {
  stroke: var(--gold);
  stroke-width: 1.5;
  fill: rgba(240,168,0,0.7);
}
.adu-iso-adu {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2,0.7,0.2,1);
  filter: drop-shadow(0 0 8px rgba(240,168,0,0.85))
          drop-shadow(0 0 18px rgba(240,168,0,0.35));
  transform-origin: center;
}
.adu-panel.active .adu-iso-adu {
  opacity: 1;
  transform: none;
  animation: aduIsoPulse 3.6s ease-in-out infinite;
}
@keyframes aduIsoPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(240,168,0,0.7))
                       drop-shadow(0 0 18px rgba(240,168,0,0.3)); }
  50%      { filter: drop-shadow(0 0 14px rgba(240,168,0,1))
                       drop-shadow(0 0 28px rgba(240,168,0,0.5)); }
}

.adu-panel-num {
  font-size: 5rem;
  color: var(--gold);
  opacity: 0.35;
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}
.adu-panel-info h2 {
  font-size: clamp(2.8rem, 5.6vw, 4.6rem);
  color: var(--cream);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.adu-panel-info p {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.75;
  opacity: 0.75;
  color: var(--text-light);
  margin-bottom: 1.1rem;
}
.adu-panel-info p + p { margin-bottom: 2rem; }

.adu-panel-design {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  position: relative;
  overflow: hidden;
  padding: 4rem;
}
.adu-panel-design img.adu-panel-design svg {
  max-width: 92%;
  max-height: 92%;
  width: 92%;
  height: 92%;
  object-fit: contain;
}
.adu-panel-design img.missing { display: none; }

/* progress bar */
.adu-h-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border-dark);
}
.adu-h-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gold);
}

/* ── Services, tall 5-column layout ──────── */
.services-section {
  padding: 0;
  position: relative;
  z-index: 1;               /* sits below the FAQ/cta-banner above it */
  background: #000;
  isolation: isolate;
  overflow: hidden;         /* containment for column-divider edges */
}

/* The ADU Guide CTA (FAQ panel) is the section directly above services.
   Lock it above + give it a solid bg so nothing from services leaks up. */
.adu-guide-cta {
  position: relative;
  z-index: 2;
  background: #000;
  isolation: isolate;
  overflow: hidden;
}

.services-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr;
  min-height: 84vh;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}

/* service columns */
.service-col {
  padding: 4rem 2.4rem;
  border-right: 1px solid var(--border-dark);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background 0.3s;
}
.service-col:first-child { border-left: 1px solid var(--border-dark); }

/* top content (vertically centered) + bottom CTA (aligned across columns) */
.service-col-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}
.service-col-cta {
  display: flex;
  justify-content: center;
  padding-top: 2.5rem;
}
.btn-ghost.btn-sm {
  padding: 0.7rem 1.2rem;
  font-size: 0.58rem;
  text-align: center;
  line-height: 1.3;
}

/* hover glow (bottom sweep + tint) */
.service-col::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.service-col:hover { background: rgba(240,168,0,0.05); }
.service-col:hover::after { transform: scaleX(1); }

.service-col .service-num {
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.2;
  line-height: 1;
  font-weight: 300;
}
.service-col h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
}
.service-col p {
  font-size: 0.84rem;
  line-height: 1.9;
  opacity: 0.55;
  color: var(--text-light);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* center feature column */
.service-feature {
  padding: 4rem 2.5rem;
  border-right: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.service-feature-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.service-feature-tag h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 0.85rem;
}
.service-feature-tag h2 em { font-style: italic; color: var(--gold); }
.service-feature-tag p {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  opacity: 0.6;
  color: var(--text-light);
}
.service-feature-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.service-feature .section-label { justify-content: center; }
.service-feature .btn-ghost { align-self: center; }
.service-feature-arrow {
  display: block;
  width: 46px;
  height: 46px;
  color: var(--gold);
}
.service-feature .btn-ghost { align-self: flex-start; }

/* ── ADU Types horizontal scroll ────────── */
.adu-types-section {
  padding: 5rem 0 3rem;
  border-top: 1px solid var(--border-dark);
}

.adu-types-header {
  padding: 0 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.adu-types-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--cream);
}

.h-scroll-outer {
  cursor: grab;
  user-select: none;
  padding: 0 3rem;
}

.h-scroll-outer:active { cursor: grabbing; }

.h-scroll-track {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 1rem;
}

.adu-card {
  flex: 0 0 380px;
  height: 520px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-dark);
  transition: transform 0.3s;
}

.adu-card:hover { transform: translateY(-6px); }

.adu-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  filter: brightness(0.45);
}

.adu-card:hover .adu-card-img { transform: scale(1.04); }

.adu-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(15,17,23,0.95) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.adu-num {
  color: var(--gold);
  opacity: 0.7;
}

.adu-card-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--cream);
  line-height: 1.1;
}

.adu-card-content p {
  font-size: 0.8rem;
  line-height: 1.65;
  opacity: 0.55;
  color: var(--text-light);
}

.adu-link {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.5rem;
  transition: opacity 0.2s;
}

.adu-link:hover { opacity: 0.7; }

/* Drag hint bar */
.h-scroll-hint {
  padding: 1.5rem 3rem 0;
}

.drag-line {
  height: 1px;
  background: var(--border-dark);
  position: relative;
  overflow: hidden;
}

.drag-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 30%;
  background: var(--gold);
  animation: dragHint 2.5s ease-in-out infinite;
}

@keyframes dragHint {
  0%   { left: -30%; }
  100% { left: 130%; }
}

/* ── Projects (stats stacked LEFT + tailored copy RIGHT) ── */
.projects-section {
  padding: 8rem 3rem;
  border-top: 1px solid var(--border-dark);
  position: relative;
}
.projects-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

/* LEFT, stacked stat rows */
.projects-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-dark);
}
.pstat {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding: 1.75rem 0.5rem;
  border-bottom: 1px solid var(--border-dark);
  position: relative;
  transition: padding-left 0.35s ease;
}
.pstat::before {
  content:'';
  position:absolute;
  left:0; top:50%;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.pstat:hover { padding-left: 1.5rem; }
.pstat:hover::before { width: 1rem; }

.pstat-num {
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
  min-width: 80px;
  display: flex;
  align-items: center;
}
.pstat-num svg { color: var(--gold); }
.pstat-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pstat-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}
.pstat-sub {
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-light);
  opacity: 0.45;
}

/* RIGHT, tailored copy */
.projects-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
.projects-copy h2 {
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  color: var(--cream);
  line-height: 1.05;
}
.projects-copy h2 em { font-style: italic; color: var(--gold); }
.projects-copy > p {
  font-size: 1rem;
  line-height: 1.85;
  opacity: 0.55;
  color: var(--text-light);
  max-width: 560px;
}
.projects-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.projects-link {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.2s;
}
.projects-link:hover { opacity: 1; }

/* ── Begin section ── */
.begin-section {
  position: relative;
  padding: 9rem 3rem;
  overflow: hidden;
  border-top: 1px solid var(--border-dark);
}
.begin-bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.begin-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.begin-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,17,23,0.92) 0%, rgba(15,17,23,0.78) 50%, rgba(15,17,23,0.92) 100%), repeating-linear-gradient(45deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 5px);
}
.begin-inner {
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}
.begin-inner h2 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  color: var(--cream);
  line-height: 1.05;
}
.begin-inner h2 em { font-style: italic; color: var(--gold); }
.begin-lede {
  font-size: 1rem;
  line-height: 1.85;
  opacity: 0.6;
  color: var(--text-light);
  max-width: 720px;
  margin-bottom: 2rem;
}
.begin-cards {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.5rem;
  width:100%;
  margin-top:1rem;
}
.begin-card {
  border:1px solid var(--border-dark);
  background: rgba(15,17,23,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* taller cards, top extended; content sits higher inside */
  padding: 4.5rem 1.8rem 2rem;
  min-height: 26rem;
  justify-content: flex-start;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.1rem;
  position:relative;
  overflow:hidden;
  transition: border-color 0.35s, background 0.35s, transform 0.35s;
}
.begin-card::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.begin-card:hover {
  border-color: rgba(240,168,0,0.4);
  background: rgba(240,168,0,0.04);
  transform: translateY(-4px);
}
.begin-card:hover::after { transform: scaleX(1); }

.begin-icon {
  width:64px; height:64px;
  color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 0.5rem;
}
.begin-icon svg { width:100%; height:100%; }
.begin-card h3 {
  font-family:'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.5;
  max-width: 280px;
}
.begin-card p {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-light);
  opacity: 0.6;
  flex:1;
}
.begin-card .btn-ghost { margin-top: 0.5rem; }

/* ── Municipalities map section ── */
/* Map section is split 50/50: full-bleed map left, content right.
   Overrides the universal section padding-top from style.css so the
   map extends edge-to-edge under the nav. */
.munis-section {
  /* Breathing room at the bottom so the map's zoom controls and the
     "Schedule a Discovery Call" CTA don't sit flush against the
     section boundary. */
  padding: 0 0 3rem !important;
  border-top: 1px solid var(--border-dark);
}
.munis-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 3rem);
  min-height: calc(100dvh - 3rem);
  width: 100%;
}
.munis-head {
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  margin-bottom: 2rem;
}
.munis-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  color: var(--cream);
  line-height: 1.1;
}
.munis-head h2 em { font-style: italic; color: var(--gold); }
.munis-content {
  padding: calc(var(--nav-h) + 2rem) clamp(2rem, 4vw, 4rem) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.munis-map {
  position: relative;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  background-color: #2a2d34;
  border-right: 1px solid rgba(240,168,0,0.18);
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.7);
}
.muni-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #2a2d34;
}
/* CARTO Dark Matter → medium grey (not black) */
.muni-map-canvas .leaflet-tile-pane {
  filter: brightness(1.55) saturate(0) contrast(0.95);
}
.muni-map-canvas .leaflet-container {
  background: #2a2d34;
  font-family: 'Jost', sans-serif;
  cursor: grab;
}
.muni-map-canvas .leaflet-container:active { cursor: grabbing; }
.munis-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(15,17,23,0.55) 100%);
  pointer-events: none;
  z-index: 401;
}
.munis-map-svg { display: none; }
/* Hide Leaflet default attribution control visual chrome */
.muni-map-canvas .leaflet-control-attribution {
  background: rgba(0,0,0,0.55);
  color: rgba(232,230,223,0.55);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  padding: 2px 6px;
}
.muni-map-canvas .leaflet-control-attribution a { color: var(--gold); opacity: 0.85; }
.muni-map-canvas .leaflet-control-zoom { display: none; }

.munis-map-corner {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  font-family: 'Jost', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.munis-map-corner span:last-child { color: var(--cream); opacity: 0.55; }

/* Leaflet DivIcon pin, logo only, no chip */
.muni-pin {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transform-origin: center;
  transition: transform 0.3s ease;
  pointer-events: auto;
}
.muni-pin svg,
.muni-pin img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 0 4px rgba(240,168,0,0.6))
    drop-shadow(0 2px 6px rgba(0,0,0,0.85))
    drop-shadow(0 0 1px rgba(255,255,255,0.6));
  transition: filter 0.3s ease;
}
.muni-pin:hover { transform: scale(1.25); z-index: 500; }
.muni-pin:hover svg,
.muni-pin:hover img {
  filter:
    drop-shadow(0 0 10px rgba(240,168,0,1))
    drop-shadow(0 0 22px rgba(240,168,0,0.7))
    drop-shadow(0 2px 6px rgba(0,0,0,0.85));
}
.muni-pin.active { transform: scale(1.3); z-index: 500; }
.muni-pin.active svg,
.muni-pin.active img {
  filter:
    drop-shadow(0 0 14px rgba(240,168,0,1))
    drop-shadow(0 0 28px rgba(240,168,0,0.85));
}

/* Custom zoom controls (bottom-right) */
.muni-map-zoom {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 410;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.muni-map-zoom button {
  width: 30px;
  height: 30px;
  background: rgba(15,17,23,0.85);
  border: 1px solid rgba(240,168,0,0.45);
  color: var(--cream);
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.muni-map-zoom button:hover {
  background: var(--gold);
  color: var(--bg-dark);
  border-color: var(--gold);
}

/* Hint pill (Ctrl + scroll) */
.muni-map-hint {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 410;
  background: rgba(15,17,23,0.78);
  border: 1px solid rgba(240,168,0,0.35);
  color: var(--cream);
  padding: 0.4rem 0.85rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.5s ease;
}
.muni-map-hint strong { color: var(--gold); font-weight: 500; letter-spacing: 0.18em; }
.muni-map-hint.faded { opacity: 0; }
/* Leaflet wrapper overrides, no white box, no shadow on the marker container */
.muni-map-canvas .leaflet-marker-icon { background: transparent !important; border: none !important; }
.muni-map-canvas .leaflet-div-icon { background: transparent; border: none; }

.muni-pin-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-dark);
  border: 1px solid rgba(240,168,0,0.5);
  color: var(--cream);
  font-family: 'Jost', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.muni-pin:hover .muni-pin-label,
.muni-pin.active .muni-pin-label { opacity: 1; }

/* List right */
.munis-list-wrap {
  display:flex;
  flex-direction:column;
  gap:2rem;
}
.munis-list {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--border-dark);
}
.munis-list li {
  border-bottom: 1px solid var(--border-dark);
}
.munis-list li:nth-child(odd) { border-right: 1px solid var(--border-dark); }
.munis-list a {
  display: block;
  padding: 1rem 1.25rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.75;
  position: relative;
  overflow: hidden;
  transition: color 0.35s, opacity 0.35s, padding-left 0.35s;
}
.munis-list a span { position: relative; z-index: 1; }
.munis-list a::before {
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(240,168,0,0.18) 0%, rgba(240,168,0,0.04) 60%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
}
.munis-list a::after {
  content:'';
  position:absolute;
  left:0; top:50%;
  width:0; height:1px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index:1;
}
.munis-list a:hover,
.munis-list a.active {
  opacity: 1;
  padding-left: 2rem;
  color: var(--gold);
}
.munis-list a:hover::before,
.munis-list a.active::before { transform: translateX(0); }
.munis-list a:hover::after,
.munis-list a.active::after { width: 1.25rem; }

.munis-note {
  font-size: 0.88rem;
  line-height: 1.75;
  opacity: 0.55;
  color: var(--text-light);
  max-width: 460px;
}

/* ── Discovery section, informative 3-step consultation rebuild ──
   Replaces the old animated-circle layout with a process strip:
   three detailed step cards joined by a hairline rail, an "includes"
   panel, and the CTA. Fills the section vertically so there's no
   empty space below the content. */
.discovery-section {
  padding: calc(var(--nav-h) + 2rem) clamp(1.5rem, 3vw, 3rem) 2rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-dark);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(240,168,0,0.06), transparent 60%), radial-gradient(50% 70% at 50% 100%, rgba(240,168,0,0.05), transparent 60%), var(--bg-dark);
}
.discovery-inner {
  max-width: 1180px;
  margin: 0 auto;
  height: 100%;
  min-height: calc(100vh - var(--nav-h) - 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  position: relative;
  z-index: 1;
}
.discovery-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.discovery-eyebrow { color: var(--gold); opacity: 0.9; }
.discovery-head h2 {
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  color: var(--cream);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.discovery-head h2 em { font-style: italic; color: var(--gold); }
.discovery-lede {
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 620px;
  color: var(--text-light);
  opacity: 0.7;
}

/* ── Process strip, 3 step cards joined by hairline rails ── */
.discovery-process {
  display: grid;
  grid-template-columns: 1fr 60px 1fr 60px 1fr;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.dstep-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 2rem 1.6rem 1.5rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(240,168,0,0.18);
  border-radius: 2px;
  transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.dstep-card::before {
  /* subtle inner gold glow on top corners */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,168,0,0.45), transparent);
}
.dstep-card:hover {
  transform: translateY(-6px);
  background: rgba(240,168,0,0.04);
  border-color: rgba(240,168,0,0.45);
  box-shadow:
    0 18px 36px -12px rgba(0,0,0,0.7), 0 0 24px -8px rgba(240,168,0,0.35);
}
.dstep-num {
  position: absolute;
  top: 0.9rem;
  right: 1.2rem;
  font-size: 2.4rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(240,168,0,0.28);
  letter-spacing: -0.04em;
  line-height: 1;
  transition: color 0.35s ease;
}
.dstep-card:hover .dstep-num { color: var(--gold); }
.dstep-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.dstep-icon svg { width: 100%; height: 100%; }
.dstep-card h3 {
  font-family: 'Jost', sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cream);
  line-height: 1.3;
}
.dstep-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-light);
  opacity: 0.7;
  flex: 1;
}
.dstep-meta {
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.dstep-meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(240,168,0,0.7);
}

.dstep-rail {
  align-self: center;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,168,0,0.05) 0%, rgba(240,168,0,0.55) 50%, rgba(240,168,0,0.05) 100%);
  position: relative;
  overflow: hidden;
}
.dstep-rail::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -20px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(240,168,0,0.95);
  animation: dstepBead 3.6s ease-in-out infinite;
}
.discovery-process .dstep-rail:nth-of-type(4)::before { animation-delay: 1.2s; }
@keyframes dstepBead {
  0%       { transform: translateX(0);              opacity: 0; }
  10%      { opacity: 1; }
  85%      { opacity: 1; }
  100%     { transform: translateX(calc(100% + 20px)); opacity: 0; }
}

/* ── Includes panel ── */
.discovery-includes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.5rem;
  border-top: 1px solid rgba(240,168,0,0.18);
  border-bottom: 1px solid rgba(240,168,0,0.18);
}
.includes-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}
.discovery-includes ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem 2.5rem;
  width: 100%;
  max-width: 1000px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.discovery-includes li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.82rem;
  color: var(--text-light);
  opacity: 0.85;
  line-height: 1.4;
}
.discovery-includes li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold);
}

/* ── CTA, bottom-anchored ── */
.discovery-cta {
  align-self: center;
  margin-top: 0.5rem;
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .discovery-process { grid-template-columns: 1fr; gap: 1.5rem; }
  .dstep-rail { width: 1px; height: 30px; justify-self: center; background: linear-gradient(180deg, rgba(240,168,0,0.05), rgba(240,168,0,0.55), rgba(240,168,0,0.05)); }
  .dstep-rail::before { animation: none; display: none; }
  .discovery-includes ul { grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; }
}
@media (max-width: 540px) {
  .discovery-includes ul { grid-template-columns: 1fr; }
}

/* ── Footer v2 (Lagoon-style) ── */
.footer-v2 {
  padding: 5rem 3rem 2rem;
  border-top: 1px solid var(--border-dark);
}
.footer-v2-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-dark);
}
.footer-v2-brand { display:flex; flex-direction:column; gap:1.1rem; }
.footer-v2-mark {
  width: 56px;
  height: auto;
  aspect-ratio: 130 / 112;
  /* invert + hue-rotate: black outline → white, gold slash preserved */
  filter:
    invert(1) hue-rotate(180deg)
    drop-shadow(0 0 12px rgba(240,168,0,0.45))
    drop-shadow(0 0 3px rgba(240,168,0,0.35));
  margin-bottom: 0.25rem;
}
.footer-v2-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 2.4rem;
  color: var(--cream);
  letter-spacing: 0.01em;
}
.footer-v2-tag {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-light);
  opacity: 0.55;
  max-width: 320px;
}
.footer-v2-cta {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.9rem 1.8rem;
  background: var(--gold);
  color: var(--bg-dark);
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.25s, transform 0.2s;
  margin: 0.5rem 0;
}
.footer-v2-cta:hover { background: #d99500; transform: translateY(-2px); }
.footer-v2-rule {
  display:block;
  width:60px;
  height:1px;
  background: rgba(240,168,0,0.55);
  margin: 0.75rem 0;
}
.footer-v2-mission {
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--text-light);
  opacity: 0.45;
  max-width: 320px;
}
.footer-v2-social {
  display:flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.footer-v2-social a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--cream);
  opacity: 0.6;
  transition: opacity 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.footer-v2-social a:hover {
  opacity: 1;
  color: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.footer-v2-social svg { width:16px; height:16px; }

.footer-v2-col { display:flex; flex-direction:column; gap: 1rem; }
.footer-v2-heading {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.footer-v2-col ul { display:flex; flex-direction:column; gap: 0.75rem; }
.footer-v2-col li {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-light);
  opacity: 0.65;
  display:flex;
  align-items:flex-start;
  gap: 0.65rem;
}
.fic {
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 1px;
}
.fic svg { width:16px; height:16px; }
.fmuted { opacity: 0.55; font-size: 0.78rem; display:block; margin-top: 0.15rem; }

.footer-v2-links li a {
  font-size: 0.85rem;
  color: var(--text-light);
  opacity: 0.65;
  position: relative;
  transition: color 0.2s, opacity 0.2s, padding-left 0.2s;
}
.footer-v2-links li a:hover {
  opacity: 1;
  color: var(--gold);
  padding-left: 0.4rem;
}

.footer-v2-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  font-family:'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  opacity: 0.45;
}

/* ── CTA banner ─────────────────────────── */
.cta-banner {
  padding: 7rem 3rem;
  border-top: 1px solid var(--border-dark);
  position: relative;
  overflow: hidden;
}

.cta-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.5rem;
}

.cta-inner h2 {
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  color: var(--cream);
}

.cta-inner p {
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0.6;
  max-width: 560px;
  color: var(--text-light);
}

.adu-guide-cta .cta-inner h2 { font-size: clamp(2.2rem, 4.5vw, 4rem); }

.cta-inner h2 em {
  font-style: italic;
  color: var(--gold);
}

.cta-slash {
  position: absolute;
  left: -2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 30vw;
  font-weight: 300;
  color: var(--gold);
  opacity: 0.03;
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

/* ── Footer ─────────────────────────────── */
.footer {
  padding: 4rem 3rem 2rem;
  border-top: 2px solid var(--gold);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-dark);
  max-width: 1100px;
  margin: 0 auto;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-nav a {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
}

.footer-nav a:hover { opacity: 1; color: var(--gold); }

.footer-contact {
  display: flex;
  flex-direction: column;
}

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 900px) {
  .hero { padding: 0 1.5rem 3rem; }
  .hero-rail { display: none; }
  .hero-slash { width: 70px; left: auto; right: 1.5rem; transform: none; }

  /* disable the pin on small screens, show everything stacked */
  .about-pin-wrap { height: auto; }
  .about-pin { position: static; height: auto; padding: 4rem 1.5rem; overflow: visible; }
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-stage { opacity: 1; transform: none; }
  .about-anim-label { opacity: 1; transform: none; }
  .about-col-logo { order: -1; justify-content: flex-start; }
  .about-logo-sketch { width: 130px; }

  /* services: stack the 5 columns vertically */
  .services-cols { grid-template-columns: 1fr; min-height: 0; }
  .service-col { border-right: none; border-bottom: 1px solid var(--border-dark); padding: 3rem 1.5rem; }
  .service-col:first-child { border-left: none; }
  .service-feature { border-right: none; border-bottom: 1px solid var(--border-dark); padding: 3.5rem 1.5rem; }

  /* ADU types: stack vertically instead of horizontal pin */
  .adu-h-wrap { height: auto; }
  .adu-h-pin { position: static; height: auto; overflow: visible; }
  .adu-h-head { position: static; padding: 4rem 1.5rem 0; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .adu-h-track { flex-direction: column; width: 100%; transform: none !important; }
  .adu-panel { width: 100%; height: auto; grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem; }
  .adu-panel-info { opacity: 1; transform: none; max-width: none; }
  .adu-panel-design { height: 50vh; }
  .adu-h-progress { display: none; }
  .adu-panel--intro { grid-template-columns: 1fr; }
  .adu-intro-text { opacity: 1; transform: none; max-width: none; }
  .adu-intro-divider { display: none; }
  .adu-intro-media { position: static; inset: auto; clip-path: none; height: 40vh; margin-top: 2rem; }

  .cta-banner { padding: 5rem 1.5rem; }

  /* Projects: stack */
  .projects-section { padding: 4rem 1.5rem; }
  .projects-grid { grid-template-columns: 1fr; gap: 3rem; }
  .pstat { gap: 1rem; padding: 1.25rem 0.25rem; }
  .pstat-num { min-width: 60px; font-size: 2.4rem; }

  /* Begin: stack cards */
  .begin-section { padding: 5rem 1.5rem; }
  .begin-cards { grid-template-columns: 1fr; gap: 1.25rem; }

  /* Munis: stack */
  .munis-section { padding: 5rem 1.5rem; }
  .munis-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .munis-map { max-width: 480px; margin: 0 auto; }
  .munis-list { grid-template-columns: 1fr; }
  .munis-list li:nth-child(odd) { border-right: none; }

  /* Discovery: tighten */
  .discovery-section { padding: 5rem 1.5rem; }
  .discovery-steps { gap: 0.5rem; }
  .dstep-dash { flex: 0 0 30px; }

  /* Footer */
  .footer-v2 { padding: 3rem 1.5rem 1.5rem; }
  .footer-v2-grid { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; }
  .footer-v2-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
}

@media (max-width: 600px) {
  .hero-headline { font-size: clamp(2.5rem, 10vw, 4rem); }
  .discovery-steps { flex-direction: column; align-items: center; }
  .dstep-dash { display: none; }
}

/* ============================================
   Task 3, Fill empty space in sections
   Each section's primary content container is set to fill the
   available vertical space inside its 100vh section. For grid
   containers, items are stretched (align-items: stretch) so columns
   reach top-to-bottom; for flex columns, justify-content centers the
   content but the container itself fills.
============================================ */
.services-cols {
  min-height: 100vh;          /* services-section has padding:0 → cols fill viewport */
}
.projects-grid {
  min-height: calc(100vh - var(--nav-h) - 4rem);
  align-items: stretch;       /* stretch stats + copy to grid row height */
}
.projects-stats.projects-copy {
  justify-content: center;
}
.begin-inner {
  min-height: calc(100vh - var(--nav-h) - 4rem);
  justify-content: space-between;  /* spread head, lede, cards across the column */
}
.cta-inner {
  min-height: calc(100vh - var(--nav-h) - 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ============================================
   Misc additions, Tasks 4, 5, 6, 7, 9, 10
============================================ */

/* ── Task 4: ADU Guide CTA bullets (4 quick lures into the guide) ── */
.adu-guide-cta .cta-inner { gap: 1.5rem; }
.adu-guide-bullets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2.5rem;
  max-width: 760px;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.adu-guide-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  text-align: left;
}
.adu-guide-bullets svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 2px;
}
.adu-guide-bullets strong {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--cream);
  margin-bottom: 0.2rem;
}
.adu-guide-bullets span {
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  color: var(--text-light);
  opacity: 0.6;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .adu-guide-bullets { grid-template-columns: 1fr; }
}

/* ── Task 5: per-service quick "what's included" bullets +
   right padding so the rightmost column clears the dot rail ── */
.service-bullets {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.service-bullets li {
  position: relative;
  padding-left: 1rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--text-light);
  opacity: 0.7;
  line-height: 1.5;
}
.service-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 1px;
  background: var(--gold);
}
.services-cols { padding-right: 4rem; }   /* keep last column clear of the right-side dot rail */

/* ── Task 6: projects style tags ── */
.projects-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  margin: 0.5rem 0 1.5rem;
}
.ptag {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  opacity: 0.7;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  transition: color 0.25s, border-color 0.25s, background 0.25s, opacity 0.25s;
}
.ptag:hover {
  color: var(--gold);
  border-color: rgba(240,168,0,0.5);
  background: rgba(240,168,0,0.05);
  opacity: 1;
}

/* ── Task 7: Begin cards a touch bigger, content sits higher ── */
.begin-card {
  padding: 3rem 1.8rem 2rem !important;   /* top tighter than before → content rides higher */
  min-height: 30rem !important;
}
.begin-card .begin-icon { margin-top: 0; }

/* ── Task 9: discovery feasibility step + tighter CTA spacing ── */
.dstep-card--feature {
  border-color: rgba(240,168,0,0.45);
  background: rgba(240,168,0,0.04);
}
.dstep-pricing {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.25rem 0 0.5rem;
  padding: 0.85rem 0.95rem;
  background: rgba(240,168,0,0.08);
  border-left: 2px solid var(--gold);
  border-radius: 2px;
}
.dstep-price {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gold);
  line-height: 1;
}
.dstep-price-note {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  color: var(--text-light);
  opacity: 0.75;
  line-height: 1.45;
}
.discovery-cta { margin-top: -0.5rem !important; }
.discovery-inner { gap: 1.5rem !important; }

/* ── Task 10: footer slimmed to a single skinny row ── */
.footer-v2 {
  padding: 1.75rem 3rem 0;
  border-top: 1px solid var(--border-dark);
}
.footer-v2-grid { display: none; }     /* legacy grid is unused now */
.footer-v2-main {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.footer-v2-main .footer-v2-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.footer-v2-main .footer-v2-mark {
  width: 38px;
  height: auto;
  filter: none;   /* white.png is already the white outline + gold slash mark */
}
.footer-v2-main .footer-v2-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.55rem;
  color: var(--cream);
  letter-spacing: 0.01em;
}
.footer-v2-main .footer-v2-mission {
  margin: 0 0 0 auto;     /* pushes mission text + socials to the right */
  max-width: 460px;
  text-align: right;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-light);
  opacity: 0.6;
}
.footer-v2-main .footer-v2-social {
  display: flex;
  flex-direction: column;   /* stacked vertically per spec */
  gap: 0.4rem;
  margin: 0;
}
.footer-v2-main .footer-v2-social a {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  opacity: 0.6;
  transition: opacity 0.25s, color 0.25s, border-color 0.25s;
}
.footer-v2-main .footer-v2-social a:hover {
  opacity: 1;
  color: var(--gold);
  border-color: var(--gold);
}
.footer-v2-main .footer-v2-social svg { width: 14px; height: 14px; }
.footer-v2-bottom {
  margin-top: 1.25rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-light);
  opacity: 0.45;
}
@media (max-width: 760px) {
  .footer-v2-main { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-v2-main .footer-v2-mission { margin: 0; text-align: left; max-width: none; }
  .footer-v2-main .footer-v2-social { flex-direction: row; }
}

/* ════════════════════════════════════════
   SECTION-BLEED DEFENSE
   The cta-banner / adu-guide-cta sits between the ADU horizontal wrap
   and the Services section. Both boundaries get explicit z-index +
   solid background so no element from the next section can paint
   through during the snap transition.
══════════════════════════════════════ */
.cta-banner,
.adu-guide-cta {
  position: relative;
  z-index: 2;
  background: #000;
}
.cta-banner + .services-section,
.adu-guide-cta + .services-section,
.services-section {
  position: relative;
  z-index: 1;
  background: #000;
}