/* ==========================================================================
   Everwell Family Chiropractic — landing page styles
   Design tokens first, then components, then responsive overrides.
   Breakpoints: 1240px (roomy) · 1000px (nav) · 900px (tight) · 640px (phone)
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* cream / beige */
  --cream-50:#FBFAF7; --cream-100:#F8F6F1; --cream-200:#F2EDE5;
  --beige-300:#E8DED1; --beige-400:#DCCFBE; --beige-500:#C9B9A4;
  /* soft blue */
  --blue-50:#F4F9FB; --blue-100:#EAF3F6; --blue-200:#DEEDF7; --blue-300:#C3DDEC;
  --blue-400:#8FB9CF; --blue-500:#6FA3BD; --blue-600:#4A83AE;
  /* navy ink */
  --navy-600:#2B4A61; --navy-700:#1E3A54; --navy-800:#19364B; --navy-900:#12283A;
  /* neutral */
  --slate-300:#AEB7BD; --slate-400:#8A959C; --slate-500:#65737C; --white:#FFFFFF;
  /* semantic text */
  --text-heading:var(--navy-800); --text-body:var(--slate-500); --text-muted:var(--slate-400);
  --text-eyebrow:var(--blue-500); --text-on-accent:var(--white);
  --text-link:var(--blue-600); --text-link-hover:var(--navy-800);
  /* surfaces */
  --surface-page:var(--cream-100); --surface-card:var(--white); --surface-soft:var(--blue-100);
  --surface-soft-2:var(--blue-50); --surface-ink:var(--navy-700);
  /* accent */
  --accent-primary:var(--blue-400); --accent-primary-hover:var(--blue-500);
  --accent-primary-active:var(--blue-600); --accent-ink:var(--navy-700); --accent-ink-hover:var(--navy-800);
  --script-ink:var(--blue-600); --icon-line:var(--navy-800);
  /* lines */
  --border-subtle:rgba(25,54,75,.10); --border-soft:rgba(25,54,75,.06);
  --border-accent:var(--blue-300); --rule-beige:var(--beige-400);
  --focus-ring:var(--blue-500); --star-gold:#F5A623;
  --wa-green:#25D366; --wa-green-hover:#1EBE5A;

  /* type */
  --font-display:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-script:"Parisienne","Segoe Script",cursive;
  --text-display-1:clamp(2.75rem,4.4vw,4rem);
  --text-display-2:clamp(2.25rem,3.4vw,3.125rem);
  --text-display-3:clamp(1.875rem,2.6vw,2.375rem);
  --leading-display:1.18; --tracking-display:-0.005em;
  --weight-display:400; --weight-display-strong:500;
  --text-lead:1.125rem; --text-base:1rem; --text-small:.875rem; --text-tiny:.75rem;
  --leading-body:1.65; --leading-tight:1.45;
  --weight-body:400; --weight-body-medium:500; --weight-body-semibold:600;
  --tracking-eyebrow:.18em; --weight-eyebrow:500;

  /* space + layout */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --container-max:1200px; --gutter:24px; --card-pad:24px;

  /* radii + shadow + motion */
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px; --radius-circle:50%;
  --shadow-sm:0 2px 8px rgba(25,54,75,.05);
  --shadow-md:0 8px 24px rgba(25,54,75,.07);
  --shadow-lg:0 16px 44px rgba(25,54,75,.09);
  --shadow-button:0 6px 16px rgba(143,185,207,.35);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --dur-fast:140ms; --dur-base:220ms;

  /* page rhythm */
  --sec-pad-y:clamp(56px,7vw,120px);
  --mark-pad-b:clamp(56px,7vw,120px);
}

/* --- Base --------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html,body { overflow-x:hidden; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 {
  font-family:var(--font-display); font-weight:var(--weight-display); color:var(--text-heading);
  line-height:var(--leading-display); letter-spacing:var(--tracking-display); margin:0;
}
h1 { font-size:var(--text-display-1); }
h2 { font-size:var(--text-display-2); }
p { margin:0; }
a { color:var(--text-link); text-decoration:none; transition:color var(--dur-base) var(--ease-soft); }
a:hover { color:var(--text-link-hover); }
img { max-width:100%; display:block; }
button { font:inherit; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.svg-defs { position:absolute; left:-9999px; }
[hidden] { display:none !important; }
.is-hidden { display:none !important; }
.w-full { width:100%; }
.row { display:flex; }

[data-reveal] {
  opacity:0; transform:translateY(14px);
  transition:opacity 520ms var(--ease-soft), transform 520ms var(--ease-soft);
}
[data-reveal].is-revealed { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  [data-reveal] { opacity:1; transform:none; transition:none; }
}

@keyframes ewMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes ewPreBar { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes ewPreIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* --- Preloader ---------------------------------------------------------- */
.preload {
  position:fixed; inset:0; z-index:120; background:var(--cream-100);
  display:flex; align-items:center; justify-content:center; padding:var(--gutter);
  transition:opacity 480ms var(--ease-soft);
}
.preload.is-fading { opacity:0; pointer-events:none; }
.preload.is-done { display:none; }
.preload-inner {
  display:flex; flex-direction:column; align-items:center; gap:var(--space-5);
  animation:ewPreIn 520ms var(--ease-soft) both;
}
.preload-mark { height:76px; width:auto; }
.preload-word { display:flex; flex-direction:column; align-items:center; line-height:1; }
.preload-name {
  font-family:var(--font-display); font-size:1.75rem; font-weight:var(--weight-display);
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy-800);
}
.preload-sub {
  font-size:10px; font-weight:var(--weight-eyebrow); letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-eyebrow); margin-top:8px;
}
.preload-bar {
  width:104px; height:1px; background:var(--beige-300);
  overflow:hidden; display:block; margin-top:var(--space-2);
}
.preload-bar span {
  display:block; width:100%; height:100%; background:var(--accent-primary);
  transform-origin:left center; animation:ewPreBar 1100ms var(--ease-soft) forwards;
}

