/* ============================================================
   TOPPING CHIROPRACTIC — styles.css
   Edit the variables below to change the whole site's look.
   ============================================================ */

:root {
  /* ---- COLORS (change these to retheme the entire site) ---- */
  --ink:     #0C171D;   /* near-black — hero, footer, headings */
  --ink-2:   #12242D;   /* slightly lighter panel on dark areas */
  --body:    #2A3B44;   /* body text */
  --paper:   #F5F8F9;   /* page background — cool white, not cream */
  --band:    #E6EDF0;   /* alternating section background */
  --accent:  #0891B2;   /* primary accent — sharp cyan (buttons, links) */
  --accent-dk: #0E7490; /* hover state */
  --signal:  #D97706;   /* secondary accent — amber "signal" (sparingly) */
  --line:    #C3D0D6;   /* hairlines on light backgrounds */
  --line-dk: #24404C;   /* hairlines on dark backgrounds */

  /* ---- TYPE ---- */
  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-body);  /* labels use the body font (mono retired) */

  /* ---- LAYOUT ---- */
  --max-width: 1080px;
  --radius: 6px;
}

/* ---------- Reset & base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.7;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  /* No orphan words: balance heading line breaks (modern browsers) */
  text-wrap: balance;
}

/* Avoid single-word last lines in body text where supported */
p, blockquote, figcaption, li { text-wrap: pretty; }

h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin-bottom: 1rem; }
h3 { font-size: 1.2rem; margin-bottom: .5rem; }

p + p { margin-top: 1em; }

a { color: var(--accent-dk); }
a:hover { color: var(--accent); }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }

/* Eyebrow label above section headings */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin-bottom: .6rem;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--ink);
  color: #9FB4BD;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .02em;
  font-size: .82rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line-dk);
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.topbar a:hover { color: var(--accent); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 248, 249, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin-top: .15rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .5rem .7rem;
  font-size: 1.2rem;
  color: var(--ink);
  cursor: pointer;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
}
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.site-nav a:hover { color: var(--accent-dk); }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  padding: .65rem 1.4rem;
  border-radius: var(--radius);
  transition: background .15s ease;
}
.btn:hover { background: var(--accent-dk); }
.btn-ghost {
  background: transparent;
  color: var(--accent-dk) !important;
  border: 2px solid var(--accent);
}
.btn-ghost:hover { background: rgba(8, 145, 178, .08); }

/* ---------- Hero — dark, with a fine technical grid ---------- */
.hero {
  background:
    linear-gradient(rgba(12, 23, 29, .92), rgba(12, 23, 29, .97)),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(120, 170, 190, .18) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(120, 170, 190, .18) 39px 40px),
    var(--ink);
  color: #C7D5DC;
  padding: 5rem 0 4.5rem;
  border-bottom: 3px solid var(--accent);
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3rem;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.3rem);
  margin-bottom: 1.2rem;
  color: #fff;
}
.hero a:not(.btn) { color: var(--accent); }
.hero .since {
  font-family: var(--font-mono);
  color: var(--signal);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .78rem;
  display: block;
  margin-bottom: .9rem;
}
.hero-cta { margin-top: 1.8rem; display: flex; gap: .9rem; flex-wrap: wrap; }
.hero-cta .btn-ghost { color: #E8F4F8 !important; border-color: var(--accent); }
.hero-cta .btn-ghost:hover { background: rgba(8, 145, 178, .18); }

.hero-quote {
  background: var(--ink-2);
  border: 1px solid var(--line-dk);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 2rem;
}
.hero-quote blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  color: #fff;
  line-height: 1.4;
}
.hero-quote blockquote::before {
  content: "\201C";
  display: block;
  font-size: 3rem;
  line-height: .6;
  color: var(--signal);
  margin-bottom: .4rem;
}
.hero-quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: #9FB4BD;
}

/* ---------- Sections & the alignment axis ---------- */
section { padding: 4.5rem 0; }
section.band { background: var(--band); }

/* Signature element: a fine vertical "alignment axis" beside each
   section heading — a quiet nod to the spine and to precision. */
.section-head {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 2rem;
}
.section-head::before {
  content: "";
  position: absolute;
  left: 0; top: .3rem; bottom: .3rem;
  width: 3px;
  background: linear-gradient(var(--accent), var(--signal));
}

