/* Tawk.to chat widget position override. Force bottom-right pinning. */
iframe[title="chat widget"] {
  top: auto !important;
  bottom: 20px !important;
}
@media (max-width: 768px) {
  iframe[title="chat widget"] {
    bottom: 12px !important;
    right: 12px !important;
  }
}

:root {
  --bg: #0b0d0c;
  --bg-2: #111411;
  --bg-3: #171a17;
  --ink: #f4f1ea;
  --ink-dim: #c9c4b8;
  --ink-mute: #8a857a;
  --line: #1f211c;
  --line-strong: #2d2f28;
  --accent: #e87f4a;
  --accent-soft: rgba(232, 127, 74, 0.08);
  --accent-ink: #efa76c;
  --emerald: #3b6b52;
  --emerald-soft: rgba(59, 107, 82, 0.08);
  --emerald-ink: #9fd6bb;
  --gold: #caa55a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.container { max-width: 1360px; margin: 0 auto; padding: 0 32px; }
.container-tight { max-width: 960px; margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1600px; margin: 0 auto; padding: 0 32px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.eyebrow::before {
  content: '+';
  display: inline-block;
  color: var(--accent);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(-1px);
}

.display { font-family: 'Fraunces', serif; font-weight: 300; letter-spacing: -0.022em; line-height: 1.3; padding-bottom: 40px; overflow: visible; display: block; }

/* A2P 10DLC SMS consent block. Carrier-grade disclosure pattern. */
.sms-consent-block {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(244, 241, 234, 0.03);
}
.sms-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
}
.sms-consent-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.sms-disclosure {
  margin: 10px 0 0 30px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.sms-disclosure strong {
  color: var(--ink);
  font-weight: 600;
}
.sms-policy-links {
  display: block;
  margin-top: 8px;
}
.sms-policy-links a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.sms-policy-links a:hover { color: var(--ink); }
.field-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: 0;
  text-transform: none;
}

/* Footer legal links row */
.footer-legal-links a {
  color: var(--ink-dim);
  font-size: 13px;
  transition: color 0.2s ease;
}
.footer-legal-links a:hover { color: var(--ink); }

/* NOiC attribution. Subtle, fixed bottom-left on the case-study deploy.
   Only renders when body.noic-portfolio is present. */
body.noic-portfolio .noic-attribution {
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(11, 13, 12, 0.94);
  border: 1px solid rgba(244, 241, 234, 0.14);
  border-radius: 999px;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
body.noic-portfolio .noic-attribution:hover {
  border-color: var(--accent);
  background: rgba(11, 13, 12, 0.92);
}
body.noic-portfolio .noic-attribution-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 127, 74, 0.22);
}
body.noic-portfolio .noic-attribution em {
  color: var(--ink-dim);
  font-style: normal;
  font-weight: 400;
}
body:not(.noic-portfolio) .noic-attribution { display: none; }
.display em { font-style: italic; font-weight: 300; color: var(--accent-ink); }
h1.display { font-size: clamp(48px, 8vw, 128px); }
h2.display { font-size: clamp(38px, 6vw, 88px); }
h3.display { font-size: clamp(28px, 3.5vw, 48px); }
h4.display { font-size: clamp(22px, 2.2vw, 32px); }

p.body-xl { font-size: 22px; line-height: 1.5; color: var(--ink-dim); font-weight: 300; max-width: 680px; }
p.body-lg { font-size: 19px; line-height: 1.55; color: var(--ink-dim); font-weight: 300; max-width: 640px; }
p.body { color: var(--ink-dim); font-weight: 300; font-size: 16px; max-width: 620px; }
.muted { color: var(--ink-mute); }
.emphasis { color: var(--ink); font-weight: 400; }

.hr {
  width: 100%;
  height: 1px;
  background: var(--line-strong);
  display: block;
  transform-origin: left center;
}

/* Full bleed media panel */
.media-panel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.media-panel-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.03) brightness(0.92);
}
.media-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,13,12,0.55) 0%, rgba(11,13,12,0) 18%, rgba(11,13,12,0) 82%, rgba(11,13,12,0.65) 100%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(11,13,12,0) 40%, rgba(11,13,12,0.35) 100%);
  pointer-events: none;
}
.orbit-mark {
  position: absolute;
  top: 50%; right: 6%;
  transform: translateY(-50%);
  width: 240px; height: 240px;
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 0 18px rgba(0,0,0,0.45));
}

/* Page spine. Editorial vertical rail. */
.page-spine {
  position: fixed;
  left: 4px;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 92px 0 32px;
  pointer-events: none;
}
.page-spine .spine-mark {
  width: 34px; height: 34px;
  display: block;
  pointer-events: auto;
  transition: transform 0.4s ease;
}
.page-spine .spine-mark:hover { transform: rotate(-6deg) scale(1.05); }
.page-spine .spine-mark img { width: 100%; height: 100%; display: block; }
.page-spine .spine-column {
  flex: 1;
  width: 80px;
  margin: 14px 0 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
  min-height: 0;
}
.page-spine .spine-img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  opacity: 0.45;
  filter: drop-shadow(0 0 10px rgba(59, 107, 82, 0.32));
  transform-origin: top center;
  transform: scaleY(0.7);
  transition: filter 0.45s cubic-bezier(0.33, 1, 0.68, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform, filter, opacity;
  -webkit-user-drag: none;
  user-select: none;
}
.page-spine .spine-column.crack .spine-img {
  animation: spine-crack 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes spine-crack {
  0%   { filter: drop-shadow(0 0 6px rgba(59, 107, 82, 0.18)) brightness(1); }
  35%  { filter: drop-shadow(0 0 14px rgba(232, 127, 74, 0.85)) brightness(1.18); }
  65%  { filter: drop-shadow(0 0 10px rgba(59, 107, 82, 0.5)) brightness(1.05); }
  100% { filter: drop-shadow(0 0 6px rgba(59, 107, 82, 0.18)) brightness(1); }
}
.page-spine .spine-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  width: 80px;
}
.page-spine .spine-align {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  color: var(--emerald-ink);
  line-height: 1;
}
.page-spine .spine-align .align-pct { font-size: 20px; letter-spacing: -0.02em; }
.page-spine .spine-align .align-unit { font-size: 10px; color: var(--ink-mute); }
.page-spine .align-label {
  font-family: 'Inter', sans-serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
  width: max-content;
  color: var(--ink-mute);
  text-transform: uppercase;
}
@media (max-width: 960px) { .page-spine { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .page-spine .spine-dot { animation: none; }
}
/* Reserve a left rail for the spine so headlines, cards, and footer copy
   never sit under the translucent column. The padding scales down as the
   viewport widens, since the container's auto-centering already provides
   clearance on wide screens. Full-bleed section backgrounds stay
   edge-to-edge because the padding is on the inner container. */
@media (min-width: 961px) {
  .container,
  .container-tight,
  .container-wide,
  footer,
  nav.top {
    padding-left: max(32px, min(152px, calc(152px - (100vw - 1360px) / 2)));
  }
}

/* Hero P+ mark float */
.hero-mark-float {
  position: absolute;
  top: 90px; right: 6vw;
  width: 180px; height: 180px;
  opacity: 0.14;
  pointer-events: none;
  animation: hero-mark-drift 18s ease-in-out infinite;
  z-index: 1;
}
@keyframes hero-mark-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(4deg); }
}

/* Rotating Physio+ seal */
.hero-seal {
  position: absolute;
  top: 130px;
  right: 5vw;
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.95;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.5));
}
@media (max-width: 900px) {
  .hero-seal { width: 140px; height: 140px; top: 110px; right: 4vw; }
}
@media (max-width: 520px) {
  .hero-seal { width: 110px; height: 110px; top: 92px; }
}
@media (max-width: 720px) {
  .hero-mark-float { width: 110px; height: 110px; top: 70px; right: 4vw; opacity: 0.1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark-float { animation: none; }
}
.orbit-mark .orbit-ring {
  animation: orbit-spin 22s linear infinite;
  transform-origin: 50% 50%;
}
.orbit-mark .orbit-ring-2 {
  animation: orbit-spin-rev 34s linear infinite;
  transform-origin: 50% 50%;
}
.orbit-mark text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  font-weight: 500;
  fill: var(--ink);
  text-transform: uppercase;
}
@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (max-width: 720px) {
  .orbit-mark { width: 140px; height: 140px; right: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-mark .orbit-ring, .orbit-mark .orbit-ring-2 { animation: none; }
}
.media-caption {
  position: absolute;
  left: 32px;
  bottom: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.media-caption::before {
  content: '+';
  display: inline-block;
  color: var(--accent);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(-1px);
}
@media (min-width: 900px) {
  .media-panel-img { max-height: 520px; object-fit: cover; object-position: center 30%; }
}

/* Nav */
nav.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 8px 32px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(11, 13, 12, 0.94);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s, border-color 0.3s;
}
.logo { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }
.logo em { color: var(--accent); font-style: normal; }
.nav-links { display: flex; gap: 36px; align-items: center; font-size: 13px; font-weight: 500; }
.nav-links a { color: var(--ink-dim); transition: color 0.2s; position: relative; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -22px; left: 0; right: 0;
  height: 1px;
  background: var(--accent);
}
@media (max-width: 820px) {
  .nav-links a:not(.btn):not(.btn-ghost) { display: none; }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  background: var(--accent);
  color: #1a0e08;
  font-size: 13px; font-weight: 600;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s;
}
.btn:hover { transform: translateY(-1px); background: #f19968; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  background: transparent;
  color: var(--ink);
  font-size: 13px; font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  transition: border-color 0.2s, transform 0.2s;
}
.btn-ghost:hover { border-color: var(--ink-mute); transform: translateY(-1px); }

.arrow { width: 14px; height: 14px; display: inline-block; transition: transform 0.2s; }
.arrow::after { content: '→'; }
a:hover .arrow, button:hover .arrow { transform: translateX(3px); }

/* Reveal */
.reveal { opacity: 0; }
.split-line { display: block; padding-bottom: 0.32em; margin-bottom: -0.32em; }
.split-line > span { display: inline-block; transform: translateY(110%); }

/* Sections */
section {
  padding: 140px 0;
  position: relative;
}
section + section { border-top: 1px solid var(--line); }
.section-hero {
  padding: 200px 0 120px;
  position: relative;
  overflow: hidden;
}
.section-label {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
}
.section-num {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}
.section-divider {
  width: 100%;
  height: 1px;
  background: var(--line-strong);
  margin: 0 auto;
}

/* Hero ambient */
.hero-ambient {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 1100px 600px at 75% 25%, rgba(232, 127, 74, 0.13), transparent 60%),
    radial-gradient(ellipse 800px 500px at 15% 80%, rgba(59, 107, 82, 0.10), transparent 60%);
  pointer-events: none;
}