/* --- Icons -------------------------------------------------------------- */
.ico { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; color:currentColor; }
.ico svg { display:block; width:100%; height:100%; }
.ico--accent { color:var(--accent-primary); }
.ico--accent-active { color:var(--accent-primary-active); }
.ico--navy { color:var(--navy-800); }
.ico--white { color:#FFFFFF; }
.ico--wa { color:var(--wa-green); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:var(--weight-body-medium);
  font-size:var(--text-base); padding:13px 26px;
  border-radius:var(--radius-pill); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft),
             border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft),
             transform var(--dur-fast) var(--ease-soft);
}
.btn--sm { font-size:var(--text-small); padding:10px 18px; }
.btn--full { width:100%; }
.btn:active { transform:scale(.98); }

.btn--primary { background:var(--accent-primary); color:var(--text-on-accent); box-shadow:var(--shadow-button); }
.btn--primary:hover { background:var(--accent-primary-hover); color:var(--text-on-accent); transform:translateY(-2px); }
.btn--ink { background:var(--accent-ink); color:var(--text-on-accent); box-shadow:var(--shadow-sm); }
.btn--ink:hover { background:var(--accent-ink-hover); color:var(--text-on-accent); transform:translateY(-2px); }
.btn--outline { background:var(--surface-card); color:var(--text-heading); border-color:var(--border-accent); }
.btn--outline:hover { background:var(--blue-50); border-color:var(--accent-primary); color:var(--text-heading); transform:translateY(-2px); }
.btn--wa {
  min-height:46px; padding:0 24px; background:var(--wa-green); color:#FFFFFF;
  font-size:var(--text-small); box-shadow:0 6px 16px rgba(37,211,102,.32);
}
.btn--wa:hover { background:var(--wa-green-hover); color:#FFFFFF; transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,211,102,.38); }

/* --- Eyebrow + section heading ------------------------------------------ */
.eyebrow {
  font-family:var(--font-body); font-size:var(--text-tiny); font-weight:var(--weight-eyebrow);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--text-eyebrow); line-height:1.4;
}
.eyebrow-block { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
.eyebrow-block--center { align-items:center; }
.eyebrow-rule { width:72px; height:1px; background:var(--rule-beige); }

.sh { display:flex; flex-direction:column; gap:var(--space-4); }
.sh--center { align-items:center; text-align:center; }
.sh--left { align-items:flex-start; text-align:left; }
.sh-title { font-size:var(--text-display-2); max-width:620px; }
.sh-title--420 { max-width:420px; }
.sh-title--440 { max-width:440px; }
.sh-sub {
  font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-body);
  color:var(--text-body); max-width:620px; text-wrap:pretty;
}
.sh-sub--420 { max-width:420px; }
.sh-sub--440 { max-width:440px; }

.script {
  font-family:var(--font-script); font-size:1.75rem; line-height:1.5;
  color:var(--script-ink); display:inline-block; transform:rotate(-6deg);
}
.script--lg { font-size:clamp(1.6rem,2.6vw,2.15rem); }
.script-heart { font-size:.7em; }
.kicker {
  font-size:var(--text-tiny); font-weight:var(--weight-eyebrow); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--text-eyebrow); text-align:center;
}

/* --- Header ------------------------------------------------------------- */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:50; background:transparent;
  transition:background 280ms var(--ease-soft), box-shadow 280ms var(--ease-soft);
}
.topbar.is-scrolled { background:var(--cream-100); box-shadow:0 2px 18px rgba(25,54,75,.08); }
.nav-desktop {
  max-width:var(--container-max); width:100%; margin:0 auto;
  padding:14px var(--gutter); display:flex; align-items:center; gap:var(--space-8);
}
.nav-mobile { display:none; align-items:center; justify-content:space-between; gap:var(--space-4); padding:10px var(--gutter); }

.logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.logo-mark { height:42px; width:auto; }
.logo--sm .logo-mark { height:36px; }
.logo--xs .logo-mark { height:36px; }
.logo--lg .logo-mark { height:52px; }
.logo-text { display:flex; flex-direction:column; line-height:1; }
.logo-name {
  font-family:var(--font-display); font-size:1.3125rem; font-weight:var(--weight-display);
  letter-spacing:.08em; text-transform:uppercase; color:var(--navy-800);
}
.logo-sub {
  font-size:9px; font-weight:var(--weight-eyebrow); letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-eyebrow); margin-top:4px; white-space:nowrap;
}
.logo--sm .logo-name,.logo--xs .logo-name { font-size:1.0625rem; }
.logo--sm .logo-sub,.logo--xs .logo-sub { font-size:8px; }
.logo--lg .logo-name { font-size:1.4375rem; }
.logo--lg .logo-sub { font-size:9.5px; }

.nav-links { display:flex; gap:var(--space-8); margin:0 auto; }
.nav-link {
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-body); font-size:var(--text-small); font-weight:var(--weight-body);
  color:var(--text-body); padding:0 0 2px; border-bottom:1px solid transparent; white-space:nowrap;
  transition:color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft);
}
.nav-link:hover { color:var(--text-heading); }
.nav-link.is-active { font-weight:var(--weight-body-medium); color:var(--text-heading); border-bottom-color:var(--accent-primary); }

.burger {
  width:46px; height:46px; border:0; background:rgba(255,255,255,.78); border-radius:var(--radius-circle);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; cursor:pointer; padding:0; flex:0 0 auto;
}
.burger span { width:18px; height:1.5px; background:var(--navy-800); border-radius:2px; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position:relative; background:var(--cream-100); overflow:hidden;
  min-height:min(84vh,720px); display:flex; flex-direction:column;
  padding-top:clamp(64px,6vw,74px);
}
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-photo {
  position:absolute; top:0; right:0; bottom:0; width:65%; height:100%;
  object-fit:cover; object-position:50% center;
}
.hero-veil {
  position:absolute; top:0; right:0; bottom:0; left:27%;
  background:linear-gradient(90deg,#F8F6F1 0%,rgba(248,246,241,.94) 12%,rgba(248,246,241,.80) 26%,
             rgba(248,246,241,.46) 56%,rgba(248,246,241,.15) 82%,rgba(248,246,241,0) 100%);
}
.hero-inner {
  position:relative; z-index:2; flex:1; max-width:var(--container-max); width:100%; margin:0 auto;
  padding:clamp(24px,5vw,64px) var(--gutter) clamp(36px,5vw,76px);
  display:flex; flex-direction:column; justify-content:center; gap:var(--space-8);
}
.hero-copy { max-width:540px; display:flex; flex-direction:column; gap:var(--space-5); }
.hero h1 { font-size:clamp(2.25rem,4.2vw,3.75rem); line-height:1.12; }
.hero-lead { font-size:var(--text-lead); color:var(--text-body); max-width:400px; text-wrap:pretty; }
.hero-actions { display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-2); }
.hero-note {
  position:absolute; right:clamp(16px,5vw,72px); top:clamp(120px,20%,200px);
  z-index:2; text-align:right;
}

.value-props { display:flex; gap:clamp(24px,4vw,56px); flex-wrap:wrap; max-width:660px; }
.vp { display:flex; flex-direction:row; align-items:center; gap:var(--space-3); text-align:left; color:var(--icon-line); }
.vp-title {
  font-family:var(--font-body); font-size:var(--text-base); font-weight:var(--weight-body-medium);
  color:var(--text-heading); line-height:1.4;
}

/* --- Section shells ----------------------------------------------------- */
.sec { padding:var(--sec-pad-y) 0; position:relative; overflow:hidden; }
.wrap {
  max-width:var(--container-max); margin:0 auto;
  padding-left:var(--gutter); padding-right:var(--gutter); position:relative; z-index:1;
}
.wrap--stack { display:flex; flex-direction:column; gap:var(--space-12); align-items:center; }
.wrap--center { display:flex; flex-direction:column; gap:var(--space-6); align-items:center; text-align:center; z-index:2; }
.wrap--split {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:var(--space-16); align-items:center;
}
.wrap--split-md {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:var(--space-12); align-items:center;
}