.prose { max-width: 48rem; }
.prose h3 { margin-top: 1.8rem; margin-bottom: .5rem; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.figure {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure figcaption {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--body);
  padding: .6rem .9rem;
  border-top: 1px solid var(--line);
}

.callout {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--signal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.4rem;
  margin-top: 2rem;
  max-width: 48rem;
}

/* ---------- First visit steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
  counter-reset: step;
}
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--accent-dk);
  margin-bottom: .7rem;
}
.office-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ---------- Testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}
.testimonial {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
}
.testimonial p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink);
  flex: 1;
}
.testimonial p::before { content: "\201C"; color: var(--signal); }
.testimonial p::after  { content: "\201D"; color: var(--signal); }
.testimonial cite {
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .78rem;
  color: var(--accent-dk);
}
.testimonial-cta { margin-top: 2rem; }

/* Full testimonials page */
.testimonial-full {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 1.6rem;
}
.testimonial-full h3 { color: var(--accent-dk); }
.testimonial-full .story { margin-top: .8rem; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}
.hours-table { width: 100%; border-collapse: collapse; margin-top: .8rem; }
.hours-table td { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.hours-table td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
}
.contact-list { list-style: none; margin-top: 1rem; }
.contact-list li { margin-bottom: .7rem; }
.contact-list strong { color: var(--ink); }
.map-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #8FA4AD;
  padding: 2.5rem 0;
  font-family: var(--font-mono);
  font-size: .8rem;
  border-top: 3px solid var(--accent);
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--accent); }

