/* ========================================================
   Laura Spaulding Psychotherapy
   Palette: deep forest, warm parchment, terracotta, dusty gold
   Type: Cormorant Garamond (display) + DM Sans (body)
   Design: high-end editorial, each section visually distinct
   ======================================================== */

:root {
  --forest:       #2e4a2a;
  --forest-mid:   #3d6138;
  --forest-light: #5a7e53;
  --forest-pale:  #e8ede5;
  --forest-deep:  #1a2e17;
  --parchment:    #f7f2ea;
  --parchment-dk: #ece5d7;
  --parchment-xdk:#d9cebc;
  --terra:        #b8654a;
  --terra-lt:     #cc8060;
  --terra-pale:   #f2e6df;
  --gold:         #9e7e30;
  --gold-lt:      #c5a84a;
  --ink:          #1a1a18;
  --ink-mid:      #484842;
  --ink-muted:    #8a8878;
  --white:        #ffffff;
  --glow-forest:  0 0 18px rgba(46,74,42,0.28), 0 0 36px rgba(46,74,42,0.12);
  --glow-terra:   0 0 18px rgba(184,101,74,0.32), 0 0 36px rgba(184,101,74,0.14);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--parchment);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---- Skip-to-main link (keyboard / screen reader) ---- */
/* ---- Visually hidden (screen-reader-only) utility ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  background: var(--forest-deep);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  border: 2px solid var(--terra);
  letter-spacing: 0.04em;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--terra);
  outline-offset: 0;
}

/* ---- Reading progress bar ---- */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 2000;
  background: transparent;
  pointer-events: none;
}
.reading-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--terra);
  transition: width 0.08s linear;
  box-shadow: 0 0 8px rgba(184,101,74,0.5);
}

/* ---- Type system ---- */
h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  line-height: 1.05;
}
h2 em, h1 em {
  font-style: italic;
  color: var(--terra);
}
.section-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.28s ease;
  border-radius: 2px;
  min-height: 48px;
  padding: 14px 36px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn--primary {
  background: var(--forest);
  color: var(--white);
  box-shadow: var(--glow-forest);
  animation: cta-breathe 3.5s ease-in-out infinite;
}
.btn--primary:hover {
  background: var(--forest-mid);
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(46,74,42,0.4), 0 0 54px rgba(46,74,42,0.18);
}
.btn--full { width: 100%; }

@keyframes cta-breathe {
  0%, 100% { box-shadow: var(--glow-forest); }
  50% { box-shadow: 0 0 26px rgba(46,74,42,0.42), 0 0 52px rgba(46,74,42,0.2); }
}

/* ---- Scroll reveals — multiple entry directions ---- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.06s; }
.reveal[data-delay="2"] { transition-delay: 0.12s; }
.reveal[data-delay="3"] { transition-delay: 0.18s; }

.reveal-left {
  opacity: 0;
  transform: translateX(-140px);
  transition: opacity 1.1s cubic-bezier(0.22,1,0.36,1), transform 1.1s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(140px);
  transition: opacity 1.1s cubic-bezier(0.22,1,0.36,1), transform 1.1s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* ===================================================
   NAV
   =================================================== */
.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  padding: 22px 0;
  transition: background 0.35s, box-shadow 0.35s, padding 0.35s;
}
.nav.is-scrolled {
  background: rgba(247,242,234,0.97);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 1px 0 rgba(46,74,42,0.08), 0 6px 24px rgba(26,46,23,0.06);
  padding: 14px 0;
}
.nav { transition: background 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                   box-shadow 0.5s ease,
                   padding 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                   backdrop-filter 0.5s ease; }
.nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.05em;
  color: var(--white);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.7),
    0 2px 14px rgba(0,0,0,0.55);
  transition: color 0.3s, text-shadow 0.3s;
}
.nav.is-scrolled .nav__brand {
  color: var(--forest);
  text-shadow: none;
}
.nav__brand-first { margin-right: 6px; }
.nav__brand-llc {
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 1;
  margin-left: 2px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}
.nav__links a {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: color 0.3s ease, letter-spacing 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}
/* Animated underline draws from left on hover and stays under the active section */
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s;
  opacity: 0.9;
}
.nav__links a:hover { color: var(--white); letter-spacing: 0.11em; }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: left center; }
.nav.is-scrolled .nav__links a { color: var(--ink-mid); text-shadow: none; }
.nav.is-scrolled .nav__links a:hover { color: var(--forest); }
.nav.is-scrolled .nav__links a.is-active { color: var(--forest); }
.nav__cta {
  position: relative;
  background: rgba(255,255,255,0.12) !important;
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: 2px;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.3) !important;
  backdrop-filter: blur(6px);
  transition: background 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.35s,
              transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.35s !important;
  text-shadow: none !important;
  overflow: hidden;
}
/* Arrow slides in from the left on hover, label lifts subtly. The arrow lives
   in a pseudo-element so the markup doesn't change. */
.nav__cta::after {
  content: '\2192';                   /* → */
  display: inline-block;
  width: 0;
  margin-left: 0;
  opacity: 0;
  transform: translateX(-8px);
  transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              margin-left 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.3s ease 0.05s,
              transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  font-size: 14px;
  font-weight: 500;
}
.nav__cta:hover {
  background: rgba(255,255,255,0.24) !important;
  border-color: rgba(255,255,255,0.6) !important;
  transform: translateY(-1px);
}
.nav__cta:hover::after {
  width: 14px;
  margin-left: 8px;
  opacity: 1;
  transform: translateX(0);
}
.nav.is-scrolled .nav__cta {
  background: var(--forest) !important;
  color: var(--white) !important;
  border-color: transparent !important;
  box-shadow: var(--glow-forest);
}
.nav.is-scrolled .nav__cta:hover {
  background: var(--forest-mid) !important;
  box-shadow: 0 6px 28px rgba(46,74,42,0.5);
}
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav__toggle span {
  width: 22px;
  height: 1.5px;
  background: var(--white);
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.25s ease,
              background 0.3s;
  transform-origin: center;
}
.nav.is-scrolled .nav__toggle span { background: var(--ink); }
/* Hamburger morphs to an X when the mobile nav is open */
.nav__toggle.is-open span:nth-child(1) {
  transform: translateY(4.25px) rotate(45deg);
}
.nav__toggle.is-open span:nth-child(2) {
  transform: translateY(-4.25px) rotate(-45deg);
}

/* ===================================================
   HERO — parallax photo, word-by-word entrance
   =================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  background: var(--forest-deep);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }

.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__bg-img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 65% 55%;
  transform-origin: center;
  will-change: transform;
}
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  /* Bright photo. Minimal global tint — text legibility comes from the
     stacked text-shadow halos on each text element, not from darkening
     the photo itself. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.10) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
}
.hero__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 160px;
  opacity: 0.32;
  mix-blend-mode: overlay;
}

/* Botanical illustration */
.hero__botanical {
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-48%);
  width: clamp(120px, 16vw, 240px);
  color: rgba(255,255,255,0.09);
  pointer-events: none;
}
.hero__botanical svg {
  animation: botanical-sway 9s ease-in-out infinite alternate;
  transform-origin: center bottom;
  display: block;
}
@keyframes botanical-sway {
  from { transform: rotate(-1deg); }
  to   { transform: rotate(1.5deg); }
}

/* Hero content */
.hero__content {
  position: relative;
  z-index: 2;
  padding: clamp(96px, 14vh, 160px) 40px 48px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  align-self: center;
}

.hero__location {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
  animation: hero-fade-up 1s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
.hero__accepting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--forest-deep);
  background: rgba(247, 242, 234, 0.92);
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  margin-top: 22px;
  margin-bottom: 0;
  animation: hero-fade-up 1s cubic-bezier(0.22,1,0.36,1) 0.7s both;
}
.hero__accepting-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5ec45e;
  box-shadow: 0 0 0 2px rgba(94,196,94,0.25);
  animation: dot-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(94,196,94,0.25); }
  50% { box-shadow: 0 0 0 4px rgba(94,196,94,0.15), 0 0 8px rgba(94,196,94,0.3); }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Word-by-word headline */
.hero__headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(3.8rem, 8.5vw, 7.5rem);
  line-height: 0.95;
  color: var(--white);
  /* Stacked halo — 4 layers from tight outline to deep glow. Lets the
     photo stay bright while the headline carries its own contrast. */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.7),
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 4px 18px rgba(0, 0, 0, 0.5),
    0 2px 32px rgba(0, 0, 0, 0.35);
  max-width: 760px;
  margin-bottom: 36px;
  letter-spacing: -0.02em;
}
.hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) skewY(3deg);
  animation: word-in 0.7s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: calc(0.5s + var(--wi) * 0.09s);
}
.hero__word--italic {
  font-style: italic;
  /* Light sage-green that pops against the photo + warmly glows */
  color: #b8e0a8;
  font-weight: 500;
  padding-left: 1.8rem;
  /* Stacked halo — dark outline for legibility + multi-layer green
     glow for the "glowing" effect customer asked for. */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 14px rgba(184, 224, 168, 0.85),
    0 0 28px rgba(184, 224, 168, 0.6),
    0 0 56px rgba(184, 224, 168, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.6);
}
@keyframes word-in {
  to { opacity: 1; transform: translateY(0) skewY(0deg); }
}