.sec--services {
  padding-bottom:var(--mark-pad-b);
  background-color:var(--cream-50); background-image:url(../assets/img/bg-services-band.jpg);
  background-size:cover; background-position:center;
}
.sec--journey {
  padding-bottom:clamp(72px,8vw,140px);
  background-color:var(--surface-soft); background-image:url(../assets/img/bg-journey-band.jpg);
  background-size:cover; background-position:center;
}
.sec--team {
  background-color:var(--surface-soft); background-image:url(../assets/img/bg-team-band.jpg);
  background-size:cover; background-position:center;
}
.sec--pricing {
  background-image:url(../assets/img/bg-pricing-band.jpg); background-size:cover; background-position:center;
}
.sec--reviews { background:var(--cream-50); }
.sec--cta {
  background-image:url(../assets/img/bg-final-cta-clean.jpg); background-size:cover; background-position:center;
  padding:clamp(64px,8vw,110px) 0;
}
.sec--clinic {
  padding-bottom:var(--mark-pad-b);
  background-color:var(--cream-100); background-image:url(../assets/img/bg-pricing-band.jpg);
  background-size:cover; background-position:center;
}

/* corner marks */
.corner-mark {
  position:absolute; right:clamp(16px,4vw,56px); bottom:clamp(24px,4vw,56px); z-index:1;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none;
}
.corner-words {
  font-size:9.5px; font-weight:var(--weight-eyebrow); letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-eyebrow); text-align:right; line-height:1.8;
}
.corner-rule { width:30px; height:1px; background:var(--beige-400); }

