/* 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 { background: var(--bone); border-bottom: 1px solid var(--line); 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; }

/* ==========================================================
   Grounded landscape
   One place, one light. Dawn over a ponderosa valley: hazy far
   ridges, a mid treeline standing in pooled fog, and a dry-grass
   meadow whose ground line IS the bottom of the hero and fades
   into the next section. Sun is low in the east (right), so every
   glow, ray and shadow on the page leans the same way.
   ========================================================== */
:root {
  --light: 255, 244, 222;          /* low morning sun */
  --grain: url(img/paper-grain.webp);
  --mottle: url(img/paper-mottle.webp);
  --grain-size: 384px 384px, 1152px 1152px;
  --head-h: 68px;
  --land-w: max(100vw, 980px);     /* landscape never gets narrower than this */
}

/* ---------- Paper: one real sheet under everything ---------- */
/* The same two tiles (tooth + fibres, and slow cloudy density) sit on
   every surface that has a fill, so sections and cards read as the same stock. */
body,
.section--paper, .section--sand,
.expecting, .reviews, .form, .room li, .pay-fact, .price-list, .plan-step,
.cta-strip, .site-footer, .mobile-nav, .map-slot, .scene-paper, .site-header::before {
  background-image: var(--grain), var(--mottle);
  background-size: var(--grain-size);
}
.section--paper { background-color: var(--paper); }
.section--sand { background-color: var(--sand); }
/* a touch more tooth on cards so they feel like a separate card laid on the page */
.expecting, .reviews, .form, .room li, .pay-fact, .price-list, .plan-step {
  background-position: 97px 41px, 300px 200px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 28px -22px rgba(59,42,32,.35);
}
.field input, .field select, .field textarea { background-color: #FFFEFB; }

/* ---------- Header: no rule, it floats on the sky ---------- */
.site-header { background: transparent; border-bottom: 0; isolation: isolate; }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: var(--bone);
  box-shadow: 0 14px 30px -22px rgba(59, 42, 32, .45);
  opacity: 0; transition: opacity .35s ease;
}
.site-header.is-stuck::before, .site-header:has(.mobile-nav.open)::before { opacity: 1; }
.mobile-nav { border-top: 0; background-color: var(--paper); }
.menu-btn { background: rgba(251, 248, 242, .55); }

/* The scene starts under the header, so there is no seam at the top */
main > .hero:first-child, main > .page-top:first-child { margin-top: calc(var(--head-h) * -1); }

/* ---------- The scene ---------- */
.hero, .page-top { position: relative; isolation: isolate; overflow: hidden; }
.scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* Sky: warm bone overhead, brightening toward the horizon, ending in the ground colour */
.hero {
  --ground: var(--paper);
  background: linear-gradient(180deg, #DFD1B8 0%, #E7DBC5 40%, #F0E6D5 66%, var(--ground) 100%);
  padding: calc(var(--head-h) + 22px) 0 calc(var(--land-w) * .215);
}
@media (min-width: 900px) {
  .hero { padding: calc(var(--head-h) + 40px) 0 calc(var(--land-w) * .215); }
}

/* The sun: low, right, just above the ridges */
.scene-sun {
  position: absolute; left: 94%; top: 66%;
  width: 1700px; height: 1500px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    rgba(255, 252, 244, 1) 0%, rgba(255, 249, 236, .95) 7%,
    rgba(var(--light), .7) 22%, rgba(var(--light), .3) 48%, rgba(var(--light), 0) 100%);
}
/* haze glowing in front of the ridges on the sun side */
.land-glow { background: radial-gradient(45% 60% at 96% 42%, rgba(255, 249, 236, .85), rgba(var(--light), .35) 45%, rgba(var(--light), 0) 100%); }

/* lives inside .land, between the far ridges and the treeline, so the beams
   are seen crossing the haze over the mountains, as they would be */