/* Cards */
.card {
  padding: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: border-color 0.3s, transform 0.3s;
}
.card:hover { border-color: var(--line-strong); }

/* Marquee */
.marquee {
  overflow: hidden;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.marquee-inner {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--ink-mute);
}
.marquee-inner span { display: inline-flex; align-items: center; gap: 60px; }
.marquee-inner em { color: var(--accent); font-style: italic; font-weight: 400; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 48px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.stat-num em { color: var(--accent); font-style: italic; font-weight: 300; }
.stat-label {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 16px;
  line-height: 1.4;
  max-width: 280px;
}

/* Pillars / feature list */
.pillar-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.pillar-item {
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  transition: padding-left 0.4s ease;
}
@media (min-width: 900px) {
  .pillar-item { grid-template-columns: 80px 1.1fr 2fr 200px; gap: 48px; align-items: baseline; }
  .pillar-item.pillar-faq { grid-template-columns: 1fr 2fr; gap: 64px; }
  .pillar-item.pillar-three { grid-template-columns: 80px 1.1fr 2fr; gap: 48px; }
  .pillar-item.pillar-two { grid-template-columns: 120px 1fr; gap: 48px; align-items: baseline; }
  .pillar-row.pillar-flow .pillar-item { grid-template-columns: 120px 1fr; gap: 48px; align-items: baseline; }
}
.pillar-row.pillar-flow .pillar-item .pillar-title { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; }
.pillar-row.pillar-flow .pillar-item .pillar-meta { order: -1; font-family: 'Fraunces', serif; font-size: 13px; color: var(--accent); margin-top: 0 !important; text-align: left !important; }

/* Hero info grid (hours, phone, text) */
.hero-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, auto));
  gap: 0;
  margin-top: 48px;
  max-width: 820px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-info-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 28px 22px 0;
  border-right: 1px solid var(--line);
}
.hero-info-item:first-child { padding-left: 0; }
.hero-info-item:not(:first-child) { padding-left: 28px; }
.hero-info-item:last-child { border-right: none; }
.hero-info-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero-info-value {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.hero-info-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-info-stack span {
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--ink-dim);
}
.hero-info-link {
  display: inline-block;
  transition: color 0.2s ease;
  text-decoration: none;
}
.hero-info-link:hover { color: var(--accent); }
@media (max-width: 720px) {
  .hero-info-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
  .hero-info-item {
    padding: 18px 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .hero-info-item:last-child { border-bottom: none; }
  .hero-info-item:not(:first-child) { padding-left: 0; }
}

/* Google reviews section */
.reviews-section {
  position: relative;
  padding: 96px 0;
  background: radial-gradient(1200px 600px at 30% 40%, rgba(232, 127, 74, 0.05), transparent 70%), var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.reviews-section .reviews-wrap {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: center;
}
.reviews-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 12px;
}
.reviews-summary .rs-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.reviews-summary .rs-headline {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 6px;
}
.reviews-summary .rs-stars {
  display: flex;
  gap: 2px;
  color: #f7c948;
  font-size: 24px;
  line-height: 1;
  margin-top: 4px;
}
.reviews-summary .rs-count {
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 4px;
}
.reviews-summary .rs-count strong {
  color: var(--ink);
  font-weight: 600;
}
.reviews-summary .rs-google {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.reviews-summary .rs-google span:nth-child(1) { color: #4285F4; }
.reviews-summary .rs-google span:nth-child(2) { color: #EA4335; }
.reviews-summary .rs-google span:nth-child(3) { color: #FBBC05; }
.reviews-summary .rs-google span:nth-child(4) { color: #4285F4; }
.reviews-summary .rs-google span:nth-child(5) { color: #34A853; }
.reviews-summary .rs-google span:nth-child(6) { color: #EA4335; }

.reviews-track-wrap {
  overflow: hidden;
  position: relative;
  padding: 4px 0 18px;
  mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
}
.reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 340px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  will-change: transform;
}
.reviews-track::-webkit-scrollbar { height: 8px; }
.reviews-track::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
.reviews-track.reviews-track-marquee {
  overflow: visible;
  scroll-snap-type: none;
  scrollbar-width: none;
  padding: 4px 0;
  width: max-content;
}
.reviews-track.reviews-track-marquee::-webkit-scrollbar { display: none; }

.review-card {
  scroll-snap-align: start;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  transition: border-color 0.2s ease, transform 0.3s ease;
}
.review-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.review-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--emerald), var(--accent));
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 18px;
  flex-shrink: 0;
}
.review-identity {
  flex: 1;
  min-width: 0;
}
.review-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
}
.review-date {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.review-google {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  background: conic-gradient(from 0deg, #4285F4 0 25%, #EA4335 0 50%, #FBBC05 0 75%, #34A853 0 100%);
  flex-shrink: 0;
}
.review-google::before {
  content: 'G';
  background: #1a1d1a;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--ink);
}
.review-stars {
  display: flex;
  align-items: center;
  gap: 6px;
}
.review-stars .stars {
  display: flex;
  gap: 1px;
  color: #f7c948;
  font-size: 15px;
  line-height: 1;
}
.review-verified {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4285F4;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}
.review-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  font-family: 'Inter', sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.review-more {
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.04em;
  font-weight: 500;
}
@media (max-width: 860px) {
  .reviews-section .reviews-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .reviews-summary { padding: 0; }
}
.pillar-item:hover { padding-left: 16px; }
.pillar-num {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  color: var(--accent);
  font-weight: 400;
}
.pillar-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.pillar-desc {
  font-size: 16px;
  color: var(--ink-dim);
  font-weight: 300;
  line-height: 1.55;
}
.pillar-meta {
  font-size: 11px;
  color: var(--ink-mute);
  text-align: right;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Quote */
blockquote.pull {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  padding: 32px 0;
  max-width: 1100px;
}
blockquote.pull em { font-style: italic; color: var(--accent-ink); }
blockquote.pull cite {
  display: block;
  margin-top: 40px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-style: normal;
  color: var(--ink-mute);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Tier cards */
.tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }
.tier {
  padding: 44px 36px 36px;
  border: 1px solid var(--line);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-2);
  transition: border-color 0.3s;
}
.tier:hover { border-color: var(--line-strong); }
.tier.highlight { border-color: rgba(232, 127, 74, 0.5); background: rgba(232, 127, 74, 0.03); }
.tier-badge {
  position: absolute; top: -12px; left: 36px;
  padding: 5px 14px; background: var(--accent); color: #1a0e08;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em;
  border-radius: 999px;
}
.tier-name { font-family: 'Fraunces', serif; font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -0.015em; }
.plus-mark { color: var(--accent); font-style: italic; font-family: 'Fraunces', serif; font-weight: 400; }
.sub { color: var(--emerald-ink); font-style: italic; font-family: 'Fraunces', serif; font-weight: 400; }
.sub-brand { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: -0.015em; }
.tier-desc { margin-top: 10px; font-size: 14px; color: var(--ink-mute); }
.tier-price { margin-top: 32px; display: flex; align-items: baseline; gap: 8px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.tier-price .big { font-family: 'Fraunces', serif; font-size: 60px; font-weight: 300; letter-spacing: -0.025em; }
.tier-price .unit { font-size: 13px; color: var(--ink-mute); }
.tier ul { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tier ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-dim); line-height: 1.5; }
.tier ul li::before {
  content: ''; margin-top: 9px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.tier .btn { margin-top: 36px; justify-content: center; width: 100%; }
.tier .btn-ghost { margin-top: 36px; justify-content: center; width: 100%; }

/* Page hero styles (tier pages) */
.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
  align-items: start;
}
@media (min-width: 960px) { .hero-split { grid-template-columns: 1.25fr 1fr; gap: 80px; } }
.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 12px;
}
.hero-meta-item { padding: 20px 0; border-top: 1px solid var(--line); }
.hero-meta-item:last-child { border-bottom: 1px solid var(--line); }
.hero-meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute); margin-bottom: 8px; }
.hero-meta-value { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 400; line-height: 1.2; }
.hero-meta-value em { color: var(--accent); font-style: italic; }

/* Testimonial spot */
.testimonial {
  padding: 56px 40px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  position: relative;
}
.testimonial::before {
  content: '"';
  position: absolute;
  top: 20px; left: 40px;
  font-family: 'Fraunces', serif;
  font-size: 100px;
  color: var(--accent);
  opacity: 0.15;
  line-height: 1;
}
.testimonial .quote {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
}
.testimonial .attr {
  margin-top: 32px;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.testimonial-placeholder-label {
  display: inline-block;
  margin-bottom: 20px;
  padding: 4px 10px;
  background: rgba(202, 165, 90, 0.1);
  border: 1px solid rgba(202, 165, 90, 0.3);
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 4px;
  font-weight: 500;
}

/* Review block */
.review-block {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-2);
}
.review-stars { color: var(--accent); font-size: 14px; letter-spacing: 3px; }
.review-quote { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 400; line-height: 1.35; margin-top: 14px; }
.review-attr { margin-top: 20px; font-size: 12px; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; }

/* Footer */
footer {
  padding: 80px 32px 48px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.footer-grid {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-col .footer-sub {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
@media (min-width: 961px) {
  .footer-grid > .footer-col:first-child {
    background: rgba(11, 13, 12, 0.9);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 28px;
    align-self: start;
  }
}
.footer-col h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-bottom: 16px;
  font-weight: 500;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--ink-dim); transition: color 0.2s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  max-width: 1360px;
  margin: 64px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-mute);
}
.footer-bottom .disclaimer { max-width: 720px; }

/* Grain */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.9'/></svg>");
}

/* Article (blog) specific */
article.post { padding-top: 160px; }
article.post .post-header { padding-bottom: 80px; border-bottom: 1px solid var(--line); }
article.post .post-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-mute);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 32px;
}
article.post h1.display { font-size: clamp(42px, 6vw, 84px); }
article.post .byline {
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
  font-size: 13px;
}
article.post .byline strong { color: var(--ink); font-weight: 500; }
article.post .byline .creds { color: var(--accent); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

.post-body { padding: 80px 0; max-width: 760px; margin: 0 auto; }
.post-body > * + * { margin-top: 24px; }
.post-body h2 {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.15; letter-spacing: -0.015em;
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.post-body h3 {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: 24px; line-height: 1.25;
  margin-top: 48px;
}
.post-body p { font-size: 18px; line-height: 1.7; color: var(--ink-dim); font-weight: 400; }
.post-body p.lead { font-size: 22px; line-height: 1.55; color: var(--ink); font-weight: 400; }
.post-body p em { color: var(--ink); font-style: italic; }
.post-body ul, .post-body ol { padding-left: 24px; color: var(--ink-dim); font-size: 18px; line-height: 1.7; }
.post-body ul li, .post-body ol li { margin-top: 10px; }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 15px;
}
.post-body table th, .post-body table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.post-body table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  font-weight: 500;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.post-body table td { color: var(--ink-dim); }
.post-body .key-fact {
  padding: 28px 32px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  margin: 40px 0;
}
.post-body .key-fact .label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 8px;
}
.post-body .key-fact p { font-size: 18px; color: var(--ink); font-weight: 400; margin: 0; }
.post-body .callout {
  padding: 28px 32px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 40px 0;
}
.post-body .sources {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--line-strong);
}
.post-body .sources h2 { margin-top: 0; padding-top: 0; border: none; }
.post-body .sources ol { font-size: 14px; line-height: 1.6; }

