/* Theme 03: Bento Grid
   Shown for: Brightline Family Dental (sample business)
   One calm tray of self-contained tiles. Same gap, same radius; tiles differ in size and fill.
   Phones: the tiles are grouped into three full-bleed "trays" (Your visit, Care, People), each on its own tint.
   Desktop: one six-column grid where the trays dissolve and the tiles interlock (see the grid-template-areas map). */

/* Shared token layer (Linnet Studio library). Presets in AUDIT section 7 override these values. */
:root {
  --c-bg: #E4EFEA;          /* page background, the "tray" between tiles (rinse mint) */
  --c-surface: #FFFFFF;     /* most tiles (enamel); 17.0:1 with the ink */
  --c-ink: #12302B;         /* all text, dark tiles, the logo square (pine); 11.9:1 on the page background */
  --c-muted: #48605A;       /* secondary text; 6.8:1 on tiles, 5.8:1 on the page background, 4.7:1 on mint tiles */
  --c-line: #DCE6E2;        /* decorative hairlines inside tiles */
  --c-line-strong: #6B8780; /* form field borders (3.9:1 on white) */
  --c-accent: #0E6B58;      /* buttons, step numbers, icons, the switch "on" color (spearmint); 6.4:1 with white */
  --c-on-accent: #FFFFFF;   /* text on the accent */
  --c-accent-2: #FFD25E;    /* warm second accent: the $99 tile, stars, the logo smile (marigold); the ink on it is 9.9:1 */
  --f-display: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: var(--f-display);
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --r-sm: 14px;             /* buttons, fields, boxes inside tiles */
  --r-lg: 24px;             /* tiles */
  --r-pill: 999px;          /* pills, switches, the action bar buttons */
  --s-1: 8px; --s-2: 12px; --s-3: 16px; --s-4: 24px; --s-5: 40px; --s-6: 64px;

  /* Theme names map to the shared layer */
  --tray: var(--c-bg);
  --tile: var(--c-surface);
  --ink: var(--c-ink);
  --muted: var(--c-muted);
  --brand: var(--c-accent);
  --sun: var(--c-accent-2);
  --font: var(--f-body);
  --r: var(--r-lg);
  --r-in: var(--r-sm);
  --gap: var(--s-2);        /* space between tiles */
  --pad: 22px;              /* tile padding */

  /* Theme-only tints (soft fills for tiles, and the three phone trays) */
  --mint: #CDEBDF;          /* cool tile fill: credentials, owner, grown-ups highlight */
  --gum: #F8D6DC;           /* soft tile fill: the emergency strip, kids' highlight */
  --brand-d: #0A5244;       /* pressed and hover */
  --on-ink: #C9DCD5;        /* secondary text on dark tiles (8.7:1) */
  --band-visit: #D6EADF;    /* phone tray 1 */
  --band-care: #FBF0D8;     /* phone tray 2 */
  --band-people: #F8E3E7;   /* phone tray 3 */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --bar-h: 0px;             /* height of the phone action bar */

  --fs-xs: .8125rem;
  --fs-s: .9375rem;
  --fs-p: 1rem;
  --fs-b: 1.0625rem;
  --fs-m: 1.1875rem;
  --fs-l: 1.75rem;
  --fs-xl: clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem);
  --fs-h1: clamp(2.35rem, 1.5rem + 3.4vw, 4rem);
}
@media (max-width: 759.98px) {
  :root { --bar-h: calc(68px + env(safe-area-inset-bottom)); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-bottom: calc(var(--bar-h) + 16px); }
body {
  margin: 0;
  background: var(--tray);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-b);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bar-h);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
