/* ===========================================================
   Mendwell — Luxe Layer
   Elevates the base theme with atmospheric depth, editorial
   typography, and refined micro-interactions. Non-destructive
   overrides — loads after base.css and components.css.
   =========================================================== */

/* ---------- Refined design tokens ---------- */
:root {
  /* Richer gradient surfaces */
  --grad-ivory:   radial-gradient(120% 80% at 50% 0%, #FBF8F1 0%, var(--ivory) 70%);
  --grad-cream:   linear-gradient(180deg, #FBF8F1 0%, var(--cream) 100%);
  --grad-forest:  radial-gradient(120% 100% at 0% 0%, #36584A 0%, var(--forest) 45%, var(--forest-deep) 100%);
  --grad-clay:    linear-gradient(135deg, #D49A7E 0%, var(--clay) 55%, var(--clay-deep) 100%);
  --grad-gold:    linear-gradient(135deg, #D4B783 0%, var(--gold) 50%, #8E7449 100%);

  /* Refined shadows */
  --shadow-lift:  0 1px 2px rgba(31,42,36,0.03),
                  0 8px 24px rgba(31,42,36,0.06),
                  0 32px 64px -16px rgba(31,42,36,0.10);
  --shadow-image: 0 6px 18px rgba(31,42,36,0.08),
                  0 36px 80px -20px rgba(31,42,36,0.22);
  --shadow-inset-cream: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ---------- Global grain texture (atmospheric) ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Make actual content sit above the grain layer */
.site-header, main, .site-footer { position: relative; z-index: 2; }

/* ---------- Header refinements ---------- */
.site-header {
  background: rgba(245, 241, 234, 0.78);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}
.site-header.scrolled {
  background: rgba(245, 241, 234, 0.92);
  box-shadow:
    0 1px 0 rgba(184, 153, 104, 0.15),
    0 1px 18px rgba(31, 42, 36, 0.05);
}
.brand-mark { transition: transform var(--transition); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
.nav a {
  position: relative;
  padding-bottom: 3px;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1.5px;
  width: 100%;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out);
}
.nav a:hover::after,
.nav a.active::after { transform: scaleX(1); }

/* ---------- Body & section atmosphere ---------- */
body { background: var(--ivory); }

section { position: relative; }

/* Subtle hairline between consecutive sections of same tone */
.section-cream + .section-cream::before,
.section-cream + section:not(.section-forest):not(.section-cream)::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}

.section-cream { background: var(--grad-cream); }

/* ---------- Hero: editorial luxury treatment ---------- */
.hero {
  background:
    radial-gradient(70% 80% at 88% 18%, rgba(196, 134, 107, 0.10), transparent 55%),
    radial-gradient(60% 70% at 8% 90%, rgba(138, 163, 150, 0.16), transparent 60%),
    var(--grad-ivory);
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* Decorative gold hairline arc behind hero copy */
.hero::before {
  content: '';
  position: absolute;
  top: 14%;
  left: -8%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(184, 153, 104, 0.28);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  left: -4%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(184, 153, 104, 0.18);
  pointer-events: none;
}

.hero h1 {
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'wght' 420;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.hero h1 em,
.hero h1 .accent {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'wght' 380;
  color: var(--forest);
  position: relative;
}

/* Hero image: gold framed, layered behind a forest mat */
.hero-visual {
  position: relative;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-image);
  overflow: visible;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -14px -14px 14px 14px;
  border-radius: var(--radius-xl);
  background: var(--grad-forest);
  z-index: -2;
  opacity: 0.92;
}
.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  pointer-events: none;
  border: 1px solid rgba(184, 153, 104, 0.45);
  box-shadow: inset 0 0 0 1px rgba(245, 241, 234, 0.18);
}
.hero-visual > img,
.hero-visual > picture,
.hero-visual > picture img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.hero-badge {
  background: rgba(245, 241, 234, 0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 12px 32px rgba(31, 42, 36, 0.18);
  border: 1px solid rgba(184, 153, 104, 0.25);
  z-index: 3;
}
.hero-badge .dot {
  background: var(--clay);
  box-shadow: 0 0 0 3px rgba(196, 134, 107, 0.22);
}

/* ---------- Typography refinements ---------- */
h1, h2 { font-variation-settings: 'opsz' 144, 'wght' 480; }
h2 em, h3 em { font-style: italic; font-variation-settings: 'opsz' 96, 'wght' 420; color: var(--forest); }

.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--clay-deep);
}
.eyebrow::before {
  background: var(--grad-gold);
  height: 1.5px;
}

.lede { color: var(--ink-soft); font-weight: 400; }

/* Drop cap for prose opening sections (long-form blog posts) */
.prose > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.4em;
  float: left;
  line-height: 0.85;
  margin: 0.08em 0.12em 0 0;
  color: var(--forest);
  font-variation-settings: 'opsz' 144;
}

/* ---------- Buttons: luxe finish ---------- */
.btn {
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary {
  background: var(--grad-forest);
  color: var(--ivory);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(30, 51, 41, 0.20),
    0 8px 24px -6px rgba(30, 51, 41, 0.28);
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 700ms var(--ease-out);
  z-index: -1;
}
.btn-primary:hover::after { transform: translateX(110%); }
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 4px rgba(30, 51, 41, 0.22),
    0 16px 32px -8px rgba(30, 51, 41, 0.36);
}

.btn-secondary {
  background: rgba(245, 241, 234, 0.5);
  border-color: rgba(45, 74, 62, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-secondary:hover {
  background: var(--forest);
  border-color: var(--forest);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(30, 51, 41, 0.30);
}

/* Gold-accented CTA */
.btn-gold {
  background: var(--grad-gold);
  color: var(--ivory);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 22px -6px rgba(142, 116, 73, 0.45);
}
.btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* ---------- Cards: layered, hover-lifted ---------- */
.card {
  background: linear-gradient(180deg, #FCFAF5 0%, var(--cream) 100%);
  border: 1px solid rgba(45, 74, 62, 0.08);
  box-shadow: var(--shadow-inset-cream);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 153, 104, 0.5), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 153, 104, 0.35);
  box-shadow:
    var(--shadow-inset-cream),
    0 1px 2px rgba(31,42,36,0.05),
    0 12px 32px -6px rgba(31,42,36,0.12);
}
.card:hover::before { opacity: 1; }

.card .icon {
  background: linear-gradient(135deg, #DAE4DE 0%, var(--sage-soft) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 4px 12px -4px rgba(45, 74, 62, 0.15);
}
.card.program .program-stat {
  background: var(--grad-forest);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 500;
}
.card.program .program-stat small {
  color: var(--clay-deep);
  background: none;
  -webkit-text-fill-color: var(--clay-deep);
}
.card.condition .icon {
  background: linear-gradient(135deg, #F0DCC9 0%, var(--clay-soft) 100%);
}

/* ---------- Process steps: refined numerals ---------- */
.process-step {
  background: linear-gradient(180deg, #FCFAF5 0%, var(--cream) 100%);
  border: 1px solid rgba(45, 74, 62, 0.08);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
  position: relative;
}
.process-step::after {
  content: '';
  position: absolute;
  inset: auto -40% -60% auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 134, 107, 0.08), transparent 60%);
  pointer-events: none;
}
.process-step:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 153, 104, 0.30);
  box-shadow: 0 14px 32px -10px rgba(31, 42, 36, 0.14);
}
.process-step .num {
  background: var(--grad-clay);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.06em;
}

/* ---------- Forest sections: rich gradient + grain ---------- */
.section-forest {
  background: var(--grad-forest);
  position: relative;
  overflow: hidden;
}
.section-forest::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.section-forest::after {
  content: '';
  position: absolute;
  top: 0; right: -8%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(184, 153, 104, 0.18);
  pointer-events: none;
}
.section-forest .container { position: relative; z-index: 1; }
.section-forest h2 em {
  color: var(--clay-soft);
  font-style: italic;
}
.section-forest .eyebrow { color: var(--clay-soft); }

/* Decorative gold corner mark on forest sections */
.section-forest > .container > .eyebrow:first-child::after {
  display: none;
}

/* ---------- CTA band: refined gradient ---------- */
.cta-band {
  background: var(--grad-forest);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 60px -16px rgba(30, 51, 41, 0.30);
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.cta-band::after {
  content: '';
  position: absolute;
  right: -10%;
  top: -30%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(184, 153, 104, 0.20);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 em {
  font-style: italic;
  color: var(--clay-soft);
}
.cta-band .btn-primary {
  background: linear-gradient(180deg, #FBF8F1 0%, var(--ivory) 100%);
  color: var(--forest-deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 22px -6px rgba(0, 0, 0, 0.18);
}
.cta-band .btn-primary:hover {
  background: var(--white);
  color: var(--forest-deep);
  transform: translateY(-2px);
}

/* ---------- Trust bar: refined ---------- */
.trustbar {
  background: linear-gradient(180deg, var(--cream) 0%, #F7F2EA 100%);
  border-top: 1px solid rgba(184, 153, 104, 0.18);
  border-bottom: 1px solid rgba(184, 153, 104, 0.18);
  position: relative;
}
.trustbar::before,
.trustbar::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: var(--gold);
  opacity: 0.4;
}
.trustbar::before { top: -4px; }
.trustbar::after { bottom: -4px; }
.trust-item svg { color: var(--clay); }

/* ---------- Pull quote: editorial ---------- */
.pullquote {
  background: linear-gradient(180deg, #FCFAF5 0%, var(--cream) 100%);
  border: 1px solid rgba(45, 74, 62, 0.08);
  border-left: none;
  position: relative;
  padding: 2rem 2.25rem 2rem 4.25rem;
  border-radius: var(--radius-lg);
}
.pullquote::before {
  content: '\201C';
  position: absolute;
  left: 1.5rem;
  top: 0.5rem;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--clay);
  font-variation-settings: 'opsz' 144;
  opacity: 0.75;
}
.pullquote p {
  font-style: italic;
  font-variation-settings: 'opsz' 96, 'wght' 420;
  color: var(--ink);
}

/* ---------- AEO answer: refined ---------- */
.aeo {
  background: linear-gradient(180deg, #FCFAF5 0%, var(--cream) 100%);
  border: 1px solid rgba(45, 74, 62, 0.10);
  border-left: 3px solid var(--clay);
  position: relative;
}
.aeo .aeo-q { color: var(--clay-deep); }

/* ---------- FAQ accordion: refined ---------- */
.faq { border-top-color: rgba(184, 153, 104, 0.25); }
.faq-item { border-bottom-color: rgba(184, 153, 104, 0.25); }
.faq-q { transition: color var(--transition); }
.faq-q:hover { color: var(--forest); }
.faq-q .toggle {
  background: linear-gradient(135deg, #DAE4DE 0%, var(--sage-soft) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.faq-item.open .faq-q .toggle {
  background: var(--grad-forest);
  box-shadow: 0 4px 12px -2px rgba(30, 51, 41, 0.25);
}

/* Native <details> styling — clean editorial look (used on north-fulton page) */
details.faq-item-native,
section .faq details {
  border-bottom: 1px solid rgba(184, 153, 104, 0.25);
  padding: 0.25rem 0;
}
section .faq details > summary,
section .faq details summary.faq-q {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  line-height: 1.3;
  transition: color var(--transition);
}
section .faq details > summary::-webkit-details-marker { display: none; }
section .faq details > summary::after {
  content: '+';
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #DAE4DE 0%, var(--sage-soft) 100%);
  color: var(--forest);
  flex-shrink: 0;
  transition: all var(--transition);
}
section .faq details[open] > summary::after {
  content: '\2212';
  background: var(--grad-forest);
  color: var(--ivory);
  transform: rotate(180deg);
}
section .faq details[open] > summary { color: var(--forest); }
section .faq details > .faq-a {
  padding: 0 0 1.5rem 0;
  color: var(--ink-soft);
}

/* ---------- Related block + cards ---------- */
.related-block,
section .related-block {
  background: linear-gradient(180deg, #FCFAF5 0%, var(--cream) 100%);
  border: 1px solid rgba(45, 74, 62, 0.08);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
}
.related-card,
section .related-card {
  background: var(--ivory);
  border: 1px solid rgba(45, 74, 62, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.related-card::after {
  content: '\2192';
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  font-family: var(--font-body);
  color: var(--clay);
  font-weight: 500;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--transition), transform var(--transition);
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 153, 104, 0.40);
  box-shadow: 0 14px 32px -10px rgba(31, 42, 36, 0.14);
}
.related-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.related-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--forest);
  font-weight: 500;
  margin: 0;
}

/* ---------- Crisis box: refined ---------- */
.crisis {
  background: linear-gradient(180deg, #F8EBE4 0%, var(--alert-soft) 100%);
  border-left: 3px solid var(--alert);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ---------- Footer: refined dark ---------- */
.site-footer {
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(54, 88, 74, 0.6), transparent 50%),
    var(--forest-deep);
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.4;
}
.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.025;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--clay-soft);
}
.site-footer a {
  transition: color var(--transition), padding-left var(--transition);
}
.site-footer a:hover {
  color: var(--gold);
  padding-left: 3px;
}
.footer-crisis {
  background: rgba(0, 0, 0, 0.18);
  border-left: 3px solid var(--clay);
}

/* ---------- Page head (interior page heros) ---------- */
.page-head,
section.section-sm:first-of-type {
  background:
    radial-gradient(70% 80% at 88% 18%, rgba(196, 134, 107, 0.08), transparent 55%),
    radial-gradient(60% 70% at 8% 90%, rgba(138, 163, 150, 0.12), transparent 60%),
    var(--grad-ivory);
  position: relative;
  border-bottom: 1px solid rgba(184, 153, 104, 0.18);
}
.page-head::after,
section.section-sm:first-of-type::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
}

/* ---------- Stat numerals (used in stat blocks) ---------- */
.stat-numeral {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'wght' 400;
  letter-spacing: -0.04em;
  line-height: 0.95;
  background: var(--grad-forest);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-numeral.clay {
  background: var(--grad-clay);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- Breadcrumbs: gold-accented ---------- */
.breadcrumb {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-deep);
  font-weight: 600;
}
.breadcrumb a { color: var(--clay-deep); }
.breadcrumb a:hover { color: var(--forest); }

/* ---------- Section heads ---------- */
.section-head h2 em {
  color: var(--forest);
  font-style: italic;
}

/* ---------- Reveal: refined ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Mobile sticky bar: refined ---------- */
.mobile-sticky {
  background: rgba(245, 241, 234, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid rgba(184, 153, 104, 0.25);
}
.mobile-sticky a.call { background: var(--grad-forest); }
.mobile-sticky a.verify { background: var(--grad-clay); }

/* ---------- Sub-nav dropdowns ---------- */
.nav .sub {
  background: rgba(250, 247, 242, 0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(184, 153, 104, 0.20);
  box-shadow: 0 16px 40px -8px rgba(31, 42, 36, 0.16);
}

/* ---------- Tables: refined ---------- */
table {
  background: linear-gradient(180deg, #FCFAF5 0%, var(--cream) 100%);
  border: 1px solid rgba(184, 153, 104, 0.15);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
th { background: var(--grad-forest); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }

/* ---------- Schedule block ---------- */
.schedule {
  background: linear-gradient(180deg, #FCFAF5 0%, var(--cream) 100%);
  border: 1px solid rgba(184, 153, 104, 0.15);
}
.schedule .row { border-bottom-color: rgba(184, 153, 104, 0.15); }
.schedule .time { color: var(--clay-deep); }

/* ---------- Form refinements ---------- */
.form {
  background: linear-gradient(180deg, #FCFAF5 0%, var(--cream) 100%);
  border: 1px solid rgba(184, 153, 104, 0.18);
  box-shadow: 0 24px 60px -24px rgba(31, 42, 36, 0.10);
}
.form-intro {
  background: linear-gradient(180deg, #DAE4DE 0%, var(--sage-soft) 100%);
  border: 1px solid rgba(45, 74, 62, 0.10);
}
.field input, .field select, .field textarea {
  background: var(--ivory);
  border-color: rgba(184, 153, 104, 0.25);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(45, 74, 62, 0.12);
}

/* ---------- NAP block: subtle gold mark ---------- */
.nap {
  background: linear-gradient(180deg, #FCFAF5 0%, var(--cream) 100%);
  border: 1px solid rgba(184, 153, 104, 0.18);
  position: relative;
}
.nap::before {
  content: '';
  position: absolute;
  top: 0; left: 1.75rem;
  width: 24px;
  height: 2px;
  background: var(--grad-gold);
}
.nap dt { color: var(--clay-deep); font-family: var(--font-body); }

/* ---------- Stepdown diagram ---------- */
.stepdown {
  background: linear-gradient(180deg, #FCFAF5 0%, var(--cream) 100%);
  border: 1px solid rgba(184, 153, 104, 0.20);
}
.stepdown .step.highlight {
  background: var(--grad-forest);
  box-shadow: 0 6px 14px -4px rgba(30, 51, 41, 0.30);
}

/* ---------- Anchors in body copy ---------- */
main p a {
  background-image: linear-gradient(transparent 60%, rgba(196, 134, 107, 0.22) 60%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: background-size var(--transition), color var(--transition);
}
main p a:hover {
  background-size: 100% 60%;
  color: var(--clay-deep);
}

/* ---------- Tighten section spacing rhythm on long pages ---------- */
section + section { position: relative; }

/* ---------- Accessibility & reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { display: none; }
  body::before, .section-forest::before, .site-footer::after { display: none; }
}

/* ============================================================
   DESIGN SECTIONS — image-driven w/ glass overlay
   Used to break up the solid sections rhythm: solid-design-solid-design-solid
   ============================================================ */
.design-section {
  position: relative;
  isolation: isolate;
  padding: clamp(5rem, 9vw, 8rem) 0;
  background-color: var(--forest-deep, #1f3a30);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ivory);
  overflow: hidden;
}
.design-section::before {
  /* warm tonal wash to keep the imagery cohesive with brand */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(45,74,62,0.35) 0%, rgba(45,74,62,0.10) 45%, rgba(31,58,48,0.35) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(184,153,104,0.14), transparent 60%);
  z-index: 1;
  pointer-events: none;
}
.design-section::after {
  /* soft grain on top of the image for the same atmospheric texture used elsewhere */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}
.design-section > .container,
.design-section > .container-narrow {
  position: relative;
  z-index: 3;
}

/* Glass card — the focal "design within" the section */
.design-card {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.25rem);
  /* TRUE solid surface so the card always reads as a card, regardless of
     whether the browser supports backdrop-filter. Gradient gives a subtle
     ivory → cream warmth that matches the rest of the site. */
  background: linear-gradient(180deg, #FFFDFA 0%, #F5F1EA 100%);
  border: 1px solid rgba(184, 153, 104, 0.55);
  border-radius: 28px;
  color: var(--forest-deep, #1f3a30);
  box-shadow:
    0 40px 90px -25px rgba(20, 36, 30, 0.55),
    0 12px 30px -12px rgba(20, 36, 30, 0.35),
    0 1px 0 rgba(255,255,255,0.9) inset;
}
/* Progressive enhancement: a tiny touch of backdrop-filter on desktop only,
   and ONLY when the desktop is wide enough. iOS Safari unreliably applies
   backdrop-filter on rounded cards, so we keep mobile fully opaque. */
@media (min-width: 1024px) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .design-card {
      background: linear-gradient(180deg, rgba(255,253,250,0.985) 0%, rgba(245,241,234,0.98) 100%);
      backdrop-filter: blur(12px) saturate(140%);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
    }
  }
}
/* Touch of inner translucency hint at the edges */
.design-card::before, .design-card::after { z-index: 1; }
.design-card.align-left { margin-left: 0; margin-right: auto; }
.design-card.align-right { margin-left: auto; margin-right: 0; }

.design-card .eyebrow { color: var(--clay-deep, #a86b50); }
.design-card h2 {
  color: var(--forest-deep, #1f3a30);
  margin: 0.5rem 0 1rem;
}
.design-card h2 em {
  font-style: italic;
  color: var(--clay, #c4866b);
  font-weight: 400;
}
.design-card p { color: rgba(31, 58, 48, 0.86); }
.design-card .dim { color: rgba(31, 58, 48, 0.66); }

/* Gold corner ornaments — inset slightly so they read on a rounded card */
.design-card::before,
.design-card::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold, #b89968);
  pointer-events: none;
  opacity: 0.9;
}
.design-card::before {
  top: 14px; left: 14px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 16px;
}
.design-card::after {
  bottom: 14px; right: 14px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 16px;
}
/* Inner corner accents on opposite corners */
.design-card .corner-tr,
.design-card .corner-bl {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold, #b89968);
  pointer-events: none;
  opacity: 0.9;
}
.design-card .corner-tr {
  top: 14px; right: 14px;
  border-left: 0; border-bottom: 0;
  border-top-right-radius: 16px;
}
.design-card .corner-bl {
  bottom: 14px; left: 14px;
  border-right: 0; border-top: 0;
  border-bottom-left-radius: 16px;
}

/* Feature row inside the glass card */
.design-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(184, 153, 104, 0.35);
}
.design-features .feat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.design-features .feat .label {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-deep, #a86b50);
}
.design-features .feat strong {
  font-family: var(--font-display, "Fraunces", serif);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--forest-deep, #1f3a30);
  line-height: 1.15;
}
.design-features .feat small {
  color: rgba(31, 58, 48, 0.6);
  font-size: 0.85rem;
}

/* Floating decorative chip — small caption that sits over the image */
.design-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: rgba(31, 58, 48, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ivory);
  border: 1px solid rgba(184, 153, 104, 0.45);
  border-radius: 100px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-display, "Fraunces", serif);
}
.design-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold, #b89968);
  box-shadow: 0 0 0 3px rgba(184,153,104,0.25);
}
.design-section .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.75rem;
}

/* Mobile — truly solid card, no backdrop tricks. iOS Safari does not
   reliably composite backdrop-filter with rounded shapes, so we force a
   fully opaque cream surface here. */
@media (max-width: 1023px) {
  .design-section {
    padding: 3.5rem 0;
    background-attachment: scroll !important;
  }
  .design-card {
    padding: 1.75rem 1.25rem;
    border-radius: 22px;
    background: linear-gradient(180deg, #FFFDFA 0%, #F5F1EA 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
      0 24px 60px -18px rgba(20, 36, 30, 0.55),
      0 8px 20px -8px rgba(20, 36, 30, 0.35),
      0 1px 0 rgba(255,255,255,0.9) inset !important;
  }
  .design-card::before, .design-card::after,
  .design-card .corner-tr, .design-card .corner-bl {
    width: 26px; height: 26px;
  }
  .design-card::before { top: 10px; left: 10px; right: auto; bottom: auto; }
  .design-card::after { bottom: 10px; right: 10px; left: auto; top: auto; }
  .design-card .corner-tr { top: 10px; right: 10px; left: auto; bottom: auto; }
  .design-card .corner-bl { bottom: 10px; left: 10px; right: auto; top: auto; }
  .design-features { gap: 1rem; padding-top: 1.25rem; margin-top: 1.25rem; }
  /* Chips: also make them solid on mobile so they're legible over imagery */
  .design-chip {
    background: rgba(31, 58, 48, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Reduced motion: drop parallax everywhere */
@media (prefers-reduced-motion: reduce) {
  .design-section { background-attachment: scroll !important; }
}

/* When card-grid sits inside a design-section, lift it above overlays and
   keep card surfaces opaque against the image */
.design-section .card-grid { position: relative; z-index: 3; }
.design-section .card.condition {
  background: rgba(250, 247, 242, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 153, 104, 0.32);
  box-shadow: 0 18px 50px -20px rgba(20,36,30,0.45);
}
.design-section .card.condition:hover {
  background: rgba(250, 247, 242, 1);
}