.hero__sub {
  font-size: 16px;
  color: rgba(255,255,255,1);
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.85),
    0 1px 3px rgba(0, 0, 0, 0.7),
    0 2px 12px rgba(0, 0, 0, 0.55);
  max-width: 400px;
  margin-bottom: 28px;
  line-height: 1.55;
  font-weight: 500;
  animation: hero-fade-up 1s cubic-bezier(0.22,1,0.36,1) 1.05s both;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  animation: hero-fade-up 1s cubic-bezier(0.22,1,0.36,1) 1.2s both;
}
/* Stats bar */
.hero__stats {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 22px 40px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  animation: hero-fade-up 1s cubic-bezier(0.22,1,0.36,1) 1.35s both;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hero__stat {
  display: flex;
  flex-direction: column;
  padding: 0 32px;
}
.hero__stat:first-child { padding-left: 0; }
.hero__stat-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--gold-lt);
  font-weight: 400;
  line-height: 1;
}
.hero__stat-n sup { font-size: 12px; vertical-align: super; }
.hero__stat-l {
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}
.hero__stat-div {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.hero__scroll-cue {
  position: absolute;
  bottom: 108px;
  right: 40px;
  z-index: 2;
}
.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.45), transparent);
  animation: scroll-hint 2.5s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%, 100% { opacity: 0.2; transform: scaleY(1) translateY(0); transform-origin: top; }
  50% { opacity: 0.7; transform: scaleY(1.3) translateY(0); transform-origin: top; }
}

/* ===================================================
   APPROACH — dark forest, editorial giant ghost numbers
   =================================================== */
.approach {
  background: var(--forest-pale);
  /* Tighter top padding now that bio sits directly above with no gradient
     transition — 100px above "My Philosophy" felt like dead space. */
  padding: 56px 40px 100px;
  position: relative;
  overflow: hidden;
}

.approach__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.approach__eyebrow { color: var(--gold); margin-bottom: 24px; }

.approach__header {
  text-align: center;
}

.approach__headline {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  max-width: 640px;
  margin-bottom: 88px;
  margin-left: auto;
  margin-right: auto;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
.approach__headline em {
  color: var(--terra);
  font-style: italic;
}

/* Pillars with huge ghost number behind */
.approach__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.approach__pillar {
  padding: 52px 48px 52px 28px;
  border-right: 1px solid rgba(0,0,0,0.06);
  border-left: 3px solid transparent;
  position: relative;
  overflow: hidden;
  transition: background 0.3s, border-left-color 0.3s;
}
.approach__pillar:first-child { border-left-color: var(--terra); }
.approach__pillar:nth-child(2) { border-left-color: var(--gold); }
.approach__pillar:nth-child(3) { border-left-color: var(--forest-light); }
.approach__pillar:hover { background: rgba(0,0,0,0.02); }
.approach__pillar:last-child { border-right: none; }
.approach__pillar:not(:first-child) { padding-left: 28px; }

/* Giant ghost number: absolutely placed behind content */
.approach__pillar-bg-num {
  position: absolute;
  bottom: -16px;
  right: -8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(7rem, 14vw, 13rem);
  font-weight: 600;
  color: rgba(0,0,0,0.04);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  transition: color 0.4s;
}
.approach__pillar:hover .approach__pillar-bg-num { color: rgba(197,168,74,0.06); }

.approach__pillar-content { position: relative; z-index: 1; }

.approach__pillar-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: block;
}

.approach__pillar h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 400;
  margin-bottom: 18px;
  color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.approach__pillar p {
  font-size: 14px;
  color: var(--ink-mid);
  line-height: 1.85;
  font-weight: 300;
}

/* Pull quote — centered so it doesn't leave the left half empty */
.approach__quote-wrap {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 52px;
  margin: 56px auto 0;
  max-width: 720px;
  padding-left: 32px;
  border-left: 2px solid var(--terra);
  text-align: left;
}
.approach__quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.55;
}
.approach__quote cite {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold-lt);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 20px;
}

/* ===================================================
   SERVICES — alternating full-width split rows
   =================================================== */
.services {
  background: var(--parchment);
  overflow: hidden;
}

.services__intro {
  padding: 88px 40px 64px;
  max-width: 1280px;
  margin: 0 auto;
  border-bottom: 1px solid var(--parchment-xdk);
  text-align: center;
}
.services__headline {
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-top: 18px;
  line-height: 1.05;
  text-align: center;
}
.services__headline em { color: var(--terra); font-style: italic; }

/* Each service: a full-width alternating row */
.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
.svc-row--img-right { direction: rtl; }
.svc-row--img-right > * { direction: ltr; }

.svc-row__photo {
  overflow: hidden;
  position: relative;
}
.svc-row__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1);
  filter: sepia(6%) brightness(0.97) contrast(1.03);
}
.svc-row:hover .svc-row__photo img {
  transform: scale(1.04);
}

.svc-row__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 72px;
  background: var(--parchment);
  border-bottom: 1px solid var(--parchment-xdk);
}
.svc-row--img-right .svc-row__body { background: var(--forest-pale); }

.svc-row__num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--parchment-xdk);
  display: block;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.svc-row--img-right .svc-row__num {
  color: rgba(0,0,0,0.07);
}
.svc-row__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 20px;
}
/* COMING 2027 — small + lightly animated. Sized like the other
   service titles instead of the giant Bebas Neue launch type, with
   a subtle pulsing live-dot before the label to indicate movement
   without shouting. Per Laura: "animated and smaller, but not that
   dramatic." */
.svc-row__title--coming {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  color: var(--terra);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.15;
  margin-bottom: 10px;
  padding-bottom: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.svc-row__title--coming::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 0 0 0 rgba(207, 139, 103, 0.6);
  animation: coming-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes coming-dot-pulse {
  0%, 100% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(207, 139, 103, 0.5);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(207, 139, 103, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-row__title--coming::before { animation: none; }
}
.svc-row__subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--ink);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.svc-row__desc {
  font-size: 15px;
  color: var(--ink-mid);
  line-height: 1.85;
  font-weight: 300;
  max-width: 400px;
  margin-bottom: 28px;
}
.svc-row__tag {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--parchment-xdk);
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: 24px;
  width: fit-content;
}
.svc-row__cta {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--forest);
  text-decoration: none;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--forest-pale);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
}
.svc-row__cta:hover { color: var(--terra); border-color: var(--terra); }

/* ===================================================
   SPECIALTIES — dark ink bg, lit type constellation
   =================================================== */
.specialties {
  padding: 100px 40px 16px;     /* tight bottom — gradient bleed below provides visible transition */
  background: var(--forest);
  position: relative;
  overflow: hidden;
}
/* Subtle grain */
.specialties::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}

.specialties__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.specialties__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  margin-bottom: 80px;
}
.specialties__header .section-eyebrow { color: var(--gold-lt); }

.specialties__headline {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 400;
  margin-top: 16px;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-align: center;
}
.specialties__headline em { color: var(--terra-lt); font-style: italic; }

.specialties__subhead {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
  font-weight: 300;
  padding-top: 0;
  max-width: 560px;
  text-align: center;
}

/* Type constellation rows */
.specialties__field {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}
.spec-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 20px 0;
  width: 100%;
}
.spec-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.06); }

.spec {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  color: rgba(255,255,255,0.35);
  cursor: default;
  transition: color 0.35s ease, opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1), text-shadow 0.35s ease;
  opacity: 0;
  line-height: 1;
  padding: 4px 0;
}
.spec-row:nth-child(odd) .spec,
.spec-row:nth-child(odd) .spec-sep { transform: translateX(-40px); }
.spec-row:nth-child(even) .spec,
.spec-row:nth-child(even) .spec-sep { transform: translateX(40px); }
.spec.is-visible {
  opacity: 1;
  transform: translateX(0) !important;
}
/* Large words: scale up + glow pulse, with rest pause */
.spec--lg.is-breathing {
  animation: breathe-lg var(--bd, 5s) ease-in-out infinite;
  animation-delay: var(--bdelay, 0s);
}
@keyframes breathe-lg {
  0%, 65%, 100% { scale: 1; text-shadow: 0 0 0px rgba(255,255,255,0); }
  30% { scale: 1.12; text-shadow: 0 0 24px rgba(255,255,255,0.15); }
}

/* Medium words: fade brighter/dimmer, subtle scale */
.spec--md.is-breathing {
  animation: breathe-md var(--bd, 4s) ease-in-out infinite;
  animation-delay: var(--bdelay, 0s);
}
@keyframes breathe-md {
  0%, 70%, 100% { scale: 1; }
  35% { scale: 1.06; }
}

/* Small words: gentle vertical drift */
.spec--sm.is-breathing {
  animation: breathe-sm var(--bd, 3.5s) ease-in-out infinite;
  animation-delay: var(--bdelay, 0s);
}
@keyframes breathe-sm {
  0%, 60%, 100% { translate: 0 0; }
  30% { translate: 0 -3px; }
}

