/* 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: 5px;
}

*, *::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); 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; }

/* ---------- Paper and ink ----------
   The site is a printed object. Every surface is the same cotton stock
   (fiber + tooth + a soft tonal mottle). The landscape is a two-ink print
   (pine + rust) laid on the paper with multiply, so the grain shows through
   the ink. Sections meet at deckled sheet edges, never at ruled lines. */
:root {
  --grain: url(img/paper-grain.webp);
  --mottle: url(img/paper-mottle.png);
  --stock: #FDFBF6;           /* the lighter sheet used for cards and forms */
  --sheet-shadow:
    0 0 0 1px rgba(92, 64, 40, .07),
    0 1px 1px rgba(59, 42, 32, .06),
    0 12px 26px -16px rgba(59, 42, 32, .32);
  --sheet-edge: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 0 38px rgba(150, 118, 78, .13);
}

/* One recipe for "paper": grain, then mottle, then the stock color */
body,
.site-header,
.mobile-nav,
.section,
.page-top,
.hero {
  background-image: var(--grain), var(--mottle);
  background-size: 420px 420px, 900px 900px;
}
.hero, .page-top, .section { background-color: var(--bone); }
.section--paper { background-color: var(--paper); }
.section--sand { background-color: var(--sand); }
.mobile-nav { background-color: var(--paper); }

/* Header: no rule. It is the top of the same sheet as the hero.
   Once the page scrolls under it, a soft cast shadow separates it. */
