/* ============================================================================
   ADVANCED ORAL SURGERY OF TALLAHASSEE — Shared Layout
   Header · Footer · Mobile Nav · Design tokens
   Values below are copied 1:1 from index.html so every page matches it exactly.
   ============================================================================ */

/* ── Fonts (Fontshare, free for commercial use) ─────────────────────────────── */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&f[]=gambetta@400,401&display=swap');

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
  --ink:          #221E1A;
  --footer-bg:    #1A1714;
  --body:         #3A332B;
  --body-mid:     #5C544A;
  --mute:         #8C8475;
  --mute-soft:    #9C9384;
  --mute-faint:   #6E665A;
  --hairline:     #ECE4D6;
  --canvas:       #ffffff;
  --canvas-soft:  #F6F1E9;
  --card-border:  #E6DDCD;

  --accent:       #B8862F;
  --accent-light: #E7C982;
  --accent-hover: #221E1A;
  --deep:         #15403F;
  --hero-dark:    #2A2521;

  --font-h: 'General Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-b: 'Gambetta', Georgia, 'Times New Roman', serif;

  --max-w:  1280px;
  --px:     48px;
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-b);
  font-weight: 400;
  color: var(--body);
  background: var(--canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-h); color: var(--ink); }
ul { list-style: none; }
button { font-family: var(--font-h); cursor: pointer; border: none; background: none; }

/* ── Header / Footer component ───────────────────────────────────────────────
   The header and footer markup itself is NOT authored here — it's injected
   verbatim (copied 1:1 from index.html's actual inline styles) by
   assets/js/layout.js into <div id="site-header"> / <div id="site-footer">
   on every page. That JS file is the single source of truth; edit it once
   and every page picks up the change.

   This CSS only adds what plain HTML attributes can't express: :hover
   states (index.html's own bundler uses a custom `style-hover` attribute
   that only works inside that bundle) and the mobile nav, which
   index.html's fixed-width mockup doesn't have at all.
   ────────────────────────────────────────────────────────────────────────── */