address { font-style: normal; }
b, strong { font-weight: 600; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 30;
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 12px; }
.sprite { display: none; }
.i { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

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

/* Touch polish: no grey tap flash, no double-tap delay, a short press on everything pressable */
a, button, summary, label, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn, .alert-call, .action-bar a { transition: transform 120ms var(--ease-out), background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.btn:active, .alert-call:active, .action-bar a:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .btn, .alert-call, .action-bar a { transition: none; } }

/* ---------- Demo bar: one line ---------- */
.demo {
  background: var(--ink); color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;  /* narrower than Lexend, so the full line fits at 12px on a phone */
  font-size: .75rem; line-height: 1.5; text-align: center;
  padding: 6px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  font-size: var(--fs-s); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.btn:focus-visible { border-radius: var(--r-pill); }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 1rem; }
.btn-brand { background: var(--brand); color: var(--c-on-accent); }
.btn-line { box-shadow: inset 0 0 0 1.5px #8FA7A0; color: var(--ink); }
.btn-sun { background: var(--sun); color: var(--ink); font-weight: 600; }

/* ---------- Header ---------- */
.top-in {
  max-width: 1320px; margin: 0 auto; padding: 12px 16px;
  display: grid; gap: 12px;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand act" "seg seg";
  align-items: center;
}
.brand {
  grid-area: brand;
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 44px; text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: var(--fs-b); line-height: 1.1; letter-spacing: -.015em;
}
.brand .mark { flex: none; color: var(--ink); }
.mark path { stroke: var(--sun); }
.brand-sub { display: block; font-weight: 400; font-size: var(--fs-xs); letter-spacing: 0; color: var(--muted); }
.top-act { grid-area: act; display: flex; align-items: center; gap: 8px; }
.top-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; border-radius: var(--r-pill);
  background: var(--tile); color: var(--ink); text-decoration: none;
  font-size: var(--fs-s); font-weight: 500; font-variant-numeric: tabular-nums;
}
.top-tel:focus-visible { border-radius: var(--r-pill); }
.tel-txt { display: none; }
.seg {
  grid-area: seg;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--tile); border-radius: var(--r-pill); padding: 4px;
}
.seg a {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 4px; border-radius: var(--r-pill);
  font-size: var(--fs-s); font-weight: 500; text-decoration: none;
}
.seg a:focus-visible { border-radius: var(--r-pill); outline-offset: -3px; }

/* Very small phones (320px): the segmented nav shrinks to fit and the Call icon steps aside (Call lives in the bar and the hero) */
@media (max-width: 359.98px) {
  .seg { grid-template-columns: repeat(4, auto); justify-content: space-between; padding-inline: 10px; }
  .seg a { padding: 0 2px; font-size: .875rem; }
  .top-tel { display: none; }
}

/* ---------- The grid ---------- */
/* Phones: a column of full-width blocks. The three trays are full-bleed bands with their own heading. */
.bento {
  max-width: 1320px; margin: 0 auto; padding: 4px 16px var(--gap);
  display: flex; flex-direction: column; gap: var(--gap);
}
.tile {
  position: relative;
  background: var(--tile);
  border-radius: var(--r);
  padding: var(--pad);
  overflow: hidden;
  min-width: 0;
}
@media (max-width: 759.98px) {
  .tray {
    margin-inline: -16px; padding: 0 16px 20px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-content: start;
    background: var(--band);
  }
  .tray > * { grid-column: 1 / -1; min-width: 0; }
  .tray > .svc-photo, .tray > .svc-ico { grid-column: auto; }
  .tray-visit { --band: var(--band-visit); margin-top: var(--s-1); }
  .tray-care { --band: var(--band-care); }
  .tray-people { --band: var(--band-people); padding-bottom: 0; }
  .tray-cont { margin-top: calc(var(--gap) * -1); padding-top: var(--gap); padding-bottom: 20px; }
  .tray-h {
    display: flex; align-items: center; gap: 12px;
    padding: 24px 0 6px;
    font-size: 1.625rem; line-height: 1.1; font-weight: 600; letter-spacing: -.035em;
  }
  .tray-h .i { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--ink); color: var(--sun); }
}

.t-title {
  display: block;
  font-size: var(--fs-b); font-weight: 600; letter-spacing: -.015em; line-height: 1.25;
  color: var(--ink);
}

