/* Kaizen Chiropractic
   Colors come from the logo. Bone background, pine and rust as accents, spine brown for text. */

:root {
  --bone: #F5F0E6;
  --paper: #FBF8F2;
  --sand: #EAE2D3;
  --line: #D9CFBD;
  --pine: #3F4A26;
  --rust: #9A5A24;
  --rust-dark: #7E4819;
  --spine: #3B2A20;
  --muted: #62544A;
  --tk-bg: #F6E7B9;

  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--spine);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 19px; } }

img { max-width: 100%; display: block; }
a { color: var(--rust-dark); text-underline-offset: 3px; }
a:hover { color: var(--spine); }

:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.05rem, 6.4vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 900px) { :root { --gutter: 40px; } }

.skip { position: absolute; left: -999px; top: 8px; background: var(--spine); color: var(--bone); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }

/* Small spaced caps, like "CHIROPRACTIC" in the logo */
.caps { font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* Visible placeholder for any fact we don't have yet */
.tk { background: var(--tk-bg); color: var(--spine); font-family: ui-monospace, Menlo, monospace; font-size: .78em; padding: 1px 6px; border-radius: 4px; border: 1px dashed #B98A2E; white-space: normal; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 1.05rem; text-decoration: none; padding: 15px 26px; border-radius: 10px; border: 2px solid var(--rust); background: var(--rust); color: #fff; cursor: pointer; line-height: 1.2; }
.btn:hover { background: var(--rust-dark); border-color: var(--rust-dark); color: #fff; }
.btn--quiet { background: transparent; color: var(--rust-dark); }
.btn--quiet:hover { background: var(--rust); color: #fff; }
.btn--small { padding: 9px 16px; font-size: .95rem; }
.textlink { font-weight: 700; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.brand img { width: 30px; height: auto; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b { font-family: var(--serif); font-weight: 400; color: var(--rust); font-size: 1.35rem; letter-spacing: .06em; }
.brand-name small { font-size: .6rem; letter-spacing: .28em; color: var(--spine); font-weight: 600; margin-top: 3px; }

.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; align-items: center; }
.nav a { color: var(--spine); text-decoration: none; font-weight: 600; font-size: 1rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--rust-dark); text-decoration: underline; text-decoration-thickness: 2px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.menu-btn { background: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font: 600 .95rem var(--sans); color: var(--spine); cursor: pointer; }

.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--paper); }
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px var(--gutter) 16px; }
.mobile-nav a { display: block; padding: 12px 0; font-size: 1.15rem; color: var(--spine); text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav li:last-child a { border-bottom: 0; }

@media (min-width: 980px) {
  .nav { display: block; }
  .menu-btn { display: none; }
  .mobile-nav, .mobile-nav.open { display: none; }
}

/* ---------- Home hero ---------- */
.hero { padding: 18px 0 44px; }
.hero-grid { display: grid; gap: 22px; }
.hero-photo { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.photo-note { position: absolute; left: 10px; bottom: 10px; background: rgba(59, 42, 32, .82); color: var(--bone); font-size: .72rem; padding: 4px 9px; border-radius: 6px; letter-spacing: .02em; }
.hero-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hero-who .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line); }
.hero-who strong { display: block; font-size: 1.05rem; line-height: 1.25; }
.hero-who span { color: var(--muted); font-size: .95rem; }
.hero h1 { margin-bottom: 14px; }
.hero .lede { font-size: 1.12rem; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.hero-facts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: .98rem; }
.hero-facts li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--pine); margin-right: 9px; vertical-align: 2px; }