.gnav-link:hover, .gnav-link:focus-visible { color: #B8862F; }
.gnav-sub-link:hover { background: #F6F1E9; color: #B8862F; }
.gcta:hover { background: #221E1A; }
.gfoot-link:hover { color: #B8862F; }
.glegal-link:hover { color: #B7AE9F; }
.gmap-link:hover { text-decoration: underline !important; }
.g-utility a[aria-label]:hover, .g-footer a[aria-label]:hover { border-color: #B8862F; color: #B8862F; }

.g-nav-item { position: relative; }
.g-nav-dropdown {
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* .is-open is set by the click handler in layout.js. It matters on touch
   devices at desktop width, which never fire :hover — without it, tapping a
   parent trigger would open nothing. */
.g-nav-item:hover .g-nav-dropdown,
.g-nav-item:focus-within .g-nav-dropdown,
.g-nav-item.is-open .g-nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Hamburger (hidden on desktop — index.html has no mobile nav to match) */
.g-nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; flex-shrink: 0;
}
.g-nav-toggle span {
  position: relative;
  display: block; width: 22px; height: 2px; background: #221E1A;
  transition: background .2s ease;
}
.g-nav-toggle span::before, .g-nav-toggle span::after {
  content: ''; display: block; width: 22px; height: 2px; background: #221E1A;
  transition: transform .2s ease;
}
.g-nav-toggle span::before { position: absolute; transform: translateY(-7px); }
.g-nav-toggle span::after { position: absolute; transform: translateY(7px); }
.g-nav-toggle[aria-expanded="true"] span { background: transparent; }
.g-nav-toggle[aria-expanded="true"] span::before { transform: translateY(0) rotate(45deg); }
.g-nav-toggle[aria-expanded="true"] span::after { transform: translateY(0) rotate(-45deg); }

/* ── Page hero band (interior pages) ─────────────────────────────────────────
   Two-column: copy + CTA on the left, image on the right. Same eyebrow +
   heading scale used for section headings on the homepage, just given more
   room and a photo slot so interior pages open with real production weight
   instead of a plain title bar.
   ────────────────────────────────────────────────────────────────────────── */
.page-title {
  background: var(--canvas-soft);
  padding: 64px 48px;
  border-bottom: 1px solid var(--hairline);
}
.page-title__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.eyebrow {
  display: block;
  font-family: var(--font-h);
  font-size: 12px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.page-title h1 {
  font-weight: 500;
  font-size: 46px;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 16px;
}
.page-title p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--body-mid);
  max-width: 52ch;
  margin-bottom: 26px;
}
.page-title__media .image-placeholder { min-height: 320px; }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.breadcrumb {
  font-family: var(--font-h);
  font-size: 12.5px;
  color: var(--mute);
  padding: 16px 48px 0;
  max-width: var(--max-w);
  margin: 0 auto;
}
.breadcrumb a { color: var(--mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin: 0 6px; opacity: .6; }

/* ── Dark image placeholder (for use on dark/photo sections) ─────────────────────
   A warm brand-colored gradient stands in until real photography is added —
   deliberately not a flat gray box or a dashed "missing asset" outline.
   ────────────────────────────────────────────────────────────────────────── */
.image-placeholder--dark {
  background:
    radial-gradient(ellipse at 28% 22%, rgba(184,134,47,.28), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(21,64,63,.55), transparent 60%),
    linear-gradient(135deg, #2E2822 0%, #1A1714 60%, #221E1A 100%);
  border: none;
  color: rgba(255,255,255,.4);
}

/* ── Full-bleed photo hero (procedure pages) ──────────────────────────────────
   Same treatment as the homepage hero: full-bleed image, dark gradient
   overlay, centered copy. Used instead of .page-title on pages that should
   open with real visual weight.
   ────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 460px; display: flex; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__media .image-placeholder--dark {
  width: 100%; height: 100%; min-height: 460px; border: none;
  align-items: flex-end; justify-content: flex-end;
  padding: 20px 24px; font-size: 11.5px; opacity: .6;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,15,.62) 0%, rgba(20,18,15,.38) 45%, rgba(20,18,15,.74) 100%);
}

.hero__inner { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; padding: 80px 48px; width: 100%; }
.hero .eyebrow { color: var(--accent-light); }
.hero h1 { color: #fff; font-weight: 600; font-size: 48px; line-height: 1.1; max-width: 16ch; margin: 0 0 18px; }
.hero p { color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.7; max-width: 54ch; margin: 0 0 30px; }
.btn-group { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-outline { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.55); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.btn-outline-dark { background: transparent; border: 1px solid var(--card-border); color: var(--ink); }
.btn-outline-dark:hover { border-color: var(--accent); color: var(--accent); }

/* ── Homepage hero ────────────────────────────────────────────────────────────
   The homepage is the one page that keeps a photo hero — it has dedicated
   photography, so the interior pages' no-sourced-imagery rule doesn't apply.
   The overlay is the original mockup's, copied exactly: 90deg left-dark
   (rgba(20,18,15,.86) → .58) so left-aligned copy always sits on the darkest
   part of the photo. The base .hero__overlay is the vertical variant used by
   nothing now, kept for any future photo band.
   ────────────────────────────────────────────────────────────────────────── */
.hero--home { min-height: 560px; }
/* The base .hero h1 max-width (16ch) is tuned for short interior titles; the
   homepage headline is ~56 characters and was breaking onto four lines. Full
   column width makes it wrap once, and text-wrap:balance evens the two lines
   (older browsers just render the same two lines unbalanced). */
.hero--home h1 { max-width: none; text-wrap: balance; }
.hero--home .hero__overlay {
  background: linear-gradient(90deg, rgba(20,18,15,.86) 0%, rgba(20,18,15,.58) 100%);
}

/* Linked icon cards — homepage "What We Treat" grid. Same lattice, but each
   cell is an anchor to its service page. */
a.icon-card { display: block; text-decoration: none; }
a.icon-card:hover h3 { color: var(--accent); }
.icon-card__go {
  display: inline-block;
  font-family: var(--font-h);
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  margin-top: 14px;
}
.icon-card__go::after { content: ' \2192'; }

/* Star row — reviews section. Plain text glyphs, gold, no images. */
.stars {
  font-size: 22px;
  letter-spacing: 6px;
  color: var(--accent);
  margin-bottom: 18px;
}

/* ── Reviews carousel ─────────────────────────────────────────────────────────
   Native scroll-snap does the sliding — it swipes on touch with no JS at all.
   Script (in index.html, the only page using this) wires just two things: the
   arrow buttons, and the per-card Read More clamp. Cards are white with the
   kit's card-border; the clamp fade is a functional affordance over text, not
   a background texture.
   ────────────────────────────────────────────────────────────────────────── */
.reviews {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-top: 48px;
  /* breathing room so card borders aren't shaved by the scroll clip */
  padding: 2px;
}
.reviews::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--card-border);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.review .stars { font-size: 14px; letter-spacing: 3px; margin-bottom: 8px; }
.review__name {
  font-family: var(--font-h);
  font-weight: 600; font-size: 16.5px;
  color: var(--ink);
  margin: 0 0 14px;
}
/* Clamped by max-height rather than line-clamp — several reviews are multiple
   <p> paragraphs, which -webkit-line-clamp can't truncate cleanly. */
.review__body { position: relative; max-height: 10.2em; overflow: hidden; }
.review__body p { font-size: 15px; line-height: 1.7; color: var(--body-mid); margin: 0 0 12px; }
.review__body p:last-child { margin-bottom: 0; }
.review__body::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 85%);
  pointer-events: none;
}
.review.is-open .review__body { max-height: none; }
.review.is-open .review__body::after,
.review.is-short .review__body::after { display: none; }
.review__more {
  margin-top: 14px;
  font-family: var(--font-h);
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  background: none; border: none; padding: 0;
  cursor: pointer;
}
.review__more:hover { color: var(--ink); }
/* JS marks cards whose text already fits — no toggle needed on those */
.review.is-short .review__more { display: none; }

.reviews-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
.reviews-nav button {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: none;
  color: var(--accent);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.reviews-nav button:hover { border-color: var(--accent); color: var(--ink); }

/* ── Photo-free hero — cream editorial band ───────────────────────────────────
   For pages that shouldn't need sourced photography. Deliberately FLAT: the
   homepage's whole visual vocabulary is solid colour blocks (#F6F1E9 ×6,
   #221E1A ×5, #15403F ×2) plus hairline rules, with no background texture
   anywhere — so any pattern here reads as foreign to the site. Earlier
   attempts at a diamond lattice and at concentric arcs were both rejected on
   exactly that ground. #F6F1E9 is the homepage's most-used background and the
   hairline below matches its own section rule (1px #ECE4D6).

   MUST stay below the .hero colour rules above: those set white text for photo
   heroes at identical specificity, so source order is the only thing making
   these overrides win. Moving this block up will silently break the hero.

   Drop-in: <section class="hero hero--flat"> with no .hero__media/.hero__overlay.
   Use .btn-outline-dark (not .btn-outline) for the secondary button — the
   plain .btn-outline is tuned for dark photo heroes and vanishes on cream.
   ────────────────────────────────────────────────────────────────────────── */
.hero--flat {
  min-height: 420px;
  background: var(--canvas-soft);
  border-bottom: 1px solid var(--hairline);
}
.hero--flat .eyebrow { color: var(--accent); }
.hero--flat h1 { color: var(--ink); }
.hero--flat p { color: var(--body-mid); }
/* .btn-outline-dark's default border (--card-border) is tuned for white
   sections; against cream it drops to ~1.2:1 and the outline disappears. */
.hero--flat .btn-outline-dark { border-color: rgba(34,30,26,.3); }
.hero--flat .btn-outline-dark:hover { border-color: var(--accent); }

/* ── Split section ─────────────────────────────────────────────────────────────
   Two columns: copy on one side, a single full-bleed photo on the other.
   ────────────────────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.split--reverse { grid-template-columns: 1fr 1.05fr; }
.split--reverse .split__content { order: 2; }
.split__content { background: var(--canvas-soft); padding: 84px 64px; display: flex; flex-direction: column; justify-content: center; }
.split__content .eyebrow { margin-bottom: 16px; }
.split__content h2 { font-family: var(--font-h); font-weight: 500; font-size: 36px; line-height: 1.15; color: var(--ink); margin: 0 0 18px; }
.split__content p { font-size: 15.5px; line-height: 1.75; color: var(--body-mid); margin: 0 0 22px; }
/* min-height, not height: a fixed height can't grow with the copy column, so a
   long .split__content left the image capped at 440px with a white gap beneath
   it. The grid is align-items:stretch, so this column now matches the row.

   The img is absolutely positioned rather than height:100% — that's what the old
   fixed height existed to support. height:100% needs a definite parent height to
   resolve against (min-height alone doesn't provide one, and a portrait photo
   would render at full natural height instead of being cropped). inset:0 gives
   object-fit:cover a definite box at whatever height the row ends up. */
.split__media { position: relative; min-height: 440px; }
.split__media img,
.split__media .image-placeholder {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block; border: none;
}

/* ── Alternating benefit rows (photo + copy, zig-zag) ────────────────────────── */
.benefit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px 0;
  border-bottom: 1px solid var(--hairline);
}
.benefit-row:last-child { border-bottom: none; }
.benefit-row--reverse .benefit-row__media { order: 2; }
.benefit-row__media { height: 340px; max-height: 340px; }
.benefit-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.benefit-row__media .image-placeholder { height: 100%; }
.benefit-row__num {
  display: block;
  font-family: var(--font-h); font-weight: 700; font-size: 13px;
  color: var(--accent); letter-spacing: .1em; margin-bottom: 12px;
}
.benefit-row h3 { font-family: var(--font-h); font-weight: 500; font-size: 28px; color: var(--ink); margin: 0 0 14px; }
.benefit-row p { font-size: 15.5px; line-height: 1.75; color: var(--body-mid); max-width: 48ch; margin: 0; }

/* Steps look on a colored band — reuses .section--deep for the dark treatment */
.section--deep .step h3 { color: #fff; }
.section--deep .step p { color: rgba(255,255,255,.68); }

/* ── Full-width map embed ─────────────────────────────────────────────────── */
.map-embed { width: 100%; line-height: 0; background: var(--canvas-soft); }
.map-embed iframe { width: 100%; height: 440px; border: 0; display: block; }

/* ── Generic section utilities ───────────────────────────────────────────────── */
.section { padding: 72px 48px; }
.section--soft { background: var(--canvas-soft); }
.section__inner { max-width: var(--max-w); margin: 0 auto; }
.section h2 {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 16px;
}
.section p.lede { font-size: 16px; line-height: 1.75; color: var(--body-mid); max-width: 68ch; }

/* .section--deep must come AFTER the base .section rules above — same
   specificity (one class + one element), so source order decides the
   winner. Putting these last is what makes the white text actually stick
   instead of getting silently overridden by .section h2's dark ink color. */
.section--deep { background: var(--deep); color: #fff; }
.section--deep .eyebrow { color: var(--accent-light); }
.section--deep h2 { color: #fff; }
.section--deep p { color: rgba(255,255,255,.72); }
.section--deep p.lede { color: rgba(255,255,255,.72); }

/* Diamond-bullet list — same treatment used for credentials on the homepage */
.check-list { display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; align-items: flex-start; gap: 13px; }
.check-list li::before {
  content: '';
  width: 9px; height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
  margin-top: 6px;
  flex-shrink: 0;
}
.check-list span { font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--body); }

/* Round muted-dot list — the "avoid" counterpart to .check-list's gold diamond,
   for do/don't-style comparisons. Deliberately not red/green: stays on-brand. */
.avoid-list { display: flex; flex-direction: column; gap: 14px; }
.avoid-list li { display: flex; align-items: flex-start; gap: 13px; }
.avoid-list li::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mute-soft);
  margin-top: 6px;
  flex-shrink: 0;
}
.avoid-list span { font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--body-mid); }

/* ── Do / Don't comparison ────────────────────────────────────────────────── */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--hairline);
  margin-top: 8px;
}
.compare__col { padding: 40px; }
.compare__col--do { background: #fff; border-right: 1px solid var(--hairline); }
.compare__col--avoid { background: var(--canvas-soft); }
.compare__col h3 {
  font-family: var(--font-h); font-weight: 600; font-size: 18px;
  color: var(--ink); margin: 0 0 20px;
}

/* ── Numbered process steps ───────────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 8px;
  counter-reset: step;
}
.step { position: relative; padding-top: 8px; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.step h3 {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 8px;
}
.step p { font-size: 14.5px; line-height: 1.65; color: var(--body-mid); margin: 0; }

/* ── FAQ section: centered intro (eyebrow/heading/copy/CTAs), accordion below ── */
.faq-header { text-align: center; max-width: 640px; margin: 0 auto; }
.faq-header p.lede { margin-left: auto; margin-right: auto; }
.faq-header .btn-group { justify-content: center; margin-top: 8px; }
.faq { max-width: 760px; margin: 56px auto 0; text-align: left; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item:first-child { border-top: 1px solid var(--hairline); }
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 2px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-h); font-weight: 600; font-size: 16px; color: var(--ink);
}
.faq-question:hover { color: var(--accent); }
.faq-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s ease; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.faq-item.is-open .faq-answer { max-height: 400px; }
.faq-answer p { font-size: 15px; line-height: 1.7; color: var(--body-mid); margin: 0; padding: 0 2px 20px; max-width: 65ch; }

/* ── Closing CTA — editorial split ────────────────────────────────────────────
   A centred eyebrow/heading/copy/button stack reads generic. This puts the
   statement on the left and the ask
   on the right, divided by a hairline — the same asymmetry the rest of the
   page uses — and gives the heading room to be the biggest type on the page.
   Pair with .section--deep.
   ────────────────────────────────────────────────────────────────────────── */
.cta-feature { padding-top: 88px; padding-bottom: 88px; }
.cta-feature__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}
.cta-feature__lead .eyebrow { color: var(--accent-light); }
.cta-feature__lead h2 {
  color: #fff;
  font-size: 50px;
  line-height: 1.08;
  letter-spacing: -.01em;
  max-width: 13ch;
  margin: 0;
}
/* A short gold rule under the headline — the same accent weight the eyebrow
   carries, tying the two ends of the block together. */