/* Blog index */
.blog-index { padding-top: 160px; }
.post-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s ease;
}
@media (min-width: 900px) {
  .post-card { grid-template-columns: 120px 1fr 260px; gap: 48px; align-items: baseline; }
}
.post-card:hover { padding-left: 16px; }
.post-card-meta { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; }
.post-card h3 { font-family: 'Fraunces', serif; font-size: clamp(24px, 3vw, 36px); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; }
.post-card p { font-size: 14px; color: var(--ink-dim); margin-top: 12px; }
.post-card .read-time { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; text-align: right; }

/* Blog article extended */
.breadcrumb { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; }
.breadcrumb a { color: var(--ink-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin: 0 8px; color: var(--line-strong); }

article.post .post-meta { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; font-size: 13px; color: var(--ink-mute); letter-spacing: 0.02em; }
article.post .post-meta .post-byline { color: var(--ink-dim); }
article.post .post-meta .post-date { color: var(--ink-mute); }

.post-keyfacts { padding: 48px 0; }
.keyfacts-card {
  background: linear-gradient(180deg, rgba(59,107,82,0.12), rgba(59,107,82,0.04));
  border: 1px solid rgba(59,107,82,0.35);
  border-radius: 22px;
  padding: 36px 40px;
}
.keyfacts-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--emerald-ink); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 18px; }
.keyfacts-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.keyfacts-card ul li { font-size: 16px; line-height: 1.6; color: var(--ink-dim); padding-left: 18px; position: relative; }
.keyfacts-card ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--emerald-ink); border-radius: 50%; }
.keyfacts-card ul li strong { color: var(--ink); font-weight: 500; }

.post-toc { padding: 16px 0 32px; }
.toc-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 16px; }
.toc-list { list-style: decimal; padding-left: 20px; color: var(--ink-dim); font-size: 14px; line-height: 1.9; columns: 1; }
@media (min-width: 700px) { .toc-list { columns: 2; column-gap: 40px; } }
.toc-list a { color: var(--ink-dim); text-decoration: none; transition: color 0.2s; }
.toc-list a:hover { color: var(--accent); }
.toc-list li::marker { color: var(--ink-mute); }

.post-body h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.015em; line-height: 1.22; margin-top: 72px; padding-top: 32px; padding-bottom: 0.4em; border-top: 1px solid var(--line); color: var(--ink); }
.post-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.post-body h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.01em; line-height: 1.2; margin-top: 40px; color: var(--ink); }
.post-body .post-list { padding-left: 22px; }
.post-body .post-list li { margin-top: 14px; }

.post-cta { padding: 80px 0; }
.cta-card {
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  padding: 56px 48px;
  background:
    radial-gradient(ellipse 500px 200px at 20% 0%, rgba(232,127,74,0.12), transparent 60%),
    radial-gradient(ellipse 500px 200px at 90% 100%, rgba(59,107,82,0.10), transparent 60%),
    var(--bg-2);
}
.cta-card .eyebrow { margin-bottom: 0; }

.post-related { padding: 60px 0 40px; border-top: 1px solid var(--line); }
.related-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--ink-mute); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 28px; }
.related-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .related-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.related-card { display: block; padding: 32px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); transition: border-color 0.25s, transform 0.25s; }
.related-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.related-eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 12px; }
.related-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.related-meta { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 14px; }

.post-source { padding: 50px 0 120px; border-top: 1px solid var(--line); }
.post-source-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 20px; }
.post-source-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; color: var(--ink-mute); font-size: 14px; line-height: 1.6; }
.post-source-list li::before { content: '·'; color: var(--accent); margin-right: 10px; }
.post-disclaimer { margin-top: 28px; padding-top: 24px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-mute); line-height: 1.6; font-style: italic; }

/* Intake form */
.intake-shell { min-height: 100vh; padding: 140px 0 120px; }
.intake-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 40px; }
.intake-progress .dot { height: 4px; flex: 1; background: var(--line-strong); border-radius: 2px; overflow: hidden; position: relative; transition: background 0.3s; }
.intake-progress .dot.active { background: var(--accent); }
.intake-progress .dot.done { background: var(--emerald); }
.intake-step-label { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; }
.intake-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 56px 48px;
}
@media (max-width: 700px) { .intake-card { padding: 36px 24px; } }
.intake-step { display: none; }
.intake-step.active { display: block; }
.intake-step h2 { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(30px, 4vw, 48px); line-height: 1.22; letter-spacing: -0.02em; padding-bottom: 0.4em; color: var(--ink); margin-bottom: 12px; }
.intake-step h2 em { color: var(--accent-ink); font-style: italic; }
.intake-step .step-sub { font-size: 16px; color: var(--ink-mute); margin-bottom: 36px; line-height: 1.5; }