@media (min-width: 900px) {
  .hero { padding: 56px 0 80px; }
  .hero-grid { grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
  .hero-text { order: 1; }
  .hero-photo { order: 2; aspect-ratio: 1 / 1; }
  .hero-photo img { object-position: 62% 40%; }
}
/* On phones, keep the photo short so the headline and button stay on the first screen */
@media (max-width: 899px) { .hero-photo { aspect-ratio: 16 / 10; } }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section--sand { background: var(--sand); }
.section--paper { background: var(--paper); }
@media (min-width: 900px) { .section { padding: 96px 0; } }
.section-head { max-width: 40em; margin-bottom: 32px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }

/* Care paths: photo first, label second. Families gets the big tile. */
.paths { display: grid; gap: 18px; }
.path { position: relative; display: block; text-decoration: none; color: var(--spine); }
.path figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sand); aspect-ratio: 4 / 3; }
.path img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.path:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .path img { transition: none; } .path:hover img { transform: none; } }
.path h3 { margin: 14px 0 4px; }
.path p { margin: 0; color: var(--muted); }
@media (min-width: 900px) {
  .paths { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 28px 32px; }
  .path--big { grid-row: 1 / span 2; }
  .path--big figure { aspect-ratio: 4 / 5; }
  .path--small figure { aspect-ratio: 16 / 9; }
}
.expecting { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; margin-top: 28px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.expecting img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.expecting p { margin: 0; }

/* First visit: the spine line. Each step is a vertebra on the line. */
.visit { display: grid; gap: 36px; }
@media (min-width: 900px) { .visit { grid-template-columns: .9fr 1.1fr; gap: 72px; } }
.steps { list-style: none; margin: 0; padding: 0; position: relative; counter-reset: step; }
.steps::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 3px; background: var(--spine); border-radius: 3px; opacity: .85; }
.steps li { position: relative; padding: 0 0 30px 66px; counter-increment: step; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 45px; height: 34px; border-radius: 12px; background: var(--rust); color: #fff; font: 700 1rem/34px var(--sans); text-align: center; box-shadow: 0 0 0 5px var(--bone); }
.section--sand .steps li::before { box-shadow: 0 0 0 5px var(--sand); }
.steps h3 { font-size: 1.2rem; margin-bottom: 4px; }
.steps p { margin: 0; color: var(--muted); }

/* Zone teaser */
.zone-teaser { display: grid; gap: 28px; align-items: center; }
.zone-teaser figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; }
.zone-teaser img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .zone-teaser { grid-template-columns: 1.2fr 1fr; gap: 64px; } .zone-teaser figure { aspect-ratio: 4 / 3; } }

/* Meet the doctor */
.meet { display: grid; gap: 28px; }
.meet figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sand); }
.meet figure img { width: 100%; height: 100%; object-fit: cover; }
.meet blockquote { margin: 0 0 18px; font-family: var(--serif); font-size: clamp(1.35rem, 3.2vw, 1.8rem); line-height: 1.35; }
@media (min-width: 900px) { .meet { grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; } .meet figure { aspect-ratio: 4 / 5; } }

/* Reviews placeholder, shaped so real reviews can drop into .reviews-list later */
.reviews { border: 2px dashed var(--line); border-radius: var(--radius); padding: 28px 22px; background: var(--paper); display: grid; gap: 10px; }
.reviews h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; }
.reviews p { margin: 0; color: var(--muted); }
.reviews-list { display: grid; gap: 16px; }
@media (min-width: 900px) { .reviews { grid-template-columns: 1fr auto; align-items: center; padding: 36px 40px; } }

/* Form */
.form-block { display: grid; gap: 32px; }
@media (min-width: 900px) { .form-block { grid-template-columns: .85fr 1.15fr; gap: 72px; } }
.next-list { list-style: none; padding: 0; margin: 18px 0 0; }
.next-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.next-list li:last-child { border-bottom: 1px solid var(--line); }
.form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 18px; }
@media (min-width: 900px) { .form { padding: 34px; grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.field label, .field legend { display: block; font-weight: 700; margin-bottom: 6px; font-size: 1rem; }
.field .hint { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; font: 400 1.05rem var(--sans); color: var(--spine); background: #fff; border: 1.5px solid #B9AC96; border-radius: 10px; padding: 13px 14px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--rust); outline-offset: 1px; border-color: var(--rust); }
.form .btn { width: 100%; }
@media (min-width: 900px) { .form .btn { width: auto; } }
.form-note { font-size: .92rem; color: var(--muted); margin: 0; }
.form-done { display: none; background: #E4E9D6; border: 1px solid #B8C29A; color: var(--spine); padding: 16px 18px; border-radius: 10px; }
.form-done.show { display: block; }

/* ---------- Inner pages ---------- */
.page-top { padding: 44px 0 28px; }
@media (min-width: 900px) { .page-top { padding: 80px 0 40px; } }
.page-top .lede { font-size: 1.15rem; color: var(--muted); max-width: 36em; }
.prose { max-width: 38em; }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 1.08rem; }

.split { display: grid; gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: start; } .split--flip { grid-template-columns: .9fr 1.1fr; } }
.split figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--sand); }
.split figure img { width: 100%; height: 100%; object-fit: cover; }
figcaption.cap { font-size: .9rem; color: var(--muted); padding-top: 8px; }
.sticky-fig { position: sticky; top: 100px; }