.cta-feature__lead h2::after {
  content: '';
  display: block;
  width: 64px; height: 2px;
  background: var(--accent);
  margin-top: 28px;
}
.cta-feature__aside {
  border-left: 1px solid rgba(255,255,255,.16);
  padding-left: 64px;
}
.cta-feature__aside p {
  font-size: 16.5px; line-height: 1.75;
  color: rgba(255,255,255,.72);
  margin: 0 0 30px;
  max-width: 40ch;
}
/* Reassurance line under the buttons — removes the "and then what?" beat that
   a bare pair of buttons leaves. */
/* Selector must outrank `.cta-feature__aside p` (0,1,1) — that rule's
   max-width:40ch was capping this line and forcing the hours to wrap onto two.
   Scoping to the parent gets (0,2,0) and wins without needing !important. */
.cta-feature__aside .cta-feature__note {
  font-family: var(--font-h);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.45);
  max-width: none;
  white-space: nowrap;
  margin: 22px 0 0;
}

.text-link {
  display: inline-block;
  font-family: var(--font-h);
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
}

/* Buttons — same visual style as the header's Request Consultation CTA */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-h);
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background .15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.section--deep .btn-primary:hover, .section--deep .btn-primary { background: var(--accent); }
.section--deep .btn-primary:hover { background: #fff; color: var(--ink); }

.image-placeholder {
  background: var(--canvas-soft);
  border: 1px dashed var(--card-border);
  color: var(--mute);
  font-family: var(--font-h);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 20px;
  min-height: 260px;
}

/* ── Legal pages (Privacy Policy / Terms & Conditions) ───────────────────────
   Shared template for dense legal text — used by privacy-policy.html and
   terms-conditions.html. Keep this the single source of typographic rules
   for legal content; both pages should only differ in the text inside
   .legal-content.
   ────────────────────────────────────────────────────────────────────────── */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content .legal-updated {
  display: block;
  font-size: 13.5px;
  color: var(--mute);
  margin-bottom: 40px;
}
.legal-content h2 {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin: 44px 0 14px;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--ink);
  margin: 24px 0 10px;
}
.legal-content p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--body-mid);
  margin: 0 0 16px;
}
.legal-content ul, .legal-content ol {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 16px;
}
.legal-content ol { list-style: decimal; }
.legal-content li {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--body-mid);
  margin-bottom: 8px;
}
.legal-content a { color: var(--accent); text-decoration: underline; }
.legal-content strong { color: var(--body); font-weight: 600; }
/* Callout box — used for A2P/SMS compliance language on legal pages, and
   reused generically (e.g. "when to call us" notices on patient-info pages). */