.form-grid { display: grid; gap: 20px; }
.form-grid.two { grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.form-grid.three { grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-grid.three { grid-template-columns: repeat(3, 1fr); } }

.field label { display: block; font-size: 12px; color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.field .hint { font-size: 12px; color: var(--ink-mute); letter-spacing: 0; text-transform: none; font-weight: 400; margin-top: 6px; font-style: italic; opacity: 0.75; }
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field .unit-input { position: relative; }
.field .unit-input .unit { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-mute); pointer-events: none; letter-spacing: 0.05em; }
.field .unit-input input { padding-right: 64px; }

.radio-group { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .radio-group.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 600px) { .radio-group.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.radio-option {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.radio-option input { position: absolute; opacity: 0; }
.radio-option .rtitle { font-size: 15px; font-weight: 500; color: var(--ink); }
.radio-option .rdesc { font-size: 13px; color: var(--ink-mute); margin-top: 4px; line-height: 1.4; }
.radio-option:has(input:checked) { border-color: var(--accent); background: rgba(232, 127, 74, 0.07); }
.radio-option:hover { border-color: var(--ink-mute); }

.file-drop {
  border: 2px dashed var(--line-strong);
  border-radius: 18px;
  padding: 48px 24px;
  text-align: center;
  background: var(--bg);
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
  position: relative;
}
.file-drop:hover { border-color: var(--accent); background: rgba(232, 127, 74, 0.04); }
.file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop .fd-icon { font-size: 32px; color: var(--accent); margin-bottom: 12px; font-family: 'Fraunces', serif; }
.file-drop .fd-primary { font-size: 16px; color: var(--ink); font-weight: 500; margin-bottom: 6px; }
.file-drop .fd-secondary { font-size: 13px; color: var(--ink-mute); }
.file-drop.filled { border-color: var(--emerald); background: rgba(59, 107, 82, 0.05); }
.file-drop.filled .fd-primary { color: var(--emerald-ink); }

.intake-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; gap: 12px; flex-wrap: wrap; }
.intake-nav .btn-back { background: none; border: 1px solid var(--line-strong); color: var(--ink-dim); padding: 14px 24px; border-radius: 999px; font-size: 14px; letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.intake-nav .btn-back:hover { border-color: var(--ink-dim); color: var(--ink); }
.intake-nav .btn-back[disabled] { opacity: 0.3; cursor: not-allowed; }

.review-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.review-row { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.review-row .rlabel { color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 600; }
.review-row .rval { color: var(--ink); }

.done-card { text-align: center; padding: 32px 0; }
.done-card .done-icon { font-family: 'Fraunces', serif; color: var(--emerald-ink); font-size: 64px; font-style: italic; margin-bottom: 16px; }
.done-card h2 { margin-bottom: 18px; }
.done-card p { color: var(--ink-dim); font-size: 18px; line-height: 1.55; max-width: 520px; margin: 0 auto; }

/* Horizontal scroll tier comparison */
.comparison-scroll {
  padding: 140px 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.comparison-track {
  display: flex;
  gap: 24px;
  padding: 0 32px;
  will-change: transform;
}
.comparison-card {
  flex: 0 0 320px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-2);
}
.comparison-card h4 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; line-height: 1.1; }
.comparison-card .label { font-size: 10px; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; font-weight: 600; }
.comparison-card p { font-size: 14px; color: var(--ink-dim); margin-top: 16px; }

/* Marketing page specific */
.channel-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
@media (min-width: 760px) { .channel-matrix { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .channel-matrix { grid-template-columns: repeat(3, 1fr); } }
.channel {
  padding: 36px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
  transition: background 0.3s;
}
.channel:hover { background: var(--bg-3); }
.channel .abbr {
  font-family: 'Fraunces', serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500;
}
.channel h4 { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 400; line-height: 1.15; }
.channel p { font-size: 14px; color: var(--ink-dim); line-height: 1.55; }

/* Timeline */
.timeline {
  position: relative;
  padding: 40px 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line-strong);
}
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
@media (max-width: 820px) { .timeline-grid { grid-template-columns: 1fr 1fr; } }
.timeline-item {
  background: var(--bg);
  padding: 24px 8px;
}
.timeline-week { font-family: 'Fraunces', serif; font-size: 36px; color: var(--accent); font-weight: 300; }
.timeline-item h5 { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 400; margin-top: 8px; line-height: 1.2; }
.timeline-item p { font-size: 13px; color: var(--ink-dim); margin-top: 8px; }

/* Utility */
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 32px; }
.mt-lg { margin-top: 64px; }
.mt-xl { margin-top: 120px; }
.text-accent { color: var(--accent); }
.text-emerald { color: var(--emerald-ink); }
.flex-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 820px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* LinkedIn ad mock */
.ad-mock {
  max-width: 480px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-2);
  font-family: 'Inter', sans-serif;
}
.ad-mock .ad-header { display: flex; gap: 12px; align-items: center; }
.ad-mock .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #1a0e08; display: grid; place-items: center; font-weight: 700; font-family: 'Fraunces', serif; font-size: 20px; }
.ad-mock .ad-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.ad-mock .ad-sub { font-size: 12px; color: var(--ink-mute); }
.ad-mock .sponsored { font-size: 11px; color: var(--ink-mute); margin-left: auto; }
.ad-mock .ad-copy { font-size: 14px; color: var(--ink-dim); line-height: 1.55; margin-top: 16px; }
.ad-mock .ad-copy strong { color: var(--ink); font-weight: 600; }
.ad-mock .ad-card {
  margin-top: 16px;
  padding: 20px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.ad-mock .ad-card .small { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; }
.ad-mock .ad-card .big { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; margin-top: 8px; line-height: 1.15; }
.ad-mock .ad-card button { margin-top: 16px; padding: 10px 18px; background: var(--accent); color: #1a0e08; border-radius: 6px; font-size: 13px; font-weight: 600; }

/* Reviews */
.reviews-wrap { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
@media (min-width: 820px) { .reviews-wrap { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.review-card {
  padding: 32px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.review-card:hover { border-color: var(--emerald); transform: translateY(-3px); }
.review-card .stars { display: flex; gap: 3px; color: var(--accent); font-size: 14px; letter-spacing: 2px; }
.review-card .review-body { font-family: 'Fraunces', serif; font-size: 19px; line-height: 1.45; color: var(--ink); font-weight: 300; font-style: italic; }
.review-card .review-body::before { content: '"'; color: var(--emerald-ink); font-size: 42px; line-height: 0; margin-right: 4px; vertical-align: -14px; font-family: 'Fraunces', serif; }
.review-card .reviewer { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.review-card .reviewer-name { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.review-card .reviewer-meta { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; }
.review-card .review-tier { position: absolute; top: 20px; right: 20px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--emerald-ink); font-weight: 600; }
.reviews-note { margin-top: 32px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); text-align: center; }

/* Featured pull-quote testimonial */
.review-featured {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  align-items: start;
  background: #0e100e;
  border: 1px solid rgba(244,241,234,0.08);
  border-top: 3px solid var(--accent);
  border-radius: 20px;
  padding: 52px;
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
}
.review-featured::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  right: 48px;
  font-family: 'Fraunces', serif;
  font-size: 160px;
  line-height: 1;
  color: rgba(232,127,74,0.10);
  pointer-events: none;
  user-select: none;
}
.review-featured-photo {
  position: relative;
  width: 200px;
  height: 248px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(244,241,234,0.10);
}
.review-featured-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.review-featured-body { display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
.review-featured-stars { color: var(--accent); font-size: 20px; letter-spacing: 4px; }
.review-featured-quote {
  font-family: 'Fraunces', serif;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 300;
  line-height: 1.65;
  color: #f4f1ea;
  font-style: italic;
}
.review-featured-attr {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(244,241,234,0.10);
}
.review-featured-attr-divider { width: 1px; height: 28px; background: rgba(244,241,234,0.15); flex-shrink: 0; }
.review-featured-name { font-size: 15px; font-weight: 600; color: #f4f1ea; letter-spacing: 0.02em; }
.review-featured-role { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(244,241,234,0.45); margin-top: 3px; }
.review-featured-company { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); margin-top: 3px; }
@media (max-width: 720px) {
  .review-featured { grid-template-columns: 1fr; padding: 36px 28px; gap: 32px; }
  .review-featured-photo { width: 120px; height: 148px; }
  .review-featured::before { font-size: 100px; right: 20px; }
}
.reviews-aggregate { display: flex; align-items: baseline; gap: 20px; margin-top: 24px; }
.reviews-aggregate .agg-score { font-family: 'Fraunces', serif; font-size: 64px; font-weight: 300; color: var(--accent); line-height: 1; letter-spacing: -0.02em; }
.reviews-aggregate .agg-body { display: flex; flex-direction: column; gap: 4px; }
.reviews-aggregate .agg-stars { color: var(--accent); font-size: 18px; letter-spacing: 2px; }
.reviews-aggregate .agg-count { font-size: 13px; color: var(--ink-dim); }

/* Nav dropdown */
.nav-links .nav-item { position: relative; }
.nav-links .nav-item.has-dropdown > a::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
}
.nav-links .nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: -18px;
  min-width: 240px;
  padding: 14px 0;
  background: rgba(17, 20, 17, 0.985);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 110;
}
.nav-links .nav-dropdown a {
  padding: 10px 22px;
  font-size: 13px;
  color: var(--ink-dim);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav-links .nav-dropdown a:hover { color: var(--ink); background: rgba(232, 127, 74, 0.08); }

.nav-links .nav-dropdown .dd-group-label {
  padding: 10px 22px 4px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  pointer-events: none;
}
.nav-links .nav-dropdown .dd-group-label:not(:first-child) {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.nav-links .nav-dropdown.dd-wide { min-width: 280px; }
.nav-links .nav-dropdown a .dd-price {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: var(--ink-mute);
  font-family: 'Fraunces', serif;
  font-style: italic;
}

/* Mega menu (multi-column Care panel) */
.nav-links .nav-dropdown.dd-mega {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 0;
  min-width: 760px;
  left: -40px;
  padding: 22px 0 18px;
}
.nav-links .nav-dropdown.dd-mega.dd-mega-2 {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  min-width: 520px;
  left: -30px;
}
.nav-links .nav-dropdown.dd-mega .dd-col {
  display: flex;
  flex-direction: column;
  padding: 0 6px;
  border-right: 1px solid var(--line);
}
.nav-links .nav-dropdown.dd-mega .dd-col:last-child { border-right: none; }
.nav-links .nav-dropdown.dd-mega .dd-group-label {
  padding: 2px 22px 10px;
  border-top: none;
  margin-top: 0;
}
.nav-links .nav-dropdown.dd-mega a { padding: 8px 22px; }
.nav-links .nav-dropdown.dd-mega .dd-all {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
}
.nav-links .nav-dropdown.dd-mega .dd-all:hover { color: var(--accent-ink); }
.nav-links .nav-item.has-dropdown:hover > .nav-dropdown,
.nav-links .nav-item.has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 820px) {
  .nav-links .nav-dropdown { display: none; }
}

/* Service cards */
.pathway-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
  padding: clamp(28px, 4vw, 52px);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.pathway-panel-direct {
  background: color-mix(in srgb, var(--emerald) 18%, var(--bg-2));
  border-color: color-mix(in srgb, var(--emerald) 55%, var(--line));
}
.pathway-panel .service-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.pathway-panel .service-name {
  max-width: 18ch;
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.pathway-panel .service-summary {
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-dim);
}
.pathway-panel .service-more {
  margin-top: auto;
  color: var(--ink);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  color: var(--ink);
}

/* Service card with thumbnail — page-matching imagery header */
.service-card-img {
  padding-top: 0;
  overflow: hidden;
  position: relative;
}
.service-card-img::before {
  content: '';
  display: block;
  height: 180px;
  margin: -1px -32px 20px;
  background-image:
    linear-gradient(180deg, rgba(14,16,14,0) 45%, rgba(14,16,14,0.55) 100%),
    linear-gradient(135deg, rgba(232,127,74,0.12) 0%, rgba(232,127,74,0) 65%),
    var(--card-thumb, none);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
  transform: translateZ(0);
}
.service-card-img:hover::before {
  transform: scale(1.04) translateZ(0);
}

/* Image-top variant — used by the conditions pillar tiles. Real <img>
   tags for SEO, accessibility, and lazy loading. Image bleeds to the
   card edges, body restores the standard service-card padding. */
.service-card.service-card-media-top {
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.service-card.service-card-media-top .service-card-media-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid var(--line);
}
.service-card.service-card-media-top .service-card-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  filter: saturate(0.95) brightness(0.94);
}
.service-card.service-card-media-top:hover .service-card-media-frame img {
  transform: scale(1.05);
  filter: saturate(1.02) brightness(1.02);
}
.service-card.service-card-media-top .service-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px 30px;
  flex: 1;
}

.service-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(232,127,74,0.04), rgba(255,255,255,0.005));
}
.service-card .service-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.service-card .service-name {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.service-card .service-summary {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  font-weight: 300;
}
.service-card .service-more {
  margin-top: auto;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}

/* Provider card */
.provider-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
  color: var(--ink);
}
.provider-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.provider-card .provider-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center 15%;
  background-repeat: no-repeat;
  filter: saturate(0.92) contrast(1.04);
}
.provider-card .provider-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.provider-card .provider-name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}
.provider-card .provider-creds {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.provider-card .provider-role {
  font-size: 13px;
  color: var(--ink-mute);
}
.provider-photo-lg {
  display: block;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center 15%;
  background-repeat: no-repeat;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.provider-photo-sm {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-size: cover;
  background-position: center 15%;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.provider-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.provider-tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-weight: 500;
}

/* Location card */
.location-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color 0.25s ease, transform 0.25s ease;
  color: var(--ink);
}
.location-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.location-card .location-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.location-card .location-name {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 6px;
}
.location-card .location-addr {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.55;
}
.location-card .location-hours {
  font-size: 13px;
  color: var(--ink-mute);
}
.location-card .location-contact {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
}
.location-card .location-contact a { color: var(--ink); border-bottom: 1px dashed var(--line-strong); }
.location-card .location-contact a:hover { border-color: var(--accent); color: var(--accent-ink); }
.location-card .location-map {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-top: 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-3);
}
.location-card .location-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.25) contrast(0.95) brightness(0.85);
}
.location-card-full { padding: 40px; }