.spec:hover {
  color: var(--white);
  text-shadow: 0 0 20px rgba(255,255,255,0.2);
  animation-play-state: paused;
}
.spec--lg {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.01em;
  margin-right: 44px;
}
.spec--lg:hover { color: var(--white); text-shadow: 0 0 30px rgba(255,255,255,0.15); }
.spec--md {
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  color: rgba(255,255,255,0.85);
  margin-right: 30px;
  font-style: italic;
}
.spec--sm {
  font-size: clamp(0.95rem, 1.8vw, 1.3rem);
  color: rgba(255,255,255,0.75);
  margin-right: 20px;
  letter-spacing: 0.02em;
}
.spec--sm:hover { color: var(--white); }
.spec-sep {
  color: rgba(255,255,255,0.35);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 300;
  margin-right: 20px;
  align-self: center;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.spec-sep.is-visible { opacity: 1; transform: translateX(0) !important; }

.specialties__exit-note {
  margin-top: 60px;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
  text-align: center;
}
.specialties__exit-link {
  color: var(--terra-lt);
  text-decoration: none;
  border-bottom: 1px solid rgba(204,128,96,0.35);
  transition: color 0.2s, border-color 0.2s;
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 44px;
  line-height: 36px;
}
.specialties__exit-link:hover { color: var(--white); border-color: rgba(255,255,255,0.45); }

/* ===================================================
   ABOUT — dramatic split: full-height photo + bio, then FAQ band
   =================================================== */
.about { background: var(--parchment); overflow: hidden; }

/* Reflection section — wraps the Carl Rogers quote bridge + FAQ band
   (added when the bio was hoisted above the fold; previously these sat
   inside the .about wrapper). No own background — both children paint
   their own parchment / forest-deep. */
.reflection { overflow: hidden; }

/* Two-column: photo takes full column height */
.about__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1280px;
  margin: 0 auto;
  gap: 0 80px;
  padding: 0 40px;
  align-items: start;
}
.about__photo-col { padding-top: 0; }
.about__photo-wrap {
  position: sticky;
  top: 88px;
  margin-top: -1px;
}
.about__photo-wrap::before {
  /* Gold frame accent */
  content: '';
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid var(--gold);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.about__photo-img {
  width: 100%;
  height: 640px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: sepia(8%) brightness(0.96) contrast(1.02);
  position: relative;
  z-index: 1;
}
.about__photo-caption {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 14px;
  font-weight: 400;
}

.about__bio-col {
  padding: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.about__headline {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 400;
  margin-bottom: 32px;
  margin-top: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.about__headline em {
  color: var(--terra);
}

/* PULL-QUOTE CALLOUT — editorial blockquote with terra accent + glow */
.about__pullquote {
  position: relative;
  margin: 32px 0 32px;
  padding: 28px 32px 28px 56px;
  border-left: 3px solid var(--terra);
  background: linear-gradient(
    90deg,
    rgba(207, 139, 103, 0.08) 0%,
    rgba(207, 139, 103, 0.03) 60%,
    transparent 100%
  );
  border-radius: 0 6px 6px 0;
  box-shadow: 0 1px 3px rgba(207, 139, 103, 0.06),
              0 8px 24px rgba(207, 139, 103, 0.10);
}
.about__pullquote-mark {
  position: absolute;
  top: 4px;
  left: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 4rem;
  font-weight: 600;
  color: var(--terra);
  opacity: 0.55;
  line-height: 1;
  pointer-events: none;
}
.about__pullquote-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.about__pullquote-text em {
  color: var(--terra);
  font-style: italic;
}

/* TAG CHIPS — staggered entrance + hover lift */
.about__tags.is-visible li {
  animation: tag-chip-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.about__tags.is-visible li:nth-child(1) { animation-delay: 0.05s; }
.about__tags.is-visible li:nth-child(2) { animation-delay: 0.13s; }
.about__tags.is-visible li:nth-child(3) { animation-delay: 0.21s; }
.about__tags.is-visible li:nth-child(4) { animation-delay: 0.29s; }
.about__tags.is-visible li:nth-child(5) { animation-delay: 0.37s; }
.about__tags li {
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
  cursor: default;
}
.about__tags li:hover {
  background: var(--forest);
  color: var(--parchment);
  border-color: var(--forest);
  transform: translateY(-2px);
}
@keyframes tag-chip-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* PHOTO — warmth halo + subtle hover zoom */
.about__photo-wrap {
  position: sticky;
  top: 88px;
  margin-top: -1px;
}
.about__photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 50% at 50% 60%,
    rgba(207, 139, 103, 0.18) 0%,
    transparent 70%
  );
  z-index: 2;
  mix-blend-mode: soft-light;
}
.about__photo-img {
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.about__photo-wrap:hover .about__photo-img {
  transform: scale(1.025);
  filter: sepia(8%) brightness(1.0) contrast(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .about__photo-img {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}
.about__bio-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.about__bio-cred {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.about__bio-subcred {
  font-size: 0.875em;
  opacity: 0.8;
}
.about__body {
  font-size: 15px;
  color: var(--ink-mid);
  line-height: 1.9;
  margin-bottom: 20px;
  font-weight: 300;
}
.about__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.about__tags li {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
  border: 1px solid var(--forest-pale);
  padding: 6px 14px;
  border-radius: 2px;
}

/* FAQ accordion band */
.about__faq-band {
  background: var(--forest-deep);
  padding: 152px 40px 72px;
}
.about__faq-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.about__faq-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terra-lt);
  margin-bottom: 18px;
}
.about__faq-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--white);
  margin-bottom: 56px;
  max-width: 14ch;
}
.about__faq-headline em {
  font-style: italic;
  color: var(--terra-lt);
}
.about__faq {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.about__faq-item { border-top: 1px solid rgba(255,255,255,0.08); }
.about__faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }

.about__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 0;
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.01em;
  user-select: none;
  gap: 20px;
  min-height: 44px;
  transition: color 0.2s;
  /* reset <button> default styles */
  background: none;
  border: none;
  text-align: left;
}
.about__faq-q:hover { color: var(--gold-lt); }
.about__faq-q span:first-child { flex: 1; }

.about__faq-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  transition: border-color 0.3s, background 0.3s;
}
.about__faq-icon::before,
.about__faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255,255,255,0.7);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}
.about__faq-icon::before {
  width: 8px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.about__faq-icon::after {
  width: 1px;
  height: 8px;
  transform: translate(-50%, -50%);
}
[aria-expanded="true"] .about__faq-icon {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.4);
}
[aria-expanded="true"] .about__faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.about__faq-a {
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  line-height: 1.85;
  font-weight: 300;
  margin-left: 0;
  max-width: 640px;
  display: block;
  /* Smooth expand/collapse: animate max-height + opacity + translateY for a
     deliberate editorial reveal rather than an instant snap. */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  transform: translateY(-6px);
  transition:
    max-height 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.4s ease 0.08s,
    padding 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s;
}
.about__faq-a.is-open {
  max-height: 800px;
  opacity: 1;
  padding: 0 0 32px;
  transform: translateY(0);
}

/* FAQ answer text wrapper — used when a dd has both prose + structured fees */
.about__faq-text {
  margin: 0 0 14px;
}
.about__faq-fees {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.about__faq-fees-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--gold-lt);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.about__faq-fees-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.about__faq-fees-list li {
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
}
.about__faq-fees-list li strong {
  font-weight: 500;
  color: rgba(255,255,255,0.95);
}
.about__faq-fees-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .about__faq-a {
    transition: none;
    transform: none;
  }
}

/* ===================================================
   CTA — bright parchment ground with terra warmth.
   Inverted from the original dark-mode treatment per
   customer feedback: "needs to be brighter and vibrant."
   =================================================== */
.cta-section {
  position: relative;
  background: var(--parchment);
  /* Padding-top sized to fully absorb the 200px gb-quote-cta gradient bleed
     above. The photo backdrop sits below this padding, so the gradient
     never touches the photo or the text. */
  padding: 240px 40px 16px; /* tightened bottom further: gap to Contact almost closed */
  overflow: hidden;
}
/* Customer's sun-rays-clouds photo as a real atmospheric backdrop — but
   integrated so it doesn't fight the gradient or the terra CTA:
   1. Photo only occupies the BOTTOM portion of the section (clip-path)
      so the green gradient bleed terminates in clean parchment above
      the photo's start, no overlap, no clash.
   2. Sepia + lower saturation tints the sky toward the parchment palette
      so it reads as a continuation of the warm cream ground rather than
      a separate cool element.
   3. Top of the photo fades to transparent (mask-image) so the parchment
      blends into the photo gradually — the headline area sits in a
      photo-soft zone, not on a hard photo edge. */