.legal-callout, .callout {
  background: var(--canvas-soft);
  border-left: 3px solid var(--accent);
  padding: 24px 28px;
  margin: 0 0 20px;
}
.legal-callout p:last-child { margin-bottom: 0; }
.callout h3 { font-family: var(--font-h); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 14px; }
.callout .check-list { margin-bottom: 18px; }
.callout p.note { font-size: 14px; color: var(--mute); margin: 0; }

/* ============================================================================
   SECTION LIBRARY — Dental Implants page template
   New section types built for the implant pages. Same tokens and type scale
   as everything above; these only add layouts the kit didn't already have.
   ============================================================================ */

/* ── Stat band ────────────────────────────────────────────────────────────────
   Deliberately NOT a slab sitting on the section — the stats share the
   section's own background and are separated only by hairline rules, so the
   band reads as part of the page rather than a card dropped onto it.
   ────────────────────────────────────────────────────────────────────────── */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  padding: 4px 32px;
  border-left: 1px solid var(--hairline);
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat__num {
  display: block;
  font-family: var(--font-h); font-weight: 600;
  font-size: 46px; line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  margin-bottom: 14px;
}
.stat__label {
  display: block;
  font-family: var(--font-h); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 8px;
}
.stat__note { font-size: 14px; line-height: 1.6; color: var(--body-mid); margin: 0; }