/* Condition pillar hero, LLM summary */
.condition-pillar-hero { padding-bottom: 80px; }
.condition-pillar-hero .llm-summary {
  margin-top: 40px;
  max-width: 880px;
  padding: 24px 28px;
  border-left: 3px solid var(--emerald);
  background: linear-gradient(90deg, rgba(59,107,82,0.08), rgba(59,107,82,0) 80%);
  border-radius: 0 14px 14px 0;
}
.condition-pillar-hero .llm-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--emerald-ink);
  font-weight: 600;
  margin-bottom: 10px;
}
.condition-pillar-hero .llm-body {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* Medical review byline */
.medical-review-byline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 10px 18px 10px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
}
.medical-review-byline .mrb-photo {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center 15%;
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}
.medical-review-byline .mrb-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}
.medical-review-byline .mrb-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.medical-review-byline .mrb-name { color: var(--ink); font-weight: 500; }
.medical-review-byline .mrb-name a { color: var(--ink); }
.medical-review-byline .mrb-name a:hover { color: var(--accent-ink); }
.medical-review-byline .mrb-date { font-size: 11px; color: var(--ink-mute); }

/* Pillar sidebar cards */
.pillar-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 120px;
}
.sidebar-card {
  padding: 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.sidebar-card .sidebar-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.sidebar-card .sidebar-title {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 400;
  margin-top: 10px;
}
.sidebar-card .sidebar-body {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.55;
  margin: 14px 0 20px;
}

/* Provider row inside sidebar cards. Overrides the global .provider-card
   .provider-photo rule so the span becomes a compact circle instead of a
   full width 4:5 portrait. */
.sidebar-card .provider-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 4px;
}
.sidebar-card .provider-row .provider-photo {
  display: block;
  width: 56px;
  height: 56px;
  aspect-ratio: auto;
  border-radius: 50%;
  background-size: cover;
  background-position: center 15%;
  border: 1px solid var(--line);
  filter: saturate(0.92) contrast(1.04);
  flex-shrink: 0;
}
.sidebar-card .provider-row .sidebar-title {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.15;
  margin-top: 0;
}
.sidebar-card .provider-row .provider-creds {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-top: 4px;
}

/* Related articles section */
.related-articles { border-top: 1px solid var(--line); }
.related-articles .related-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .related-articles .related-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* Contact page */
.contact-side { display: flex; flex-direction: column; gap: 20px; }
.contact-block {
  padding: 24px 28px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.contact-block .contact-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.contact-block .contact-big {
  display: inline-block;
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.contact-block .contact-big:hover { color: var(--accent-ink); }
.contact-block .contact-note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.contact-hours {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: var(--ink-dim);
}
.contact-hours strong { color: var(--ink); font-weight: 500; margin-right: 8px; }

/* Condition pillar FAQ row tweak */
.pillar-item.pillar-faq .pillar-title {
  font-size: clamp(20px, 2.4vw, 28px);
}

/* Library / articles grid on the homepage */
.library-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 960px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .article-grid { grid-template-columns: 1fr; } }
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  color: var(--ink);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.article-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.article-card .article-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-3);
}
.article-card .article-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.article-card:hover .article-media img { transform: scale(1.04); }
.article-card .article-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 26px;
}
.article-card .article-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.article-card .article-title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.article-card .article-meta {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* ============================================================
   Motion design system . Orange + green drift, ribbons, scan
   Layered behind content. All motion honors prefers-reduced-motion.
   ============================================================ */
.motion-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.motion-ambient > * { position: absolute; will-change: transform, opacity; }
.motion-orb {
  width: 560px; height: 560px;
  border-radius: 50%;
  opacity: 0.55;
  mix-blend-mode: screen;
}
.motion-orb-a {
  left: -120px; top: -140px;
  background: radial-gradient(circle at 30% 30%, rgba(232,127,74,0.42), rgba(232,127,74,0.14) 42%, rgba(232,127,74,0) 74%);
  animation: motion-drift-a 22s ease-in-out infinite alternate;
}
.motion-orb-b {
  right: -160px; top: 40px;
  background: radial-gradient(circle at 60% 40%, rgba(59,107,82,0.42), rgba(59,107,82,0.14) 42%, rgba(59,107,82,0) 74%);
  animation: motion-drift-b 28s ease-in-out infinite alternate;
}
.motion-orb-c {
  left: 30%; bottom: -220px;
  width: 720px; height: 720px;
  background: radial-gradient(circle at 50% 50%, rgba(232,127,74,0.24), rgba(59,107,82,0.15) 48%, rgba(0,0,0,0) 76%);
  animation: motion-drift-c 34s ease-in-out infinite alternate;
}
.motion-ribbon {
  position: absolute;
  width: 140%;
  height: 2px;
  left: -20%;
  background: linear-gradient(90deg, rgba(232,127,74,0) 0%, rgba(232,127,74,0.55) 12%, rgba(232,127,74,0.55) 48%, rgba(59,107,82,0.55) 52%, rgba(59,107,82,0.55) 88%, rgba(59,107,82,0) 100%);
  transform-origin: center;
  animation: motion-ribbon-drift 18s ease-in-out infinite alternate;
  opacity: 0.5;
}
.motion-ribbon-a { top: 22%; transform: rotate(-6deg); }
.motion-ribbon-b { top: 68%; transform: rotate(4deg); animation-duration: 24s; animation-delay: -6s; }
.motion-scan {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244,241,234,0.18) 50%, transparent 100%);
  animation: motion-scan-travel 14s linear infinite;
  will-change: transform;
}
.motion-grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(244,241,234,0.04) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(232,127,74,0.05) 1px, transparent 1px);
  background-size: 14px 14px, 22px 22px;
  opacity: 0.4;
}
@keyframes motion-drift-a {
  0%   { transform: translate(0,0) scale(1); opacity: 0.55; }
  50%  { transform: translate(60px, 30px) scale(1.08); opacity: 0.7; }
  100% { transform: translate(20px, 60px) scale(1); opacity: 0.5; }
}
@keyframes motion-drift-b {
  0%   { transform: translate(0,0) scale(1); opacity: 0.5; }
  50%  { transform: translate(-50px, 40px) scale(1.1); opacity: 0.65; }
  100% { transform: translate(-30px, -20px) scale(1); opacity: 0.55; }
}
@keyframes motion-drift-c {
  0%   { transform: translate(0,0) scale(1); opacity: 0.8; }
  50%  { transform: translate(-80px, -40px) scale(1.06); opacity: 1; }
  100% { transform: translate(40px, 20px) scale(1); opacity: 0.85; }
}
@keyframes motion-ribbon-drift {
  0%   { transform: rotate(-6deg) translateY(0); opacity: 0.35; }
  50%  { transform: rotate(-4deg) translateY(18px); opacity: 0.6; }
  100% { transform: rotate(-7deg) translateY(-14px); opacity: 0.45; }
}
@keyframes motion-scan-travel {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes motion-grain-shift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 280px 280px, -220px 340px; }
}

/* Accent frame: thin animated rule that marks a section as "alive" */
.section-alive { position: relative; }
.section-alive > .container { position: relative; z-index: 2; }
.section-alive .motion-ambient { z-index: 1; }
.section-alive::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, rgba(232,127,74,0) 0%, rgba(232,127,74,0.8) 40%, rgba(59,107,82,0.8) 100%);
  animation: section-rule-draw 2.4s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay: 0.15s;
}
@keyframes section-rule-draw {
  from { width: 0; opacity: 0; }
  to   { width: 42%; opacity: 1; }
}