.land-rays {
  top: -90% !important;
  background: conic-gradient(from 180deg at 97% 60%,
    rgba(var(--light),0) 0deg,
    rgba(var(--light),0) 64deg, rgba(var(--light),.55) 67deg, rgba(var(--light),0) 71deg,
    rgba(var(--light),0) 75deg, rgba(var(--light),.8) 79deg, rgba(var(--light),.15) 83deg, rgba(var(--light),0) 85deg,
    rgba(var(--light),0) 88deg, rgba(var(--light),.95) 92deg, rgba(var(--light),.35) 95deg, rgba(var(--light),0) 98deg,
    rgba(var(--light),0) 103deg, rgba(var(--light),.6) 106deg, rgba(var(--light),0) 110deg,
    rgba(var(--light),0) 116deg, rgba(var(--light),.75) 120deg, rgba(var(--light),0) 126deg,
    rgba(var(--light),0) 360deg) !important;
  -webkit-mask-image: radial-gradient(110% 95% at 97% 60%, #000 0%, rgba(0,0,0,.8) 40%, transparent 95%);
          mask-image: radial-gradient(110% 95% at 97% 60%, #000 0%, rgba(0,0,0,.8) 40%, transparent 95%);
  filter: blur(4px);
  animation: breathe 14s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: .7; } to { opacity: 1; } }

/* The land: three real layers cut from a ponderosa valley photo, same canvas, stacked */
.land {
  position: absolute; left: 50%; bottom: 0;
  width: var(--land-w); aspect-ratio: 2000 / 770;
  transform: translateX(-50%);
}
.land > i { position: absolute; inset: 0; background-position: center bottom; background-size: 100% 100%; background-repeat: no-repeat; }
.land-far    { background-image: url(img/ls-far.webp); }
.land-trees  { background-image: url(img/ls-trees.webp); }
.land-meadow { background-image: url(img/ls-meadow.webp); }
[data-depth] { will-change: transform; }

/* Fog pooled in the valley between the ridges and the treeline */
.land-fog {
  background:
    radial-gradient(22% 9% at 20% 58%, rgba(var(--light), .95), rgba(var(--light), 0) 100%),
    radial-gradient(30% 8% at 55% 61%, rgba(var(--light), .8),  rgba(var(--light), 0) 100%),
    radial-gradient(26% 10% at 86% 57%, rgba(var(--light), .9),  rgba(var(--light), 0) 100%);
  animation: drift 60s ease-in-out infinite alternate;
}
.land-fog--low {
  background:
    radial-gradient(28% 6% at 30% 80%, rgba(var(--light), .85), rgba(var(--light), 0) 100%),
    radial-gradient(34% 7% at 75% 79%, rgba(var(--light), .75), rgba(var(--light), 0) 100%);
  animation-duration: 85s; animation-direction: alternate-reverse;
}
@keyframes drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* Paper over the whole scene, so the landscape looks printed on the same sheet */
.scene-paper { position: absolute; inset: 0; background-color: transparent; }
.hero .scene-paper { background-position: left bottom, left bottom; }

/* Hero content sits above the land, in the sky */
.hero-grid { position: relative; }
.hero-photo {
  box-shadow: 0 34px 60px -34px rgba(59, 42, 32, .55), 0 0 0 1px rgba(255, 255, 255, .35) inset;
}
/* the photo is lit by the same sun: warm spill on the right edge */
.hero-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(255deg, rgba(255, 214, 160, .28), rgba(255, 214, 160, 0) 45%);
  mix-blend-mode: soft-light;
}
.hero-who .avatar { box-shadow: 0 0 0 1px rgba(59,42,32,.15), 0 6px 14px -8px rgba(59,42,32,.5); }

@media (min-width: 900px) {
  .hero h1 { font-size: clamp(2.6rem, 3.5vw, 3.3rem); }
  .hero-grid { grid-template-columns: 1.08fr 1fr; gap: 56px; }
  /* photo stands down among the trees; the text stays up in the clear sky */
  .hero-photo { margin-bottom: calc(var(--land-w) * -.09); }
}

/* ---------- Inner pages: the same valley, seen from further off ---------- */
.page-top {
  --ground: var(--bone);
  --land-w: max(100vw, 900px);
  background: linear-gradient(180deg, #E3D6BF 0%, #ECE2D1 50%, var(--ground) 100%);
  padding: calc(var(--head-h) + 36px) 0 calc(var(--land-w) * .2);
}
@media (min-width: 900px) { .page-top { padding: calc(var(--head-h) + 64px) 0 calc(var(--land-w) * .2); } }
/* anchor left: the shorter, hazier trees sit under the text */
.page-top .land { left: 0; transform: none; }
.page-top .land-far { opacity: .75; }
.page-top .scene-sun { top: 80%; opacity: .9; }
.page-top .wrap { position: relative; }

/* ---------- Footer: the bookend. Night-dark ground, pines standing on it ---------- */
.site-footer { position: relative; overflow: visible; isolation: isolate; background-color: var(--spine); }
.site-footer::before, .site-footer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: var(--foot-trees); pointer-events: none;
}
.site-footer::before { background: url(img/ls-footer.webp) left bottom / auto 100% repeat-x; }
.site-footer::after {
  background-image: var(--grain); background-size: 384px 384px;
  -webkit-mask: url(img/ls-footer.webp) left bottom / auto 100% repeat-x;
          mask: url(img/ls-footer.webp) left bottom / auto 100% repeat-x;
}
:root { --foot-trees: clamp(84px, 11vw, 150px); }
main > .section:last-child { padding-bottom: calc(64px + var(--foot-trees) * .7); }
@media (min-width: 900px) { main > .section:last-child { padding-bottom: calc(96px + var(--foot-trees) * .7); } }
.site-footer .foot-base { border-top-color: rgba(237, 229, 214, .14); }

/* ---------- Phones ---------- */
@media (max-width: 899px) {
  .scene-sun { left: 88%; top: 72%; width: 760px; height: 760px; }
}

@media (prefers-reduced-motion: reduce) {
  .land-rays, .land-fog { animation: none; }
  .site-header::before { transition: none; }
  [data-depth] { will-change: auto; }
}
.page-top .land-meadow { background-image: url(img/ls-meadow-bone.webp); }
/* text that sits over the far ridges gets the darker ink, to keep AA contrast on the haze */
.hero-facts, .hero-who span, .page-top .lede { color: #4A3B31; }

/* ==========================================================
   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; }
}