/* ---------- Small screens ---------- */
.topbar-hours { color: #C7D5DC; }

@media (max-width: 820px) {
  /* On small screens, drop the address from the top bar (it's in the
     Contact section) and keep hours + tap-to-call front and center. */
  .topbar .wrap > span:first-child { display: none; }

  .hero .wrap,
  .two-col,
  .contact-grid { grid-template-columns: 1fr; }

  .nav-toggle { display: block; }

  .site-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    display: none;
    padding: 1rem 1.25rem 1.4rem;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: .2rem; }
  .site-nav a { display: block; padding: .7rem 0; font-size: 1.05rem; }
  .site-nav .btn { text-align: center; margin-top: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ============================================================
   MODERN POLISH LAYER (v5) — refinements over the base look.
   Delete this whole block to return to the v4 appearance.
   ============================================================ */

:root {
  --radius: 14px;           /* softer, contemporary corners */
  --shadow-sm: 0 1px 2px rgba(12,23,29,.06), 0 4px 12px rgba(12,23,29,.06);
  --shadow-md: 0 2px 4px rgba(12,23,29,.08), 0 12px 28px rgba(12,23,29,.10);
}

::selection { background: rgba(8,145,178,.22); }

/* --- Header: floating feel --- */
.site-header { box-shadow: 0 1px 0 rgba(12,23,29,.04), 0 6px 18px rgba(12,23,29,.05); border-bottom: none; }

/* --- Hero: soft aurora glow instead of the grid --- */
.hero {
  background:
    radial-gradient(720px 420px at 82% 8%, rgba(8,145,178,.28), transparent 62%),
    radial-gradient(560px 380px at 6% 96%, rgba(217,119,6,.14), transparent 60%),
    linear-gradient(180deg, #0E1B22, var(--ink));
  border-bottom: none;
  padding: 6rem 0 5.5rem;
  position: relative;
}
.hero::after {                 /* hairline light seam under the hero */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 3.7rem); letter-spacing: -0.03em; }
.hero .since {
  display: inline-block;
  background: rgba(8,145,178,.14);
  border: 1px solid rgba(8,145,178,.4);
  border-radius: 999px;
  padding: .4rem 1rem;
  color: #7DD3E8;
  font-size: .78rem;
}

/* --- Glassy quote card --- */
.hero-quote {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

/* --- Buttons: pill, lift on hover --- */
.btn {
  border-radius: 999px;
  padding: .8rem 1.6rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 2px 10px rgba(8,145,178,.25);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(8,145,178,.32); }
.btn-ghost { box-shadow: none; }

/* --- Cards: depth + hover lift --- */
.step, .testimonial, .figure, .callout, .testimonial-full {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.step:hover, .testimonial:hover, .figure:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Step numbers become filled chips */
.step { border-top: 1px solid var(--line); }
.step::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  color: #fff;
  font-size: .82rem;
  letter-spacing: 0;
}

/* Photos: gentle zoom inside rounded frames */
.figure { overflow: hidden; }
.figure img { transition: transform .35s ease; }
.figure:hover img { transform: scale(1.04); }

/* --- Eyebrows: accent dash before the label --- */
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; }

/* --- Section rhythm: more air --- */
section { padding: 5.5rem 0; }

/* --- Hours table: card treatment --- */
.hours-table td { padding: .6rem .2rem; }
.hours-table tr:last-child td { border-bottom: none; }

/* --- Map + footer refinements --- */
.map-frame { border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.site-footer { border-top: none; position: relative; }
.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

@media (max-width: 820px) {
  .hero { padding: 4.5rem 0 4rem; }
  section { padding: 4rem 0; }
}

/* ============================================================
   BOLD LAYER (v7) — visible-from-across-the-room modernization
   ============================================================ */

:root { --radius: 18px; }

/* Hero: dramatic glow + huge type + gradient keyword */
.hero {
  background:
    radial-gradient(900px 560px at 85% 0%, rgba(8,145,178,.55), transparent 60%),
    radial-gradient(700px 480px at 0% 100%, rgba(217,119,6,.25), transparent 55%),
    linear-gradient(180deg, #0A161C, #10222B);
  padding: 7rem 0 6rem;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
}
.hero h1 .grad {
  background: linear-gradient(92deg, #22C9E8, #0891B2 55%, #7DD3E8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p { font-size: 1.15rem; color: #B9CDD6; }
.hero .since {
  background: rgba(8,145,178,.22);
  border-color: rgba(125,211,232,.55);
  color: #A9E6F5;
  box-shadow: 0 0 24px rgba(8,145,178,.35);
}

/* Big, confident buttons */
.btn { padding: .95rem 2rem; font-size: 1.02rem;
  background: linear-gradient(135deg, #12A5C9, var(--accent-dk)); }
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn-ghost { background: transparent; }

/* Section headings: larger, tighter */
h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 700; letter-spacing: -0.025em; }

/* Cards float: borders off, real shadows on */
.step, .testimonial, .figure, .callout, .testimonial-full {
  border: none;
  box-shadow: 0 1px 2px rgba(12,23,29,.05), 0 10px 30px rgba(12,23,29,.10);
}
.step:hover, .testimonial:hover, .figure:hover {
  transform: translateY(-5px);
  box-shadow: 0 3px 6px rgba(12,23,29,.07), 0 22px 48px rgba(12,23,29,.16);
}
.step { border-top: none; }
.callout { border-left: 4px solid var(--signal); }

/* Testimonials: full dark band for contrast */
.dark-band {
  background:
    radial-gradient(800px 500px at 90% 10%, rgba(8,145,178,.25), transparent 60%),
    linear-gradient(180deg, #0C171D 0%, #10222B 100%);
}
.dark-band h2 { color: #fff; }
.dark-band .eyebrow { color: #7DD3E8; }
.dark-band .testimonial { background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.dark-band .testimonial p { color: #EAF4F7; }
.dark-band .testimonial cite { color: #7DD3E8; }
.dark-band .btn-ghost { color: #A9E6F5 !important; border-color: rgba(125,211,232,.6); }
.dark-band .btn-ghost:hover { background: rgba(8,145,178,.18); }

/* Photos: larger presence */
.office-gallery { gap: 1.2rem; }
.figure img { aspect-ratio: 4/3; }

/* ============================================================
   MOTION LAYER (v8) — entrance, scroll reveal, ambient life
   ============================================================ */

/* Hero entrance: staggered rise on page load */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .since      { animation: riseIn .6s cubic-bezier(.2,.7,.2,1) both; }
.hero h1          { animation: riseIn .6s .1s cubic-bezier(.2,.7,.2,1) both; }
.hero p           { animation: riseIn .6s .2s cubic-bezier(.2,.7,.2,1) both; }
.hero .hero-cta   { animation: riseIn .6s .3s cubic-bezier(.2,.7,.2,1) both; }
.hero .hero-quote { animation: riseIn .7s .45s cubic-bezier(.2,.7,.2,1) both; }

/* Ambient: the hero glow slowly breathes */
@keyframes breathe {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
.hero { overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 60%; height: 90%;
  background: radial-gradient(closest-side, rgba(34,201,232,.28), transparent 70%);
  animation: breathe 9s ease-in-out infinite;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

/* Scroll reveal: elements rise as they enter the viewport (JS adds .in) */
.reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Stagger siblings slightly */
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .24s; }

/* Motion off = everything simply visible */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   v9 — hero headline line-break fix
   "balance" made short choppy lines at narrow widths;
   "pretty" lets the headline fill lines naturally while
   still avoiding a lone last word.
   ============================================================ */
.hero h1 { text-wrap: pretty; }

@media (max-width: 600px) {
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); letter-spacing: -0.025em; }
}

/* v10 — hero headline uses fixed, intentional line breaks */
.hero h1 { text-wrap: initial; }
@media (max-width: 380px) {
  .hero h1 { font-size: 1.9rem; }  /* keep the fixed lines fitting on the smallest phones */
}

/* ============================================================
   v11 — headline auto-fits its container so the three fixed
   lines never wrap into a fourth, at any screen width.
   ============================================================ */
.hero .wrap > div:first-child { container-type: inline-size; }

.hero h1 {
  white-space: nowrap;                       /* the <br>s are the only breaks */
  font-size: clamp(1.7rem, 8.8vw, 4rem);     /* fallback for older browsers */
}
@supports (font-size: 1cqw) {
  .hero h1 { font-size: clamp(1.7rem, 9cqw, 4rem); }  /* sized to the text column */
}

/* v12 — breathing room after the first headline line */
.hero h1 .line1 { display: block; margin-bottom: .35em; }

/* ============================================================
   v14 — light-section polish: quiet depth, no distraction
   ============================================================ */

/* White sections: a whisper of tint so they aren't flat paper */
section:not(.band):not(.dark-band):not(.hero) {
  background:
    radial-gradient(560px 320px at 100% 0%, rgba(8,145,178,.045), transparent 65%),
    var(--paper);
}

/* Gray band sections: gentle diagonal wash + soft corner glow,
   plus the hairline gradient seam echoing the hero and footer */
section.band {
  background:
    radial-gradient(620px 360px at 0% 100%, rgba(8,145,178,.06), transparent 60%),
    linear-gradient(135deg, #E9F0F2 0%, #E2EBEA 100%);
  position: relative;
}
section.band::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(8,145,178,.35), transparent);
}

/* Cards get a faint vertical sheen instead of flat white */
.step, .testimonial, .callout {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFC 100%);
}

/* Callout warms up slightly to match its amber edge */
.callout {
  background: linear-gradient(180deg, #FFFDF9 0%, #FDF9F2 100%);
}

/* Hours table: alternating row tint for scannability */
.hours-table tr:nth-child(odd) td { background: rgba(8,145,178,.035); }
.hours-table td:first-child { padding-left: .6rem; }
.hours-table td:last-child { padding-right: .6rem; }

/* Section headings: accent line gains a soft glow */
.section-head::before {
  box-shadow: 0 0 12px rgba(8,145,178,.35);
}

/* v16 — header tagline centered under the practice name */
.brand small { text-align: center; }

/* v18 — header name: bolder and bigger */
.brand { font-weight: 700; font-size: 1.65rem; letter-spacing: -0.02em; }

/* ============================================================
   v19 — logo treatment: spine mark + two-tone wordmark
   (the highlighted top vertebra is the atlas — upper cervical)
   ============================================================ */
.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.brand-mark { flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(8,145,178,.25)); }
.brand-name { line-height: 1; }
.brand-accent {
  background: linear-gradient(92deg, #0E7490, #0891B2 60%, #22A8CC);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 480px) {
  .brand { font-size: 1.4rem; gap: .5rem; }
  .brand-mark { width: 28px; height: 28px; }
}

/* v20 — halve the space above each section's title bar
   (bottom padding unchanged; hero keeps its own spacing) */
section:not(.hero) { padding-top: 2.75rem; }
@media (max-width: 820px) {
  section:not(.hero) { padding-top: 2rem; }
}

/* ============================================================
   v21 — hero image replaces the quote card; testimonials moved
   up beneath the hero
   ============================================================ */
.hero-visual {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(125, 211, 232, .35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 40px rgba(8, 145, 178, .25);
  animation: riseIn .7s .45s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-visual img { display: block; width: 100%; height: auto; }

/* The dark testimonial band now sits against the dark hero —
   let the hero's light seam separate them, no double border */
.hero + .dark-band { padding-top: 4rem; }

/* ============================================================
   v22 — The Technique and First Visit go dark like Testimonials,
   so the page alternates dark / light down its full length.
   Text directly on the dark background lightens; content inside
   white cards (steps, callout, photos) keeps its dark-on-light.
   ============================================================ */
.dark-band .prose p,
.dark-band .wrap > p { color: #C4D6DE; }
.dark-band .prose p strong,
.dark-band .wrap > p strong { color: #FFFFFF; }
.dark-band .prose h3 { color: #FFFFFF; }

/* Photo frames read better with a light edge on dark */
.dark-band .figure { border: 1px solid rgba(125, 211, 232, .25); }
.dark-band .figure figcaption {
  background: rgba(255, 255, 255, .96);
}

/* ============================================================
   v23 — alternation flipped: Approach and Dr. Topping go dark;
   Testimonials, Technique, First Visit return to light.
   ============================================================ */
/* Dr. Topping's bio text sits in a two-col grid on dark */
.dark-band .two-col p { color: #C4D6DE; }
.dark-band .two-col p strong { color: #FFFFFF; }

/* White section directly after the dark hero gets a little extra
   room so the transition breathes */
.hero + section { padding-top: 3.5rem; }

/* ============================================================
   v24 — Contact section goes dark; the page settles into the
   footer through one continuous dark closing.
   ============================================================ */
.dark-band .contact-list li { color: #C4D6DE; }
.dark-band .contact-list strong { color: #FFFFFF; }
.dark-band .contact-grid h3 { color: #FFFFFF; }
.dark-band a:not(.btn) { color: #7DD3E8; }
.dark-band a:not(.btn):hover { color: #A9E6F5; }

.dark-band .hours-table td {
  color: #C4D6DE;
  border-bottom: 1px solid rgba(125, 211, 232, .2);
}
.dark-band .hours-table td:last-child { color: #FFFFFF; }
.dark-band .hours-table tr:nth-child(odd) td { background: rgba(255, 255, 255, .05); }
.dark-band .hours-table tr:last-child td { border-bottom: none; }

.dark-band .map-frame { border: 1px solid rgba(125, 211, 232, .3); }

/* ============================================================
   v26 — tighter, symmetric section spacing: equal space above
   and below every section's content (hero untouched).
   ============================================================ */
section:not(.hero) { padding-top: 2rem; padding-bottom: 2rem; }
.hero + section { padding-top: 2rem; }
@media (max-width: 820px) {
  section:not(.hero) { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}

/* v27 — a bit more space above and below each section */
section:not(.hero) { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.hero + section { padding-top: 2.5rem; }

/* v28 — the dark sections' glows slowly breathe (like the hero's) */
.dark-band { position: relative; overflow: hidden; }
.dark-band > .wrap { position: relative; z-index: 1; }
.dark-band::after {
  content: "";
  position: absolute;
  top: -15%; right: -8%;
  width: 55%; height: 80%;
  background: radial-gradient(closest-side, rgba(34,201,232,.16), transparent 70%);
  animation: breathe 11s ease-in-out infinite;
  pointer-events: none;
}
.dark-band:nth-of-type(even)::after {
  right: auto; left: -8%;
  animation-duration: 13s;
  animation-delay: -5s;
}

/* v29 — the amber glow breathes too: hero bottom-left, and every
   dark section gets one in the corner opposite its cyan glow */
.hero .wrap::before {
  content: "";
  position: absolute;
  bottom: -18%; left: -14%;
  width: 48%; height: 70%;
  background: radial-gradient(closest-side, rgba(217,119,6,.20), transparent 70%);
  animation: breathe 14s ease-in-out infinite;
  animation-delay: -6s;
  pointer-events: none;
  z-index: -1;
}
.dark-band::before {
  content: "";
  position: absolute;
  bottom: -15%; left: -8%;
  width: 42%; height: 65%;
  background: radial-gradient(closest-side, rgba(217,119,6,.11), transparent 70%);
  animation: breathe 15s ease-in-out infinite;
  animation-delay: -8s;
  pointer-events: none;
}
.dark-band:nth-of-type(even)::before {
  left: auto; right: -8%;
  animation-duration: 12s;
  animation-delay: -3s;
}

/* ============================================================
   v30 — one glow layer per section, continuous drift loop
   ============================================================ */

/* Kill the misplaced text-adjacent amber blob */
.hero .wrap::before { content: none; }

/* Hero: flat dark base; all glows live in one full-bleed layer */
.hero {
  background: linear-gradient(180deg, #0A161C, #10222B);
}
.hero::before {
  top: 0; right: 0; left: 0; bottom: 0;
  width: auto; height: auto;
  background:
    radial-gradient(720px 480px at 88% 0%, rgba(34,201,232,.40), transparent 62%),
    radial-gradient(560px 400px at 4% 100%, rgba(217,119,6,.18), transparent 60%);
  animation: drift 22s linear infinite;
}

/* Continuous loop: the glows wander a small circuit, never resting */
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(1.5%, -1.5%) scale(1.05); }
  50%  { transform: translate(0, -2.5%) scale(1.02); }
  75%  { transform: translate(-1.5%, -1%) scale(1.06); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Dark sections: same treatment — both glows on the drift loop */
.dark-band::after { animation: drift 26s linear infinite; }
.dark-band::before { animation: drift 31s linear infinite reverse; }
.dark-band:nth-of-type(even)::after { animation: drift 29s linear infinite reverse; }
.dark-band:nth-of-type(even)::before { animation: drift 24s linear infinite; }

/* ============================================================
   v31 — white sections get quiet design: dot grid, dual corner
   tints, and the hairline seam. Light-mode echo of the dark bands.
   ============================================================ */
section:not(.hero):not(.dark-band) { position: relative; overflow: hidden; }
section:not(.hero):not(.dark-band) > .wrap { position: relative; z-index: 1; }

/* Two-corner tinted lighting: cool top-right, warm whisper bottom-left */
section:not(.hero):not(.dark-band) {
  background:
    radial-gradient(640px 380px at 96% 0%, rgba(8,145,178,.07), transparent 62%),
    radial-gradient(520px 320px at 2% 100%, rgba(217,119,6,.045), transparent 60%),
    var(--paper);
}
section.band:not(.dark-band) {
  background:
    radial-gradient(640px 380px at 96% 0%, rgba(8,145,178,.08), transparent 62%),
    radial-gradient(520px 320px at 2% 100%, rgba(217,119,6,.05), transparent 60%),
    linear-gradient(135deg, #E9F0F2 0%, #E2EBEA 100%);
}

/* Hairline gradient seam along the top of every light section */
section:not(.hero):not(.dark-band)::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(8,145,178,.35), transparent);
}

/* Fine dot grid fading in from the top-right corner */
section:not(.hero):not(.dark-band)::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 42%; height: 70%;
  background-image: radial-gradient(rgba(8,145,178,.14) 1px, transparent 1.5px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(closest-side at 100% 0%, #000, transparent);
  mask-image: radial-gradient(closest-side at 100% 0%, #000, transparent);
  pointer-events: none;
}

/* v32 — same design, more visible */
section:not(.hero):not(.dark-band) {
  background:
    radial-gradient(700px 420px at 96% 0%, rgba(8,145,178,.13), transparent 62%),
    radial-gradient(560px 350px at 2% 100%, rgba(217,119,6,.09), transparent 60%),
    var(--paper);
}
section.band:not(.dark-band) {
  background:
    radial-gradient(700px 420px at 96% 0%, rgba(8,145,178,.14), transparent 62%),
    radial-gradient(560px 350px at 2% 100%, rgba(217,119,6,.10), transparent 60%),
    linear-gradient(135deg, #E9F0F2 0%, #E2EBEA 100%);
}
section:not(.hero):not(.dark-band)::before {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(8,145,178,.55), transparent);
}
section:not(.hero):not(.dark-band)::after {
  background-image: radial-gradient(rgba(8,145,178,.28) 1.2px, transparent 1.8px);
  width: 46%; height: 80%;
}

/* ============================================================
   v33 — FIX: earlier rules were overriding the section design,
   and the dot-grid mask rendered the dots invisible. Corrected
   selectors and a working fade.
   ============================================================ */
section:not(.band):not(.dark-band):not(.hero) {
  background:
    radial-gradient(700px 420px at 96% 0%, rgba(8,145,178,.13), transparent 62%),
    radial-gradient(560px 350px at 2% 100%, rgba(217,119,6,.09), transparent 60%),
    var(--paper);
}
section.band:not(.dark-band) {
  background:
    radial-gradient(700px 420px at 96% 0%, rgba(8,145,178,.14), transparent 62%),
    radial-gradient(560px 350px at 2% 100%, rgba(217,119,6,.10), transparent 60%),
    linear-gradient(135deg, #E9F0F2 0%, #E2EBEA 100%);
}
section:not(.band):not(.dark-band):not(.hero)::after,
section.band:not(.dark-band)::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 46%; height: 80%;
  background-image: radial-gradient(rgba(8,145,178,.30) 1.2px, transparent 1.8px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #000 25%, transparent 72%);
  mask-image: radial-gradient(120% 120% at 100% 0%, #000 25%, transparent 72%);
  pointer-events: none;
}
section:not(.band):not(.dark-band):not(.hero)::before,
section.band:not(.dark-band)::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(8,145,178,.55), transparent);
}
section.band:not(.dark-band) { position: relative; overflow: hidden; }
section.band:not(.dark-band) > .wrap { position: relative; z-index: 1; }

/* v35 — tagline moves to the header, under the practice name */
.brand-text { display: flex; flex-direction: column; }
.brand-tag {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--accent-dk);
  margin-top: 3px;
  line-height: 1.2;
}
@media (max-width: 480px) {
  .brand-tag { font-size: .58rem; }
}

/* v36 — no all caps anywhere: tagline and section labels render
   exactly as written, in Title Case */
.brand-tag { text-transform: none; letter-spacing: .04em; }
.eyebrow { text-transform: none; letter-spacing: .08em; font-size: .85rem; }

/* v37 — actually defeat the old uppercase rule on the tagline */
.brand small.brand-tag,
.brand .brand-tag {
  text-transform: none;
  letter-spacing: .04em;
}

/* v38 — dot grid in both corners of white sections (upper right
   and lower left), fading toward the center */
section:not(.band):not(.dark-band):not(.hero)::after,
section.band:not(.dark-band)::after {
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto; height: auto;
  -webkit-mask-image:
    radial-gradient(55% 75% at 100% 0%, #000 20%, transparent 68%),
    radial-gradient(55% 75% at 0% 100%, #000 20%, transparent 68%);
  mask-image:
    radial-gradient(55% 75% at 100% 0%, #000 20%, transparent 68%),
    radial-gradient(55% 75% at 0% 100%, #000 20%, transparent 68%);
}

/* ============================================================
   v43 — site-blue animated pin overlaid on the map
   (covers Google's red pin at the embed's center)
   ============================================================ */
.map-wrap { position: relative; }
.map-wrap .map-frame { display: block; }

.map-pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  transform: translate(-50%, -100%);
  background: linear-gradient(135deg, #22C9E8, #0891B2);
  border: 2.5px solid #FFFFFF;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  transform-origin: bottom left;
  box-shadow: 0 3px 10px rgba(12, 23, 29, .4);
  pointer-events: none;
}
.map-pin::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: #FFFFFF;
  border-radius: 50%;
}

.map-pulse {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2.5px solid var(--accent);
  animation: pinPulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes pinPulse {
  0%   { opacity: .85; scale: 1; }
  100% { opacity: 0; scale: 3.4; }
}

/* v44 — bigger pin, bigger pulse */
.map-pin { width: 38px; height: 38px; border-width: 3px; }
.map-pin::after { inset: 10px; }
.map-pulse { width: 26px; height: 26px; border-width: 3px; }

/* v45 — our pin is the only pin; directions link under the map */
.map-link { margin-top: .6rem; font-size: .9rem; }

/* ============================================================
   v47 — pulse retired; the map gets a slowly circling gradient
   border: cyan and amber light traveling around the frame.
   ============================================================ */
@property --mapAngle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.map-wrap {
  padding: 3px;
  border-radius: var(--radius);
  background: conic-gradient(from var(--mapAngle),
    #0891B2, #D97706 22%, #22C9E8 50%, #0E7490 75%, #0891B2);
  animation: mapBorder 14s linear infinite;
}
@keyframes mapBorder { to { --mapAngle: 360deg; } }

.map-wrap .map-frame,
.dark-band .map-wrap .map-frame {
  border: none;
  border-radius: calc(var(--radius) - 3px);
  background: var(--paper);
}

/* v48 — border a little thicker, a little faster */
.map-wrap { padding: 5px; animation-duration: 9s; }
.map-wrap .map-frame,
.dark-band .map-wrap .map-frame { border-radius: calc(var(--radius) - 5px); }

/* v49 — directions link sits centered directly under the map */
.map-link { text-align: center; margin-top: .7rem; }

/* ============================================================
   v50 — dots span the full white sections and slowly breathe
   ============================================================ */
section:not(.band):not(.dark-band):not(.hero)::after,
section.band:not(.dark-band)::after {
  background-image: radial-gradient(rgba(8,145,178,.17) 1.2px, transparent 1.8px);
  -webkit-mask-image: none;
  mask-image: none;
  animation: dotsBreathe 9s ease-in-out infinite;
}
@keyframes dotsBreathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ============================================================
   v51 — FAQ accordion + after-hours line
   ============================================================ */
.after-hours { margin-top: .8rem; font-size: .95rem; color: #C4D6DE; }

.faq-list { max-width: 48rem; }
.faq-item {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFC 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: .9rem;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 3rem 1.1rem 1.4rem;
  font-weight: 700;
  color: var(--ink);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.3rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item > p { padding: 0 1.4rem 1.2rem; }
.faq-item summary:hover { color: var(--accent-dk); }

/* v53 — "copied" confirmation for email links */
.copy-tip {
  display: inline-block;
  margin-left: .6rem;
  padding: .2rem .6rem;
  background: var(--accent);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 999px;
  animation: riseIn .25s ease both;
}

/* v54 — FAQ: tighter boxes, alternating blue / white */
.faq-item summary { padding: .7rem 3rem .7rem 1.2rem; }
.faq-item > p { padding: 0 1.2rem .9rem; }
.faq-item { margin-bottom: .7rem; }

.faq-item:nth-child(odd) {
  background: linear-gradient(135deg, #10222B, #16303B);
}
.faq-item:nth-child(odd) summary { color: #FFFFFF; }
.faq-item:nth-child(odd) summary:hover { color: #7DD3E8; }
.faq-item:nth-child(odd) summary::after { color: #22C9E8; }
.faq-item:nth-child(odd) > p { color: #C4D6DE; }
.faq-item:nth-child(odd) a { color: #7DD3E8; }

/* v55 — FAQ blue boxes: lighter, with the section-style glow
   bursts; open items show ^ instead of a rotated + */
.faq-item:nth-child(odd) {
  background:
    radial-gradient(320px 140px at 95% 0%, rgba(34,201,232,.20), transparent 65%),
    radial-gradient(260px 120px at 4% 100%, rgba(217,119,6,.12), transparent 60%),
    linear-gradient(135deg, #1B3A47, #245061);
}
.faq-item[open] summary::after {
  content: "^";
  transform: translateY(-30%);
  font-size: 1.25rem;
}

/* v57 — FAQ questions: centered, bolder, with a soft glow pulse
   on unopened boxes (staggered so they don't pulse in unison) */
.faq-item summary {
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
@keyframes faqGlow {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50%      { box-shadow: 0 2px 6px rgba(12,23,29,.08), 0 0 22px rgba(8,145,178,.38); }
}
.faq-item:not([open]) { animation: faqGlow 4.5s ease-in-out infinite; }
.faq-item:nth-child(2):not([open]) { animation-delay: -0.7s; }
.faq-item:nth-child(3):not([open]) { animation-delay: -1.5s; }
.faq-item:nth-child(4):not([open]) { animation-delay: -2.2s; }
.faq-item:nth-child(5):not([open]) { animation-delay: -3.0s; }
.faq-item:nth-child(6):not([open]) { animation-delay: -3.7s; }

/* v58 — "Read All the Patient Stories" button: centered, bolder,
   pulsing; FAQ answers centered to match their questions */
.testimonial-cta { text-align: center; }
.testimonial-cta .btn {
  font-weight: 800;
  font-size: 1.05rem;
  padding: 1rem 2.4rem;
  animation: faqGlow 4.5s ease-in-out infinite;
}
.faq-item > p { text-align: center; }

/* v59 — stories button: heavier weight, stronger pulse */
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(8,145,178,0); transform: scale(1); }
  50%      { box-shadow: 0 0 26px rgba(8,145,178,.55), 0 0 54px rgba(8,145,178,.22);
             transform: scale(1.035); }
}
.testimonial-cta .btn {
  font-weight: 900;
  letter-spacing: .01em;
  border-width: 2.5px;
  animation: btnPulse 3.5s ease-in-out infinite;
}