/* Vertical running edge (right side) that pulses orange>green */
.edge-pulse {
  position: absolute;
  top: 12%;
  right: 14px;
  width: 2px;
  height: 76%;
  background: linear-gradient(180deg, rgba(232,127,74,0) 0%, rgba(232,127,74,0.7) 30%, rgba(59,107,82,0.7) 70%, rgba(59,107,82,0) 100%);
  animation: edge-pulse-glow 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.75;
}
@keyframes edge-pulse-glow {
  0%,100% { opacity: 0.35; transform: scaleY(0.9); }
  50%     { opacity: 0.9;  transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-orb, .motion-ribbon, .motion-scan, .motion-grain,
  .section-alive::before, .edge-pulse { animation: none !important; }
}

/* Trust bar: compact row of authority signals for AI Overviews and answer engines.
   Placed beneath hero on hub pages. Reinforces E-E-A-T without taking real estate. */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  align-items: center;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(14, 16, 14, 0.84);
  border: 1px solid rgba(244,241,234,0.14);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.trust-chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(232,127,74,0.8);
}
.trust-chip.green::before { background: #5cb98a; box-shadow: 0 0 10px rgba(92,185,138,0.85); }

/* Image-as-hero: photo as backdrop with darkening gradient so display text stays legible */
.section-hero-image { position: relative; isolation: isolate; overflow: hidden; }
.section-hero-image .hero-ambient { display: none; }
.section-hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: var(--hero-image-pos, center);
  background-repeat: no-repeat;
}
/* Mobile only: dial back the zoom so the full image shows instead of
   a tight horizontal crop. Letterboxes against the section's dark bg. */
@media (max-width: 720px) {
  .section-hero-image::before {
    background-size: auto 100%;
    background-position: center top;
  }
}
.section-hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 16, 14, 0.92) 0%, rgba(14, 16, 14, 0.68) 46%, rgba(14, 16, 14, 0.36) 100%),
    linear-gradient(180deg, rgba(14, 16, 14, 0.18) 0%, rgba(14, 16, 14, 0.6) 82%);
}
.section-hero-image .hero-meta-item {
  background: rgba(14, 16, 14, 0.84);
  border: 1px solid rgba(244, 241, 234, 0.14);
  border-radius: 8px;
  padding: 22px 28px;
}
.section-hero-image .hero-meta-item:last-child { border-bottom: 1px solid rgba(244, 241, 234, 0.14); }

/* Full-bleed visual panel with caption */
.visual-panel-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.visual-panel {
  position: relative;
  margin: 0;
  width: 100%;
  max-height: 72vh;
  overflow: hidden;
}
.visual-panel > img {
  width: 100%;
  height: 100%;
  max-height: 72vh;
  object-fit: cover;
  display: block;
}
.visual-panel .visual-caption {
  position: absolute;
  left: 32px;
  bottom: 28px;
  max-width: 560px;
  padding: 14px 20px;
  background: rgba(14, 16, 14, 0.92);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 720px) {
  .visual-panel .visual-caption {
    left: 16px; right: 16px; bottom: 16px;
    max-width: none;
    font-size: 14px;
  }
}

/* Footer contact block (Phone / Text / Hours) */
.footer-contact {
  display: grid;
  grid-template-columns: 92px 1fr;
  row-gap: 8px;
  column-gap: 14px;
  margin: 4px 0 0;
  padding: 0;
  max-width: 280px;
}
.footer-contact dt {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  align-self: center;
}
.footer-contact dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.45;
  align-self: center;
}
.footer-contact dd a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-contact dd a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* =========================================================================
   PREMIUM DESIGN SYSTEM v14 — Physio+ warm-ambient section treatment
   Applies subtle orange/green depth to sections that would otherwise read flat.
   Card hover physics, aurora dividers, cursor-follow glow on CTAs.
   ======================================================================= */

/* Warm ambient — pure radial gradients, NO blur filter. GPU-cheap. */
.section-warm { position: relative; overflow: hidden; isolation: isolate; content-visibility: auto; contain-intrinsic-size: 800px; }
.section-warm > .container { position: relative; z-index: 2; }
.section-warm::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -14%;
  width: 58%;
  height: 100%;
  background: radial-gradient(ellipse at 30% 40%, rgba(232,127,74,0.085) 0%, rgba(232,127,74,0.04) 30%, rgba(232,127,74,0) 60%);
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
}
.section-warm::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -12%;
  width: 52%;
  height: 92%;
  background: radial-gradient(ellipse at 70% 60%, rgba(59,107,82,0.085) 0%, rgba(59,107,82,0.04) 30%, rgba(59,107,82,0) 60%);
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
}

/* Aurora divider — thin animated rule between major sections */
.aurora-divider {
  position: relative;
  height: 1px;
  margin: 0 auto;
  max-width: min(1440px, 92vw);
  background: linear-gradient(90deg,
    rgba(232,127,74,0) 0%,
    rgba(232,127,74,0.55) 22%,
    rgba(59,107,82,0.55) 78%,
    rgba(59,107,82,0) 100%);
  overflow: visible;
}
.aurora-divider::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 30%;
  width: 40%;
  height: 5px;
  background: radial-gradient(ellipse at center,
    rgba(232,127,74,0.35) 0%,
    rgba(59,107,82,0.2) 50%,
    rgba(59,107,82,0) 100%);
  opacity: 0.9;
  pointer-events: none;
}

/* Card hover physics — lift, subtle tilt, gradient border reveal */
.service-card,
.related-card,
.tier {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s ease;
  will-change: transform;
}
.service-card::after,
.related-card::after,
.tier::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(232,127,74,0) 0%,
    rgba(232,127,74,0.55) 30%,
    rgba(59,107,82,0.55) 70%,
    rgba(59,107,82,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.service-card:hover,
.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(14,16,14,0.28),
              0 4px 12px rgba(232,127,74,0.08);
}
.tier:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 56px rgba(14,16,14,0.32),
              0 6px 16px rgba(59,107,82,0.10);
}
.service-card:hover::after,
.related-card:hover::after,
.tier:hover::after { opacity: 1; }

/* Cursor glow on primary CTAs */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%),
    rgba(244,241,234,0.22) 0%, rgba(244,241,234,0) 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
.btn:hover::before { opacity: 1; }

/* Stat number: add subtle gradient-on-hover for container */
.stats-grid > div { transition: transform 0.3s ease; }
.stats-grid > div:hover { transform: translateY(-2px); }

/* Section internal rhythm (8pt grid reinforcement) */
section { padding-top: var(--space-section, 120px); padding-bottom: var(--space-section, 120px); }
@media (max-width: 768px) {
  section { padding-top: 72px; padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .section-warm::before,
  .section-warm::after,
  .aurora-divider::after { animation: none !important; }
  .service-card:hover,
  .related-card:hover,
  .tier:hover,
  .stats-grid > div:hover { transform: none !important; }
}


/* === Credibility gallery + inline photo callouts === */
.clinic-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 56px;
}
@media (max-width: 1100px) {
  .clinic-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .clinic-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
.clinic-gallery-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  isolation: isolate;
}
.clinic-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04) brightness(0.9);
  transition: transform 0.6s ease, filter 0.4s ease;
}
.clinic-gallery-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,13,12,0) 55%, rgba(11,13,12,0.85) 100%);
  pointer-events: none;
}
.clinic-gallery-tile:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.04) brightness(0.95);
}
.clinic-gallery-cap {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  z-index: 2;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.clinic-gallery-cap::before {
  content: '+';
  color: var(--accent);
  font-family: 'Fraunces', serif;
  font-style: italic;
  margin-right: 6px;
}

/* Inline "in session" callout for service / condition / article body */
.photo-callout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin: 56px 0;
  padding: 0;
}
@media (max-width: 900px) {
  .photo-callout { grid-template-columns: 1fr; gap: 24px; }
}
.photo-callout-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
}
.photo-callout-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04) brightness(0.92);
  display: block;
}
.photo-callout-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,13,12,0.25) 0%, rgba(11,13,12,0) 22%, rgba(11,13,12,0) 80%, rgba(11,13,12,0.45) 100%);
  pointer-events: none;
}
.photo-callout-copy .eyebrow { margin-bottom: 14px; }
.photo-callout-copy h3 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 16px;
}
.photo-callout-copy h3 em { font-style: italic; color: var(--accent-ink); }
.photo-callout-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 520px;
}
.photo-callout.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.photo-callout.reverse .photo-callout-frame { order: 2; }
@media (max-width: 900px) {
  .photo-callout.reverse .photo-callout-frame { order: 0; }
}

/* Mid-article full-bleed image break for blog posts */
.article-photo {
  margin: 48px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  position: relative;
}
.article-photo img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(0.88) contrast(1.04) brightness(0.92);
  display: block;
}
.article-photo-cap {
  padding: 14px 20px;
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
  font-family: 'Fraunces', serif;
  border-top: 1px solid var(--line);
}

/* Built by NOiC footer credit */
.noic-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 0.2s ease;
  color: inherit;
}
.noic-credit:hover { opacity: 1; }
.noic-credit img { height: 16px; width: auto; display: block; }

/* Right-align the Conditions mega dropdown so the third column stays on screen */
.nav-links .nav-dropdown.dd-mega.dd-align-right {
  left: auto;
  right: -40px;
}

/* Staff photos as real img elements (indexable, alt-texted) */
img.provider-photo, img.provider-photo-lg {
  object-fit: cover;
  object-position: center 15%;
}

/* On-this-page table of contents (spec Part 7.3) */
.toc {
  margin: 40px 0 8px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: 720px;
}
.toc-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 12px;
}
.toc ol {
  margin: 0;
  padding-left: 18px;
  columns: 2;
  column-gap: 32px;
}
.toc li { margin: 5px 0; font-size: 14px; line-height: 1.45; break-inside: avoid; }
.toc a { color: var(--ink-mute); text-decoration: none; }
.toc a:hover { color: var(--accent-ink); }
@media (max-width: 720px) { .toc ol { columns: 1; } }
h2[id] { scroll-margin-top: 96px; }