/* --- Service cards ------------------------------------------------------ */
.card-grid {
  width:100%; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:var(--gutter);
}
.card {
  background:var(--surface-card); border-radius:var(--radius-md); overflow:visible; text-align:center;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card-media { position:relative; }
.card-media img {
  width:100%; height:240px; object-fit:cover;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.card-icon {
  position:absolute; left:50%; bottom:-22px; transform:translateX(-50%);
  width:44px; height:44px; border-radius:var(--radius-circle); background:var(--surface-card);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; color:var(--navy-800);
}
.card-body { padding:34px var(--card-pad) var(--card-pad); }
.card-body h4 {
  font-family:var(--font-display); font-size:1.25rem; font-weight:var(--weight-display-strong);
  color:var(--text-heading); line-height:1.3;
}
.card-body p {
  margin-top:var(--space-3); font-size:var(--text-small); line-height:var(--leading-body);
  color:var(--text-body); text-wrap:pretty;
}

/* --- Journey ------------------------------------------------------------ */
.journey-left { display:flex; flex-direction:column; gap:var(--space-10); }
.journey-right { display:flex; flex-direction:column; gap:var(--space-8); align-items:stretch; min-width:0; }
.blob-figure { position:relative; width:100%; max-width:460px; margin:0; }
.blob-img { width:100%; aspect-ratio:4/5; object-fit:cover; clip-path:url(#ewBlobA); }
.figure-note {
  position:absolute; left:-18px; bottom:-30px; margin:0;
  white-space:nowrap; pointer-events:none;
}
.figure-note .script { font-size:clamp(1.25rem,2.6vw,1.75rem); line-height:1.25; transform:rotate(-8deg); }

.steps { display:flex; flex-direction:column; }
.step { display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--space-5); align-items:stretch; }
.step-rail { display:flex; flex-direction:column; align-items:center; gap:8px; }
.step-badge {
  width:56px; height:56px; flex:0 0 auto; border-radius:var(--radius-circle);
  background:var(--surface-card); box-shadow:0 0 0 1px rgba(25,54,75,.07), 0 2px 8px rgba(25,54,75,.05);
  display:flex; align-items:center; justify-content:center; color:var(--navy-800);
  transition:background 260ms var(--ease-soft), box-shadow 260ms var(--ease-soft), color 260ms var(--ease-soft);
}
.step-badge svg { width:26px; height:26px; }
.step-connector { flex:1; width:1px; background:var(--border-soft); min-height:10px; }
.step--last .step-connector { background:transparent; }
.step-body { display:flex; flex-direction:column; padding-bottom:var(--space-10); min-width:0; }
.step-meta { display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
.step-number {
  font-family:var(--font-display); font-size:1.5rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums; line-height:1; transition:color 260ms var(--ease-soft);
}
.step-label {
  font-size:var(--text-tiny); font-weight:var(--weight-eyebrow); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--text-eyebrow);
}
.step-body h4 {
  font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,1.5rem);
  font-weight:var(--weight-display-strong); color:var(--text-heading); margin:10px 0 0;
}
.step-body p {
  margin:var(--space-3) 0 0; font-size:var(--text-small); line-height:var(--leading-body);
  color:var(--text-body); text-wrap:pretty; max-width:360px;
}
.step.is-active .step-badge {
  background:var(--accent-primary); color:#FFFFFF;
  box-shadow:0 0 0 6px rgba(143,185,207,.16), 0 8px 20px rgba(143,185,207,.38);
}
.step.is-active .step-number { color:var(--accent-primary-active); }
.journey-cta { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }

/* --- Team --------------------------------------------------------------- */
.doc-tabs { display:flex; gap:var(--space-4); flex-wrap:wrap; justify-content:center; width:100%; }
.doc-tab {
  flex:1 1 240px; min-width:0; max-width:320px;
  display:flex; align-items:center; gap:var(--space-4); padding:10px 10px 10px 22px;
  border:1px solid rgba(25,54,75,.10); border-radius:var(--radius-pill);
  background:var(--surface-card); box-shadow:0 2px 8px rgba(25,54,75,.05);
  cursor:pointer; text-align:left; min-height:64px;
  transition:background var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft),
             border-color var(--dur-base) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.doc-tab:hover { transform:translateY(-2px); }
.doc-tab:active { transform:scale(.98); }
.doc-tab-text { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.doc-tab-name {
  font-family:var(--font-body); font-size:var(--text-small); font-weight:var(--weight-body-semibold);
  letter-spacing:.06em; text-transform:uppercase; color:var(--navy-800);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  text-decoration-color:var(--accent-primary);
}
.doc-tab-role {
  font-family:var(--font-body); font-size:var(--text-tiny); color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.doc-tab-arrow {
  width:38px; height:38px; flex:0 0 auto; border-radius:var(--radius-circle);
  background:var(--surface-soft); color:var(--accent-primary-active);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}
.doc-tab-arrow svg { width:17px; height:17px; }
.doc-tab.is-active {
  background:var(--navy-800); border-color:var(--navy-800); box-shadow:0 10px 26px rgba(25,54,75,.22);
}
.doc-tab.is-active .doc-tab-name { color:#FFFFFF; text-decoration-color:rgba(255,255,255,.6); }
.doc-tab.is-active .doc-tab-role { color:rgba(255,255,255,.78); }
.doc-tab.is-active .doc-tab-arrow { background:#FFFFFF; color:var(--navy-800); }

.doc-grid {
  width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:var(--space-12); align-items:center;
}
.doc-list { width:100%; display:flex; flex-direction:column; gap:clamp(48px,6vw,88px); }
.doc-divider { width:72px; height:1px; background:var(--beige-400); margin:0 auto; }
@media (min-width: 761px) {
  .doc-grid--rev .doc-portrait { order:2; }
  .doc-grid--rev .doc-copy { justify-self:end; }
}
.doc-portrait { position:relative; width:100%; max-width:460px; margin:0 auto; }
.doc-photo { object-position:50% 30%; }
.philosophy {
  position:absolute; left:-4%; bottom:-6%;
  max-width:min(92%,380px); padding:36px 48px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 45%, rgba(255,255,255,.55) 62%, rgba(255,255,255,0) 72%);
  border-radius:50%; pointer-events:none;
  display:flex; justify-content:center; align-items:center;
}
.philosophy::before { content:none; }
.philosophy--right { left:auto; right:-2%; }
@media (min-width: 1240px) { .philosophy { left:-14%; } .philosophy--right { left:auto; right:-8%; } }
.philosophy .script {
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.45; letter-spacing:0;
  color:var(--accent-primary-active); text-align:center; transform:none; display:block;
}

.doc-copy { display:flex; flex-direction:column; gap:var(--space-4); max-width:520px; min-width:0; }
.doc-name {
  font-family:var(--font-display); font-size:var(--text-display-2); font-weight:var(--weight-display);
  color:var(--text-heading); line-height:1.1;
}
.doc-bio { font-size:var(--text-small); line-height:var(--leading-body); color:var(--text-body); text-wrap:pretty; }
.doc-rule { width:56px; height:1px; background:var(--accent-primary); margin:var(--space-2) 0; }
.doc-qual-title { font-size:var(--text-small); font-weight:var(--weight-body-semibold); color:var(--text-heading); }
.doc-quals { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.doc-quals li {
  display:flex; gap:var(--space-3); align-items:flex-start;
  font-size:var(--text-small); color:var(--text-body);
}
.doc-cta { margin-top:var(--space-4); display:flex; }

/* --- Pricing ------------------------------------------------------------ */
.pricing-copy { display:flex; flex-direction:column; gap:var(--space-5); max-width:480px; }
.fee-tags { display:flex; gap:var(--space-5) var(--space-8); flex-wrap:wrap; margin-top:var(--space-4); }
.fee-tag { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-small); color:var(--text-body); }
.pricing-media { width:100%; max-width:480px; margin:0 auto; }
.pricing-media img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }

/* --- Reviews ------------------------------------------------------------ */
.reviews-blob {
  position:absolute; left:-16%; top:-22%; width:clamp(280px,40%,520px); height:auto;
  mix-blend-mode:multiply; transform:rotate(30deg); z-index:0; pointer-events:none;
}
.reviews-inner { position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--space-10); align-items:center; }
.google-pill {
  display:flex; align-items:center; gap:clamp(8px,2vw,16px); flex-wrap:nowrap; justify-content:center;
  margin:0 var(--gutter); padding:10px clamp(14px,3vw,22px);
  max-width:calc(100% - var(--gutter) * 2);
  border-radius:var(--radius-pill); background:var(--surface-card); box-shadow:var(--shadow-sm);
  text-decoration:none; min-height:56px; transition:box-shadow var(--dur-base) var(--ease-soft);
}
.google-pill:hover { box-shadow:var(--shadow-md); }
.google-mark { height:clamp(17px,3.6vw,24px); width:auto; flex:0 0 auto; }
.pill-divider { width:1px; height:24px; background:var(--border-soft); flex:0 0 auto; }
.pill-score {
  font-family:var(--font-display); font-size:clamp(1.25rem,4vw,1.75rem);
  color:var(--text-heading); line-height:1; flex:0 0 auto;
}
.pill-stars { color:var(--star-gold); font-size:clamp(.8rem,2.4vw,1.125rem); letter-spacing:1px; flex:0 0 auto; white-space:nowrap; }
.pill-label { font-size:clamp(.78rem,2.2vw,.9375rem); color:var(--text-body); white-space:nowrap; }
.pill-arrow {
  display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 auto;
  border-radius:var(--radius-circle); background:var(--surface-soft); color:var(--accent-primary-active);
}
.pill-arrow svg { width:14px; height:14px; }

.marquee {
  width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track {
  display:flex; gap:var(--gutter); width:max-content;
  animation:ewMarquee 90s linear infinite; padding:8px 0;
}
.marquee:hover .marquee-track { animation-play-state:paused; }
.review {
  width:clamp(250px,80vw,360px); flex:0 0 auto; background:var(--surface-card);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:var(--card-pad);
  display:flex; flex-direction:column; gap:var(--space-4); text-decoration:none; color:inherit;
  transition:box-shadow var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}
.review:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); color:inherit; }
.review-head { display:flex; align-items:center; gap:var(--space-3); }
.review-avatar {
  width:42px; height:42px; flex:0 0 auto; border-radius:var(--radius-circle);
  background:var(--surface-soft); color:var(--navy-700);
  display:flex; align-items:center; justify-content:center; font-weight:var(--weight-body-semibold);
}
.review-who { display:flex; flex-direction:column; min-width:0; }
.review-author { font-size:var(--text-small); font-weight:var(--weight-body-semibold); color:var(--text-heading); }
.review-meta { font-size:var(--text-tiny); color:var(--text-muted); }
.review-g { width:20px; height:20px; margin-left:auto; }
.review-stars { color:var(--star-gold); font-size:1rem; letter-spacing:2px; }
.review p { font-size:var(--text-small); line-height:var(--leading-body); color:var(--text-body); text-wrap:pretty; }

/* --- Final CTA ---------------------------------------------------------- */
.cta-note-side { position:absolute; right:clamp(20px,7vw,120px); top:50%; transform:translateY(-50%); z-index:1; text-align:right; }
.cta-note-top { display:none; text-align:center; }
.cta-note-top .script { font-size:1.6rem; }
.cta-actions { display:flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; }

/* --- Clinic ------------------------------------------------------------- */
.map-card {
  border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-md);
  background:var(--surface-card); height:clamp(260px,52vw,420px);
}
.map-card iframe { width:100%; height:100%; border:0; display:block; }
.clinic-copy { display:flex; flex-direction:column; gap:var(--space-6); min-width:0; }
.info-rows { display:flex; flex-direction:column; gap:var(--space-5); }
.info-row { display:flex; gap:var(--space-4); align-items:flex-start; }
.info-icon { width:36px; height:36px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.info-text { display:flex; flex-direction:column; gap:var(--space-1); }
.info-body { font-size:var(--text-small); line-height:var(--leading-tight); color:var(--text-body); }
.clinic-actions { display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* --- Footer ------------------------------------------------------------- */
.footer {
  background:var(--cream-50); border-top:1px solid var(--border-soft);
  padding:clamp(44px,6vw,80px) 0 var(--space-6);
}
.footer-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-8) clamp(16px,4vw,40px);
}
.footer-brand { display:flex; flex-direction:column; gap:var(--space-4); }
.footer-tagline { font-size:var(--text-small); line-height:var(--leading-body); color:var(--text-body); max-width:280px; }
.footer-social { display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-2); }
.footer-heading {
  font-size:var(--text-tiny); font-weight:var(--weight-eyebrow); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--text-heading);
}
.social-row { display:flex; gap:var(--space-3); }
.social {
  width:44px; height:44px; border-radius:var(--radius-circle); background:var(--surface-soft);
  color:var(--navy-700); display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-base) var(--ease-soft);
}
.social:hover { background:var(--blue-200); color:var(--navy-700); }
.social svg { width:19px; height:19px; }
.footer-col { display:flex; flex-direction:column; gap:var(--space-3); }
.footer-nav { display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; }
.footer-nav button {
  appearance:none; border:0; background:transparent; padding:0; cursor:pointer;
  font-family:var(--font-body); font-size:var(--text-small); color:var(--text-body);
  text-align:left; min-height:32px; transition:color var(--dur-base) var(--ease-soft);
}
.footer-nav button:hover { color:var(--navy-800); }
.footer-line {
  display:flex; align-items:center; gap:var(--space-3);
  font-size:var(--text-small); color:var(--text-body);
}
.footer-line--top { align-items:flex-start; line-height:var(--leading-body); }
.footer-line a { color:var(--text-body); }
.footer-line a:hover { color:var(--navy-800); }
.break { word-break:break-word; }
.footer-cta { margin-top:var(--space-2); display:flex; }
.footer-base {
  margin:var(--space-10) auto 0; padding-top:var(--space-5);
  border-top:1px solid var(--border-soft);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2) var(--space-6);
  font-size:var(--text-tiny); color:var(--text-muted);
}