/* On the deep band: gold-light numerals carry on teal where mid-gold wouldn't,
   and the rules drop to a low-opacity white instead of the cream hairline. */
.section--deep .stat { border-left-color: rgba(255,255,255,.16); }
.section--deep .stat__num { color: var(--accent-light); }
.section--deep .stat__label { color: #fff; }
.section--deep .stat__note { color: rgba(255,255,255,.6); }

/* ── Vertical timeline ────────────────────────────────────────────────────────
   The journey/process story. Differs from .steps (a flat grid) by carrying a
   connecting rail, so it reads as a sequence over time rather than a set.
   ────────────────────────────────────────────────────────────────────────── */
.timeline { max-width: 760px; margin: 8px auto 0; }
.timeline__item {
  position: relative;
  padding: 0 0 40px 46px;
  border-left: 1px solid var(--hairline);
}
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__item::before {
  content: '';
  position: absolute; left: -5px; top: 5px;
  width: 9px; height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
}
.timeline__meta {
  display: block;
  font-family: var(--font-h); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.timeline__item h3 { font-family: var(--font-h); font-weight: 600; font-size: 20px; color: var(--ink); margin: 0 0 8px; }
.timeline__item p { font-size: 15px; line-height: 1.75; color: var(--body-mid); margin: 0; }

/* ── At-a-glance spec panel ──────────────────────────────────────────────── */
.spec-panel {
  border: 1px solid var(--card-border);
  background: #fff;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  /* the 1px grid gap over a border-colored background is what draws the
     interior rules — cheaper than per-cell borders that double up. */
  background-color: var(--card-border);
}
.spec {
  background: #fff;
  padding: 26px 28px;
}
.spec__key {
  display: block;
  font-family: var(--font-h); font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 8px;
}
.spec__val { font-family: var(--font-h); font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.5; margin: 0; }
.spec__val small { display: block; font-family: var(--font-b); font-size: 14px; font-weight: 400; color: var(--body-mid); margin-top: 4px; }

/* ── Comparison table ─────────────────────────────────────────────────────────
   Real <table> for semantics; collapses to stacked cards under 760px via the
   data-label pattern (each cell reprints its column header inline).
   ────────────────────────────────────────────────────────────────────────── */
.compare-table-wrap { overflow-x: auto; margin-top: 8px; }
.compare-table { width: 100%; border-collapse: collapse; text-align: left; }
.compare-table th, .compare-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.compare-table thead th {
  font-family: var(--font-h); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); border-bottom: 1px solid var(--card-border);
  background: var(--canvas-soft);
}
.compare-table tbody th {
  font-family: var(--font-h); font-size: 15px; font-weight: 600;
  color: var(--ink); white-space: nowrap;
}
.compare-table td { font-size: 14.5px; line-height: 1.6; color: var(--body-mid); }
.compare-table .is-best { color: var(--accent); font-weight: 600; }

/* ── Pull quote / testimonial ────────────────────────────────────────────── */
.quote-band { max-width: 780px; margin: 0 auto; text-align: center; }
.quote-band__mark {
  font-family: var(--font-b); font-size: 64px; line-height: 1;
  color: var(--accent); opacity: .5; display: block; margin-bottom: 8px;
}
.quote-band blockquote {
  font-family: var(--font-b);
  font-size: 26px; line-height: 1.5; color: var(--ink);
  margin: 0 0 24px;
}
.section--deep .quote-band blockquote { color: #fff; }
.quote-band cite {
  font-family: var(--font-h); font-style: normal;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute);
}
.section--deep .quote-band cite { color: var(--accent-light); }

/* ── Icon lattice ─────────────────────────────────────────────────────────────
   A continuous 3×2 grid of hairline-ruled cells rather than detached cards
   with gaps between them. Reads as one editorial block; the shared rules come
   from the container's top/left border plus each cell's right/bottom, so
   interior lines never double up into 2px.
   ────────────────────────────────────────────────────────────────────────── */
.icon-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--card-border);
  border-left: 1px solid var(--card-border);
  margin-top: 32px;
}
.icon-card {
  border-right: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  padding: 38px 34px;
  transition: background .18s ease;
}
.icon-card:hover { background: #fff; }
.icon-card__icon {
  color: var(--accent);
  margin-bottom: 20px;
  height: 30px;
}
/* stroke is set here, not per-path, so the SVGs stay markup-light */
.icon-card__icon svg { width: 30px; height: 30px; display: block; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-card__icon img { width: 30px; height: 30px; display: block; object-fit: contain; }
.icon-card h3 { font-family: var(--font-h); font-weight: 600; font-size: 17.5px; color: var(--ink); margin: 0 0 10px; }
.icon-card p { font-size: 14.5px; line-height: 1.7; color: var(--body-mid); margin: 0; }

/* ── Monogram ─────────────────────────────────────────────────────────────────
   Photo-free stand-in for a portrait: a flat deep-teal block with gold initials.
   Deliberately NOT the dashed "add photo" box — the practice has no staff
   photography, and a page shouldn't look broken while it waits for some. Flat
   colour keeps it inside the site's vocabulary (see the hero note above).

   Fills any positioned parent, so it drops straight into .split__media or
   .person__photo. Swap it for an <img> and nothing else changes.
   ────────────────────────────────────────────────────────────────────────── */
.monogram {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--deep);
  color: var(--accent-light);
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 60px;
  letter-spacing: .08em;
  user-select: none;
}

/* ── People grid ──────────────────────────────────────────────────────────────
   Roster cards, built on the same hairline lattice as .icon-cards so the two
   read as one family rather than two card systems.
   ────────────────────────────────────────────────────────────────────────── */
.person-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--card-border);
  border-left: 1px solid var(--card-border);
  margin-top: 32px;
}
.person {
  border-right: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  padding: 30px;
  transition: background .18s ease;
}
.person:hover { background: #fff; }
.person__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: 22px;
  background: var(--canvas-soft);
  overflow: hidden;
}
.person__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.person__photo .monogram { font-size: 32px; }
.person__role {
  display: block;
  font-family: var(--font-h);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.person h3 { font-family: var(--font-h); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 10px; }
.person p { font-size: 14.5px; line-height: 1.7; color: var(--body-mid); margin: 0; }

/* ── Photo row ────────────────────────────────────────────────────────────────
   A strip of two or three client-supplied photos inside a section — used where
   a page has more photography than its overview split can hold. Equal cells,
   cover-cropped to a common ratio so mixed sources still align.
   ────────────────────────────────────────────────────────────────────────── */
.photo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.photo-row--two { grid-template-columns: repeat(2, 1fr); }
.photo-row img {
  width: 100%;
  aspect-ratio: 8 / 7;
  object-fit: cover;
  display: block;
}

/* ── Site map lists ───────────────────────────────────────────────────────────
   Link columns for site-map.html, living inside .icon-cards lattice cells so
   the page reads as part of the same system.
   ────────────────────────────────────────────────────────────────────────── */
.sitemap-list { margin-top: 8px; }
.sitemap-list a {
  display: block;
  font-size: 15px; line-height: 1.6;
  color: var(--body-mid);
  text-decoration: none;
  padding: 5px 0;
}
.sitemap-list a:hover { color: var(--accent); }

/* ── Form controls ────────────────────────────────────────────────────────────
   First real form inputs in the design system (survey.html, referral-page.php).
   Text/email/tel/textarea share one look; checkboxes are custom-drawn to match
   the brand's rotated-square motif instead of the browser default.
   ────────────────────────────────────────────────────────────────────────── */
.field { margin-bottom: 20px; text-align: left; }
.field label {
  display: block;
  font-family: var(--font-h);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em;
  color: var(--body-mid);
  margin-bottom: 7px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  font-family: var(--font-b);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 2px;
  padding: 13px 16px;
  transition: border-color .15s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.field input:invalid[data-touched="true"],
.field.has-error input,
.field.has-error textarea { border-color: #B3453D; }
.field__error {
  display: none;
  font-family: var(--font-h);
  font-size: 12.5px; font-weight: 600;
  color: #B3453D;
  margin-top: 6px;
}
.field.has-error .field__error { display: block; }

/* Custom checkbox: a square box that becomes the brand diamond when checked,
   rather than a styled browser checkbox — keeps the motif consistent instead
   of introducing a circle/tick that doesn't appear anywhere else on the site. */
.check-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  cursor: pointer;
}
.check-field input {
  position: absolute;
  opacity: 0;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}
.check-field__box {
  position: relative;
  width: 20px; height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  border: 1.5px solid var(--card-border);
  background: #fff;
  transition: border-color .15s;
}
.check-field__box::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 8px; height: 8px;
  background: var(--accent);
  transform: rotate(45deg) scale(0);
  transition: transform .15s;
}
.check-field input:checked ~ .check-field__box { border-color: var(--accent); }
.check-field input:checked ~ .check-field__box::after { transform: rotate(45deg) scale(1); }
.check-field input:focus-visible ~ .check-field__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-field span:last-child { font-size: 13.5px; line-height: 1.6; color: var(--mute); }
.check-field a { color: var(--accent); text-decoration: underline; }

.form-note {
  font-size: 13px;
  color: var(--mute);
  margin: 0 0 24px;
}
.form-note a { color: var(--accent); text-decoration: underline; }

/* Submission status line — shown/hidden by JS, not a toast library */
.form-status {
  display: none;
  font-family: var(--font-h);
  font-size: 14px; font-weight: 600;
  padding: 14px 18px;
  margin-bottom: 20px;
  border-left: 3px solid;
}
.form-status.is-visible { display: block; }
.form-status--error { background: #FBEBEA; border-color: #B3453D; color: #8A332C; }
.form-status--info { background: var(--canvas-soft); border-color: var(--accent); color: var(--body); }

/* ── Survey wizard ────────────────────────────────────────────────────────────
   Multi-step quiz (survey.html). Requires JS, same as the rest of the site's
   interactive pieces (FAQ accordions, mobile nav, review carousel) — steps
   start with the `hidden` attribute baked into the markup and JS reveals the
   active one, rather than JS hiding them on load.
   ────────────────────────────────────────────────────────────────────────── */
.wizard { max-width: 760px; margin: 0 auto; }
.wizard__progress {
  display: flex;
  gap: 6px;
  margin-bottom: 40px;
}
.wizard__progress-seg {
  flex: 1;
  height: 3px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.wizard__progress-seg::after {
  content: '';
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .3s ease;
}
.wizard__progress-seg.is-done::after,
.wizard__progress-seg.is-current::after { width: 100%; }

.wizard__step h2 {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
  margin: 0 0 12px;
}
.wizard__step p.lede { text-align: center; margin: 0 auto 36px; }

/* Radio tiles — same hairline-lattice language as .icon-cards, but each cell
   is a real choice with a selected state rather than a link. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tile-grid--narrow { grid-template-columns: repeat(4, 1fr); }
.tile-grid--five { grid-template-columns: repeat(5, 1fr); }
.tile {
  position: relative;
  display: block;
  cursor: pointer;
}
.tile input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.tile__card {
  border: 1px solid var(--card-border);
  background: #fff;
  padding: 22px 16px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.tile__card h3 {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.tile input:checked ~ .tile__card {
  border-color: var(--accent);
  background: var(--canvas-soft);
}
.tile input:checked ~ .tile__card h3 { color: var(--accent); }
.tile input:focus-visible ~ .tile__card { outline: 2px solid var(--accent); outline-offset: 2px; }

.wizard__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}
.wizard__nav .btn { min-width: 200px; }
.wizard__back {
  font-family: var(--font-h);
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute);
  background: none; border: none;
  cursor: pointer;
  padding: 13px 10px;
}
.wizard__back:hover { color: var(--ink); }
.wizard__back:disabled { visibility: hidden; }

/* ── Minimal header ───────────────────────────────────────────────────────────
   Logo-only bar for distraction-free funnel pages (survey.html) — no utility
   strip, no nav, no CTA button, matching the old site's treatment of its
   booking funnel (bare page, logo linking home, nothing else to click away
   to). Background/border/padding/sticky values are copied verbatim from the
   real header in layout.js, not approximated — same discipline as the shared
   header/footer component itself.
   ────────────────────────────────────────────────────────────────────────── */
.minimal-header {
  background: #FFFFFF;
  border-bottom: 1px solid #ECE4D6;
  padding: 16px 48px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.minimal-header a { display: flex; align-items: center; text-decoration: none; width: fit-content; }
.minimal-header img { height: 58px; width: auto; display: block; }

/* ── Contact page layout ──────────────────────────────────────────────────────
   Form + office-info card, side by side. A dedicated class (not an inline
   style) because — unlike the other one-off inline grids on interior pages,
   which sit inside sections that already collapse via existing rules — this
   is a top-level two-column layout with nothing else to collapse it at
   mobile widths. contact-us.html only.
   ────────────────────────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-info-card {
  background: var(--canvas-soft);
  border-left: 3px solid var(--accent);
  padding: 32px 30px;
}
.contact-info-card h3 { font-family: var(--font-h); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 20px; }
.contact-info-card__row { margin-bottom: 20px; }
.contact-info-card__row:last-child { margin-bottom: 0; }
.contact-info-card__label {
  display: block;
  font-family: var(--font-h);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}
.contact-info-card__row p { font-size: 15px; line-height: 1.6; color: var(--body); margin: 0; }
.contact-info-card__row a { color: var(--accent); text-decoration: none; }
.contact-info-card__row a:hover { text-decoration: underline; }

/* ── Responsive: header/footer component ─────────────────────────────────────
   Additive only — index.html's mockup is a fixed-width canvas with no
   mobile behavior at all, so there's nothing to match here, only to add.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }

  .g-header, .g-utility { padding-left: 24px !important; padding-right: 24px !important; }
  .g-utility-meta { display: none !important; }
  .g-header { flex-wrap: wrap; }
  .g-nav { display: none !important; }
  .g-nav-toggle { display: flex; }

  .g-nav.g-mobile-open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    order: 10;
    margin-top: 16px;
    gap: 0;
  }
  .g-nav.g-mobile-open .g-nav-item { width: 100%; border-bottom: 1px solid #ECE4D6; }
  .g-nav.g-mobile-open .gnav-link { width: 100%; justify-content: space-between; padding: 16px 4px; }
  .g-nav.g-mobile-open .g-nav-dropdown {
    position: static !important; box-shadow: none; border-top: none; opacity: 1; visibility: visible;
    transform: none; display: none; min-width: 0; padding: 0 0 10px 12px;
  }
  .g-nav.g-mobile-open .g-nav-item.is-open .g-nav-dropdown { display: block; }
  .g-nav.g-mobile-open .gcta { width: 100%; margin: 16px 0 0 !important; text-align: center; justify-content: center; }

  .g-footer, .g-footer-bottom-wrap { padding-left: 24px !important; padding-right: 24px !important; }
  .g-footer-grid { grid-template-columns: 1fr 1fr !important; }

  .section, .page-title, .breadcrumb, .hero__inner { padding-left: 24px; padding-right: 24px; }
  .page-title__inner { grid-template-columns: 1fr; gap: 32px; }
  .page-title__media { order: -1; }
  .page-title__media .image-placeholder { min-height: 220px; }
  .steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

  .hero h1 { font-size: 38px; }
  .split, .split--reverse { grid-template-columns: 1fr; }
  /* order:-1 (not 1) — media's default order is 0, so content must go below
     zero to actually land above it. The previous order:1 left media (0) still
     first every time, which is why a reversed split stacked its own image
     directly against the plain split's trailing image above it on mobile. */
  .split--reverse .split__content { order: -1; }
  .split__content { padding: 48px 24px; }
  /* min-height, not height — the base rule's min-height:440px would otherwise
     win over a plain height here and leave stacked images 440px tall. */
  .split__media { min-height: 320px; }
  .benefit-row { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .benefit-row--reverse .benefit-row__media { order: 0; }
  .benefit-row__media { height: 260px; max-height: 260px; }

  /* 4→2 stats: the rule must move to the 3rd cell, and every cell regains its
     left padding since none of them start the row any more. */
  .stat-band { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .stat { padding: 4px 24px; }
  .stat:nth-child(odd) { border-left: none; padding-left: 0; }
  .stat__num { font-size: 36px; }

  .icon-cards { grid-template-columns: repeat(2, 1fr); }
  .icon-card { padding: 30px 26px; }
  .person-grid { grid-template-columns: repeat(2, 1fr); }
  .monogram { font-size: 46px; }
  /* two review cards per view; one 24px gap in the width math */
  .review { flex-basis: calc((100% - 24px) / 2); }
  .quote-band blockquote { font-size: 22px; }

  /* Stacked: the divider moves from the left edge to the top, so the two
     halves stay visibly separated without a vertical rule to hang it on. */
  .cta-feature { padding-top: 64px; padding-bottom: 64px; }
  .cta-feature__inner { grid-template-columns: 1fr; gap: 36px; }
  .cta-feature__lead h2 { font-size: 38px; max-width: 18ch; }
  .cta-feature__lead h2::after { margin-top: 22px; }
  .cta-feature__aside { border-left: none; border-top: 1px solid rgba(255,255,255,.16); padding-left: 0; padding-top: 36px; }
}

/* ── Comparison table → stacked cards ────────────────────────────────────────
   Below this width the table can't hold four columns without either
   horizontal scrolling or unreadable text, so each row becomes its own card
   and every cell reprints its column header from the data-label attribute.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .compare-table-wrap { overflow-x: visible; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td, .compare-table th { display: block; }
  .compare-table thead { display: none; }
  .compare-table tbody tr {
    border: 1px solid var(--card-border);
    margin-bottom: 16px;
    padding: 4px 0;
  }
  .compare-table tbody th {
    background: var(--canvas-soft);
    border-bottom: 1px solid var(--hairline);
    white-space: normal;
    padding: 14px 18px;
  }
  .compare-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    text-align: right;
    padding: 12px 18px;
    border-bottom: 1px solid var(--hairline);
  }
  .compare-table tbody tr td:last-child { border-bottom: none; }
  .compare-table td::before {
    content: attr(data-label);
    font-family: var(--font-h);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--mute);
    text-align: left;
    flex-shrink: 0;
  }

  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .tile-grid--narrow, .tile-grid--five { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .g-footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .g-footer-bottom { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
  .section { padding-top: 56px; padding-bottom: 56px; padding-left: 24px; padding-right: 24px; }
  .page-title { padding-top: 40px; padding-bottom: 40px; }
  .page-title h1 { font-size: 32px; }
  .section h2 { font-size: 30px; }
  .steps { grid-template-columns: 1fr; }

  /* Form grid: stack fields on mobile */
  #js-survey-form > div[style*="grid"] { grid-template-columns: 1fr !important; gap: 20px !important; }

  .hero { min-height: 400px; }
  .hero--home { min-height: 460px; }
  .hero--flat { min-height: 360px; }
  .hero__inner { padding-top: 56px; padding-bottom: 56px; }
  .hero h1 { font-size: 32px; }
  .cta-feature__lead h2 { font-size: 32px; }
  .split__content h2 { font-size: 28px; }
  .benefit-row h3 { font-size: 24px; }

  .compare { grid-template-columns: 1fr; }
  .compare__col--do { border-right: none; border-bottom: 1px solid var(--hairline); }
  .compare__col { padding: 28px 24px; }

  /* nowrap has to relax on the narrowest screens, or the hours line forces the
     whole page to scroll sideways. Two lines on a phone is the lesser evil. */
  .cta-feature__aside .cta-feature__note { white-space: normal; }

  .spec-panel { grid-template-columns: 1fr; }
  /* single column: no vertical rules at all, horizontal ones instead */
  .stat-band { grid-template-columns: 1fr; row-gap: 0; }
  .stat { border-left: none !important; padding: 26px 0 !important; border-top: 1px solid var(--hairline); }
  .stat:first-child { border-top: none; padding-top: 0 !important; }
  .section--deep .stat { border-top-color: rgba(255,255,255,.16); }
  .icon-cards { grid-template-columns: 1fr; }
  .photo-row, .photo-row--two { grid-template-columns: 1fr; gap: 16px; }
  .review { flex-basis: 100%; }
  /* Single column: cap the portrait so one card doesn't fill a phone screen —
     aspect-ratio 1/1 across a full-width column is a very tall square. */
  .person-grid { grid-template-columns: 1fr; }
  .person__photo { aspect-ratio: 3 / 2; }
  .monogram { font-size: 40px; }
  .quote-band blockquote { font-size: 19px; }
  .timeline__item { padding-left: 28px; padding-bottom: 32px; }
  .timeline__item h3 { font-size: 18px; }

  .wizard__step h2 { font-size: 24px; }
  .tile-grid, .tile-grid--narrow, .tile-grid--five { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile__card { padding: 16px 10px; }
  .wizard__nav { flex-direction: column-reverse; gap: 10px; }
  .wizard__nav .btn { width: 100%; min-width: 0; }
}