/* ==========================================================================
   INTERACTION LAYER  (added 2026-08-31)
   Cursor-tracked tiles, pinned condition rail, roster rail, review marquee,
   section tone rhythm. Paired with /assets/js/interactions.js.
   ========================================================================== */

:root {
  /* Readable green accent. The existing --emerald (#3b6b52) measures 3.2:1 on
     --bg, which fails AA for anything at body size. This one measures 8.1:1,
     so it is safe for eyebrows, badges, and small labels. */
  --emerald-accent: #5cb98a;
  --emerald-line: rgba(92, 185, 138, 0.22);
  --accent-line: rgba(232, 127, 74, 0.22);
}

/* --------------------------------------------------------------------------
   Section tone rhythm.
   Flipping --accent inside the section re-tones every descendant that already
   reads the token: eyebrow, section number, arrows, hover states, dividers.
   No per-element overrides needed.
   -------------------------------------------------------------------------- */
.tone-green {
  --accent: var(--emerald-accent);
  --accent-soft: rgba(92, 185, 138, 0.08);
  --accent-ink: #8fd9b4;
  --accent-line: var(--emerald-line);
}

/* Alignment variation, so the page stops reading as one long left rail. */
.align-center { text-align: center; }
.align-center .section-label { justify-content: center; }
.align-center .display,
.align-center .body-lg,
.align-center .body-xl { margin-left: auto; margin-right: auto; }
.align-center .flex-row { justify-content: center; }

.align-right { text-align: right; }
.align-right .section-label { justify-content: flex-end; }
.align-right .display,
.align-right .body-lg { margin-left: auto; }
.align-right .flex-row { justify-content: flex-end; }

@media (max-width: 860px) {
  .align-right { text-align: left; }
  .align-right .section-label { justify-content: flex-start; }
  .align-right .display,
  .align-right .body-lg { margin-left: 0; }
  .align-right .flex-row { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Cursor-tracked tiles
   -------------------------------------------------------------------------- */
.tilt-field { perspective: 1400px; }

.tilt-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 38px 36px 34px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(158deg, var(--bg-2) 0%, var(--bg) 100%);
  transform-style: preserve-3d;
  overflow: hidden;
  isolation: isolate;
}

.tilt-tile > * { position: relative; z-index: 2; transform: translateZ(28px); }

/* Pointer-following highlight. Sits under the content, above the panel. */
.tilt-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transform: none;
  background: radial-gradient(
    420px circle at var(--gx, 50%) var(--gy, 50%),
    var(--accent-soft),
    transparent 62%
  );
  transition: opacity 0.35s ease;
}
.tilt-tile.is-tilting { border-color: var(--accent-line); will-change: transform; }
.tilt-tile.is-tilting .tilt-glow { opacity: 1; }

.tilt-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tilt-tile.is-tilting::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tilt-tile { transform: none !important; }
  .tilt-glow { display: none; }
}

/* --------------------------------------------------------------------------
   Pinned horizontal rail
   -------------------------------------------------------------------------- */
.rail {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 72px 0;
}

.rail-head { max-width: 1360px; margin: 0 auto 44px; padding: 0 32px; width: 100%; }

.rail-viewport { width: 100%; overflow: visible; }

.rail-track {
  display: flex;
  gap: 24px;
  padding-left: max(32px, calc((100vw - 1360px) / 2 + 32px));
  will-change: transform;
}

.rail-card {
  position: relative;
  flex: 0 0 340px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: block;
  min-height: 440px;
}

.rail-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.rail-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.rail-card:hover .rail-card-media img,
.rail-card:focus-visible .rail-card-media img {
  transform: scale(1.06);
}

.rail-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(11, 13, 12, 0.97) 6%, rgba(11, 13, 12, 0.78) 46%, rgba(11, 13, 12, 0.52) 100%);
}

.rail-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  justify-content: flex-end;
  padding: 30px 28px 28px;
}