/* --- Sticky WhatsApp FAB ------------------------------------------------ */
.fab {
  position:fixed; right:24px; bottom:24px; z-index:40;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  height:56px; min-width:56px; padding:0 20px; border-radius:var(--radius-pill);
  background:var(--wa-green); color:#FFFFFF; box-shadow:0 8px 22px rgba(37,211,102,.34);
  font-size:var(--text-small); font-weight:var(--weight-body-medium);
  transition:background var(--dur-base) var(--ease-soft);
}
.fab:hover { background:var(--wa-green-hover); color:#FFFFFF; }
.fab svg { width:26px; height:26px; flex:0 0 auto; }

/* --- Mobile drawer ------------------------------------------------------ */
.scrim { position:fixed; inset:0; background:rgba(25,54,75,.38); z-index:60; }
.drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(84vw,320px);
  background:var(--cream-50); z-index:61; box-shadow:var(--shadow-lg);
  padding:16px var(--gutter) 28px;
  display:flex; flex-direction:column; gap:var(--space-6); overflow-y:auto;
}
.drawer-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.drawer-close {
  width:44px; height:44px; flex:0 0 auto; border:0; background:var(--surface-soft);
  border-radius:var(--radius-circle); display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; font-size:20px; color:var(--navy-800); line-height:1;
}
.drawer-nav { display:flex; flex-direction:column; }
.drawer-nav button {
  appearance:none; border:0; background:transparent; text-align:left;
  font-family:var(--font-body); font-size:1.0625rem; color:var(--text-heading);
  padding:14px 0; border-bottom:1px solid var(--border-soft); cursor:pointer; min-height:50px;
}
.drawer-actions { display:flex; flex-direction:column; gap:var(--space-3); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* below 1240px — corner marks need breathing room, CTA note moves inline */
@media (max-width:1239px) {
  :root { --mark-pad-b:clamp(84px,14vw,110px); }
  .cta-note-side { display:none; }
  .cta-note-top { display:block; }
}

/* below 1000px — swap to the mobile header */
@media (max-width:999px) {
  .nav-desktop { display:none; }
  .nav-mobile { display:flex; }
}

/* below 900px — tight layout */
@media (max-width:899px) {
  .hero-inner {
    padding:clamp(20px,4vw,32px) var(--gutter) clamp(28px,5vw,44px);
    gap:var(--space-6);
  }
  .hero h1 { font-size:clamp(2.1rem,7.2vw,2.75rem); }
  .hero-actions {
    display:grid; grid-template-columns:1fr; justify-items:start;
    gap:var(--space-3); width:100%; max-width:360px; margin-top:0;
  }
  .hero-note {
    right:14px; top:clamp(70px,11vw,88px); max-width:46%;
  }
  .hero-note .script { font-size:1.05rem; }

  .value-props { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); width:100%; max-width:none; }
  .vp { flex-direction:column; align-items:center; text-align:center; gap:var(--space-2); }

  .sec--team { background-position:72% 78%; }
  .sec--pricing { background-position:18% 72%; }
  .sec--clinic { background-position:18% 72%; }

  .philosophy { bottom:-14%; left:-4%; }
  .philosophy--right { left:auto; right:-2%; }
  .footer-grid { grid-template-columns:minmax(0,1fr); }
}