/* Room walkthrough on Zone page */
.room { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.room li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.room b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; margin-bottom: 4px; }
.room span { color: var(--muted); }

.reasons { display: grid; gap: 0; border-top: 1px solid var(--line); }
.reasons div { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
@media (min-width: 900px) { .reasons div { grid-template-columns: 220px 1fr; gap: 32px; } }
.reasons h3 { margin: 0; }
.reasons p { margin: 0; color: var(--muted); }

/* Pricing */
.pay-facts { display: grid; gap: 14px; margin: 0 0 8px; }
@media (min-width: 760px) { .pay-facts { grid-template-columns: repeat(3, 1fr); } }
.pay-fact { background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--pine); border-radius: 10px; padding: 18px 20px; }
.pay-fact b { display: block; font-size: 1.15rem; margin-bottom: 2px; }
.pay-fact span { color: var(--muted); font-size: 1rem; }

.price-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.price-row { display: grid; gap: 6px; padding: 20px 22px; border-top: 1px solid var(--line); }
.price-row:first-child { border-top: 0; }
@media (min-width: 760px) { .price-row { grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 24px 30px; } }
.price-row h3 { margin: 0 0 2px; font-size: 1.25rem; }
.price-row p { margin: 0; color: var(--muted); font-size: 1rem; }
.price { font-family: var(--serif); font-size: 1.5rem; white-space: nowrap; }
@media (max-width: 759px) { .price { white-space: normal; } }

.plan-path { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 760px) { .plan-path { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; } }
.plan-step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.plan-step .caps { display: block; margin-bottom: 6px; color: var(--rust-dark); }
.plan-step b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; display: block; margin-bottom: 4px; }
.plan-step p { margin: 0; color: var(--muted); font-size: 1rem; }
.plan-arrow { display: none; align-self: center; color: var(--muted); font-size: 1.4rem; }
@media (min-width: 760px) { .plan-arrow { display: block; } }

/* FAQ */
.faq { max-width: 44em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-family: var(--serif); font-size: 1.22rem; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font: 400 1.7rem var(--sans); color: var(--rust); }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 0 22px; color: var(--muted); }
.faq .answer p:last-child { margin: 0; }