/* Intro */
.t-intro { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 26px 22px 22px; }
.t-intro h1 {
  font-size: var(--fs-h1); line-height: 1.04; font-weight: 600; letter-spacing: -.04em;
  max-width: 12ch;
}
.lede { font-size: var(--fs-b); color: var(--muted); max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.t-intro .actions { margin-top: 4px; }
.t-intro .actions .btn { flex: 1 1 100%; }

/* Hero photo: fills the tile, no overlays */
.t-photo { padding: 0; aspect-ratio: 16 / 10; }
.t-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* Emergency strip (same-day pain) */
.t-alert {
  background: var(--gum);
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 14px; row-gap: 14px; align-items: center;
  padding: 16px 16px 16px 18px;
}
.alert-ico { display: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #fff; color: var(--brand); }
.alert-txt h2 { font-size: var(--fs-m); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.alert-txt p { font-size: var(--fs-p); margin-top: 2px; }
.alert-call {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px; border-radius: var(--r-pill);
  background: var(--brand); color: var(--c-on-accent);
  font-size: 1.125rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.alert-call:focus-visible { border-radius: var(--r-pill); outline-color: var(--ink); }

/* Offer */
.t-offer { background: var(--sun); display: flex; flex-direction: column; gap: 6px; }
.offer-num {
  font-size: clamp(4rem, 3rem + 3.6vw, 5.75rem); font-weight: 600; line-height: .95; letter-spacing: -.06em;
  margin: 6px 0 4px;
}
.offer-what { font-size: var(--fs-b); max-width: 22em; }
.offer-kids { margin-top: auto; padding-top: 10px; font-size: var(--fs-p); font-weight: 600; }

/* Hours */
.t-hours { display: flex; flex-direction: column; gap: 12px; }
.hours { display: grid; gap: 0; font-variant-numeric: tabular-nums; }
.hours div {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--c-line); font-size: var(--fs-p);
}
.hours div:first-child { border-top: 0; padding-top: 0; }
.hours dt { font-weight: 500; }
.hours dd { color: var(--muted); text-align: right; }
.hours-note { font-size: var(--fs-p); color: var(--brand); font-weight: 500; margin-top: auto; }

/* Insurance */
.t-ins { display: flex; flex-direction: column; gap: 14px; }
.t-ins h3, .t-svc h3, .t-proc h3, .t-sw h3 {
  font-size: var(--fs-xl); line-height: 1.1; font-weight: 600; letter-spacing: -.035em;
}
.ins-lede { color: var(--muted); font-size: var(--fs-p); max-width: 34em; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.plans li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-p); font-weight: 500; line-height: 1.25; }
.plans .i { width: 22px; height: 22px; color: var(--brand); }
.member {
  margin-top: auto; background: var(--mint); border-radius: var(--r-in); padding: 14px 16px;
  font-size: var(--fs-p);
}

/* Process: a short vertical line of four real steps */
.t-proc { display: flex; flex-direction: column; gap: 18px; }
.proc-head p { color: var(--muted); font-size: var(--fs-p); max-width: 36em; margin-top: 6px; }
.steps { display: grid; counter-reset: step; }
.steps li {
  counter-increment: step; position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-content: start;
  padding-bottom: 18px;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step); grid-row: 1 / span 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: var(--c-on-accent);
  display: grid; place-items: center; font-size: var(--fs-s); font-weight: 600;
  position: relative; z-index: 1;
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; background: var(--mint);
}
.steps h4 { font-size: var(--fs-b); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; padding-top: 4px; }
.steps p { font-size: var(--fs-p); color: var(--muted); line-height: 1.45; }
/* Phones: the numbered dot sits on the heading's line and the text runs the full tile width (no connector line) */
@media (max-width: 759.98px) {
  .t-proc { padding-inline: 20px; }
  .steps li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: center; row-gap: 4px; }
  .steps li::before { grid-row: auto; width: 30px; height: 30px; }
  .steps li:not(:last-child)::after { content: none; }
  .steps h4 { padding-top: 0; }
  .steps p { grid-column: 1 / -1; }
}
.proc-note {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--c-line); padding-top: 16px; font-size: var(--fs-p); font-weight: 500;
}
.proc-note .i { width: 24px; height: 24px; color: var(--brand); }