/* below 640px — phone trims */
@media (max-width:639px) {
  .fab { right:16px; bottom:16px; padding:0; }
  .fab-label { display:none; }
  .wrap--split, .wrap--split-md, .doc-grid { gap:var(--space-10); }
  .card-media img { height:200px; }
  .step { grid-template-columns:48px minmax(0,1fr); gap:var(--space-4); }
  .step-badge { width:48px; height:48px; }
  .step-badge svg { width:22px; height:22px; }
}


/* --- Motion: entrances, directional reveals, parallax ------------------- */
@keyframes ewRise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes ewFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes ewHeaderIn { from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:none; } }
@keyframes ewSwapIn { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes ewSwapNote { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes ewSlideIn { from { transform:translateX(100%); } to { transform:none; } }

.scroll-progress {
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent-primary); transform:scaleX(0); transform-origin:left center; pointer-events:none;
}

@media (prefers-reduced-motion:no-preference) {
  [data-reveal] { transition-duration:700ms; }
  [data-reveal="left"] { transform:translateX(-26px); }
  [data-reveal="right"] { transform:translateX(26px); }
  [data-reveal="zoom"] { transform:scale(.965); }

  .topbar { animation:ewHeaderIn 720ms var(--ease-soft) both; }
  .hero-bg { animation:ewFadeIn 1100ms var(--ease-soft) .7s both; }
  .hero-photo { will-change:transform; }
  .reviews-blob { will-change:transform; }
  .hero-copy .eyebrow-block { animation:ewRise 780ms var(--ease-soft) .95s both; }
  .hero-copy h1 { animation:ewRise 820ms var(--ease-soft) 1.05s both; }
  .hero-lead { animation:ewRise 820ms var(--ease-soft) 1.18s both; }
  .hero-actions { animation:ewRise 820ms var(--ease-soft) 1.3s both; }
  .value-props { animation:ewRise 820ms var(--ease-soft) 1.45s both; }
  .hero-note { animation:ewRise 900ms var(--ease-soft) 1.6s both; }
  .fab { animation:ewFadeIn 620ms var(--ease-soft) 1.8s both; }

  .doc-photo.is-swapping, .doc-copy.is-swapping { animation:ewSwapIn 520ms var(--ease-soft) both; }
  .philosophy.is-swapping { animation:ewSwapNote 620ms var(--ease-soft) 140ms both; }

  .scrim { animation:ewFadeIn 260ms ease both; }
  .drawer { animation:ewSlideIn 340ms var(--ease-soft) both; }
}

.nav-link { transition:color 240ms var(--ease-soft), border-color 240ms var(--ease-soft); }
.nav-link:hover { color:var(--navy-800); }
.fab {
  transition:background var(--dur-base) var(--ease-soft), transform 220ms var(--ease-soft), box-shadow 220ms var(--ease-soft);
}
.fab:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(37,211,102,.42); }
.fab:active { transform:scale(.96); }
.google-pill { transition:box-shadow var(--dur-base) var(--ease-soft), transform 220ms var(--ease-soft); }
.google-pill:hover { transform:translateY(-2px); }
.card-media img { transition:transform 600ms var(--ease-soft); }
.card { overflow:hidden; }
.card:hover .card-media img { transform:scale(1.045); }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
}