/* Closing call to action strip */
.cta-strip { background: var(--pine); color: var(--bone); border-radius: var(--radius); padding: 30px 24px; display: grid; gap: 16px; }
.cta-strip h2 { color: var(--bone); margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.cta-strip p { margin: 0; color: #E5E3D2; }
.cta-strip .btn { background: var(--bone); color: var(--spine); border-color: var(--bone); justify-self: start; }
.cta-strip .btn:hover { background: #fff; border-color: #fff; color: var(--spine); }
@media (min-width: 900px) { .cta-strip { grid-template-columns: 1fr auto; align-items: center; padding: 40px 48px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--spine); color: #EDE5D6; padding: 56px 0 28px; margin-top: 0; }
.site-footer a { color: #F3D9B8; }
.site-footer h2 { color: var(--bone); font-size: 1.3rem; margin-bottom: 12px; }
.foot-grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.1fr 1fr 1.2fr; gap: 56px; } }
.foot-grid p { margin: 0 0 8px; }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { padding: 4px 0; }
.site-footer .tk { background: #5A4536; color: #F6E7B9; border-color: #A98553; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 10px; }
.ig-grid span { aspect-ratio: 1; background: #4A382C; border-radius: 6px; }
.map-slot { aspect-ratio: 16 / 9; border: 1.5px dashed #7A6453; border-radius: 10px; display: grid; place-items: center; text-align: center; padding: 12px; font-size: .95rem; color: #D9CCB8; margin-top: 12px; }
.foot-base { margin-top: 44px; padding-top: 20px; border-top: 1px solid #5A4536; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .9rem; color: #C9BBA6; }
.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.foot-brand img { width: 30px; filter: brightness(1.7) saturate(.8); }
.foot-brand b { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; color: var(--bone); letter-spacing: .05em; }

/* ---------- Mobile polish ---------- */
/* Tap targets: at least 44px tall */
.btn--small, .menu-btn { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 980px) { .menu-btn { display: none; } }
.textlink { display: inline-block; padding: 10px 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 10px; }
.foot-links a { display: inline-block; padding: 10px 0; }

/* Shorter footer on phones */
@media (max-width: 899px) {
  .site-footer { padding: 44px 0 24px; }
  .foot-grid { gap: 28px; }
  .map-slot { aspect-ratio: auto; padding: 16px 12px; }
  .ig-grid { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .foot-base { margin-top: 28px; }
}
.form-error { display: none; background: #F6E1D6; border: 1px solid #D9A58A; color: var(--spine); padding: 16px 18px; border-radius: 10px; }
.form-error.show { display: block; }
.form .btn:disabled { opacity: .7; cursor: wait; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* =====================================================================
   Morning light: paper, fog, one sun
   The hero is first light. Fog sits in the valley between the far ridge
   and the pines, lit by one low sun (upper right). As you scroll, the fog
   lifts and the light warms (site.js sets --clear on .atmos). The pines
   stand on ground mist, and that mist IS the next section's paper.
   ===================================================================== */
:root {
  --grain: url(img/paper.webp);
  --grain-size: 360px;
  --header-h: 68px;
  --sun-x: 64%;
  --sun-y: -4%;
}

/* ---------- Paper: one real stock, on every surface ---------- */
body { background: var(--bone) var(--grain) repeat; background-size: var(--grain-size); }
.section--paper { background: var(--paper) var(--grain) repeat; background-size: var(--grain-size); }
.section--sand  { background: var(--sand)  var(--grain) repeat; background-size: var(--grain-size); }
.form, .reviews, .expecting, .price-list, .pay-fact, .plan-step, .room li, .mobile-nav {
  background: var(--paper) var(--grain) repeat;
  background-size: var(--grain-size);
}
.site-footer { background: var(--spine) var(--grain) repeat; background-size: var(--grain-size); }

/* ---------- Header: no rule line. Floats on the morning, then settles ---------- */
.site-header { margin-bottom: calc(var(--header-h) * -1); isolation: isolate; }
.site-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--bone) var(--grain) repeat;
  background-size: var(--grain-size);
  box-shadow: 0 14px 28px -24px rgba(59, 42, 32, .55);
  opacity: 0;
  transition: opacity .45s ease;
}
.site-header.is-scrolled::before,
.site-header:has(.mobile-nav.open)::before { opacity: 1; }
.menu-btn { background: rgba(251, 248, 242, .7); border-color: rgba(98, 84, 74, .35); }
.mobile-nav { border-top: 0; box-shadow: inset 0 12px 12px -14px rgba(59, 42, 32, .35); }

/* ---------- The scene ---------- */
.hero, .page-top { position: relative; isolation: isolate; }
.hero { padding: calc(var(--header-h) + 18px) 0 210px; }
/* the ground mist already gives air; the next section can start closer */
.hero + .section { padding-top: 28px; }
@media (min-width: 900px) { .hero + .section { padding-top: 44px; } }
.page-top { padding: calc(var(--header-h) + 40px) 0 clamp(120px, 22vw, 170px); }
@media (min-width: 900px) {
  .hero { padding: calc(var(--header-h) + 48px) 0 clamp(200px, 17vw, 260px); }
  .page-top { padding: calc(var(--header-h) + 72px) 0 clamp(170px, 14vw, 210px); }
}

.atmos {
  --clear: 0;
  --floor: var(--paper);
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  /* first-light sky: cool-warm haze, brightest toward the sun */
  background:
    radial-gradient(60% 55% at var(--sun-x) var(--sun-y), #FFF6E4 0%, rgba(255, 246, 228, 0) 70%),
    linear-gradient(180deg, #EAE2D2 0%, #E4DAC7 38%, #D9CCB4 66%, #D3C5AC 84%, #DDD2BF 100%);
}
.atmos--quiet { --floor: var(--bone); --clear: .35; }
.atmos > * { position: absolute; left: 0; right: 0; }

/* The sun: a soft disc of light, warming as the morning clears */
.sun { inset: 0; }
.sun::before, .sun::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(32% 40% at var(--sun-x) var(--sun-y), rgba(255, 250, 238, .95) 0%, rgba(255, 244, 222, .5) 30%, rgba(255, 240, 214, 0) 70%);
}
.sun::after {
  background: radial-gradient(42% 52% at var(--sun-x) var(--sun-y), rgba(255, 226, 170, .75) 0%, rgba(250, 214, 158, .28) 38%, rgba(245, 205, 150, 0) 72%);
  opacity: var(--clear);
}

/* Far ridge: hidden in fog at first light, revealed as it lifts */
.far {
  bottom: calc(var(--trees-h) * .30);
  height: calc(var(--trees-h) * 1.45);
  background: url(img/far-ridge.webp) 60% 100% / auto 100% repeat-x;
  opacity: calc(.5 + var(--clear) * .45);
}

/* Fog + light shafts, drawn by site.js (small canvas, upscaled = soft) */
canvas.fog { top: 0; width: 100%; height: 100%; display: block;
  transform: translateY(calc(var(--clear) * -6%)); opacity: calc(1 - var(--clear) * .75); }

/* The pines, standing on the ground */
.atmos { --trees-h: clamp(120px, 17.5vw, 290px); --ground: clamp(48px, 5vw, 78px); }
.trees {
  bottom: var(--ground);
  height: var(--trees-h);
  background: url(img/treeline.webp) 78% 100% / auto 100% repeat-x;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

/* Ground mist: rolls through the trunks. The floor below it is the next section. */
.mist { background: url(img/mist.webp) 0 100% / 1600px 100% repeat-x; width: 4800px; right: auto; will-change: transform; }
.mist-back  { bottom: calc(var(--ground) + var(--trees-h) * .10); height: calc(var(--trees-h) * .75); opacity: .55; animation: drift 190s linear infinite; }
.mist-front { bottom: calc(var(--ground) + 4px); height: calc(var(--trees-h) * .62); opacity: .96; animation: drift 120s linear infinite reverse; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-1600px); } }

.floor {
  bottom: 0;
  height: calc(var(--ground) + var(--trees-h) * .3);
  background: linear-gradient(180deg, rgba(251, 248, 242, 0) 0%, rgba(251, 248, 242, .85) 34%, var(--floor) 52%);
}
.atmos--quiet .floor { background: linear-gradient(180deg, rgba(245, 240, 230, 0) 0%, rgba(245, 240, 230, .85) 34%, var(--floor) 52%); }

/* The same paper stock over the whole scene, so fog and trees are printed, not pasted */
.grain { inset: 0; background: var(--grain) repeat; background-size: var(--grain-size); }

/* Hero photo sits in the same light: warm rim from the sun side */
.hero-photo { box-shadow: 0 34px 60px -34px rgba(59, 42, 32, .5), 0 0 0 1px rgba(255, 250, 240, .5); }
.hero-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 85% 0%, rgba(255, 220, 170, .32), rgba(255, 220, 170, 0) 60%);
  mix-blend-mode: soft-light;
}

/* Home: the tallest pines (centre of the tile) stand under the photo, low trees under the text */
.atmos:not(.atmos--quiet) .trees { background-position: calc(86vw - var(--trees-h) * 5.714) 100%; }

/* Inner pages: same place, quieter hour */
.atmos--quiet { --trees-h: clamp(90px, 12vw, 190px); --ground: clamp(36px, 4vw, 56px); }

@media (max-width: 899px) {
  :root { --sun-x: 88%; --sun-y: 2%; }
  .atmos:not(.atmos--quiet) { --trees-h: clamp(120px, 38vw, 170px); }
}

@media (prefers-reduced-motion: reduce) {
  .mist { animation: none; }
  canvas.fog { transform: none; }
  .site-header::before { transition: none; }
}

/* Supporting text inside the morning scene: one step deeper so it clears AA over the densest haze */
.hero .hero-who span, .hero .hero-facts, .page-top .lede, .page-top .caps { color: #4E4138; }

/* ==========================================================
   TYPE SYSTEM  (shared by all three variants; keep in sync)
   Headings: Newsreader, a variable serif with real optical sizes.
   At display size it draws finer, more open letters, so the headline
   reads in three calm lines instead of four heavy ones. Young Serif
   stays only on the KAIZEN wordmark, where it echoes the logo caps.
   Body: Source Sans 3 (unchanged), a warm humanist sans.
   Scale: about 1.25 on phones, 1.333 on desktop, from a 18/19px body.
   ========================================================== */
:root {
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --wordmark: "Young Serif", Georgia, serif;
  --measure: 66ch;
  --lh-body: 1.6;
}
body { line-height: var(--lh-body); font-kerning: normal; text-rendering: optimizeLegibility; }
h1, h2, h3, .faq summary, blockquote, .room b, .plan-step b, .price {
  font-optical-sizing: auto;
}

/* Headings: tighter leading as size grows, never heavier than 560 */
h1, h2, h3 { font-family: var(--serif); text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.25rem + 3.9vw, 3.6rem); font-weight: 470; line-height: 1.06; letter-spacing: -0.018em; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.1vw, 2.6rem); font-weight: 480; line-height: 1.1; letter-spacing: -0.012em; margin-bottom: .45em; }
h3 { font-size: clamp(1.28rem, 1.15rem + .4vw, 1.42rem); font-weight: 540; line-height: 1.22; letter-spacing: -0.004em; }

/* Home headline: three phrases, one idea per line.
   "A family chiropractor / for kids, parents, and / everyone in between."
   The size follows the text column (cqi), so the three-line shape holds
   in every variant's column width, from a 360px phone to a wide desktop. */
.hero-text { container-type: inline-size; }
.hero h1 {
  font-size: clamp(2.15rem, 1.3rem + 3.8vw, 3.5rem);
  font-size: clamp(2.05rem, 10.1cqi, 3.5rem);
  font-weight: 460;
  line-height: 1.08;
  letter-spacing: -0.011em;
  max-width: 12.5em;
  margin: 0 0 18px;
}
.hero h1 .nw { white-space: nowrap; }
@media (min-width: 900px) { .hero h1 { margin-bottom: 22px; } }
.hero-who .avatar { font-weight: 560; letter-spacing: .02em; }

/* Body copy */
p, li, dd, figcaption, .answer { text-wrap: pretty; }
p { margin: 0 0 1em; }
.prose { max-width: var(--measure); }
.prose p, .prose li { font-size: 1.06rem; }
.prose p + h2, .prose ul + h2, .prose ol + h2 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; padding-left: .2em; }
.prose li::marker { color: var(--rust); }

/* Ledes: one step up from body, a comfortable 30 to 36 words per line max */
.lede, .hero .lede, .page-top .lede { font-size: clamp(1.13rem, 1.02rem + .45vw, 1.28rem); line-height: 1.5; max-width: 32em; }
.section-head { max-width: 38em; }
.section-head p:not(.caps) { font-size: clamp(1.06rem, 1rem + .25vw, 1.14rem); line-height: 1.55; max-width: 34em; }

/* Eyebrow labels: the same spaced small caps as CHIROPRACTIC in the logo */
.caps, .section-head .caps {
  font-size: clamp(.8rem, .76rem + .15vw, .86rem); font-weight: 700; letter-spacing: .15em; line-height: 1.4;
  color: var(--rust-dark); margin: 0 0 .7em; font-variant-numeric: lining-nums;
}
.section-head .caps + h2, .page-top .caps + h1 { margin-top: 0; }
.page-top h1 { max-width: 14em; margin-bottom: .35em; }

/* Links and buttons */
a { text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
a:hover { text-decoration-color: currentColor; }
.textlink { text-decoration-thickness: 2px; text-underline-offset: .24em; }
.btn { letter-spacing: .01em; text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { text-underline-offset: .35em; }

/* Wordmark keeps the logo's engraved feel */
.brand-name b, .foot-brand b { font-family: var(--wordmark); font-weight: 400; }
.brand-name small { letter-spacing: .3em; }

/* Hero facts: bullets sit on the x-height, not the baseline */
.hero-facts { line-height: 1.4; }
.hero-facts li { display: flex; align-items: baseline; }
.hero-facts li::before { flex: none; transform: translateY(-.12em); vertical-align: baseline; }

/* First-visit steps: the number is centred on the first line of the heading */
.steps h3 { font-size: clamp(1.22rem, 1.12rem + .35vw, 1.34rem); line-height: 1.25; margin: 0 0 6px; padding-top: 2px; }
.steps p { line-height: 1.55; max-width: 34em; }
.steps li::before { font-variant-numeric: lining-nums tabular-nums; }

/* Blockquote: a real pull quote, set in the italic, with a hanging open-quote */
.meet blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 420;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.05rem); line-height: 1.28; letter-spacing: -0.008em;
  text-wrap: balance; text-indent: -.42em; hanging-punctuation: first; margin: 0 0 22px; max-width: 22em;
}
@supports (hanging-punctuation: first) { .meet blockquote { text-indent: 0; } }
.meet blockquote .nw { white-space: nowrap; }

/* Care paths, room list, plan steps */
.path h3 { margin: 16px 0 6px; }
.path p, .room span, .reasons p, .plan-step p, .pay-fact span { line-height: 1.5; }
.room b, .plan-step b { font-family: var(--serif); font-weight: 540; font-size: 1.28rem; line-height: 1.25; }
.plan-step .caps { margin-bottom: 8px; }
.pay-fact b { font-weight: 700; font-size: 1.1rem; line-height: 1.3; margin-bottom: 4px; }
/* nothing a parent has to read drops below 17px on a phone */
.pay-fact span, .plan-step p, .price-row p, .hero-facts, .room span, .next-list li { font-size: 1.0625rem; }
.hero-who span { font-size: 1rem; }
.form-note { font-size: 1rem; }

/* Pricing rows: name and number share a baseline */
.price-row h3 { font-size: 1.32rem; margin: 0 0 4px; }
.price-row p { line-height: 1.5; max-width: 36em; }
.price .tk { font-size: .56em; vertical-align: .2em; }
.price { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 760px) { .price-row { align-items: baseline; } .price { text-align: right; } }

/* FAQ: questions read as questions, not as headlines */
.faq summary {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 1.12rem + .35vw, 1.34rem);
  line-height: 1.3; text-wrap: balance; padding: 22px 48px 22px 0;
}
.faq summary::after { top: 50%; transform: translateY(-50%); line-height: 1; }
.faq .answer { max-width: var(--measure); line-height: 1.6; }

/* Reviews, CTA strip, footer headings */
.reviews h2, .cta-strip h2 { font-weight: 480; line-height: 1.12; }
.site-footer h2 { font-weight: 500; font-size: 1.35rem; }
.next-list li { line-height: 1.5; }
.field label, .field legend { line-height: 1.35; }

/* Phones: keep the first screen honest (photo, name, headline, button, lede) */
@media (max-width: 899px) {
  .hero-who { margin-bottom: 12px; }
  .hero h1 { margin-bottom: 14px; }
}

/* Type pass: give the headline column a little more room so the lede sets in two lines */
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.12fr 1fr; gap: 56px; } }