.site-header { transition: box-shadow .3s ease; }
.site-header.is-stuck { box-shadow: 0 10px 18px -14px rgba(59, 42, 32, .45); }
.mobile-nav { border-top: 0; }
.menu-btn { border-color: #CDBFA8; background: rgba(255, 255, 255, .35); }

/* ---------- Cards and forms: a lighter sheet laid on the page ---------- */
.form,
.expecting,
.reviews,
.room li,
.price-list,
.pay-fact,
.plan-step {
  background-color: var(--stock);
  background-image: var(--grain), var(--mottle);
  background-size: 420px 420px, 900px 900px;
  border: 0;
  border-radius: 3px;
  box-shadow: var(--sheet-shadow), var(--sheet-edge);
}
.pay-fact { border-left: 0; position: relative; }
.pay-fact::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; background: var(--pine); border-radius: 0 2px 2px 0; opacity: .85; }
.reviews { outline: 1.5px dashed #CDBFA8; outline-offset: -12px; }
.price-row { border-top-color: rgba(92, 64, 40, .14); }

.field input, .field select, .field textarea {
  background-color: #FFFEFB;
  border-color: #A8977D;
  box-shadow: inset 0 1px 3px rgba(59, 42, 32, .10);
}
.next-list li { border-color: rgba(92, 64, 40, .18); }
.faq details, .faq details:first-of-type, .reasons, .reasons div { border-color: rgba(92, 64, 40, .18); }

/* Closing strip: kraft stock rather than a big green block */
.cta-strip {
  background-color: var(--sand);
  background-image: var(--grain), var(--mottle);
  background-size: 420px 420px, 900px 900px;
  color: var(--spine);
  border-radius: 3px;
  box-shadow: var(--sheet-shadow), inset 0 0 44px rgba(130, 98, 62, .16);
}
.cta-strip h2 { color: var(--spine); }
.cta-strip p { color: var(--muted); }
.cta-strip .btn { background: var(--rust); border-color: var(--rust); color: #fff; }
.cta-strip .btn:hover { background: var(--rust-dark); border-color: var(--rust-dark); color: #fff; }

/* ---------- Photos: printed on the same stock ---------- */
.hero-photo, .path figure, .zone-teaser figure, .meet figure, .split figure { position: relative; border-radius: 3px; }
.hero-photo::after, .path figure::after, .zone-teaser figure::after, .meet figure::after, .split figure::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: var(--grain) 0 0 / 420px 420px;
  mix-blend-mode: multiply;
  opacity: .5;
  box-shadow: inset 0 0 0 1px rgba(59, 42, 32, .08), inset 0 0 50px rgba(59, 42, 32, .10);
}
.photo-note { z-index: 1; border-radius: 2px; }
.expecting img { border-radius: 2px; }

/* ---------- Deckled edges where two stocks meet ---------- */
.section { position: relative; }
.section--paper::before, .section--paper::after,
.section--sand::before, .section--sand::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 34px;
  pointer-events: none;
  z-index: 1;
  background: url(img/deckle-paper.webp) 0 0 / 1600px 34px repeat-x;
}
.section--sand::before, .section--sand::after { background-image: url(img/deckle-sand.webp); }
.section--paper::before, .section--sand::before { top: -19px; }
.section--paper::after, .section--sand::after { bottom: -19px; transform: scaleY(-1); background-position: 600px 0; }

/* ---------- Home hero: the print ---------- */
.atmos { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; mix-blend-mode: multiply; }
.hero, .page-top { position: relative; isolation: isolate; }

.print-land {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 190px;
  background: url(img/print-hero.webp) 58% 100% / cover no-repeat;
  /* fog lifts off the ridge behind the words: mountains knock out on the left, trees stay */
  -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 68%), linear-gradient(90deg, transparent 18%, #000 58%);
          mask-image: linear-gradient(180deg, transparent 50%, #000 68%), linear-gradient(90deg, transparent 18%, #000 58%);
}
.hero { padding-bottom: 190px; }

/* the next sheet is torn, and laid over the foot of the trees */
.hero + .section::before {
  background: url(img/tear-paper.webp) 0 0 / 1800px 80px repeat-x;
  height: 80px;
  top: -56px;
}

@media (min-width: 900px) {
  .hero { padding: 48px 0 300px; }
  .hero-grid { grid-template-columns: 1.22fr 1fr; gap: 56px; align-items: start; }
  .hero h1 { font-size: clamp(2.6rem, 3.9vw, 3.35rem); }
  .hero-photo { aspect-ratio: 5 / 6; margin-bottom: -250px; box-shadow: 0 26px 40px -26px rgba(59, 42, 32, .55); }
  .print-land { height: 400px; background-position: 50% 100%; background-size: max(100%, 1300px) auto; }
}

/* ---------- Inner page tops: a printed treeline border ---------- */
.page-top { padding-bottom: 120px; }
.page-top + .section { background-color: var(--paper); }
.print-band {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 110px;
  background: url(img/print-band.webp) 50% 100% / auto 100% repeat-x;
  opacity: .92;
}
.page-top + .section::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -19px; height: 34px; z-index: 1;
  pointer-events: none;
  background: url(img/deckle-paper.webp) 0 0 / 1600px 34px repeat-x;
}
.page-top + .section[style*="padding-top:0"], .page-top + .section[style*="padding-top:8px"] { padding-top: 28px !important; }
@media (min-width: 900px) {
  .page-top { padding-bottom: 170px; }
  .print-band { height: 150px; }
  .page-top + .section[style*="padding-top:0"], .page-top + .section[style*="padding-top:8px"] { padding-top: 40px !important; }
}

/* ---------- Footer: dark ground the trees grow out of ---------- */
.site-footer {
  position: relative;
  background-color: var(--spine);
  background-image: none;
}
.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0;
  bottom: calc(100% - 2px);
  height: 96px;
  pointer-events: none;
  background: url(img/treeline-foot.webp) 30% 100% / auto 100% repeat-x;
}
main > .section:last-child { padding-bottom: 150px; }
@media (min-width: 900px) {
  .site-footer::before { height: 130px; }
  main > .section:last-child { padding-bottom: 200px; }
}
.ig-grid span { border-radius: 2px; }
.map-slot { border-radius: 3px; }

/* the header and the top section are one sheet: continue the grain without a seam */
.hero, .page-top { background-position: 0 -68px, 0 -68px; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

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