/* --- Motion pass 2: ambient float, stagger, micro-interactions ---------- */
@keyframes ewFloat { 0%, 100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-9px,0); } }
@keyframes ewPulseRing {
  0%   { box-shadow:0 0 0 0 rgba(143,185,207,.45), 0 8px 20px rgba(143,185,207,.38); }
  70%  { box-shadow:0 0 0 14px rgba(143,185,207,0), 0 8px 20px rgba(143,185,207,.38); }
  100% { box-shadow:0 0 0 0 rgba(143,185,207,0), 0 8px 20px rgba(143,185,207,.38); }
}

@media (prefers-reduced-motion:no-preference) {
  .hero-note { animation:ewRise 900ms var(--ease-soft) 1.6s both, ewFloat 9s ease-in-out 2.6s infinite; }
  .step.is-active .step-badge { animation:ewPulseRing 2.4s var(--ease-soft) infinite; transform:scale(1.06); }
}

.step-badge { transition:background 260ms var(--ease-soft), box-shadow 260ms var(--ease-soft), color 260ms var(--ease-soft), transform 260ms var(--ease-soft); }
.btn { transition:background var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), transform 180ms var(--ease-soft); }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:scale(.98); }
.btn .ico { transition:transform 240ms var(--ease-soft); }
.btn:hover .ico[data-icon="arrow-right"] { transform:translateX(4px); }
.vp .ico { transition:transform 260ms var(--ease-soft); }
.vp:hover .ico { transform:translateY(-3px) scale(1.06); }
.doc-tab { transition:background 220ms var(--ease-soft), box-shadow 220ms var(--ease-soft), border-color 220ms var(--ease-soft), transform 180ms var(--ease-soft); }
.doc-tab:hover { transform:translateY(-2px); }
.review-card { transition:box-shadow 220ms var(--ease-soft), transform 220ms var(--ease-soft); }
.review-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.social, .footer-nav button, .drawer-nav button { transition:background 220ms var(--ease-soft), color 220ms var(--ease-soft), transform 180ms var(--ease-soft); }
.social:hover { transform:translateY(-2px); }
.map-card iframe { transition:filter 400ms var(--ease-soft); }

/* sitelink focus card */
.card.is-focus{box-shadow:0 0 0 2px #8FB9CF,0 16px 44px rgba(25,54,75,.09);transform:translateY(-2px);}