.rail-card-region {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.rail-card-name {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(26px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.rail-card-note { color: var(--ink-dim); font-size: 15px; line-height: 1.5; }
.rail-card-more {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rail-card:hover .rail-card-more .arrow { transform: translateX(5px); }

.rail-progress-shell {
  max-width: 1360px;
  width: 100%;
  margin: 40px auto 0;
  padding: 0 32px;
}
.rail-progress-bar {
  height: 2px;
  background: var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
}
.rail-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.rail-hint {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Under 960px the pin is dropped in JS. Native swipe strip instead. */
.rail.rail-swipe { min-height: 0; padding: 64px 0; }
.rail.rail-swipe .rail-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail.rail-swipe .rail-viewport::-webkit-scrollbar { display: none; }
.rail.rail-swipe .rail-track {
  transform: none !important;
  padding-left: 24px;
  padding-right: 24px;
}
.rail.rail-swipe .rail-card { scroll-snap-align: start; flex-basis: 78vw; min-height: 400px; }
.rail.rail-swipe .rail-progress-shell { display: none; }

/* --------------------------------------------------------------------------
   Roster rail
   -------------------------------------------------------------------------- */
.roster {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
  position: relative;
}

.roster-sticky {
  position: sticky;
  top: 120px;
  align-self: start;
}

.roster-track { position: relative; padding-left: 72px; }

/* The spine: a static hairline with a scrubbed fill on top. */
.roster-spine {
  position: absolute;
  left: 21px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--line-strong);
}
.roster-spine-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
}

.roster-dot {
  position: absolute;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  display: grid;
  place-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease, transform 0.45s ease;
  z-index: 2;
}
.roster-dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: scale(1.08);
}

.roster-card {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 26px 28px;
  margin-bottom: 26px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  transition: border-color 0.45s ease, background 0.45s ease, transform 0.45s ease;
}
.roster-card.is-active {
  border-color: var(--accent-line);
  background: var(--bg-3);
}

.roster-photo {
  width: 132px;
  height: 152px;
  border-radius: 14px;
  object-fit: cover;
  object-position: center 22%;
  background: var(--bg-3);
}

.roster-name {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(24px, 2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.roster-creds {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.roster-role { margin-top: 8px; color: var(--ink-dim); font-size: 14px; line-height: 1.5; }
.roster-focus { margin-top: 10px; color: var(--ink-mute); font-size: 13px; line-height: 1.5; }
.roster-more {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}

/* Background field lines, the quiet version of the NOiC operator spine. */
.roster-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}

@media (max-width: 1080px) {
  .roster { grid-template-columns: 1fr; gap: 44px; }
  .roster-sticky { position: static; }
}
@media (max-width: 620px) {
  .roster-track { padding-left: 0; }
  .roster-spine, .roster-dot { display: none; }
  .roster-card { grid-template-columns: 1fr; gap: 18px; }
  .roster-photo { width: 100%; height: 260px; }
}

/* --------------------------------------------------------------------------
   Review marquee
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: 20px; width: max-content; will-change: transform; }
.marquee.marquee-static { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
.marquee.marquee-static .marquee-track { width: auto; }

.review-card {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.review-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.12em;
}
.review-body {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.62;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.review-author { color: var(--ink); font-weight: 500; letter-spacing: 0; }
.review-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Inline single review, used on condition and service pages. */
.review-inline {
  margin: 40px 0;
  padding: 30px 32px;
  border-radius: 18px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: var(--bg-2);
}
.review-inline .review-body { -webkit-line-clamp: unset; font-size: 16px; }

@media (max-width: 620px) {
  .review-card { flex-basis: 84vw; }
}

/* --------------------------------------------------------------------------
   Article grid: centre the orphan last row.
   Grid cannot centre a short final row, so this switches to flex with the
   same three-up basis. Full rows render identically; a trailing row of one
   or two cards centres itself. Survives adding article 21.
   -------------------------------------------------------------------------- */
.article-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.article-grid > .article-card {
  flex: 0 1 calc((100% - 56px) / 3);
  min-width: 0;
}
@media (max-width: 1024px) {
  .article-grid > .article-card { flex-basis: calc((100% - 28px) / 2); }
}
@media (max-width: 680px) {
  .article-grid > .article-card { flex-basis: 100%; }
}

/* Roster row scaffolding (paired with the roster markup on the homepage). */
.tone-orange { --accent: #e87f4a; }

.roster-row { position: relative; }

.roster-row .roster-dot {
  left: -73px;
  top: 44px;
}

.roster-copy { display: flex; flex-direction: column; min-width: 0; }
.roster-copy .roster-name,
.roster-copy .roster-creds,
.roster-copy .roster-role,
.roster-copy .roster-focus,
.roster-copy .roster-more { display: block; }
.roster-copy .roster-more { display: inline-flex; align-self: flex-start; }

@media (max-width: 620px) {
  .roster-row .roster-dot { display: none; }
}

/* Topic-routed review slot on condition and service pages. */
.review-slot { display: block; }
.review-slot .review-inline { max-width: 900px; }

/* Membership tier ladders and the cash rate table. Real prices, confirmed by
   Logan 2026-09-02. */
.tier-ladder { list-style: none; margin: 14px 0 18px; padding: 0; border-top: 1px solid var(--line); }
.tier-ladder li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.tier-ladder .freq { color: var(--ink-dim); }
.tier-ladder .amt { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.tier-ladder .amt .per { color: var(--ink-mute); font-weight: 400; font-size: 12px; margin-left: 4px; }

.rate-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.rate-table th, .rate-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rate-table th { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.rate-table td:first-child { color: var(--ink); }
.rate-table .amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate-table .save { display: block; font-size: 12px; color: var(--emerald-accent); margin-top: 3px; }
.rate-note { margin-top: 16px; font-size: 14px; color: var(--ink-mute); line-height: 1.6; }
@media (max-width: 640px) {
  .rate-table th, .rate-table td { padding: 10px 8px; font-size: 14px; }
}

/* Service page price card. Cream on the dark field so the number is the
   loudest thing on the page. One rate family per page: the full matrix lives
   on /insurance and the membership ladders on /memberships. */
.price-card {
  background: #f4f1ea;
  color: #0b0d0c;
  border-radius: 18px;
  padding: 34px 36px 30px;
  margin-top: 32px;
  max-width: 620px;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.85);
}
.price-card .pc-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: #6b675e;
}
.price-card .pc-amount {
  display: block; margin-top: 10px;
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(40px, 5vw, 56px); line-height: 1.02;
  letter-spacing: -0.03em; color: #0b0d0c; font-variant-numeric: tabular-nums;
}
.price-card .pc-alt {
  display: block; margin-top: 6px;
  font-family: 'Fraunces', serif; font-weight: 300; font-style: italic;
  font-size: clamp(19px, 2vw, 24px); color: #3d3a34;
  font-variant-numeric: tabular-nums;
}
.price-card .pc-caveat {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(11,13,12,0.14);
  font-size: 15px; line-height: 1.6; color: #3d3a34;
}
.price-card .pc-caveat strong { color: #0b0d0c; font-weight: 500; }
.price-card .pc-actions {
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.price-card .pc-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: #0b0d0c;
  padding: 13px 24px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.price-card .pc-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.price-card .pc-link {
  font-size: 14px; font-weight: 500; color: #3d3a34;
  border-bottom: 1px solid rgba(11,13,12,0.28); padding-bottom: 1px;
}
.price-card .pc-link:hover { color: #0b0d0c; border-color: #0b0d0c; }
@media (max-width: 640px) {
  .price-card { padding: 26px 24px 24px; }
}

/* Booking step header. Names what the tab strip is for, because an unlabelled
   row of clinician names reads as decoration rather than the first choice. */
.book-steps {
  max-width: 1360px; margin: 0 auto; padding: 34px 32px 22px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px 44px;
}
.book-steps-head { flex: 1 1 320px; min-width: 0; }
.book-steps-title {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.02em;
}
.book-steps-title em { font-style: italic; color: var(--accent-ink); }
.book-steps-list { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.book-step { display: flex; align-items: baseline; gap: 10px; }
.book-step-num {
  font-family: 'Fraunces', serif; font-size: 15px; color: var(--accent);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.book-step-text { font-size: 14px; color: var(--ink-dim); line-height: 1.45; }
.book-steps-hint {
  width: 100%; margin-top: 4px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 720px) {
  .book-steps { padding: 26px 24px 16px; gap: 18px; }
  .book-steps-list { flex-direction: column; gap: 10px; }
}

/* Review strip under the booking trust row. */
.book-reviews { padding: 8px 0 64px; }
.book-reviews-head {
  max-width: 1360px; margin: 0 auto 22px; padding: 0 32px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.book-reviews-title {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em;
}
.book-reviews-title em { font-style: italic; color: var(--accent-ink); }
.book-reviews-meta { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }


/* --------------------------------------------------------------------------
   Section ambient wash.
   Each toned section carries the OPPOSITE colour top left and its own colour
   bottom right, so the page reads as an alternating diagonal rather than a
   stack of identical panels. Two static radial gradients on a pseudo element:
   no filters, no animation, nothing for the compositor to recalculate while
   scrolling. Learned that lesson already.
   -------------------------------------------------------------------------- */
.tone-orange, .tone-green { position: relative; isolation: isolate; }
.tone-orange > *, .tone-green > * { position: relative; z-index: 1; }

.tone-orange::before,
.tone-green::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Orange section: green wash top left, orange bottom right. */
/* The gradient centres sit near the corners, so the section box cuts each
   circle and leaves a quarter disc with two straight edges: a visible box in
   the corner of every section. Two fixes together.
   1. Centres moved outside the box, so only the soft tail of each circle is
      ever inside and there is no bright core to clip.
   2. A feather mask on all four edges, so whatever does reach an edge fades
      to nothing before it gets there. Static mask on a static layer, so the
      compositor caches it once. */
.tone-orange::before,
.tone-green::before {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

.tone-orange::before {
  background:
    radial-gradient(900px circle at -4% -8%,  rgba(92, 185, 138, 0.20), transparent 68%),
    radial-gradient(820px circle at 104% 108%, rgba(232, 127, 74, 0.20), transparent 68%);
}

.tone-green::before {
  background:
    radial-gradient(900px circle at -4% -8%,  rgba(232, 127, 74, 0.20), transparent 68%),
    radial-gradient(820px circle at 104% 108%, rgba(168, 166, 158, 0.14), transparent 68%);
}

/* The pinned rail clips its own overflow, so the wash has to sit inside it. */
.rail.tone-orange::before, .rail.tone-green::before { border-radius: inherit; }

@media (prefers-reduced-motion: reduce) {
  .tone-orange::before, .tone-green::before { opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   Step flow. Sticky heading on the left, numbered steps scrolling on the
   right against a spine that fills as you pass each one, plus a decorative
   curve that draws itself. Same family as the homepage roster rail.
   All motion is transform, opacity and stroke-dashoffset. No filters.
   -------------------------------------------------------------------------- */
.stepflow { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.stepflow-sticky { position: sticky; top: 130px; align-self: start; }
.stepflow-track { position: relative; padding-left: 76px; }

.stepflow-spine { position: absolute; left: 23px; top: 26px; bottom: 26px; width: 1px; background: var(--line-strong); }
.stepflow-spine-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: top center; }

.stepflow-step { position: relative; margin-bottom: 22px; }
.stepflow-dot {
  position: absolute; left: -76px; top: 20px;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--bg);
  display: grid; place-items: center;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--ink-mute); z-index: 2;
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease, transform 0.45s ease;
}
.stepflow-step.is-active .stepflow-dot { background: var(--accent); border-color: var(--accent); color: var(--bg); transform: scale(1.08); }

.stepflow-card {
  padding: 24px 28px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--bg-2);
  transition: border-color 0.45s ease, background 0.45s ease;
}
.stepflow-step.is-active .stepflow-card { border-color: var(--accent-line); background: var(--bg-3); }
.stepflow-meta { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.stepflow-title { margin-top: 8px; font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(20px, 1.9vw, 25px); letter-spacing: -0.02em; line-height: 1.25; }
.stepflow-desc { margin-top: 8px; color: var(--ink-dim); font-size: 15px; line-height: 1.6; }

/* The decorative curve. Sits behind the steps, draws on scroll. */
.stepflow-curve { position: absolute; inset: -40px -10% -40px -6%; z-index: 0; pointer-events: none; opacity: 0.5; }
.stepflow-curve svg { width: 100%; height: 100%; }
.stepflow-curve path { fill: none; stroke: var(--accent); stroke-width: 1.25; opacity: 0.5; }
.stepflow > *:not(.stepflow-curve) { z-index: 1; }

@media (max-width: 1080px) { .stepflow { grid-template-columns: 1fr; gap: 40px; } .stepflow-sticky { position: static; } }
@media (max-width: 620px) {
  .stepflow-track { padding-left: 0; }
  .stepflow-spine, .stepflow-dot { display: none; }
  .stepflow-curve { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stepflow-curve { display: none; } }

/* --------------------------------------------------------------------------
   Long-form pillar furniture: inline figures, a phase table, and a red flag
   callout. A 3,000 word page carried by prose alone reads as an article;
   these are the breaks that make it read as a reference.
   -------------------------------------------------------------------------- */
.pillar-figure { margin: 46px 0 8px; max-width: 900px; }
.pillar-figure img {
  width: 100%; height: auto; border-radius: 16px;
  border: 1px solid var(--line); display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.pillar-figure figcaption {
  margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-mute);
  padding-left: 14px; border-left: 2px solid var(--accent);
}
.pillar-figure figcaption strong { color: var(--ink-dim); font-weight: 500; }

/* Phase table. The week-by-week plan is tabular data pretending to be prose. */
.phase-table-wrap { overflow-x: auto; margin: 30px 0 8px; max-width: 900px; }
.phase-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.phase-table th, .phase-table td {
  padding: 15px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.55;
}
.phase-table thead th {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
  border-bottom-color: var(--line-strong);
}
.phase-table tbody th {
  font-family: 'Fraunces', serif; font-weight: 400; font-size: 17px;
  color: var(--accent); white-space: nowrap;
}
.phase-table td { color: var(--ink-dim); }
.phase-table td strong { color: var(--ink); font-weight: 500; }

/* Red flag callout. This block is the one on the page where skimming past it
   has a real cost, so it stops looking like every other paragraph. */
.redflag {
  margin: 32px 0; padding: 28px 30px; max-width: 900px;
  border-radius: 16px; border: 1px solid rgba(232, 127, 74, 0.34);
  border-left: 3px solid var(--accent);
  background: linear-gradient(135deg, rgba(232,127,74,0.08), rgba(232,127,74,0.02));
}
.redflag-label {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.redflag-lead {
  margin-top: 12px; font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(21px, 2.1vw, 26px); line-height: 1.32; letter-spacing: -0.015em; color: var(--ink);
}
.redflag-note { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-dim); }

@media (max-width: 640px) {
  .pillar-figure { margin: 32px 0 8px; }
  .redflag { padding: 22px 20px; }
}

/* Visually hidden, still read by screen readers and by Google. Used on the
   phase table caption, which names the table without adding a visible heading. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Team roster cards. The shared pillar grid aligns columns to the first text
   baseline, which on a card whose first column is a portrait means the bio
   lines up with the NAME under the photo rather than the photo itself, so the
   text sits a full portrait height below where the eye expects it. Cards that
   carry a portrait align to the top instead. */
@media (min-width: 900px) {
  .pillar-item:has(.provider-photo-lg) { align-items: start; }
  .pillar-item:has(.provider-photo-lg) > .pillar-meta:last-child { padding-top: 6px; }
}