.cta-section::before {
  content: '';
  position: absolute;
  /* Inset top matches the gradient absorption padding — photo starts
     BELOW the gradient bleed zone. */
  inset: 200px 0 0 0;
  background-image: url('assets/photos/sunrays-clouds.jpg');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.55;
  filter: sepia(0.32) saturate(0.85) hue-rotate(-8deg);
  /* Mask fades the photo IN at the top (emerges from parchment) and
     OUT at the bottom (dissolves into the next section's parchment-dk),
     so the section blends both ways instead of hitting a hard photo
     edge on either end. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.35) 14%,
    rgba(0,0,0,0.85) 30%,
    #000 48%,
    #000 70%,
    rgba(0,0,0,0.55) 86%,
    rgba(0,0,0,0.15) 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.35) 14%,
    rgba(0,0,0,0.85) 30%,
    #000 48%,
    #000 70%,
    rgba(0,0,0,0.55) 86%,
    rgba(0,0,0,0.15) 96%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}
.cta-section__inner {
  position: relative;
  z-index: 4;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 48px;
}
.cta-section__pre {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 24px;
  text-align: center;
}
.cta-section__headline {
  font-size: clamp(3.2rem, 7vw, 6.5rem);
  color: var(--forest-deep);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-align: center;
}
.cta-section__headline em {
  font-style: italic;
  color: var(--terra);
}
.cta-section__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.cta-section__body {
  font-size: 16px;
  color: var(--ink-mid);
  line-height: 1.8;
  font-weight: 400;
  text-align: center;
  max-width: 540px;
}
.cta-section .btn--primary {
  background: var(--terra);
  color: var(--white);
  box-shadow: 0 4px 30px rgba(184, 101, 74, 0.28);
  animation: cta-breathe-terra 3.5s ease-in-out infinite;
}
.cta-section .btn--primary:hover {
  background: var(--terra-lt);
  transform: translateY(-2px);
}
@keyframes cta-breathe-terra {
  0%, 100% { box-shadow: 0 4px 30px rgba(184, 101, 74, 0.28); }
  50%      { box-shadow: 0 6px 44px rgba(184, 101, 74, 0.42); }
}
.cta-section__phone-alt {
  font-size: 14px;
  color: var(--ink-mid);
  font-weight: 400;
  margin-top: -8px;
}
.cta-section__phone-link {
  color: var(--forest-deep);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1.5px solid var(--terra);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cta-section__phone-link:hover { color: var(--terra); border-color: var(--terra-lt); }

/* ===================================================
   CONTACT — dark bg, cream floating card with gold border
   =================================================== */
.contact {
  background: var(--parchment-dk);   /* slightly darker cream for visual separation from CTA */
  padding: 0;
  overflow: hidden;
}
.contact__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0 80px;
  align-items: start;
  padding: 20px 40px 96px; /* tightened top further: gap to CTA almost closed */
}

/* Contact info side — bright variant on parchment-dk */
.contact__eyebrow { color: var(--terra); font-weight: 600; }
.contact__headline {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  margin-bottom: 52px;
  font-weight: 400;
  margin-top: 18px;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--forest-deep);
}
.contact__headline em { color: var(--terra); font-style: italic; }
.contact__details {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 40px;
}
.contact__detail-item { display: flex; flex-direction: column; gap: 4px; }
.contact__detail-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
}
.contact__detail-val {
  font-size: 15px;
  color: var(--ink-mid);
  line-height: 1.65;
  font-weight: 400;
}
.contact__link {
  color: var(--forest-deep);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1.5px solid var(--terra);
  transition: color 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.contact__link:hover { color: var(--terra); border-color: var(--terra-lt); }
/* Form: floating cream card, gold border */
.contact__form-card {
  background: var(--parchment);
  border: 1px solid var(--parchment-dk);
  border-top: 3px solid var(--gold);
  padding: 52px 48px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  position: relative;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.form-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.form-group__visual-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.form-optional {
  font-weight: 400;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--parchment-xdk);
  border-radius: 2px;
  background: var(--white);
  font-family: 'DM Sans', sans-serif;
  /* 16px is the iOS Safari/Chrome zoom threshold — anything smaller triggers
     auto-zoom-in on focus and doesn't zoom back out. */
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 44px;
  appearance: none;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(46,74,42,0.08);
}
.form-group textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* Inline form validation states */
.form-group input.is-invalid,
.form-group textarea.is-invalid {
  border-color: #b84a3a;
  box-shadow: 0 0 0 3px rgba(184,74,58,0.1);
}
.form-error {
  font-size: 12px;
  color: #b84a3a;
  font-weight: 400;
  margin-top: 4px;
  display: none;
}
.form-error.is-visible { display: block; }

.form-private-note {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 4px;
}

/* Service picker cards */
.service-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-card {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mid);
  background: var(--parchment-dk);
  border: 1px solid var(--parchment-xdk);
  border-radius: 2px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  letter-spacing: 0.04em;
}
.service-card:hover { border-color: var(--forest); color: var(--forest); }
.service-card.is-selected {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
}
.contact__form-note {
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
  font-weight: 300;
}
.contact__privacy-note {
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
  font-style: italic;
}
.contact__success {
  display: none;
  text-align: center;
  padding: 48px 24px;
  color: var(--forest);
}
.contact__success svg { margin-bottom: 20px; color: var(--forest); }
.contact__success h3 {
  font-size: 1.8rem;
  margin-bottom: 12px;
  color: var(--ink);
}
.contact__success p { font-size: 14px; color: var(--ink-muted); }

.contact__address {
  font-style: normal;
}

/* Office location — full-width band below the contact grid.
   Stack: heading + address, then the embedded map (prominent),
   then the Get Directions button. */
.contact__location {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 40px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}
.contact__location-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.contact__location-eyebrow { color: var(--terra); font-weight: 600; }
.contact__location-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 2.8vw, 2.8rem);
  line-height: 1.05;
  color: var(--forest-deep);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.contact__location-address {
  font-style: normal;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-mid);
}
.contact__map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 520px;
  border: 1px solid var(--parchment-xdk);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}
.contact__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.contact__directions {
  gap: 10px;
  background: var(--forest-deep);
  color: var(--white);
  border: 1px solid var(--forest-deep);
}
.contact__directions:hover {
  background: var(--forest);
  border-color: var(--forest);
}
.contact__directions:hover .contact__directions-icon {
  transform: translateX(2px) translateY(-2px);
}
.contact__directions-icon {
  transition: transform 0.28s ease;
}

@media (max-width: 760px) {
  .contact__location {
    padding: 0 20px 64px;
    gap: 24px;
  }
  .contact__map { aspect-ratio: 4 / 5; max-height: 460px; }
}

/* ===================================================
   FOOTER
   =================================================== */
.site-footer {
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 48px 40px 32px;
}
.site-footer__inner { max-width: 1280px; margin: 0 auto; }
.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-footer__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.site-footer__tagline {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
  font-weight: 300;
}
.site-footer__nav {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer__nav a {
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
  /* 44×44 tap target per Apple HIG — short words like "About" need
     horizontal padding to hit the 44px minimum width, not just height. */
  min-height: 44px;
  min-width: 44px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-footer__nav a:hover { color: var(--white); }
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
}
.site-footer__bottom a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}
.site-footer__bottom a:hover { color: var(--white); }
/* Legal disclosures: kept smaller than nav per Laura's "small and non
   obvious" brief, but pulled out of the near-invisible 0.32 opacity so
   they actually read at idle. Underline preserved so they still register
   as links without needing hover. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.site-footer__legal a {
  font-size: 11px;
  color: rgba(255,255,255,0.62);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.4);
  text-underline-offset: 3px;
  letter-spacing: 0.02em;
  min-height: 44px;
  padding: 0 2px;
}
.site-footer__legal a:hover {
  color: var(--white);
  text-decoration-color: rgba(255,255,255,0.75);
}

/* ===================================================
   MOBILE — 375px
   =================================================== */