/* Services: a short line, three photo tiles and three icon tiles. Photo captions sit below the photo. */
.t-svc { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.t-svc h3 { font-size: 1.5rem; max-width: 16ch; }
.t-svc p { color: var(--muted); font-size: var(--fs-p); max-width: 30em; }
.svc-photo { padding: 0; display: flex; flex-direction: column; }
.svc-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; flex: 1 1 auto; min-height: 0; }
.s1 img { object-position: 50% 36%; }
.s2 img { object-position: 62% 30%; }
.s3 img { object-position: 52% 50%; }
.svc-txt { padding: 12px 14px 14px; }
.svc-txt h4 { font-size: var(--fs-p); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.svc-ico { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; }
.svc-ico .i { width: 32px; height: 32px; color: var(--brand); margin-bottom: auto; }
.svc-ico h4 { font-size: var(--fs-p); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; padding-top: 14px; }
.svc-ico p { font-size: var(--fs-s); color: var(--ink); line-height: 1.4; }
.s4 { background: var(--mint); }
.s6 { background: var(--gum); }

/* ---------- Signature: the kids / grown-ups switch tile ---------- */
.t-sw { position: relative; padding: 0; display: flex; flex-direction: column; }
/* The checkbox sits mid-tile, near its label, so a tap on the switch never scrolls the page to it */
.sw-in { position: absolute; top: 60%; left: 50%; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sw-fig { display: flex; flex-direction: column; background: var(--tile); }
.sw-img { position: relative; aspect-ratio: 16 / 10; background: var(--ink); }
.sw-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sw-adult { object-position: 40% 50%; }
.sw-kid { opacity: 0; transition: opacity .45s ease; object-position: 45% 50%; }
.sw-in:checked ~ .sw-fig .sw-kid { opacity: 1; }
.sw-photo-cap { padding: 10px 20px 0; font-size: var(--fs-s); color: var(--muted); }
/* No layout shift: both captions share one grid cell, so the tile keeps its height when the switch flips */
.sw-photo-cap { display: grid; }
.sw-photo-cap > span { grid-area: 1 / 1; }
.cap-kid { visibility: hidden; }
.sw-in:checked ~ .sw-fig .cap-kid { visibility: visible; }
.sw-in:checked ~ .sw-fig .cap-adult { visibility: hidden; }

.sw-body { display: flex; flex-direction: column; gap: 16px; padding: 14px 18px 20px; }
.sw-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.t-sw h3 { font-size: var(--fs-l); }
.sw-bar p { font-size: var(--fs-p); color: var(--muted); margin-top: 4px; }
.sw-label {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 6px 0 16px; cursor: pointer;
  border-radius: var(--r-pill); background: var(--tray);
  font-size: var(--fs-p); font-weight: 500; user-select: none; -webkit-user-select: none;
}
.sw {
  position: relative; width: 52px; height: 32px; border-radius: var(--r-pill); flex: none;
  background: #6B8780; transition: background-color .25s ease;
}
.sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(18,48,43,.3);
  transition: transform .25s cubic-bezier(.3,.7,.3,1);
}
.sw-in:checked ~ .sw-body .sw { background: var(--brand); }
.sw-in:checked ~ .sw-body .sw::after { transform: translateX(20px); }
.sw-in:focus-visible ~ .sw-body .sw { outline: 3px solid var(--brand); outline-offset: 3px; }

.sw-lists { display: grid; gap: 10px; }
.li {
  border-radius: var(--r-in); padding: 14px 16px 16px;
  background: var(--tray); transition: background-color .3s ease;
}
.li h4 { font-size: var(--fs-b); font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; }
.li li { position: relative; padding-left: 18px; font-size: var(--fs-p); line-height: 1.45; margin-top: 4px; }
.li li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
/* the switch moves the highlight; both lists stay readable either way */
.li-adult { background: var(--mint); }
.sw-in:checked ~ .sw-body .li-adult { background: var(--tray); }
.sw-in:checked ~ .sw-body .li-kid { background: var(--gum); }

/* Team: credentials as text, no avatars */
.t-team { display: flex; flex-direction: column; gap: 14px; }
.people { display: grid; }
.people li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--c-line); }
.people li:first-child { border-top: 0; padding-top: 0; }
.people li:last-child { padding-bottom: 0; }
.people b { font-size: var(--fs-b); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.people .role { font-size: var(--fs-p); font-weight: 500; color: var(--brand); }
.people .cred { font-size: var(--fs-s); color: var(--muted); }

/* Credentials */
.t-cred { background: var(--mint); display: flex; flex-direction: column; gap: 14px; }
.creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.creds li { display: grid; align-content: start; gap: 8px; font-size: var(--fs-p); font-weight: 500; line-height: 1.3; }
.creds .i { width: 36px; height: 36px; padding: 7px; border-radius: 12px; background: var(--tile); color: var(--brand); }

/* Rating */
.t-rate {
  background: var(--ink); color: #fff;
  display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: start;
}
.t-rate .t-title { color: var(--on-ink); grid-column: 1 / -1; font-weight: 500; font-size: var(--fs-s); }
.rate-num {
  grid-column: 1;
  font-size: clamp(4.25rem, 3rem + 4vw, 6rem); font-weight: 600; line-height: .92; letter-spacing: -.06em;
  margin-top: 12px;
}
.rate-stars { grid-column: 1; color: var(--sun); font-size: 1.25rem; letter-spacing: .12em; margin-top: 8px; }
.rate-sum { grid-column: 1; font-size: var(--fs-s); color: #fff; margin-top: 2px; }
.rate-tag { grid-column: 1; font-size: var(--fs-xs); color: var(--on-ink); }
.rate-words { grid-column: 2; grid-row: 2 / span 4; align-self: end; }
.rate-words h4 { font-size: var(--fs-xs); font-weight: 400; color: var(--on-ink); margin-bottom: 8px; }
.rate-words ul { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rate-words li {
  background: rgba(255,255,255,.12); border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap;
  font-size: var(--fs-s); font-weight: 500;
}

/* Reviews: a swipe rail on phones (the next review peeks in) */
.quotes {
  display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px;
}
.quotes::-webkit-scrollbar { display: none; }
.quotes:focus-visible { outline-offset: -3px; }
.t-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; scroll-snap-align: start; padding: 20px; }
.t-quote blockquote p { font-size: 1.125rem; line-height: 1.38; font-weight: 400; letter-spacing: -.015em; }
.t-quote figcaption { display: flex; flex-direction: column; font-size: var(--fs-s); line-height: 1.35; }
.t-quote figcaption b { font-weight: 600; }
.t-quote figcaption span { color: var(--muted); }
.t-quote figcaption small { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.q2 { background: var(--mint); }
.q3 { background: var(--sun); }
.q2 figcaption span, .q2 figcaption small, .q3 figcaption span, .q3 figcaption small { color: var(--ink); }

/* About the owner */
.t-doc { background: var(--mint); display: flex; flex-direction: column; gap: 12px; }
.t-doc h2, .t-visit h2, .t-book h2 { font-size: var(--fs-xl); line-height: 1.08; font-weight: 600; letter-spacing: -.035em; }
.t-doc p { font-size: var(--fs-b); max-width: 40em; }
.t-doc .sig { font-size: var(--fs-s); margin-top: auto; padding-top: 4px; }
.t-doc .sig b { display: block; font-size: var(--fs-p); }

/* Visit */
.t-visit { display: flex; flex-direction: column; gap: 12px; }
.t-visit address a { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; text-decoration-thickness: 1px; text-underline-offset: 4px; font-size: var(--fs-m); line-height: 1.35; font-weight: 500; }
.t-visit address .i { width: 28px; height: 28px; color: var(--brand); margin-top: 1px; }
.visit-notes { display: flex; flex-wrap: wrap; gap: 8px; }
.visit-notes li { background: var(--tray); border-radius: var(--r-pill); padding: 7px 14px; font-size: var(--fs-s); }

/* Book: dark tile with a concept-safe form (submits to #sent and confirms in place) */
.t-book { background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 20px; padding: 28px 22px; }
.book-head p { color: var(--on-ink); max-width: 34em; margin-top: 10px; }
.book-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-content: start; }
.field { display: grid; gap: 6px; min-width: 0; }
.field:nth-child(-n+2) { grid-column: 1 / -1; }
.field label { font-size: var(--fs-s); font-weight: 500; }
.req { font-weight: 400; color: var(--on-ink); font-size: var(--fs-xs); margin-left: 6px; }
.field input, .field select {
  width: 100%; min-height: 52px; padding: 0 16px;
  font: inherit; font-size: 1rem; color: var(--ink); background-color: #fff;
  border: 2px solid #fff; border-radius: var(--r-sm);
  -webkit-appearance: none; appearance: none;
}
.field select {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-size: 7px 7px; background-position: calc(100% - 21px) 50%, calc(100% - 14px) 50%; background-repeat: no-repeat;
}
.t-book :focus-visible { outline-color: var(--sun); }
.book-form .btn { grid-column: 1 / -1; margin-top: 4px; }
.sent { display: none; grid-column: 1 / -1; background: var(--mint); color: var(--ink); padding: 14px 16px; border-radius: var(--r-sm); font-weight: 500; font-size: var(--fs-p); }
.sent:target { display: block; }
.btn-ghost { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); color: #fff; }
.book-call .btn { width: 100%; }

/* Footer: three tiles on the same tray */
.foot-in {
  max-width: 1320px; margin: 0 auto; padding: 0 16px 24px;
  display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr);
}
.f-brand { display: flex; flex-direction: column; gap: 10px; }
.f-brand p { font-size: var(--fs-p); color: var(--muted); max-width: 30em; }
.f-col { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-p); }
.f-col h2 { font-size: var(--fs-s); font-weight: 500; color: var(--muted); }
.f-col p { color: var(--ink); }
.f-rows { display: grid; }
.f-rows a { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.f-rows .i { width: 22px; height: 22px; color: var(--brand); }
.foot .small { margin-top: auto; padding-top: 6px; color: var(--muted); font-size: var(--fs-xs); }

/* ---------- Phone action bar (C1): Call, Directions and Book stay in reach below 760px ---------- */
.action-bar { display: none; }
@media (max-width: 759.98px) {
  .action-bar {
    position: fixed; inset: auto 0 0 0; z-index: 20;
    display: grid; grid-template-columns: .85fr 1.2fr 1.45fr; gap: 8px;
    background: #fff; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 var(--c-line), 0 -12px 28px rgba(18, 48, 43, .08);
  }
  .action-bar a {
    display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 56px; padding: 0 4px;
    border-radius: var(--r-pill); background: var(--mint); color: var(--ink);
    font-size: var(--fs-s); font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .action-bar .ab-main { background: var(--brand); color: var(--c-on-accent); }
  .action-bar :focus-visible { outline: 3px solid var(--ink); outline-offset: -5px; border-radius: var(--r-pill); }
}

/* ---------- Tablet: two columns, trays dissolve into one grid ---------- */
@media (min-width: 760px) {
  :root { --gap: 14px; --pad: 26px; }
  .top-in { padding: 14px 24px; }
  .bento, .foot-in { padding-left: 24px; padding-right: 24px; }
  .bento {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "intro intro" "photo photo" "alert alert"
      "offer hours" "ins ins" "proc proc" "cred cred"
      "svc svc" "s1 s2" "s3 s4" "s5 s6" "sw sw"
      "team rate" "q1 q2" "q3 doc" "visit visit" "book book";
  }
  .tray, .quotes { display: contents; }
  .tray-h { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .t-intro { grid-area: intro; } .t-photo { grid-area: photo; } .t-alert { grid-area: alert; }
  .t-offer { grid-area: offer; } .t-hours { grid-area: hours; } .t-ins { grid-area: ins; }
  .t-proc { grid-area: proc; } .t-cred { grid-area: cred; } .t-svc { grid-area: svc; }
  .s1 { grid-area: s1; } .s2 { grid-area: s2; } .s3 { grid-area: s3; }
  .s4 { grid-area: s4; } .s5 { grid-area: s5; } .s6 { grid-area: s6; }
  .t-sw { grid-area: sw; } .t-team { grid-area: team; } .t-rate { grid-area: rate; }
  .q1 { grid-area: q1; } .q2 { grid-area: q2; } .q3 { grid-area: q3; }
  .t-doc { grid-area: doc; } .t-visit { grid-area: visit; } .t-book { grid-area: book; }

  .t-intro { padding: 36px 34px 32px; }
  .t-rate { display: flex; flex-direction: column; }
  .rate-words { margin-top: auto; padding-top: 18px; }
  .rate-words ul { flex-direction: row; flex-wrap: wrap; }
  .t-intro .actions .btn { flex: 0 1 auto; }
  .t-alert { grid-template-columns: auto minmax(0, 1fr) auto; padding: 16px 18px 16px 22px; }
  .alert-ico { display: block; }
  .alert-call { grid-column: auto; }
  .svc-photo img { aspect-ratio: 3 / 2; }
  .svc-ico { min-height: 0; }
  .t-sw { display: grid; grid-template-columns: 1.05fr 1fr; }
  .sw-img { aspect-ratio: auto; flex: 1; min-height: 340px; }
  .sw-photo-cap { padding: 12px 22px 16px; }
  .sw-body { padding: 24px; }
  .t-quote { padding: 26px; }
  .t-quote blockquote p { font-size: var(--fs-m); }
  .t-book { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 16px; align-items: start; padding: 36px; }
  .book-head { grid-column: 1; grid-row: 1; }
  .book-form { grid-column: 2; grid-row: 1 / span 2; }
  .book-call { grid-column: 1; grid-row: 2; align-self: end; }
  .book-call .btn { width: auto; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .t-doc, .t-visit { padding: 28px; }
}

/* ---------- Desktop: six-column bento ---------- */
@media (min-width: 1080px) {
  :root { --gap: 16px; --pad: 28px; }
  .top-in {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "brand seg act";
    padding: 12px 32px;
  }
  .seg { display: flex; }
  .seg a { padding: 0 20px; }
  .top-act { justify-self: end; gap: 12px; }
  .top-tel { background: transparent; padding: 0 10px; }
  .top-tel .i { display: none; }
  .tel-txt { display: inline; }
  .tel-sr { display: none; }

  .bento, .foot-in { padding-left: 32px; padding-right: 32px; }
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: minmax(190px, auto) minmax(190px, auto) auto repeat(2, minmax(150px, auto)) auto repeat(2, minmax(212px, auto)) repeat(6, minmax(168px, auto));
    grid-template-areas:
      "intro intro intro photo photo rate"
      "intro intro intro photo photo rate"
      "alert alert alert alert alert alert"
      "offer offer hours hours ins   ins"
      "offer offer hours hours ins   ins"
      "cred  cred  cred  cred  cred  cred"
      "svc   svc   s1    s1    s2    s2"
      "s3    s3    s4    s5    s6    s6"
      "sw    sw    sw    sw    q1    q1"
      "sw    sw    sw    sw    q2    q2"
      "proc  proc  proc  team  team  team"
      "proc  proc  proc  q3    q3    q3"
      "doc   doc   doc   visit visit visit"
      "book  book  book  book  book  book";
  }
  .t-intro { padding: 44px 44px 40px; gap: 20px; }
  .t-intro h1 { max-width: 11ch; font-size: 4.25rem; }
  .lede { font-size: 1.1875rem; max-width: 28em; }
  .t-photo { aspect-ratio: auto; }
  .t-alert { padding: 16px 20px 16px 24px; column-gap: 18px; }
  .alert-txt { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; }
  .alert-txt h2 { font-size: 1.5rem; }
  .alert-txt p { font-size: var(--fs-b); margin-top: 0; }
  .t-ins h3 { font-size: 1.75rem; }
  .t-cred { padding: 24px 32px 28px; display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 24px; }
  .creds { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .creds li { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
  .t-svc h3 { font-size: 1.75rem; max-width: 12ch; }
  .offer-num { font-size: 6.5rem; }
  .t-svc { justify-content: center; }
  .svc-photo img { aspect-ratio: auto; flex: 1 1 0; min-height: 120px; }
  .t-sw h3 { font-size: 1.875rem; }
  .sw-body { padding: 28px 28px 28px 30px; justify-content: space-between; }
  .t-quote { padding: 28px; }
  .t-quote blockquote p { font-size: 1.3125rem; }
  .t-proc { padding: 32px; }
  .t-team { padding: 28px 32px 30px; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .people li { border-top: 1px solid var(--c-line); padding: 12px 0 14px; }
  .people li:first-child { border-top: 1px solid var(--c-line); padding-top: 12px; }
  .people li:last-child { padding-bottom: 14px; }
  .t-doc, .t-visit { padding: 30px 32px; }
  .t-book { padding: 40px 44px; column-gap: 56px; }
  .t-book h2 { font-size: 3rem; }
  .book-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field:nth-child(-n+2) { grid-column: auto; }
  .book-form .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- One orchestrated moment: the first tiles settle into the tray ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bento > :nth-child(-n+3) { animation: settle .7s var(--ease-out) both; }
  .bento > :nth-child(2) { animation-delay: .07s; }
  .bento > :nth-child(3) { animation-delay: .14s; }
  @media (min-width: 1080px) { .t-rate { animation: settle .7s var(--ease-out) .21s both; } }
  @keyframes settle { from { opacity: 0; transform: translateY(14px) scale(.985); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

/* Hover only where a real pointer can hover */
@media (hover: hover) and (pointer: fine) {
  .btn-brand:hover { background: var(--brand-d); }
  .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .btn-sun:hover { background: #FFE08A; }
  .alert-call:hover { background: var(--brand-d); }
  .seg a:hover { background: var(--tray); }
  .top-tel:hover { text-decoration: underline; text-underline-offset: 3px; }
  .f-rows a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .sw-label:hover { background: var(--mint); }
}