@media (max-width: 900px) {
  /* Nav */
  .nav__inner { padding: 0 20px; }
  .nav__links {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    background: var(--forest-deep);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    list-style: none;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
    z-index: 999;
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a {
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    text-shadow: none;
    letter-spacing: 0.06em;
  }
  .nav__cta {
    font-size: 14px !important;
    padding: 12px 32px;
    min-height: 48px;
  }
  .nav__toggle {
    display: flex;
    z-index: 1001;
    position: relative;
  }
  /* Keep mobile toggle/brand/links readable when the fullscreen menu is open,
     even after the page has scrolled (which would otherwise paint dark
     scrolled-state colors on top of the dark-green overlay). */
  .nav.is-menu-open.is-scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.is-menu-open .nav__brand { color: var(--white); text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 2px 14px rgba(0,0,0,0.55); }
  .nav.is-menu-open .nav__toggle span { background: var(--white); }
  .nav.is-menu-open .nav__links a { color: rgba(255,255,255,0.85); text-shadow: none; }
  .nav.is-menu-open .nav__links a.is-active { color: var(--white); }

  /* Hero */
  .hero__content { padding: 120px 20px 36px; text-align: center; align-items: center; display: flex; flex-direction: column; }
  .hero__stats { padding: 18px 20px; flex-wrap: wrap; gap: 12px; justify-content: center; }
  .hero__stat { padding: 0 16px; text-align: center; align-items: center; }
  .hero__stat:first-child { padding-left: 16px; }
  .hero__sub { max-width: 100%; text-align: center; }
  .hero__headline { text-align: center; max-width: 100%; }
  .hero__actions { justify-content: center; align-items: center; }
  .hero__botanical { display: none; }
  .hero__scroll-cue { right: 20px; bottom: 80px; }

  /* Approach — bio sits directly above, no bleed to absorb */
  .approach { padding: 32px 20px 72px; }
  .approach__pillars { grid-template-columns: 1fr; }
  .approach__pillar { padding: 36px 20px !important; border-right: none !important; border-left: none !important; border-top: 3px solid transparent; }
  .approach__pillar:first-child { border-top-color: var(--terra); }
  .approach__pillar:nth-child(2) { border-top-color: var(--gold); }
  .approach__pillar:nth-child(3) { border-top-color: var(--forest-light); }
  .approach__pillar:not(:first-child) { padding-left: 20px !important; }
  .approach__pillar:last-child { border-bottom: 1px solid rgba(0,0,0,0.08) !important; }
  .approach__quote-wrap { margin-left: 0; max-width: 100%; border-left-width: 2px; padding-left: 20px; }

  /* Services */
  .services__intro { padding: 144px 20px 48px; }
  .svc-row { grid-template-columns: 1fr; min-height: auto; }
  .svc-row--img-right { direction: ltr; }
  .svc-row--img-right .svc-row__photo { order: -1; }
  .svc-row__photo { height: 280px; }
  .svc-row__photo img { height: 100%; }
  .svc-row__body { padding: 40px 20px; text-align: center; align-items: center; }
  .svc-row__body .svc-row__tag { margin: 0 auto 24px; }
  .svc-row__body .svc-row__cta { margin: 0 auto; }
  .svc-row--img-right .svc-row__body { background: var(--forest-pale); }
  .svc-row__desc { max-width: 100%; }

  /* Specialties — absorbs 80px bleed from services */
  .specialties { padding: 152px 20px 16px; }
  .specialties__header { gap: 16px 0; }
  .specialties__subhead { padding-top: 0; max-width: 100%; }
  .spec--lg { margin-right: 20px; }
  .spec--md { margin-right: 16px; }

  /* About */
  /* About split — 80px top absorbs specialties bleed */
  .about__split { grid-template-columns: 1fr; padding: 64px 20px 0; gap: 0; }
  .about__bio-col { padding: 0 0 24px !important; text-align: center; }
  .about__photo-col { display: block; margin-bottom: 32px; }
  .about__photo-wrap { position: static; top: auto; margin: 0 auto; max-width: 360px; }
  .about__photo-wrap::before { inset: 8px -8px -8px 8px; }
  .about__photo-img { height: auto; aspect-ratio: 2 / 3; }
  .about__photo-caption { text-align: center; }
  .about__tags { justify-content: center; }
  .about__faq-band { padding: 136px 20px 56px; }
  .about__faq-a { max-width: 100%; }

  /* CTA — extra padding-top absorbs the 200px gb-quote-cta bleed at mobile */
  .cta-section { padding: 220px 20px 12px; } /* mobile: bottom tightened further */
  .cta-section__inner { gap: 40px 0; text-align: center; max-width: 100%; }
  .cta-section__action { align-items: center; }
  .cta-section__headline { font-size: clamp(2.8rem, 11vw, 4rem); }

  /* Contact — tightened mobile spacing. Was 152px top + 56px gap which left
     a huge band of empty parchment between the response-time block and the
     form. Now 96px top padding (still absorbs gradient bleed cleanly) and
     28px gap between the info column and the form card. */
  .contact__inner { grid-template-columns: 1fr; gap: 28px 0; padding: 16px 20px 56px; } /* mobile: top tightened further */
  .contact__info { text-align: center; }
  .contact__details { align-items: center; gap: 24px; margin-bottom: 12px; }
  .contact__form-card { padding: 32px 22px; }

  /* Footer */
  .site-footer { padding: 40px 20px 28px; }
  .site-footer__top { flex-direction: column; align-items: center; gap: 28px; text-align: center; }
  .site-footer__nav { gap: 20px; justify-content: center; }
  .site-footer__bottom { flex-direction: column; align-items: center; gap: 8px; }
}

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: center !important; gap: 16px; }
  .hero__headline { font-size: clamp(3.2rem, 12vw, 4rem); text-align: center !important; }
  .hero__stat-div { display: none; }
  .hero__stat { padding: 0 10px; }
}

/* ===================================================
   MOBILE CENTERING — comprehensive force-center pass
   Covers every section at mobile breakpoint.
   =================================================== */
@media (max-width: 900px) {

  /* ---- Hero ---- */
  .hero__content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero__location,
  .hero__accepting {
    text-align: center !important;
  }
  .hero__headline {
    text-align: center !important;
    max-width: 100% !important;
  }
  .hero__word--italic {
    padding-left: 0 !important;
  }
  .hero__sub {
    text-align: center !important;
    max-width: 100% !important;
  }
  .hero__actions {
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  .hero__stats {
    justify-content: center !important;
    text-align: center !important;
  }
  .hero__stat {
    align-items: center !important;
    text-align: center !important;
  }

  /* ---- Approach ---- */
  .approach__header {
    text-align: center !important;
  }
  .approach__eyebrow {
    text-align: center !important;
  }
  .approach__headline {
    text-align: center !important;
    max-width: 100% !important;
  }
  .approach__pillar-content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .approach__pillar h3,
  .approach__pillar p,
  .approach__pillar-num {
    text-align: center !important;
  }
  .approach__quote-wrap {
    text-align: center !important;
    border-left: none !important;
    border-top: 2px solid var(--terra) !important;
    padding-left: 0 !important;
    padding-top: 32px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  .approach__quote {
    text-align: center !important;
  }
  .approach__quote cite {
    text-align: center !important;
  }

  /* ---- Services ---- */
  .services__intro {
    text-align: center !important;
  }
  .section-eyebrow {
    text-align: center !important;
    display: block !important;
  }
  .services__headline {
    text-align: center !important;
  }
  .svc-row__body {
    text-align: center !important;
    align-items: center !important;
  }
  .svc-row__num,
  .svc-row__title,
  .svc-row__desc {
    text-align: center !important;
  }
  .svc-row__tag {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: fit-content !important;
    text-align: center !important;
  }
  .svc-row__cta {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
  }

  /* ---- Specialties ---- */
  .specialties__header {
    text-align: center !important;
  }
  .specialties__header > div {
    text-align: center !important;
  }
  .specialties__headline {
    text-align: center !important;
  }
  .specialties__subhead {
    text-align: center !important;
  }
  .specialties__field {
    align-items: center !important;
  }
  .spec-row {
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: wrap !important;
  }
  .specialties__exit-note {
    text-align: center !important;
  }

  /* ---- About bio ---- */
  .about__bio-col {
    text-align: center !important;
    align-items: center !important;
  }
  .about__headline,
  .about__bio-name,
  .about__bio-cred,
  .about__bio-subcred,
  .about__body {
    text-align: center !important;
  }
  .about__tags {
    justify-content: center !important;
  }

  /* ---- FAQ ---- */
  .about__faq-eyebrow {
    text-align: center !important;
  }
  .about__faq-headline {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
  .about__faq-q {
    text-align: left !important;
    justify-content: space-between !important;
  }
  .about__faq-q span:first-child {
    flex: 1 !important;
    text-align: left !important;
  }
  .about__faq-a {
    text-align: left !important;
    max-width: 100% !important;
  }

  /* ---- CTA ---- */
  .cta-section__text {
    text-align: center !important;
  }
  .cta-section__pre,
  .cta-section__headline {
    text-align: center !important;
  }
  .cta-section__action {
    text-align: center !important;
    align-items: center !important;
  }
  .cta-section__body,
  .cta-section__phone-alt {
    text-align: center !important;
  }
  .cta-section .btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---- Contact ---- */
  .contact__info {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .contact__eyebrow,
  .contact__headline {
    text-align: center !important;
  }
  .contact__details {
    align-items: center !important;
    width: 100% !important;
  }
  .contact__detail-item {
    align-items: center !important;
    text-align: center !important;
  }
  .contact__detail-label,
  .contact__detail-val {
    text-align: center !important;
  }
  .contact__link {
    justify-content: center !important;
    text-align: center !important;
    display: flex !important;
  }
  .service-cards {
    justify-content: center !important;
  }
  .contact__form-note,
  .contact__privacy-note,
  .form-private-note {
    text-align: center !important;
  }

  /* ---- Footer ---- */
  .site-footer__brand {
    text-align: center !important;
    width: 100% !important;
  }
  .site-footer__name,
  .site-footer__tagline {
    text-align: center !important;
  }
  .site-footer__nav {
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .site-footer__bottom {
    text-align: center !important;
    align-items: center !important;
  }
  .site-footer__bottom p,
  .site-footer__bottom a {
    text-align: center !important;
  }

  /* ---- Generic catch-all for any labels / eyebrows ---- */
  .section-eyebrow,
  .about__faq-eyebrow,
  .cta-section__pre {
    text-align: center !important;
    display: block !important;
  }

  /* ---- Buttons always centered on mobile ---- */
  .btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .btn--full {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}

/* ===================================================
   GRADIENT BLEED TRANSITIONS
   Standalone divs inserted between each section pair.
   They overlap the adjoining sections via negative margins
   so there's never a hard color line at section boundaries.
   =================================================== */

/*
  Pattern: each .gb-[from]-[to] div is 80px tall,
  overlaps 40px into the section above (margin-top:-40px)
  and 40px into the section below (margin-bottom:-40px).
  z-index keeps it above section backgrounds but below content.
*/
.gradient-bleed {
  display: block;
  width: 100%;
  height: 140px; /* taller bleed = smoother gradient transitions */
  position: relative;
  z-index: 2;
  pointer-events: none;
  /* Overlap only INTO the incoming section (below).
     The outgoing section has overflow:hidden so we can't
     bleed upward into it — the gradient starts at section end
     and the incoming section's top padding absorbs it. */
  margin-top: 0;
  margin-bottom: -140px;
}

/* ===================================================
   Site-wide gradient curve refinement
   ---------------------------------------------------
   All cross-tonal section bleeds use perceptual stops
   that pass through forest mid-tones and sage rather
   than linear-RGB interpolation, which reads as a hard
   muddy band on dark↔light transitions. Stops are
   asymmetric: dark colors hold longer at the dark end,
   pale tones hold longer at the light end.
   =================================================== */

/* 1. Hero (forest-deep) → Approach (forest-pale).
   Brightened + smoother — lifted mid-tones, added stops, holds longer
   in the brighter sage range so the transition reads as "opening up." */
.gb-hero-approach {
  background: linear-gradient(
    to bottom,
    #1a2e17 0%,
    #25401f 10%,
    #38583a 22%,
    #5a7e53 36%,
    #8aa779 50%,
    #b2c7a3 62%,
    #cdd9c2 73%,
    #dde2d1 82%,
    #e8ede5 92%,
    #eef1ea 100%
  );
}

/* 2. Approach (forest-pale) → Services (parchment).
   Hosts a centered hairline-rule divider with a small diamond mark. */
.gb-approach-services {
  background: linear-gradient(to bottom, #e8ede5 0%, #efece5 50%, #f7f2ea 100%);
  position: relative;
  overflow: visible;
  height: 80px;
}

/* Editorial divider — centered hairline rule with a small diamond mark.
   Hairlines fade at the outer edges (linear-gradient transparency) so the
   rule looks weighted toward the center mark rather than running edge to
   edge. The mark is a 6px rotated square (sage gold-tinted) breaking the
   line. Whole composition fades up when the divider scrolls into view. */
.divider-rule,
.divider-mark {
  position: absolute;
  top: 50%;
  pointer-events: none;
  opacity: 0;
}
.divider-rule {
  width: calc(50% - 36px); /* leaves 72px gap centered for the mark */
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(
    to var(--rule-dir, right),
    rgba(72, 106, 63, 0) 0%,
    rgba(72, 106, 63, 0.55) 35%,
    rgba(72, 106, 63, 0.7) 100%
  );
}
.divider-rule--left  { left: 0;  --rule-dir: right; }
.divider-rule--right { right: 0; --rule-dir: left;  }

.divider-mark {
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #486a3f;
  box-shadow:
    0 0 0 1px rgba(245, 240, 230, 1),
    0 0 0 5px rgba(72, 106, 63, 0.18);
}

.gb-approach-services.is-visible .divider-rule--left {
  animation: divider-fade 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s forwards;
}
.gb-approach-services.is-visible .divider-rule--right {
  animation: divider-fade 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s forwards;
}
.gb-approach-services.is-visible .divider-mark {
  animation: divider-mark-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}

@keyframes divider-fade {
  to { opacity: 1; }
}
@keyframes divider-mark-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0); }
  60%  { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1.15); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .divider-rule, .divider-mark { animation: none !important; opacity: 1 !important; }
  .divider-mark { transform: translate(-50%, -50%) rotate(45deg) !important; }
}

/* 3. Services fee-note band (parchment-dk) → Specialties (forest) — light to mid-dark.
   Brightened + smoother: more stops, sage-greens hold longer in the middle
   so the transition glides instead of plunging. */
.gb-services-specialties {
  background: linear-gradient(
    to bottom,
    #f5efe2 0%,
    #ece5d7 12%,
    #d4d2c1 24%,
    #b8c4a8 36%,
    #93a878 48%,
    #6b8a55 62%,
    #4f713f 76%,
    #3d6138 88%,
    #2e4a2a 100%
  );
}

/* 3b. Bio (parchment) → Approach (forest-pale). Both endpoints are close
   warm-light tones; the bleed just smooths the slight beige→sage shift
   that would otherwise read as a hairline at the section seam. */
.gb-bio-approach {
  background: linear-gradient(
    to bottom,
    #f7f2ea 0%,
    #f1ede1 30%,
    #ece8d8 55%,
    #e6e8d6 78%,
    #e8ede5 100%
  );
  height: 80px;
  margin-bottom: -80px;
}

/* 4. Specialties (forest) → About (parchment) — mid-dark to light, mirror of #3 */
.gb-specialties-about {
  background: linear-gradient(
    to bottom,
    #2e4a2a 0%,
    #3d6138 12%,
    #4f713f 24%,
    #6b8a55 38%,
    #93a878 52%,
    #b8c4a8 66%,
    #d4d2c1 78%,
    #ece5d7 90%,
    #f7f2ea 100%
  );
}

/* 5. About (parchment) → FAQ band (forest-deep) — light to deepest dark */
.gb-about-faq {
  margin-bottom: -140px;
  position: relative;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    #f7f2ea 0%,
    #ece5d7 12%,
    #d4d2c1 24%,
    #b8c4a8 36%,
    #93a878 48%,
    #6b8a55 62%,
    #4f713f 76%,
    #2e4a2a 90%,
    #1e3220 100%
  );
}

/* FAQ band (forest-deep) → Rogers quote bridge (parchment).
   Steepest color jump on the page. Bumped to 240px + perceptual sage-green
   midtones that lift faster so the transition reads brighter and smoother. */
.gb-about-testimonials {
  height: 240px;
  margin-bottom: -240px;
  background: linear-gradient(
    to bottom,
    #1a2e17 0%,
    #25401f 10%,
    #38583a 22%,
    #4f713f 34%,
    #6b8a55 46%,
    #93a878 58%,
    #b8c4a8 70%,
    #d4d2c1 82%,
    #ece5d7 92%,
    #f7f2ea 100%
  );
}

/* ===================================================
   ROGERS QUOTE BRIDGE — standalone transitional block
   Sits between About FAQ band and CTA section.
   Cream/parchment ground provides the visual "breath"
   between the dark FAQ band above and dark CTA below —
   restoring the dark-light-dark rhythm the site was
   designed with (testimonials originally filled this beat).
   =================================================== */
.quote-bridge {
  background: var(--parchment);
  /* Receives gb-specialties-about bleed (140px) at the top. Top padding
     matches the other bleed-receiving sections (Approach/Specialties/About
     all = 240px). Bottom padding + taller min-height open up the scene so
     the quote text and the silhouette landscape both breathe — per Laura's
     "give the entire thing more space" feedback. */
  padding: 280px 2rem 160px;
  min-height: 1000px;
  text-align: center;
  position: relative;
}

.quote-bridge .approach__quote-wrap {
  max-width: 680px;
  margin: 0 auto;
  border-top: none;
  border-left: none;          /* strip the inherited terra rule on desktop too — bridge is centered, the side rule reads as misalignment here (mobile already had this via !important) */
  padding-top: 0;
  padding-left: 0;
  margin-top: 0;
  position: relative;
  z-index: 5;                 /* lift TEXT above the gradient bleed (z:2) at body context (works because .quote-bridge has no z-index, so this isn't trapped in a child stacking context) */
}

.quote-bridge .approach__quote {
  color: var(--forest-deep);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 720px;
  margin: 0 auto;
}

/* Word-by-word fade-up reveal when the bridge enters view. JS adds .is-visible
   to .approach__quote-wrap; CSS staggers each .quote-word via inline --wi index. */
.quote-bridge .quote-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--wi, 0) * 0.07s),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--wi, 0) * 0.07s);
}
.quote-bridge .approach__quote-wrap.is-visible .quote-word {
  opacity: 1;
  transform: translateY(0);
}
.quote-bridge .approach__quote cite {
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 1s ease 1.6s, transform 1s ease 1.6s;
}
.quote-bridge .approach__quote-wrap.is-visible cite {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .quote-bridge .quote-word,
  .quote-bridge .approach__quote cite {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.quote-bridge .approach__quote cite {
  color: var(--terra);
  font-size: 0.875rem;          /* 14px, up from inherited 12px */
  letter-spacing: 0.18em;        /* tighter tracking ratio at the larger size */
  margin-top: 28px;              /* extra breathing room from the larger quote */
}

/* ===================================================
   Living silhouette environment behind the Rogers quote.
   Layered atmospheric scene: sun glow, distant hills,
   swaying tree line, foreground grass blades, drifting
   flock of birds. All sit behind the quote text (z:5),
   on top of the parchment background, behind the
   gradient bleeds where they overlap. Each layer
   respects prefers-reduced-motion.
   =================================================== */
.quote-bridge__scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Drifting clouds — soft radial wisps that float across the sky area above the hills.
   Each cloud is a span with --y, --delay, --dur, --scale custom properties. */
.qb-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.qb-cloud {
  position: absolute;
  top: var(--y);
  left: -180px;
  width: 220px;
  height: 70px;
  background:
    radial-gradient(ellipse 60% 50% at 25% 60%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 70% 60% at 55% 45%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 75%),
    radial-gradient(ellipse 55% 50% at 78% 60%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(2px);
  opacity: 0.7;
  transform: translateX(0) scale(var(--scale, 1));
  animation: cloud-drift var(--dur, 100s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
@keyframes cloud-drift {
  0%   { transform: translateX(0)             scale(var(--scale, 1)); }
  100% { transform: translateX(calc(100vw + 360px)) scale(var(--scale, 1)); }
}

/* Soft sun glow upper-right — sits just above the horizon (above hills, below quote).
   Positioned in the parchment zone so it isn't masked by the top gradient. */
.qb-sun {
  position: absolute;
  top: 55%;
  right: 10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at center, rgba(255, 215, 170, 0.45) 0%, rgba(255, 200, 150, 0.28) 28%, rgba(255, 200, 150, 0) 68%);
  filter: blur(2px);
  pointer-events: none;
}

/* Layer base — anchored to bottom of the bridge so the scene reads as a horizon */
.qb-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
  display: block;
}
.qb-layer--far {
  height: 50%;
  fill: var(--forest-light);
  opacity: 0.34;
  filter: blur(0.6px);
}

/* ===================================================
   SINGLE COHESIVE LANDSCAPE BACKDROP — replaces the
   hand-coded mountain/tree layers. Uses CSS mask-image
   on a CC0 OpenClipart silhouette by GDJ
   (assets/landscape-scene.svg) so the background-color
   shows through the silhouette shape, recoloring the
   black-fill original to forest-deep.
   =================================================== */
.qb-landscape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Was 66% — shorter so there's more open sky between the quote text
     and the tree silhouette. */
  height: 48%;
  background-color: var(--forest-deep);
  -webkit-mask-image: url('assets/landscape-scene.svg?v=birds-out');
  mask-image: url('assets/landscape-scene.svg?v=birds-out');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}
/* Mirrored copy puts a tree cluster on the left (source SVG only has
   trees on the right). Slightly smaller + faded so it reads as supporting
   depth, not duplicate. The mirror's top edge — where the silhouette
   crops abruptly — gets a feathered fade so the trees don't look cut off. */
.qb-landscape--mirror {
  transform: scaleX(-1);
  opacity: 0.7;
  height: 36%;
  -webkit-mask-image: url('assets/landscape-scene.svg?v=birds-out'), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 18%, #000 38%);
  mask-image: url('assets/landscape-scene.svg?v=birds-out'), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 18%, #000 38%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: cover, 100% 100%;
  mask-size: cover, 100% 100%;
  -webkit-mask-position: bottom center, top left;
  mask-position: bottom center, top left;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}
@media (max-width: 900px) {
  .qb-landscape          { height: 38%; }
  .qb-landscape--mirror  { height: 28%; opacity: 0.5; }
}

/* 4-LAYER MOUNTAIN SYSTEM per atmospheric-perspective playbook.
   Heights stack: back smallest (25%), front tallest (55%) — size differential
   is the primary depth cue. Colors fade from desaturated sage at back through
   forest mid-tones to saturated forest-deep at front. SVG feGaussianBlur
   filters (defined inline in HTML) add atmospheric haze on back 3 layers. */
.qb-layer--mtn-back {
  height: 24%;
  fill: #b6c0b3;                /* hsl(110, 10%, 72%) — light desaturated sage, fog-distance */
}
.qb-layer--mtn-midback {
  height: 30%;
  fill: #80a574;                /* hsl(110, 25%, 58%) — medium sage */
}
.qb-layer--mtn-mid {
  height: 36%;
  fill: #4a7240;                /* hsl(110, 40%, 35%) — deeper green, defined */
}
.qb-layer--mtn-front {
  height: 40%;
  fill: var(--forest-deep);     /* near-black forest, sharpest, no blur */
}
/* Mobile: tighter caps. Front layer must stay below the flex-centered quote
   AND not dominate the lower half as a solid wall. */
@media (max-width: 900px) {
  .qb-layer--mtn-back    { height: 20%; }
  .qb-layer--mtn-midback { height: 24%; }
  .qb-layer--mtn-mid     { height: 28%; }
  .qb-layer--mtn-front   { height: 32%; }
}
.qb-layer--midback {
  height: 42%;
  fill: var(--forest);
  opacity: 0.55;
}
.qb-layer--midback {
  height: 42%;
  fill: var(--forest);
  opacity: 0.55;
}
.qb-layer--mid {
  height: 38%;
  fill: var(--forest-deep);
  opacity: 0.85;
}
.qb-layer--near {
  height: 12%;                              /* foreground grass band */
  opacity: 1;
}
.qb-layer--near .qb-grass-path {
  fill: var(--forest-deep);                 /* solid silhouette grass shape — reads via wavy top edge */
  stroke: none;
}
.qb-layer--near .qb-wildflowers circle {
  fill: var(--terra);
  stroke: none;
}

/* Mid-tree gentle sway — group rotates slightly around its bottom edge */
.qb-trees {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tree-sway 9s ease-in-out infinite;
}
@keyframes tree-sway {
  0%, 100% { transform: rotate(-0.6deg) translateY(0); }
  50%      { transform: rotate(0.6deg) translateY(-1px); }
}

/* Wildflowers — small terra blooms scattered along the grass line. The parent
   .qb-layer--near sets fill:none/stroke:forest-deep for the grass blades, so we
   explicitly override here with terra fill. */
.qb-wildflowers circle {
  fill: var(--terra);
  stroke: none;
  opacity: 0.55;
}
.qb-wildflowers circle:nth-child(2n)  { fill: var(--terra-lt); opacity: 0.5; }
.qb-wildflowers circle:nth-child(3n)  { opacity: 0.42; }
.qb-wildflowers circle:nth-child(5n)  { fill: var(--terra-lt); opacity: 0.6; }

/* (Old per-blade grass-wave keyframes removed — current grass is a single
   filled silhouette path, not individual blades. Razor cleanup.) */

@media (prefers-reduced-motion: reduce) {
  .qb-trees,
  .qb-cloud {
    animation: none !important;
    transform: none !important;
  }
  .qb-cloud {
    /* hold static positions across the sky so users still see the layer composition */
    transform: translateX(20vw) scale(var(--scale, 1)) !important;
    opacity: 0.4;
  }
}

.quote-bridge__flock {
  position: absolute;
  inset: 0;
  z-index: 2;                   /* above scene layers, below quote-wrap z:5 */
  pointer-events: none;
  overflow: hidden;
}
/* ===================================================
   FLAPPING BIRDS — bird-cells.svg sprite (10 frames).
   Original sprite has uneven cell widths in the SVG
   (cells 1-3 = 359px, cells 4-10 = 370px in 3671 viewBox).
   The previous steps(10) timing assumed even cells, so
   each frame landed off-center and the wing flap looked
   glitchy. Fix: use step-end with explicit keyframes at
   the precise bg-position percentage for each cell.
   =================================================== */
.qb-bird {
  position: absolute;
  top: var(--y);
  left: 0;
  width: 56px;
  height: 78px;
  background-image: url('assets/bird-cells.svg');
  background-size: 1000% auto;
  background-repeat: no-repeat;
  background-position: 0 center;
  opacity: 0.85;
  pointer-events: none;
  animation:
    fly-cycle 1s step-end infinite,
    bird-glide var(--dur, 14s) linear var(--delay, 0s) infinite;
  will-change: background-position, transform;
}

/* Per-cell percentages computed from the actual SVG cell positions:
   P_K = 100 × (10/9) × cell_K_left_px / viewBox_width_px
   where viewBox is 3671px wide. Each keyframe holds (step-end) for
   10% of the 1s duration = 0.1s per cell = 10fps wing flap. */
@keyframes fly-cycle {
  0%   { background-position: 0% center; }       /* cell 1 (left=0.5)    */
  10%  { background-position: 10.88% center; }   /* cell 2 (left=359.5)  */
  20%  { background-position: 21.75% center; }   /* cell 3 (left=718.5)  */
  30%  { background-position: 32.61% center; }   /* cell 4 (left=1077.5) */
  40%  { background-position: 43.84% center; }   /* cell 5 (left=1448.5) */
  50%  { background-position: 55.04% center; }   /* cell 6 (left=1818.5) */
  60%  { background-position: 66.27% center; }   /* cell 7 (left=2189.5) */
  70%  { background-position: 77.47% center; }   /* cell 8 (left=2559.5) */
  80%  { background-position: 88.70% center; }   /* cell 9 (left=2930.5) */
  90%, 100% { background-position: 99.90% center; } /* cell 10 (left=3300.5) */
}
@keyframes bird-glide {
  0%   { transform: translateX(-12vw)                       scale(0.55); }
  20%  { transform: translateX(20vw)  translateY(-8px)      scale(0.7); }
  40%  { transform: translateX(45vw)  translateY(2px)       scale(0.75); }
  60%  { transform: translateX(70vw)  translateY(-3px)      scale(0.78); }
  80%  { transform: translateX(95vw)  translateY(0)         scale(0.78); }
  100% { transform: translateX(calc(100vw + 80px))          scale(0.78); }
}

/* Per-bird timing variation so they fly independently rather than in formation */
.qb-bird--one   { --dur: 14s; }
.qb-bird--two   { --dur: 16s; animation-duration: 0.9s, 16s; }
.qb-bird--three { --dur: 13s; animation-duration: 1.1s, 13s; }
.qb-bird--four  { --dur: 17s; animation-duration: 0.95s, 17s; }
.qb-bird--five  { --dur: 22s; }
.qb-bird--six   { --dur: 24s; animation-duration: 1.2s, 24s; }

/* Distant flock — smaller, more transparent, blurred, slower. Reads as far away. */
.qb-bird--distant {
  width: 24px;
  height: 34px;
  opacity: 0.55;
  filter: blur(0.5px);
}

@media (prefers-reduced-motion: reduce) {
  .qb-bird {
    animation: none !important;
    background-position: 43.84% center !important;   /* hold cell 5 (wing-mid) */
    transform: translateX(35vw) scale(0.7) !important;
  }
}

/* Mobile: keep enough top padding to absorb the gb-specialties-about
   bleed (140px) AND match the other mobile bleed-receivers — Specialties +
   Approach use 240px on mobile too. The "tighten vertical rhythm" comment
   below predates the bio-move, when about__split sat between this section
   and the bleed and provided the absorption itself. */
@media (max-width: 900px) {
  .quote-bridge {
    padding: 260px 20px 120px;
    text-align: center !important;
    min-height: 70vh;
  }
  .quote-bridge .approach__quote {
    text-align: center !important;
    max-width: 100% !important;
  }
  .quote-bridge .approach__quote-wrap {
    border-left: none !important;
    border-top: none !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  .quote-bridge .approach__quote cite {
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .quote-bridge {
    padding: 240px 16px 100px;
    min-height: 78vh;
  }
}

/* 6b. Rogers quote silhouette (forest-deep #1a2e17 at bottom) → CTA (parchment #f7f2ea).
   The silhouette ends at forest-deep; CTA is now bright parchment. Smooth fade from
   the dark forest mass up into the warm cream ground for a natural sunrise-feel. */
.gb-quote-cta {
  height: 200px;
  margin-bottom: -200px;
  background: linear-gradient(
    to bottom,
    #1a2e17 0%,
    #25401f 10%,
    #38583a 22%,
    #4f713f 34%,
    #6b8a55 46%,
    #93a878 58%,
    #b8c4a8 70%,
    #d4d2c1 82%,
    #ece5d7 92%,
    #f7f2ea 100%
  );
}

/* 7. CTA (parchment) → Contact (parchment-dk) — subtle warm-cream fade.
   Smoothed with more stops so the parchment → parchment-dk transition
   reads as a continuous tone shift, not a banded gradient.
   Shortened 140 → 80px so the transition doesn't add visual gap
   between the two sections. */
.gb-cta-contact {
  height: 80px;
  margin-bottom: -80px;
  background: linear-gradient(
    to bottom,
    #f7f2ea 0%,
    #f5efe5 25%,
    #f3edde 50%,
    #efe9d8 72%,
    #ece5d7 100%
  );
}

/* Contact → Footer: same ink color — no bleed needed */

/* ---- Incoming section adjustments ----
   Each section that receives a gradient-bleed div above it
   needs extra top padding to push content below the 80px bleed zone.
   Inner wrappers get z-index:3 so they sit above the bleed (z-index:2).
*/

/* Approach used to receive a bleed from above (originally Hero, then
   briefly the bio→approach mini-bleed). Both have been removed per
   Laura — base padding 100px 40px 100px is the right amount of
   section breathing on its own. Inner z-index kept for legacy safety. */
.approach__inner {
  position: relative;
  z-index: 3;
}

/* Services receives Approach bleed */
.services__intro {
  padding-top: 228px; /* 88px content gap + 140px bleed absorption */
}
/* services has no single inner wrapper — ensure svc-rows are above */
.svc-row {
  position: relative;
  z-index: 3;
}

/* Specialties receives Services bleed */
.specialties {
  padding-top: 240px; /* 100px content gap + 140px bleed absorption */
}
.specialties__inner {
  position: relative;
  z-index: 3;
}

/* About-bio now sits directly under the hero with no gradient transition
   (the green .gb-hero-approach was removed per Laura's ask). The old
   clamp(180,18vw,240) was calibrated to absorb a 140px bleed plus
   breathing — without the bleed, that whole thing is dead space. Pure
   section-breathing padding instead. */
.about__split {
  padding-top: clamp(80px, 8vw, 120px);
}
/* (Removed duplicate .about__bio-col padding-top:96 override — bio-col now sits
   flush with about__split's 80px absorption. The 80px absorption == the visible
   gap between Specialties content end and About content start.) */

/* (Stale CTA padding-top override removed — was overriding the canonical desktop
   160px and mobile 240px values defined earlier. With the silhouette bridge moved
   above the FAQ band, the gb-quote-cta gradient now bleeds into CTA and the
   primary .cta-section rule's padding-top is the correct value to use.) */
.cta-section__inner {
  position: relative;
  z-index: 3;
}

/* Contact receives CTA bleed (80px tall, -80px margin overlap) */
.contact__inner {
  padding-top: 96px; /* 80px bleed absorption + 16px breathing */
}

/* ===================================================
   KEYBOARD FOCUS STYLES
   =================================================== */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}

/* ===================================================
   REDUCED MOTION
   =================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__word { animation: none; opacity: 1; transform: none; }
  .hero__location, .hero__accepting, .hero__sub, .hero__actions, .hero__stats { animation: none; opacity: 1; transform: none; }
  .hero__bg-img { transform: none !important; }
  .hero__botanical svg { animation: none; }
  .btn--primary, .cta-section .btn--primary, .hero__accepting-dot, .hero__scroll-line { animation: none; }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  .spec, .spec-sep { opacity: 1; transform: none !important; }
  .spec--lg.is-breathing, .spec--md.is-breathing, .spec--sm.is-breathing { animation: none !important; }
}

/* ========================================================
   LEGAL PAGES — Notice of Privacy Practices, No Surprises
   Act, Good Faith Estimate. Single-column readable layout
   on top of the existing parchment + Cormorant/DM Sans.
   ======================================================== */
.legal-page { background: var(--parchment); }
.legal-page .nav { background: rgba(247,242,234,0.96); border-bottom: 1px solid rgba(26,26,24,0.06); }
/* The home-page nav__brand is white-on-photo with a strong shadow;
   on parchment legal pages we want dark forest with no shadow. */
.legal-page .nav__brand { color: var(--forest); text-shadow: none; }
.nav--legal .nav__inner { justify-content: space-between; }
.nav__return-link {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-mid);
  text-decoration: none;
  padding: 8px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
}
.nav__return-link:hover { color: var(--forest); }

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 24px 80px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}
.legal__header { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(26,26,24,0.12); }
.legal__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.legal__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--forest-deep);
  margin-bottom: 16px;
}
.legal__effective {
  font-size: 13px;
  color: var(--ink-muted);
  font-style: italic;
}
.legal__lede {
  background: var(--parchment-dk);
  border-left: 3px solid var(--forest);
  padding: 20px 24px;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ink-mid);
  margin-bottom: 40px;
  border-radius: 2px;
}
.legal__lede strong { color: var(--ink); font-weight: 500; }
.legal section { margin-bottom: 40px; }
.legal__section {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--forest-deep);
  margin: 32px 0 16px;
  letter-spacing: -0.005em;
}
.legal__sub {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--forest);
  margin: 24px 0 8px;
  letter-spacing: 0.01em;
}
.legal p { margin-bottom: 16px; color: var(--ink-mid); }
.legal__list { margin: 12px 0 20px 24px; }
.legal__list li { margin-bottom: 8px; color: var(--ink-mid); }
.legal__list--lettered { list-style: lower-alpha; }
.legal__list--numbered { list-style: decimal; }
.legal__footer {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(26,26,24,0.12);
  font-size: 14px;
  color: var(--ink-muted);
}
.legal__contact {
  font-style: normal;
  margin: 12px 0 24px;
  color: var(--ink-mid);
  line-height: 1.8;
}
.legal__contact a {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal__contact a:hover { color: var(--forest-mid); }
.legal__return a {
  color: var(--forest);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.legal__return a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
  .legal { padding: 100px 20px 60px; font-size: 15px; }
  .legal__lede { padding: 16px 18px; font-size: 14px; }
  .legal__section { font-size: 20px; }
  .site-footer__bottom { flex-wrap: wrap; gap: 12px 24px; }
  .site-footer__legal { order: 3; flex-basis: 100%; }
}