/* =========================================================== */
/* The Tooth Place - site styles (loads LAST)                   */
/* 1 Base + type roles   2 Buttons (matte)   3 Header/drawer    */
/* 4 Sections, in page order   5 Footer   6 Sticky bar + a11y   */
/* slot   7 Cursor/scrollbar matte slot   8 Motion + final states*/
/* Matte rules (plan 6): no glows, blur, shimmer, text-shadow,   */
/* drop-shadow; one shadow token (--shadow-1) on four objects.   */
/* =========================================================== */

/* ================= 1. BASE ================= */
html { background: var(--cream); scroll-padding-top: calc(var(--header-h) + 7px); font-synthesis-style: none; }
body {
  background: var(--cream); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-body);
  font-optical-sizing: auto;
}
h1, h2, h3, h4 {
  font-family: var(--font-display); color: var(--ink); font-weight: 600;
  line-height: var(--lh-tight); letter-spacing: var(--tr-sub);
  overflow-wrap: normal;            /* never split a word in a heading (ag-defensive sets break-word on body) */
}
h3, h4 { line-height: var(--lh-head); letter-spacing: 0; }
em { font-style: italic; }
h1 em, h2 em, h3 em, .ttp-em { font-style: normal; }
strong { font-weight: 600; color: var(--ink); }
ul, ol { list-style: none; padding: 0; }
p a, .ttp-inline-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.icon { display: inline-block; width: 21px; height: 21px; flex: none; }
/* pass 7: the brush icons are filled outlines whose own stroke weight is about 0.7px at 21px. They carry
   vector-effect="non-scaling-stroke", so this stroke (inherited through <use>) adds a CONSTANT screen width
   around the ink: an optical boost that matters at 18-24px and fades to nothing at 84px, like a font's
   optical size. Line icons (chevrons, arrows, close, star, a11y, moon) set their own stroke on the symbol,
   so this never touches them. */
.icon { stroke: currentColor; stroke-width: var(--ink-boost, 0.9px); stroke-linejoin: round; }
svg.icon { max-width: none; }
.ttp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }
/* AUDIT 2026-09-24: gold alone is 2.0:1 on cream (fails WCAG 1.4.11 for the focus indicator);
   the 3px ink ring inside the gold ring gives 15:1 on every light surface and keeps the gold look. */
#main:focus { outline: none; }
/* AUDIT 2026-09-24: no-JS fallback. .reveal* start at opacity 0 and only JS adds .in-view, so with
   JavaScript off everything below the hero was invisible. Show final states when JS never ran. */
html.no-js .reveal, html.no-js .reveal-hero, html.no-js .reveal-stagger > *, html.no-js .reveal-cinematic {
  opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
}

.ag-skip-link {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-14);
  background: var(--ink); color: var(--cream); border-radius: 0 0 var(--r-7) var(--r-7);
  top: -120px; left: var(--gutter); padding: 12px 21px; z-index: 2147483647;
}
.ag-skip-link:focus-visible { top: 0; }

.ttp-wrap { width: 100%; max-width: calc(var(--max-w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- type roles ---- */
.ttp-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-size: var(--fs-12); font-weight: 600;
  line-height: var(--lh-head); letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--charcoal-soft); margin-bottom: 21px;
}
.ttp-eyebrow::before { content: ""; width: 21px; height: 3px; border-radius: 3px; background: var(--sage-deep); flex: none; }
.ttp-eyebrow--on-dark { color: var(--text-on-ink-soft); }
.ttp-eyebrow--on-dark::before { background: var(--gold); }
.ttp-h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tr-sub); max-width: 21em; }
.ttp-em { color: var(--sage-deep); font-weight: 700; }
.ttp-lead { font-size: var(--fs-lead); line-height: var(--lh-ui); color: var(--charcoal-soft); max-width: 46ch; margin-top: 21px; }
.ttp-textlink {
  display: inline-flex; align-items: center; gap: 7px; min-height: var(--touch);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-16); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 6px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--duration-quick) var(--ease-soft);
}
.ttp-textlink .icon { color: var(--sage-deep); transition: translate var(--duration-quick) var(--ease-settle); }
@media (hover: hover) {
  .ttp-textlink:hover { text-decoration-color: var(--sage-deep); }
  .ttp-textlink:hover .icon { translate: 3px 0; }
}
.ttp-iconbox {
  display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none;
  background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--r-14); color: var(--sage-deep);
}
.ttp-stars { display: inline-flex; gap: 3px; color: var(--gold); }
.ttp-stars .icon { width: 14px; height: 14px; }

/* ================= 2. BUTTONS (AG Button v1.0, matte brand slot) ================= */
.ag-button {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-16); letter-spacing: 0.01em;
  min-height: var(--touch); padding: 14px 28px 12px; gap: 9px; border-width: 1px; border-radius: var(--r-14);
  line-height: 1;
}
.ag-button .icon { width: 21px; height: 21px; margin-top: -3px; }
.ag-button--primary { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.ag-button--primary::after { display: none; }                    /* sheen sweep removed (plan 6.1) */
.ag-button--secondary { background: transparent; border-color: var(--charcoal); color: var(--ink); }
.ag-button--secondary::before { background: var(--charcoal); }    /* flat fill wipe, no gradient */
@media (hover: hover) {
  .ag-button--primary:hover { background: var(--ink); border-color: var(--ink); box-shadow: none; }
  .ag-button--secondary:hover { color: var(--cream); border-color: var(--charcoal); box-shadow: none; }
}
.ag-button:active { transform: none; }
.ag-button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }
.ag-button--sm { min-height: 42px; padding: 9px 21px 7px; font-size: var(--fs-14); border-width: 1px; }
.ag-button .arrow { width: 1.05em; }

/* ================= 3. HEADER + DRAWER (AG Header v2.6 brand slot: matte) ================= */
.ag-header {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: transform var(--duration-quick) var(--ease-satisfying),
    background-color var(--duration-quick) var(--ease-soft), border-color var(--duration-quick) var(--ease-soft);
}
.ag-header.is-scrolled, html.veil-on .ag-header { background: var(--cream); border-bottom-color: var(--line); }
/* canonical is-transparent inverts to white for a dark hero; this hero is cream -> keep dark chrome */
.ag-header.is-transparent .ag-header__logo { filter: none; }
.ag-header.is-transparent .ag-header__nav a:not(.ag-button) { color: var(--charcoal-soft); }
.ag-header.is-transparent .ag-header__nav a:not(.ag-button)::after { background: var(--gold); }
.ag-header.is-transparent .ag-nav-link-arrow { color: var(--sage-deep); }
.ag-header.is-transparent .ag-hamburger { color: var(--ink); }

.ag-header__row {
  max-width: calc(var(--max-w) + 2 * var(--gutter)); padding: 0 var(--gutter); height: var(--header-h);
  grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 21px;
}
.ag-header__brand { min-height: var(--touch); }
.ag-header__logo { height: 56px; width: auto; }
.ag-header__nav { gap: 28px; }
.ag-header__nav a:not(.ag-button) {
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0;
  color: var(--charcoal-soft); padding-top: 9px;
  white-space: nowrap;   /* AUDIT: labels wrapped to 2 lines at 1024; nowrap lets ag-header.js measure the real width and collapse instead */
}
.ag-header__nav a:not(.ag-button)::after { background: var(--gold); height: 1.5px; bottom: 9px; }
.ag-nav-link-arrow { color: var(--sage-deep); }
/* owner 2026-09-26: hover is never white (the AG transparent state set #fff over the cream hero) */
@media (hover: hover) {
  .ag-header__nav a:not(.ag-button):hover,
  .ag-header.is-transparent .ag-header__nav a:not(.ag-button):hover { color: var(--ink); }
  .ag-header__nav a:not(.ag-button):hover .ag-nav-link-label { transform: none; }
}
.ag-header__nav a:not(.ag-button)::after { height: 2px; }
.ag-header__nav a[aria-current="page"] { color: var(--ink); }
.ag-header__nav a[aria-current="page"]::after { transform: scaleX(1); }
.ag-header__row > .ag-button[aria-current="page"] { background: var(--ink); }

/* call + email: icon-only buttons (owner 2026-09-26). Call is the filled CTA, email the outline. */
.ttp-header-contact { display: flex; align-items: center; gap: 7px; }
.ttp-header-icon {
  display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-14); color: var(--ink); background: transparent;
  transition: background-color var(--duration-quick) var(--ease-soft), border-color var(--duration-quick) var(--ease-soft),
    color var(--duration-quick) var(--ease-soft), translate var(--duration-quick) var(--ease-satisfying);
}
.ttp-header-icon .icon { width: 21px; height: 21px; }
.ttp-header-icon--call { background: var(--sage); border-color: var(--sage); }
@media (hover: hover) {
  .ttp-header-icon:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); translate: 0 -2px; }
}
.ttp-header-icon:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* grid per state: brand | nav | phone | cta  (expanded)   brand | phone | toggle (collapsed) */
@media (max-width: 900px) {
  .ag-header__row { grid-template-columns: minmax(0, 1fr) auto auto; padding-inline: var(--gutter); }
}
.ag-header.is-collapsed .ag-header__row { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 7px; }
@media (min-width: 701px) {
  .ag-header.is-expanded .ag-header__row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
}
@media (max-width: 700px) {
  .ag-header__logo { height: 49px; }
}
.ag-hamburger { color: var(--ink); }

/* Drawer: flat ink, no radial glow, no glass, no drop shadow */
.ag-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ag-drawer { background-image: none; background-color: var(--ink); border-left: 1px solid var(--line-on-ink); box-shadow: none; }
.ag-drawer__head { border-bottom-color: var(--line-on-ink); padding: calc(14px + env(safe-area-inset-top)) 21px 14px; }
.ag-drawer__logo { height: 63px; }
.ag-drawer__close { background: transparent; border: 1px solid var(--line-on-ink-strong); color: var(--cream); }
@media (hover: hover) { .ag-drawer__close:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); transform: none; } }
.ag-drawer__list { padding: 21px 12px 12px; gap: 3px; }
.ag-drawer__list a { border-radius: var(--r-14); padding: 14px 14px; align-items: center; }
.ag-drawer__index { font-family: var(--font-body); font-size: var(--fs-12); letter-spacing: 0.12em; color: var(--gold); opacity: 1; }
.ag-drawer__label { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem); letter-spacing: var(--tr-sub); line-height: var(--lh-head); }
.ag-drawer__chev { width: 21px; height: 21px; color: var(--gold); }
.ag-drawer__list a[aria-current="page"], .ag-drawer__list a:hover { background: rgba(247, 241, 229, 0.07); }
@media (hover: hover) { .ag-drawer__list a:hover { padding-left: 21px; } .ag-drawer__list a:hover .ag-drawer__label { color: var(--cream); } }
.ag-drawer__meta { padding: 21px 21px 7px; }
.ag-drawer__meta-label { font-size: var(--fs-12); letter-spacing: var(--tr-eyebrow); color: var(--gold); }
.ag-drawer__info { border-top-color: var(--line-on-ink); }
.ag-drawer__info-k { color: var(--text-on-ink-soft); }
.ag-drawer__info-v { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-16); color: var(--cream); }
.ag-drawer__info-v a { color: inherit; }
.ag-drawer__foot { padding: 21px 21px calc(21px + env(safe-area-inset-bottom)); border-top-color: var(--line-on-ink); }
.ag-drawer__cta.ag-button--primary { background: var(--sage); border-color: var(--sage); color: var(--ink); }
@media (hover: hover) { .ag-drawer__cta.ag-button--primary:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); box-shadow: none; } }
.ag-drawer__note { color: var(--text-on-ink-soft); font-weight: 500; }
.ag-drawer__note-dot { background: var(--sage); box-shadow: none; }

/* ================= 4. SECTIONS ================= */

/* ---------- 4.1 HERO ---------- */
.ttp-hero {
  position: relative; overflow: clip;
  padding: calc(var(--header-h) + 28px) 0 42px;
  /* the single wash (plan 25.1) now lives on .ttp-hero::before in ttp-living.css (pass 4; static since pass 6) */
  background: var(--cream); isolation: isolate;
}
.ttp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; justify-items: center; text-align: center; }
.ttp-hero__copy, .ttp-hero__rest { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.ttp-hero__copy { container-type: inline-size; }
.ttp-hero__badge {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center;
  font-size: var(--fs-14); font-weight: 600; line-height: var(--lh-head); color: var(--charcoal-soft);
  margin-bottom: 21px;
}
.ttp-hero__title {
  font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tr-head);
  max-width: 22ch; text-wrap: balance;
  font-size: clamp(1.875rem, 8.4cqi, 3.0625rem);   /* 30 -> 49, tracks the copy column */
}
.ttp-hero__em {
  color: var(--sage-deep); font-weight: 700;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 3px;
  padding-bottom: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ttp-hero__media { position: relative; width: 100%; max-width: 630px; margin: 0; }
.ttp-hero__frame {
  padding: 12px; border-radius: var(--r-21); background: var(--cream-soft);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.ttp-hero__photo { width: 100%; height: auto; aspect-ratio: 1200 / 891; border-radius: 9px; background: var(--cream-deep); object-fit: cover; }
.ttp-hero__plate {
  position: absolute; left: 50%; bottom: -21px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 9px 14px 9px 12px; border-radius: var(--r-14); background: var(--charcoal); color: var(--cream);
}
.ttp-hero__plate-num { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; line-height: 1; letter-spacing: var(--tr-head); padding-top: 3px; }
.ttp-hero__plate-side { display: flex; flex-direction: column; gap: 3px; }
.ttp-hero__plate-text { font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tr-ui); color: var(--text-on-ink-soft); line-height: 1.2; }
.ttp-hero__rest { gap: 21px; padding-top: 21px; }
.ttp-hero__sub { font-size: var(--fs-lead); line-height: var(--lh-ui); color: var(--charcoal-soft); font-weight: 500; }
.ttp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ttp-pills { display: flex; flex-wrap: wrap; gap: 9px 18px; justify-content: center; margin-top: 7px; }
.ttp-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-14); font-weight: 600; line-height: var(--lh-head); color: var(--charcoal); white-space: nowrap;
}
.ttp-pill .icon { width: 18px; height: 18px; color: var(--sage-deep); margin-top: -1px; }

@media (min-width: 900px) {
  .ttp-hero { padding: calc(var(--header-h) + 42px) 0 84px; }
  .ttp-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    grid-template-areas: "copy media" "rest media";
    column-gap: 63px; row-gap: 28px; justify-items: start; text-align: left;
  }
  .ttp-hero__copy { grid-area: copy; align-self: end; align-items: flex-start; }
  .ttp-hero__rest { grid-area: rest; align-self: start; align-items: flex-start; padding-top: 0; }
  .ttp-hero__media { grid-area: media; align-self: center; max-width: none; }
  .ttp-hero__badge, .ttp-hero__actions, .ttp-pills { justify-content: flex-start; }
  .ttp-hero__frame { padding: 21px; border-radius: var(--r-28); }
  .ttp-hero__photo { border-radius: var(--r-7); }
  .ttp-hero__plate { left: -21px; bottom: 42px; translate: none; padding: 12px 21px 12px 14px; }
  .ttp-hero__plate-num { font-size: 2.625rem; }
}
@media (min-width: 1200px) {
  .ttp-hero { padding-bottom: 84px; }
  .ttp-hero__grid { column-gap: 63px; }
}

/* ---------- 4.2 TRUST BAND (dark) ---------- */
.ttp-trust { background: var(--charcoal); color: var(--cream); padding-block: 28px; }
.ttp-trust__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ttp-trust__item {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  font-size: 0.9375rem; font-weight: 500; line-height: var(--lh-head); color: var(--cream);
}
.ttp-trust__item .icon { color: var(--gold); }
.ttp-trust__face { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--gold); }
@media (min-width: 600px) {
  .ttp-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}
@media (min-width: 768px) {
  .ttp-trust__list { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 21px; }
  .ttp-trust__item { grid-column: span 2; }
  .ttp-trust__item:nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 1100px) {
  .ttp-trust { padding-block: 21px; }
  .ttp-trust__list { grid-template-columns: repeat(5, minmax(0, auto)); justify-content: space-between; column-gap: 0; }
  .ttp-trust__item, .ttp-trust__item:nth-child(4) { grid-column: auto; min-height: 42px; padding-inline: 21px; }
  .ttp-trust__item:first-child { padding-left: 0; }
  .ttp-trust__item:last-child { padding-right: 0; }
  .ttp-trust__item + .ttp-trust__item { border-left: 1px solid var(--line-on-ink-strong); }
}

/* ---------- 4.3 RECOGNITION: three reasons, one answer ---------- */
.ttp-recog { background: var(--paper); padding-block: var(--section-y); }
.ttp-recog__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 42px; }
.ttp-recog__reasons { display: flex; flex-direction: column; gap: 21px; }
.ttp-recog__reason {
  padding: 3px 0 3px 21px; border-left: 3px solid var(--sage-soft);
  font-size: var(--fs-lead); line-height: var(--lh-ui); color: var(--charcoal-soft); max-width: 36ch;
}
.ttp-recog__answer { border-left: 3px solid var(--sage-deep); padding: 3px 0 3px 21px; }
.ttp-recog__alone { font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-head); color: var(--ink); }
.ttp-recog__judged {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-tight);
  letter-spacing: var(--tr-sub); color: var(--sage-deep); margin-top: 12px;
}
.ttp-recog__close { margin-top: 21px; max-width: 52ch; color: var(--charcoal-soft); }
@media (min-width: 768px) { .ttp-recog { padding-bottom: calc(var(--section-y) + 42px); } }
@media (min-width: 900px) {
  .ttp-recog__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 21px; row-gap: 42px; }
  .ttp-recog__head { grid-column: 1 / span 8; }
  .ttp-recog__reasons { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
  .ttp-recog__answer { grid-column: 7 / span 6; grid-row: 2; align-self: end; position: relative; padding: 3px 0 3px 42px; border-left: 3px solid var(--sage-deep); }
  /* the reasons "arrive" at the answer: the pale sage rules of the three reasons become the
     deep sage rule of the answer, joined by one hairline running from under the list */
  .ttp-recog__answer::before {
    content: ""; position: absolute; bottom: 0; right: calc(100% + 3px); height: 1px; background: var(--line-strong);
    width: calc(100% + 24px); /* = 6 columns + 6 gutters: back to the start of the reasons column */
  }
}

/* ---------- 4.4 THE DESK ---------- */
.ttp-desk { background: var(--cream-deep); padding-block: var(--section-y); }
.ttp-desk__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 42px; }
.ttp-desk__side { display: contents; }
.ttp-desk__portrait {
  order: 0; margin: 0; padding: 12px; background: var(--paper); border-radius: var(--r-21);
  box-shadow: var(--shadow-1); max-width: 462px; width: 100%; justify-self: center;
}
.ttp-desk__portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: var(--cream-deep); }
.ttp-desk__text { order: 1; min-width: 0; }
.ttp-desk__meta { order: 2; }
.ttp-desk__cards { order: 3; }
.ttp-desk__name { margin-bottom: 9px; }
.ttp-desk__role { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lead); color: var(--charcoal-soft); line-height: var(--lh-head); }
.ttp-desk__bio { margin-top: 28px; display: grid; gap: 14px; max-width: 63ch; color: var(--charcoal-soft); }
.ttp-desk__quote {
  margin: 42px 0 0; padding: 3px 0 3px 21px; border-left: 3px solid var(--sage);
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.3; color: var(--ink); max-width: 30em;
}
.ttp-desk__meta { display: grid; border-top: 1px solid var(--line-strong); }
.ttp-desk__meta > div { display: grid; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--line-strong); }
.ttp-desk__meta dt { font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--charcoal-soft); }
.ttp-desk__meta dd { margin: 0; font-weight: 500; color: var(--ink); line-height: var(--lh-ui); }

/* desk cards: paper notes on the desk */
.ttp-desk__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ttp-card {
  position: relative; min-width: 0; padding: 21px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-14);
}
.ttp-card--cred::before { content: ""; display: block; width: 21px; height: 3px; border-radius: 3px; background: var(--gold); margin-bottom: 18px; }
.ttp-desk.is-reveal .ttp-card--cred::before { margin-bottom: 18px; }
.ttp-card--cred::before { margin-top: 0; }
.ttp-card--egg { border-color: var(--sage-soft); }
.ttp-card__icon { display: block; color: var(--sage-deep); margin: -6px 0 6px; }   /* occupies 21px, same as the credential tab */
.ttp-desk.is-reveal .ttp-card__icon { margin-bottom: 6px; }
.ttp-card__label { font-family: var(--font-display); font-weight: 600; font-size: 1.3125rem; line-height: var(--lh-head); color: var(--ink); letter-spacing: 0; }
.ttp-card__note { margin-top: 7px; color: var(--charcoal-soft); font-size: var(--fs-16); line-height: var(--lh-ui); }
@media (min-width: 600px) { .ttp-desk__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .ttp-desk__portrait { margin-top: calc(-1 * var(--section-y) - 42px); }  /* the page's one designed overlap (plan 16.2) */
}
@media (min-width: 1024px) {
  .ttp-desk__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 21px; row-gap: 63px; }
  .ttp-desk__side { display: flex; flex-direction: column; gap: 42px; grid-column: 1 / span 5; }
  .ttp-desk__portrait { max-width: none; justify-self: stretch; }
  .ttp-desk__text { grid-column: 7 / span 6; padding-top: 21px; }
  .ttp-desk__cards { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; }
}
/* one row of six. Widths are weighted by how much each note has to say (not an equal grid),
   never narrower than the card's own label; notes never widen a card. */
@media (min-width: 1200px) {
  .ttp-desk__cards {
    grid-template-columns: minmax(max-content, 2fr) minmax(max-content, 2fr) minmax(max-content, 3fr)
                           minmax(max-content, 3fr) minmax(max-content, 3fr) minmax(max-content, 2fr);
  }
  .ttp-card__note { contain: inline-size; }
}
.ttp-card__note { overflow-wrap: normal; }
/* reveal mode (ttp-desk.js, wide + hover-capable only): the note waits under the label.
   Space is reserved (no reflow); hover, focus or a toggle reveals it and the card lifts 7px. */
.ttp-desk.is-reveal .ttp-card { transition: translate var(--duration-quick) var(--ease-settle), border-color var(--duration-quick) var(--ease-soft); }
.ttp-desk.is-reveal .ttp-card__note {
  position: absolute; left: -1px; right: -1px; top: calc(100% - 1px); margin: 0;
  padding: 12px 21px 14px; background: var(--cream-soft); border: 1px solid var(--line-strong); border-top: 0;
  border-radius: 0 0 var(--r-14) var(--r-14);
  opacity: 0; visibility: hidden; translate: 0 -14px;
  transition: opacity var(--duration-quick) var(--ease-soft), translate var(--duration-quick) var(--ease-settle), visibility 0s linear var(--duration-quick);
}
.ttp-desk.is-reveal .ttp-card:hover, .ttp-desk.is-reveal .ttp-card:focus-within, .ttp-desk.is-reveal .ttp-card.is-open {
  translate: 0 -7px; border-color: var(--line-strong); z-index: 2;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;   /* the slip continues the card */
}
/* WCAG pass 2026-09-24 (4.1.2): keyboard focus no longer previews the note (the button said "collapsed" while the
   note showed). Keyboard: Enter/Space opens it and aria-expanded follows. Hover still previews (pointer only). */
.ttp-desk.is-reveal .ttp-card:hover .ttp-card__note, .ttp-desk.is-reveal .ttp-card.is-open .ttp-card__note {
  opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s;
}
.ttp-card__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  text-align: left; font: inherit; color: inherit; padding: 0; min-height: 28px;
}
.ttp-card__toggle::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-14); }  /* whole card is the target */
.ttp-card__toggle:focus-visible { outline: none; }
.ttp-card__toggle:focus-visible { box-shadow: none; }
.ttp-card:has(.ttp-card__toggle:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 0 3px var(--ink); }
.ttp-card__chev { width: 21px; height: 21px; color: var(--sage-deep); transition: rotate var(--duration-quick) var(--ease-settle); }
.ttp-card.is-open .ttp-card__chev { rotate: 180deg; }

/* ---------- 4.5 SERVICES EXPLORER ---------- */
.ttp-services { background: var(--cream); padding-block: var(--section-y); }
.ttp-services__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ttp-services__head .ttp-h2 { max-width: 18em; }
.ttp-services__head .ttp-lead { margin-inline: auto; }
.ttp-arc {
  display: block; aspect-ratio: 770 / 576; background: var(--gold);
  -webkit-mask: url('/assets/img/brand-arc.svg') center / contain no-repeat;
  mask: url('/assets/img/brand-arc.svg') center / contain no-repeat;
}
.ttp-services__arc { width: 70px; margin-bottom: 14px; }
/* the arc "draws" left to right with its section head */
html.js .reveal .ttp-arc { clip-path: inset(0 100% 0 0); transition: clip-path var(--duration-lift) var(--ease-settle) 210ms; }
html.js .reveal.in-view .ttp-arc { clip-path: inset(0 0 0 0); }

.ttp-explorer { margin-top: 42px; }
.ttp-explorer__item { border-top: 1px solid var(--line-strong); }
.ttp-explorer__item:last-child { border-bottom: 1px solid var(--line-strong); }
.ttp-explorer__h { font-size: var(--fs-h3); font-weight: 600; letter-spacing: 0; }
.ttp-explorer__trigger {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  width: 100%; padding: 21px 0; text-align: left; font: inherit; color: var(--ink);
}
.ttp-explorer__trigger > .icon { color: var(--sage-deep); grid-row: 1 / span 2; width: 28px; height: 28px; --ink-boost: 0.8px; }  /* pass 7: 28px, the wide dental icons (dentures, aligner, tooth-lift) are mush at 21-24 */
.ttp-explorer__name { grid-column: 2; }
.ttp-explorer__tag {
  grid-column: 2; font-family: var(--font-body); font-size: var(--fs-12); font-weight: 600;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--charcoal-soft); margin-top: 6px; line-height: 1.2;
}
.ttp-explorer__chev { grid-column: 3; grid-row: 1 / span 2; width: 21px; height: 21px; color: var(--charcoal-soft); transition: rotate var(--duration-accordion) var(--ease-settle); }
.ttp-explorer__panel { padding: 0 0 28px 35px; }
.ttp-explorer__picon, .ttp-explorer__ptitle { display: none; }
.ttp-explorer__desc { color: var(--charcoal-soft); max-width: 58ch; }
.ttp-explorer__pin { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.ttp-explorer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 21px; margin-top: 12px; }

/* narrow: disclosure list, one open at a time */
.ttp-explorer.is-disclosure .ttp-explorer__panel {
  display: grid; grid-template-rows: 0fr; padding: 0 0 0 35px; visibility: hidden;
  transition: grid-template-rows var(--duration-accordion) var(--ease-soft), visibility 0s linear var(--duration-accordion);
}
.ttp-explorer.is-disclosure .ttp-explorer__pin { min-height: 0; overflow: hidden; }
.ttp-explorer.is-disclosure .ttp-explorer__panel.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.ttp-explorer.is-disclosure .ttp-explorer__panel.is-open .ttp-explorer__pin { padding-bottom: 28px; }
.ttp-explorer.is-disclosure .ttp-explorer__trigger[aria-expanded="true"] .ttp-explorer__chev { rotate: 180deg; }
.ttp-explorer:not(.is-disclosure) .ttp-explorer__chev { display: none; }

/* wide: tabs; one low panel (paper, radius 21, the shadow token) */
@media (min-width: 900px) {
  .ttp-explorer { margin-top: 63px; }
  .ttp-explorer.is-tabs {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-21); box-shadow: var(--shadow-1); overflow: hidden;
  }
  .ttp-explorer__tabs { display: flex; flex-direction: column; gap: 3px; padding: 21px; border-right: 1px solid var(--line); background: var(--cream-soft); }
  .ttp-explorer.is-tabs .ttp-explorer__trigger {
    padding: 12px 14px; min-height: var(--touch); border-radius: var(--r-7);
    font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; line-height: var(--lh-head); color: var(--charcoal);
    transition: background-color var(--duration-quick) var(--ease-soft), color var(--duration-quick) var(--ease-soft);
  }
  .ttp-explorer.is-tabs .ttp-explorer__tag { margin-top: 3px; letter-spacing: 0.12em; }
  .ttp-explorer.is-tabs .ttp-explorer__trigger[aria-selected="true"] {
    background: var(--surface-tint); box-shadow: inset 3px 0 0 var(--sage-deep); color: var(--ink); font-weight: 600;
  }
  .ttp-explorer.is-tabs .ttp-explorer__trigger:focus-visible { outline-offset: -3px; }
  .ttp-explorer__panes { display: grid; padding: 63px; align-items: center; }
  .ttp-explorer.is-tabs .ttp-explorer__panel {
    grid-area: 1 / 1; padding: 0; opacity: 0; visibility: hidden;
    transition: opacity var(--duration-quick) var(--ease-soft), visibility 0s linear var(--duration-quick);
  }
  .ttp-explorer.is-tabs .ttp-explorer__panel.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
  .ttp-explorer.is-tabs .ttp-explorer__picon { display: inline-grid; width: 63px; height: 63px; border-radius: var(--r-14); }
  .ttp-explorer.is-tabs .ttp-explorer__picon .icon { width: 28px; height: 28px; --ink-boost: 0.7px; }
  .ttp-explorer.is-tabs .ttp-explorer__ptitle {
    display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2);
    line-height: var(--lh-tight); letter-spacing: var(--tr-sub); color: var(--ink); margin-top: 12px;
  }
  .ttp-explorer.is-tabs .ttp-explorer__desc { font-size: var(--fs-lead); line-height: var(--lh-ui); max-width: 42ch; margin-top: 3px; }
}
@media (hover: hover) {
  .ttp-explorer.is-tabs .ttp-explorer__trigger[aria-selected="false"]:hover { background: var(--surface-tint); color: var(--ink); }
}
/* tooth arch (ttp-arch.js): 32 rendered crowns on a smile curve; the picked service lights its teeth */
.ttp-arch { display: none; }
html.js .ttp-arch.is-built { display: block; position: relative; aspect-ratio: 2 / 1; margin-top: 42px; user-select: none; -webkit-tap-highlight-color: transparent; }
.ttp-arch__set { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 1000 / 380; translate: 0 -50%; transition: scale var(--duration-lift) var(--ease-settle), opacity 420ms var(--ease-soft); }
/* the 3D jaw (ttp-arch3d.js) fades in over the flat chart once its first frame is drawn */
.ttp-arch__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; touch-action: pan-y; transition: opacity 520ms var(--ease-soft); }
.ttp-arch.is-3d .ttp-arch__gl { opacity: 1; }
.ttp-arch.is-3d .ttp-arch__set { opacity: 0; pointer-events: none; }
.ttp-arch__tooth {
  position: absolute; cursor: pointer; rotate: var(--rot);
  transform-origin: 50% 100%;
  transition: opacity 420ms var(--ease-settle) calc(var(--k) * 45ms), translate 620ms var(--ease-settle) calc(var(--k) * 45ms);
}
.ttp-arch__tooth.is-upper { transform-origin: 50% 0%; }
.ttp-arch__tooth img {
  display: block; width: 100%; height: auto;
  transform: scale(calc(var(--sx) * var(--z, 1)), calc(var(--sy) * var(--z, 1)));
  filter: drop-shadow(0 3px 4px rgba(42, 42, 42, 0.13));
  transition: transform var(--duration-quick) var(--ease-settle), filter var(--duration-quick) var(--ease-soft), opacity var(--duration-quick) var(--ease-soft);
}
/* entrance: teeth settle in from outside the oval, front teeth first */
html.js .ttp-arch:not(.is-in) .ttp-arch__tooth { opacity: 0; translate: calc(var(--ix) * -16px) calc(var(--iy) * -16px); }
/* a service picked: its teeth lift with a sage outline, the rest step back (a soft sage glow read as grey on white) */
.ttp-arch.has-pick .ttp-arch__tooth img { opacity: 0.34; }
.ttp-arch.has-pick .ttp-arch__tooth.is-on img {
  opacity: 1; --z: 1.1;
  filter: brightness(1.06) drop-shadow(0 0 0.6px #6F8A60) drop-shadow(0 0 0.6px #6F8A60) drop-shadow(0 0 0.6px #6F8A60) drop-shadow(0 6px 8px rgba(42, 42, 42, 0.16));
}
.ttp-arch.has-pick .ttp-arch__tooth.is-on { z-index: 1; }
/* whole-mouth picks glow without lifting so the rows do not collide */
.ttp-arch[data-svc="exams-cleanings"] .ttp-arch__tooth.is-on img,
.ttp-arch[data-svc="dentures-partials"] .ttp-arch__tooth.is-on img,
.ttp-arch[data-svc="pediatric"] .ttp-arch__tooth.is-on img { --z: 1.02; filter: brightness(1.06) drop-shadow(0 0 0.6px #6F8A60) drop-shadow(0 0 0.6px #6F8A60) drop-shadow(0 0 0.6px #6F8A60) drop-shadow(0 3px 4px rgba(42, 42, 42, 0.13)); }
/* pediatric: the smaller 20-tooth set */
.ttp-arch[data-svc="pediatric"] .ttp-arch__set { scale: 0.84; }
.ttp-arch[data-svc="pediatric"] .ttp-arch__tooth:not(.is-on) { opacity: 0; transition-delay: 0s; }
/* botox: no tooth, the arch rests back */
.ttp-arch[data-svc="botox"] .ttp-arch__tooth img { opacity: 0.32; }
/* implants: the demo tooth rises off a titanium post */
.ttp-arch__tooth.is-implant::after {
  content: ""; position: absolute; left: 36%; bottom: 82%; width: 28%; height: 52%; z-index: -1;
  border-radius: 3px 3px 7px 7px; opacity: 0; translate: 0 10px;
  background:
    repeating-linear-gradient(170deg, transparent 0 5px, rgba(42, 42, 42, 0.22) 5px 7px),
    linear-gradient(90deg, #A9B0B4, #EEF1F2 45%, #8F979C);
  transition: opacity var(--duration-quick) var(--ease-soft), translate var(--duration-lift) var(--ease-settle);
}
.ttp-arch[data-svc="implants"] .ttp-arch__tooth.is-implant { translate: calc(var(--ix) * 12px) calc(var(--iy) * 12px); }
.ttp-arch[data-svc="implants"] .ttp-arch__tooth.is-implant::after { opacity: 1; translate: 0 0; }
@media (hover: hover) {
  .ttp-arch__tooth:hover img { opacity: 1; --z: 1.14; filter: brightness(1.06) drop-shadow(0 0 0.6px #6F8A60) drop-shadow(0 0 0.6px #6F8A60) drop-shadow(0 0 0.6px #6F8A60) drop-shadow(0 7px 10px rgba(42, 42, 42, 0.18)); }
  .ttp-arch__tooth:hover { z-index: 2; }
}
/* narrow: the arch borrows most of the gutter so the teeth stay tappable */
@media (max-width: 899.98px) {
  html.js .ttp-arch.is-built { margin-inline: calc(8px - var(--gutter)); aspect-ratio: 1.55 / 1; }
}
@media (min-width: 900px) {
  .ttp-explorer__panes.has-arch { grid-template-rows: auto 1fr; align-items: start; padding-top: 35px; row-gap: 28px; }
  .ttp-explorer__panes.has-arch .ttp-arch { margin-top: 0; }
  .ttp-explorer.is-tabs .ttp-explorer__panes.has-arch .ttp-explorer__panel { grid-area: 2 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ttp-arch__set, .ttp-arch__tooth, .ttp-arch__tooth img, .ttp-arch__tooth.is-implant::after { transition: none; }
}
.ttp-services__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; margin-top: 63px; text-align: center; }
.ttp-services__line { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); color: var(--ink); line-height: var(--lh-head); }

/* ---------- 4.6 WHY US ---------- */
.ttp-why { background: var(--paper); padding-block: var(--section-y); }
.ttp-why__list { margin-top: 42px; display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: none; }
.ttp-why__row {
  display: grid; grid-template-columns: 63px minmax(0, 1fr); column-gap: 14px;
  padding: 28px 0; border-top: 1px solid var(--line-strong);
}
.ttp-why__num {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-num); line-height: 0.84;
  letter-spacing: var(--tr-head); color: var(--sage-deep); padding-top: 6px;
}
.ttp-why__title { display: block; font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-head); }
.ttp-why__title .icon { display: block; color: var(--sage-deep); margin-bottom: 12px; }
.ttp-why__body p { margin-top: 12px; color: var(--charcoal-soft); max-width: 52ch; }
@media (min-width: 768px) { .ttp-why__row { grid-template-columns: 84px minmax(0, 1fr); column-gap: 21px; } }
@media (min-width: 1024px) {
  .ttp-why__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 21px; }
  .ttp-why__head { grid-column: 1 / span 7; }
  .ttp-why__list {
    grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto);
    grid-auto-flow: column; column-gap: 63px; margin-top: 63px;
  }
  .ttp-why__row { padding: 42px 0; }
  .ttp-why__row:nth-child(3), .ttp-why__row:nth-child(6) { border-bottom: 1px solid var(--line-strong); }
}

/* ---------- 4.7 REVIEWS (dark, matte) ---------- */
.ttp-reviews { background: var(--charcoal); color: var(--cream); padding-block: var(--section-y); }
.ttp-reviews .ttp-h2 { color: var(--cream); }
.ttp-reviews .ttp-em { color: var(--sage-soft); }
.ttp-reviews__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 42px; }
.ttp-score { display: flex; align-items: flex-end; gap: 21px; margin-top: 42px; }
.ttp-score__num {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-score); line-height: 0.77;
  letter-spacing: var(--tr-head); color: var(--cream);
}
.ttp-score__side { display: flex; flex-direction: column; gap: 9px; padding-bottom: 3px; }
.ttp-score .ttp-stars .icon { width: 21px; height: 21px; }
.ttp-score__meta {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  font-size: var(--fs-14); font-weight: 600; color: var(--cream);
  text-decoration: underline; text-decoration-color: var(--line-on-ink-strong); text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.ttp-score__meta .icon { width: 18px; height: 18px; color: var(--sage); }
@media (hover: hover) { .ttp-score__meta:hover { text-decoration-color: var(--sage); } }
.ttp-reviews__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 21px; }
.ttp-review {
  display: flex; flex-direction: column; gap: 21px; padding: 28px; min-width: 0;
  background: var(--ink); border: 1px solid var(--line-on-ink-strong); border-radius: var(--r-14);
  color: var(--cream); transition: border-color var(--duration-quick) var(--ease-soft);
}
.ttp-review__stars .icon { width: 14px; height: 14px; }
.ttp-review__text { font-size: var(--fs-lead); line-height: var(--lh-ui); color: var(--cream); flex: 1; }
.ttp-review--lead .ttp-review__text { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.3; }
.ttp-review__attr { display: flex; align-items: center; gap: 9px; padding-top: 21px; border-top: 1px solid var(--line-on-ink); }
.ttp-review__author { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-16); color: var(--cream); }
.ttp-review__src { width: 21px; height: 21px; flex: none; border-radius: 50%; background: var(--paper); padding: 3px; }
.ttp-review__out { margin-left: auto; color: var(--sage); width: 18px; height: 18px; transition: translate var(--duration-quick) var(--ease-settle); }
@media (hover: hover) {
  .ttp-review:hover { border-color: var(--sage); }
  .ttp-review:hover .ttp-review__out { translate: 3px -3px; }
}
.ttp-reviews__foot { font-size: var(--fs-14); font-weight: 500; color: var(--text-on-ink-soft); }
@media (min-width: 768px) {
  .ttp-reviews__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ttp-review--lead { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .ttp-reviews__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 21px; row-gap: 42px; }
  .ttp-reviews__anchor { grid-column: 1 / span 4; }
  .ttp-reviews__cards { grid-column: 6 / -1; }
  .ttp-reviews__foot { grid-column: 6 / -1; margin-top: -21px; }
  .ttp-review--lead { padding: 42px; }
  .ttp-score { margin-top: 63px; flex-direction: column; align-items: flex-start; gap: 21px; }
}

/* ---------- 4.8 INSURANCE & PAYMENT ---------- */
.ttp-ins { background: var(--cream); padding-block: var(--section-y); }
.ttp-ins__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 42px; }
.ttp-ins__band {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-21);
}
.ttp-ins__col { padding: 28px 21px; }
.ttp-ins__col + .ttp-ins__col { border-top: 1px solid var(--line); }
.ttp-ins__title { display: flex; align-items: center; gap: 14px; font-size: var(--fs-h3); margin-bottom: 14px; }
.ttp-ins__list li {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lead); line-height: var(--lh-head); color: var(--ink);
  padding: 12px 0; border-bottom: 1px solid var(--line); text-wrap: balance;
}
.ttp-ins__list li:last-child { border-bottom: 0; }
.ttp-ins__note {
  padding: 21px; border-top: 1px solid var(--line); color: var(--charcoal-soft);
  background: var(--cream-soft); border-radius: 0 0 var(--r-21) var(--r-21);
}
@media (min-width: 768px) {
  .ttp-ins__band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ttp-ins__col { padding: 42px; }
  .ttp-ins__col + .ttp-ins__col { border-top: 0; border-left: 1px solid var(--line); }
  .ttp-ins__note { grid-column: 1 / -1; padding: 21px 42px; }
}
@media (min-width: 1024px) {
  .ttp-ins__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 21px; align-items: center; }
  .ttp-ins__head { grid-column: 1 / span 5; }
  .ttp-ins__band { grid-column: 6 / -1; margin-left: 21px; }
}

/* ---------- 4.9 FAQ ---------- */
.ttp-faq { background: var(--paper); padding-block: var(--section-y); }
.ttp-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 42px; }
.ttp-faq__list { border-top: 1px solid var(--line-strong); }
.ttp-faq__item { border-bottom: 1px solid var(--line-strong); }
.ttp-faq__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 21px;
  min-height: 63px; padding: 21px 0; cursor: pointer; list-style: none;
}
.ttp-faq__sum::-webkit-details-marker { display: none; }
.ttp-faq__sum::marker { content: ""; }
.ttp-faq__q { font-size: 1.3125rem; font-weight: 600; line-height: var(--lh-head); letter-spacing: 0; }
.ttp-faq__chev {
  width: 42px; height: 42px; padding: 9px; flex: none; border: 1px solid var(--line-strong); border-radius: 50%;
  color: var(--ink); transition: rotate var(--duration-accordion) var(--ease-settle), background-color var(--duration-quick) var(--ease-soft);
}
.ttp-faq__item[open] .ttp-faq__chev { rotate: 180deg; background: var(--surface-tint); border-color: var(--sage-deep); color: var(--sage-deep); }
@media (hover: hover) { .ttp-faq__sum:hover .ttp-faq__q { color: var(--charcoal-soft); } }
.ttp-faq__sum:focus-visible { outline-offset: 3px; border-radius: var(--r-7); }
.ttp-faq__a p { padding: 0 63px 28px 0; color: var(--charcoal-soft); max-width: 63ch; }
@media (max-width: 600px) { .ttp-faq__a p { padding-right: 0; } }
@media (min-width: 1024px) {
  .ttp-faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 21px; }
  .ttp-faq__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--header-h) + 42px); }
  .ttp-faq__list { grid-column: 6 / -1; }
}

/* ---------- 4.10 FINAL CTA ---------- */
.ttp-cta { background: var(--cream-warm); border-top: 3px solid var(--sage); padding: var(--section-y) 0 63px; }
.ttp-cta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ttp-cta__title { font-size: clamp(1.875rem, 1.333rem + 2.476vw, 3.5rem); max-width: 14em; letter-spacing: var(--tr-head); }
.ttp-cta__body { margin-inline: auto; max-width: 52ch; }
.ttp-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 42px; }
.ttp-cta__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 42px; }
.ttp-cta__meta li { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-14); font-weight: 500; color: var(--charcoal-soft); }
.ttp-cta__meta .icon { color: var(--sage-deep); width: 18px; height: 18px; margin-top: -2px; }

/* ---------- 4.11 BOOK A VISIT ---------- */
.ttp-book { background: var(--cream-warm); padding: 42px 0 var(--section-y); }
.ttp-book__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 42px; padding-top: 42px; border-top: 1px solid var(--line); }
.ttp-contact { display: grid; gap: 21px; margin-top: 42px; }
.ttp-contact__item { display: flex; align-items: flex-start; gap: 14px; }
.ttp-contact__text { display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.ttp-contact__label { font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--charcoal-soft); line-height: 1.5; }
.ttp-contact__value { overflow-wrap: anywhere; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lead); line-height: var(--lh-head); color: var(--ink); }
a.ttp-contact__value { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 6px; text-decoration-thickness: 1px; }

.book-embed {
  min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-21);
  box-shadow: var(--shadow-1); padding: 21px;
}
.book-embed__head { padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.book-embed__title { font-size: var(--fs-h3); }
.book-embed__sub { font-size: var(--fs-14); color: var(--charcoal-soft); margin-top: 6px; }
.book-embed__stage { position: relative; min-height: 720px; margin-top: 21px; }
.book-embed__frame { display: block; width: 100%; height: 720px; min-height: 720px; border: 0; opacity: 0; transition: opacity var(--duration-quick) var(--ease-soft); }
.book-embed__frame.is-noscript, .book-embed[data-state="ready"] .book-embed__frame { opacity: 1; }
.book-embed__state {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px;
  padding: 21px; border-radius: var(--r-14); background: var(--cream-soft);
}
.book-embed__state[hidden], .book-embed[data-state="ready"] .book-embed__state { display: none; }
.book-embed__ghost { display: grid; gap: 21px; margin-bottom: 21px; }
.book-embed__ghost span { display: block; height: 49px; border: 1px solid var(--line-strong); border-radius: var(--r-7); background: var(--paper); }
.book-embed__ghost span:nth-child(3) { width: 63%; }
.book-embed__msg { font-weight: 500; color: var(--ink); }
.book-embed__alt { font-size: var(--fs-14); color: var(--charcoal-soft); }
.book-embed__state a { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.book-embed__state--failed { justify-content: center; align-items: flex-start; padding: 42px 21px; }
/* failed: nothing left to wait for, so the reserved 720px collapses around the fallback */
.book-embed[data-state="failed"] .book-embed__stage { min-height: 0; }
.book-embed[data-state="failed"] .book-embed__frame { display: none; }
.book-embed[data-state="failed"] .book-embed__state--failed { position: static; }
.book-embed__state--failed .book-embed__msg { font-size: var(--fs-lead); line-height: var(--lh-ui); max-width: 30ch; }
.book-embed__privacy { margin-top: 14px; font-size: var(--fs-14); }
.book-embed__privacy a { color: var(--charcoal-soft); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .book-embed { padding: 28px; } }
@media (min-width: 1024px) {
  .ttp-book__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 21px; padding-top: 63px; }
  .ttp-book__text { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--header-h) + 21px); }
  .book-embed { grid-column: 6 / -1; margin-left: 21px; }
}

/* ================= 5. FOOTER (AG Footer v1.6 on ink) ================= */
.ttp-footer { padding: 84px 0 42px; }
.ttp-footer .ag-footer-inner { max-width: calc(var(--max-w) + 2 * var(--gutter)); padding-inline: var(--gutter); }
.ttp-footer .ag-footer-identity { position: relative; display: flex; flex-direction: column; align-items: center; }
.ttp-footer .ag-footer-logo { position: relative; display: block; width: 147px; }
.ttp-footer .ag-footer-logo img { width: 100%; height: auto; }
/* the hero's gold returns: the logo's own brush arc re-inked in gold (traced SVG, same geometry,
   viewBox 12 12 770 576 of the 781 x 757 logo), wiping on once when the footer arrives */
.ttp-footer__arc {
  position: absolute; z-index: 1; pointer-events: none; width: calc(147px * 770 / 781); left: 50%;
  margin-left: calc(-147px / 2 + 147px * 12 / 781); top: calc(147px * 12 / 781);
}
.ttp-footer__arc.reveal { opacity: 1; transform: none; }
html.js .ttp-arc.reveal { clip-path: inset(0 100% 0 0); transition: clip-path var(--duration-lift) var(--ease-settle) 140ms; }
html.js .ttp-arc.reveal.in-view { clip-path: inset(0 0 0 0); }
.ttp-footer .ag-footer-tagline { color: var(--text-on-ink-soft); font-size: var(--fs-16); line-height: var(--lh-ui); max-width: 32ch; }
.ttp-footer__stars {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 21px; min-height: 28px;
  font-size: var(--fs-14); font-weight: 600; color: var(--cream);
  text-decoration: underline; text-decoration-color: var(--line-on-ink-strong); text-underline-offset: 6px; text-decoration-thickness: 1px;
}
@media (hover: hover) { .ttp-footer__stars:hover { text-decoration-color: var(--gold); } }
.ttp-footer .ag-footer-col-label {
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; text-transform: none; letter-spacing: 0;
  color: var(--cream); margin-bottom: 14px;
}
.ttp-footer__list { display: grid; gap: 0; }
.ttp-footer .ag-footer-link { font-size: var(--fs-16); color: var(--text-on-ink-soft); }
@media (hover: hover) { .ttp-footer .ag-footer-link:hover { color: var(--cream); } }
.ttp-footer .ag-footer-link::after { color: var(--gold); }
.ttp-footer__facts { gap: 9px; }
.ttp-footer__fact { display: inline-flex; align-items: flex-start; gap: 9px; color: var(--text-on-ink-soft); line-height: var(--lh-ui); padding: 6px 0; text-align: left; }
.ttp-footer__fact .icon { color: var(--gold); width: 18px; height: 18px; margin-top: 3px; }
a.ttp-footer__fact { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1px; transition: text-decoration-color var(--duration-quick) var(--ease-soft), color var(--duration-quick) var(--ease-soft); }
@media (hover: hover) { a.ttp-footer__fact:hover { color: var(--cream); text-decoration-color: var(--gold); } }
.ttp-footer__hours { display: grid; gap: 9px; }
.ttp-footer__hours > div { display: flex; gap: 9px; justify-content: center; color: var(--text-on-ink-soft); line-height: var(--lh-ui); }
.ttp-footer__hours dt { color: var(--cream); font-weight: 500; }
.ttp-footer__hours dd { margin: 0; }
.ttp-footer .ag-footer-divider { height: 1px; background: var(--line-on-ink-strong); opacity: 1; margin: 63px 0 28px; }
.ttp-footer .ag-footer-copyright { font-size: var(--fs-14); color: var(--text-on-ink-soft); }
.ttp-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 21px; justify-content: center; }
.ttp-footer__legal a { display: inline-flex; align-items: center; min-height: 42px; font-size: var(--fs-14); color: var(--text-on-ink-soft); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (hover: hover) { .ttp-footer__legal a:hover { color: var(--cream); text-decoration-color: var(--gold); } }
.ttp-footer :focus-visible { outline-color: var(--gold); }
@media (max-width: 900px) {
  .ttp-footer .ag-footer-identity { order: 1; } .ttp-footer .ag-footer-contact { order: 2; }
  .ttp-footer .ag-footer-hours { order: 3; } .ttp-footer .ag-footer-pages { order: 4; }
  .ttp-footer .ag-footer-tagline { margin-top: 21px; }
  .ttp-footer__fact { justify-content: center; }
}
@media (min-width: 901px) {
  .ttp-footer .ag-footer-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr); column-gap: 42px; }
  .ttp-footer .ag-footer-identity { align-items: flex-start; }
  .ttp-footer__arc { left: 0; margin-left: calc(147px * 12 / 781); }
  .ttp-footer__hours > div { justify-content: flex-start; }
  .ttp-footer__legal { justify-content: flex-end; }
}
/* bottom padding = the watermark's visible height (+ the sticky bar under 768); ag-footer.js sets the
   exact value inline, these are the no-JS fallbacks */
.ttp-footer { padding-bottom: calc(min(100vw - 2 * var(--gutter), var(--max-w)) * 0.1 + 28px); }
@media (max-width: 767px) { .ttp-footer { padding-bottom: calc(min(100vw - 2 * var(--gutter), var(--max-w)) * 0.16 + var(--sticky-h) + 14px); } }

/* ================= 6. STICKY BAR + A11Y SLOT ================= */
.ttp-sticky { display: none; }
@media (max-width: 767px) {
  .ttp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    display: flex; gap: 9px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
    background: var(--cream); border-top: 1px solid var(--line-strong);
    transition: translate var(--duration-quick) var(--ease-satisfying);
  }
  .ttp-sticky.is-hidden { translate: 0 calc(100% + 1px); }
  .ttp-sticky .ag-button { flex: 1; min-height: var(--touch); padding-inline: 12px; }
  .ttp-sticky__book { flex: 1.6 !important; }
  .ttp-sticky__call { background: var(--sage); border-color: var(--sage); color: var(--ink); }
  body.is-dropdown-open .ttp-sticky { translate: 0 calc(100% + 1px); }
}
/* reduced motion (OS setting or ?static=1): every animation and transition ends at once
   (moved from ttp-a11y.css when the accessibility widget was removed, 2026-09-26) */
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
/* the AG cursor's click burst (spawned divs at z 2147483645): not shown under reduced motion */
html.motion-off body > div[aria-hidden="true"][style*="2147483645"] { display: none !important; }

/* ================= 7. CURSOR + SCROLLBAR (matte brand slot) ================= */
/* AG cursor: resting fade + hide over third-party iframes (ttp-cursor-brand.js) */
html.ttp-cur-rest .ag-cursor__body, html.ttp-cur-rest .ag-cursor__edge { opacity: 0.7 !important; transition: opacity var(--duration-quick) var(--ease-soft); }
html.ttp-cur-hide .ag-cursor__body, html.ttp-cur-hide .ag-cursor__edge { opacity: 0 !important; }
/* the click "ignite" carries an inline drop-shadow glow; matte site -> flatten it */
body > div[aria-hidden="true"][style*="2147483645"] svg path { filter: none !important; }
/* AG scrollbar: flat gold, no glows, label gold on ink */
.ag-sb__track { background: rgba(201, 168, 97, 0.21); }
.ag-sb__tick { background: rgba(201, 168, 97, 0.7); }
.ag-sb__tick.is-active { box-shadow: none; background: var(--gold); }
.ag-sb__thumb, .ag-sb:hover .ag-sb__thumb, .ag-sb.is-drag .ag-sb__thumb { background: var(--gold); box-shadow: none; }
.ag-sb__label {
  background: var(--ink); color: var(--gold); border: 1px solid var(--ink); box-shadow: none;
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0.03em;
}

/* ================= 8. MOTION ================= */
/* plan 5.4: stagger 70ms (the AG default is 81) */
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * var(--stagger)); }
.reveal { transition-delay: var(--rd, 0ms); }
.ttp-desk .ttp-desk__cards > .ttp-card {
  transition: opacity var(--duration-medium) var(--ease-settle) calc(var(--i, 0) * var(--stagger)),
    transform var(--duration-medium) var(--ease-settle) calc(var(--i, 0) * var(--stagger)),
    translate var(--duration-quick) var(--ease-settle), border-color var(--duration-quick) var(--ease-soft);
}
/* portrait settles (opacity only, 900ms): it overlaps a boundary, so it must not travel */
.ttp-desk__portrait.reveal { transform: none; transition: opacity var(--duration-long) var(--ease-satisfying); }

/* Hero timeline (plan 5.4). t0 = ag:ready or first paint when the veil is skipped.
   The boot script adds .hero-go; everything is at rest by ~1050ms. */
html.js .ttp-hero [data-hero-step] {
  opacity: 0; transform: translateY(7px);
  transition: opacity var(--duration-medium) var(--ease-satisfying) var(--t, 0ms), transform var(--duration-medium) var(--ease-satisfying) var(--t, 0ms);
}
html.js .ttp-hero [data-hero-step="rise"] { transform: translateY(14px); }
html.js .ttp-hero [data-hero-step="photo"] { transform: scale(1.03); transition-duration: var(--duration-long); }
html.js .ttp-hero [data-hero-step="pill"] { transition-duration: var(--duration-lift); transition-timing-function: var(--ease-settle); }
html.js.hero-go .ttp-hero [data-hero-step] { opacity: 1; transform: none; }
html.js .ttp-hero__em { background-size: 0% 3px; transition: background-size var(--duration-lift) var(--ease-settle) 630ms; }
html.js.hero-go .ttp-hero__em { background-size: 100% 3px; }
@media (max-width: 899px) { html.js .ttp-hero [data-hero-step="rise"] { transform: translateY(7px); } }

/* Final states: reduced motion (OS), ?static=1 and the a11y panel's "reduce" all land here */
html.motion-off .reveal, html.motion-off .reveal-stagger > *, html.motion-off .ttp-hero [data-hero-step],
html.motion-off .ttp-desk .ttp-desk__cards > .ttp-card {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
html.motion-off .ttp-hero__em { background-size: 100% 3px !important; transition: none !important; }
html.motion-off .reveal .ttp-arc, html.motion-off .ttp-arc.reveal { clip-path: none !important; transition: none !important; }
html.motion-off .ttp-desk.is-reveal .ttp-card, html.motion-off .ttp-desk.is-reveal .ttp-card__note { transition: none !important; }
html.motion-off .ttp-desk.is-reveal .ttp-card:hover { translate: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .ttp-hero [data-hero-step] { opacity: 1; transform: none; transition: none; }
  html.js .ttp-hero__em { background-size: 100% 3px; transition: none; }
  html.js .reveal .ttp-arc { clip-path: none; transition: none; }
  .ttp-desk.is-reveal .ttp-card:hover, .ttp-desk.is-reveal .ttp-card:focus-within, .ttp-desk.is-reveal .ttp-card.is-open { translate: none; }
  .ttp-sticky { transition: none; }
}

/* ================= 9. WCAG 2.2 AA PASS (2026-09-24) =================
   Fixes from the WCAG 2.2 AA check (_src/checks/wcag/WCAG-2.2-AA-REPORT-2026-09-24.md). */

/* 2.4.11 Focus Not Obscured: keyboard focus scrolls the focused element clear of the fixed chrome
   at the bottom (the a11y button; under 768 also the sticky bar, with the a11y button above it). */
html { scroll-padding-bottom: 84px; }
@media (max-width: 767px) { html { scroll-padding-bottom: calc(var(--sticky-h) + 70px); } }

/* 1.3.1 / 4.1.2: the footer link arrow is decoration; alt text "" keeps it out of the link name
   ("Home", not "Home right arrow"). Browsers without the alt syntax keep the first declaration. */

/* 1.4.12 Text Spacing: the sticky bar's two buttons may shrink and wrap instead of pushing the
   document sideways when letter/word spacing is increased. */
@media (max-width: 767px) {
  .ttp-sticky .ag-button { min-width: 0; overflow-wrap: anywhere; }
  .ttp-sticky .ag-button > span { min-width: 0; }
}
/* 1.4.10: on a short landscape phone (320x256 test) the header + sticky bar covered 55% of the
   screen. Under 420px tall the bar steps away; Book and Call stay in the header and page. */
@media (max-width: 767px) and (max-height: 420px) {
  .ttp-sticky { display: none; }
  html { scroll-padding-bottom: 84px; }
}

/* 1.4.4 / 1.4.10: the desk's one row of six needs every label's full width. ttp-desk.js adds
   .is-wrap when it does not fit (1200-1300px at 112/126% text, or a larger browser font size),
   and the cards fall back to three columns instead of scrolling the page sideways. */
@media (min-width: 1200px) { .ttp-desk__cards.is-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 1.4.13: Esc dismisses a hover-previewed note (ttp-desk.js sets .is-quiet until the pointer or
   focus moves to another card). A pinned (clicked) note stays until it is closed. */
.ttp-desk.is-reveal .ttp-desk__cards.is-quiet .ttp-card:not(.is-open) .ttp-card__note { opacity: 0; visibility: hidden; }

/* 1.4.11 + 2.5.8: the gold rail (desktop, fine pointer only). The thumb gets a 1px ink edge (gold
   alone is 2.0:1 on cream), and the rail, track and thumb get 24px-wide hit areas (were 3-7px).
   The look stays a 3px track and a 7px gold thumb. */
.ag-sb { width: 24px; }
.ag-sb__track { right: 10.5px; }
.ag-sb__track::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10.5px; right: -10.5px; }
.ag-sb__thumb, .ag-sb:hover .ag-sb__thumb, .ag-sb.is-drag .ag-sb__thumb { box-shadow: 0 0 0 1px var(--ink); }
.ag-sb__thumb::before { content: ""; position: absolute; top: 0; bottom: 0; left: -8.5px; right: -8.5px; }
.ag-sb:hover .ag-sb__thumb::before, .ag-sb.is-drag .ag-sb__thumb::before { left: -6.5px; right: -6.5px; }
/* 1.4.12 / 1.4.10: on phones, a heading may break inside a word ONLY when one word (or a name the
   typography script joined with no-break spaces, e.g. "Dr. Alejandro Jimenez") is wider than its
   column. Found with the WCAG text-spacing override at 390/320: the /meet H1 pushed the page to
   466px, and /services titles were clipped. At normal spacing nothing is wide enough to break. */
@media (max-width: 767px) {
  h1, h2, h3, .ttp-em, .ttp-svcx__title { overflow-wrap: anywhere; }
}
/* ================= 2026-09-26 owner revisions ================= */
/* Header, menu drawer and footer are set entirely in the logo's font (League Spartan);
   Literata stays the supporting text everywhere else. */
.ag-header, .ag-drawer, .ttp-footer { --font-body: var(--font-display); font-family: var(--font-display); }

/* Footer watermark (owner 2026-09-26): "THE TOOTH PLACE" in the logo font, below the line and under the
   copyright + policy row. Matte: a slow sage-to-gold wash seen only through the letters. */
.ttp-footer .ag-footer-inner { position: relative; z-index: 1; }
.ttp-footer .ag-footer-bgname {
  font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: 0.01em;
  font-size: calc(min(100vw - 2 * var(--gutter), var(--max-w)) * 0.118);
  background: linear-gradient(100deg, var(--sage) 0%, var(--gold) 35%, var(--sage-deep) 65%, var(--gold) 100%) 0 50% / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  opacity: 0.2; animation: ttp-wm-wash 21s ease-in-out infinite alternate;
  transition: none;   /* a font-size transition made ag-footer.js measure mid-change (stuck near 90px) */
  /* line-height .82 is shorter than the caps, and background-clip:text only paints inside the box: the
     letter tops rendered invisible (looked cut off). Pad the box up past the cap tops (owner 2026-10-01). */
  padding-top: 0.24em;
}
@keyframes ttp-wm-wash { from { background-position-x: 0%; } to { background-position-x: 100%; } }
html.motion-off .ttp-footer .ag-footer-bgname { animation: none; }

/* Footer hover, after the Elmira footer (owner 2026-09-26). Pointer devices only; reduced motion = plain colour.
   1. Text fills gold left to right: a 2-stop gradient (gold | the link's own colour) clipped to the text.
   2. Quick Links: a brush-ink icon springs in beside the link (scale + twist, overshoot), winds back out on leave.
   3. Contact rows: the icon does a spring tilt; the text fills gold.
   4. Stars pop one after another. */
.ttp-footer .ag-footer-link::after { content: none; }
.ttp-footer .ag-footer-link { display: inline-flex; align-items: center; position: relative; }
.ttp-footer .ag-footer-link:hover, .ttp-footer .ag-footer-link:focus-visible { transform: none; }
.ttp-footer__hint {
  position: absolute; left: calc(100% + 12px); top: 50%; width: 21px; height: 21px; color: var(--gold);
  opacity: 0; transform: translate(-10px, -50%) scale(0.5) rotate(-25deg); pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.36, 0, 0.66, -0.56), opacity 0.15s ease 0.25s;
}
.ttp-footer .ag-footer-link:focus-visible .ttp-footer__hint { opacity: 1; transform: translate(0, -50%); }
.ttp-footer__legal a { transition: color var(--duration-quick) var(--ease-soft), text-decoration-color var(--duration-quick) var(--ease-soft); }
@media (hover: hover) {
  .ttp-footer .ag-footer-link:hover .ttp-footer__hint {
    opacity: 1; transform: translate(0, -50%) scale(1) rotate(0deg);
    transition: opacity 0.2s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .ttp-footer .ttp-fill {
    background-image: linear-gradient(90deg, var(--gold) 0 50%, currentColor 50% 100%);
    background-size: 200% 100%; background-position: 100% 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    transition: background-position 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ttp-footer a:hover .ttp-fill { background-position: 0 0; }
  .ttp-footer .ag-footer-link:hover, a.ttp-footer__fact:hover, .ttp-footer__legal a:hover { color: var(--text-on-ink-soft); }
  a.ttp-footer__fact:hover, .ttp-footer__legal a:hover { text-decoration-color: transparent; }
  /* contact icons: spring tilt instead of the site-wide slide swap */
  .ttp-footer__fact .icon { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
  a.ttp-footer__fact:hover .icon { transform: scale(1.18) rotate(-10deg); }
  .ttp-footer .ink-hover svg.icon.ttp-ink > use:not(.ink-twin) { transform: none; opacity: 1; }
  .ttp-footer .ink-hover svg.icon.ttp-ink > use.ink-twin { transform: translateX(-130%); opacity: 0; }
  /* stars pop in turn */
  .ttp-footer__stars .ttp-stars .icon { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .ttp-footer__stars:hover .ttp-stars .icon { transform: scale(1.3) rotate(-12deg); }
  .ttp-footer__stars:hover .ttp-stars .icon:nth-child(2) { transition-delay: 60ms; }
  .ttp-footer__stars:hover .ttp-stars .icon:nth-child(3) { transition-delay: 120ms; }
  .ttp-footer__stars:hover .ttp-stars .icon:nth-child(4) { transition-delay: 180ms; }
  .ttp-footer__stars:hover .ttp-stars .icon:nth-child(5) { transition-delay: 240ms; }
}
html.motion-off .ttp-footer__hint { transform: translate(0, -50%) !important; }
html.motion-off .ttp-footer .ttp-fill { transition: none !important; }

/* Trust band in view on load (owner 2026-09-26) */
.ttp-trust__list--dup { display: none; }
/* >= 900: the hero fits the screen height minus the trust band, so the band sits at the fold.
   The photo's width is capped by the height left over, the headline shrinks on short screens. */
@media (min-width: 900px) {
  .ttp-hero { --trust-h: 150px; --hero-pt: clamp(14px, 3.5svh, 42px); --hero-pb: clamp(28px, 6svh, 84px);
    padding: calc(var(--header-h) + var(--hero-pt)) 0 var(--hero-pb); }
  .ttp-hero__media {
    justify-self: end;
    max-width: calc((100svh - var(--header-h) - var(--hero-pt) - var(--hero-pb) - var(--trust-h) - 48px) * 1200 / 891 + 42px);
  }
  .ttp-hero__title { font-size: clamp(1.875rem, min(8.4cqi, 6.3svh), 3.0625rem); }
  .ttp-hero__badge { margin-bottom: clamp(9px, 2.2svh, 21px); }
  .ttp-hero__grid { row-gap: clamp(14px, 3svh, 28px); }
  .ttp-hero__rest { gap: clamp(12px, 2.4svh, 21px); }
}
@media (min-width: 1100px) { .ttp-hero { --trust-h: 84px; } }
@media (min-width: 900px) and (max-height: 700px) { .ttp-pills { display: none; } }

/* < 900: title, photo, then the CTAs right under it, all on the first screen (owner 2026-10-01). The stars line goes
   (the photo's plate already shows 5.0 / 52 reviews); the buttons share one row; the photo takes the height that is
   left on short screens (cropped evenly, never below 150px); the Medi-Cal line and pills follow the buttons. */
@media (max-width: 899px) {
  .ttp-hero__badge { display: none; }
  .ttp-hero__rest { display: contents; }
  .ttp-hero__grid { row-gap: 18px; }
  .ttp-hero__copy { order: 1; }
  .ttp-hero__media { order: 2; }
  .ttp-hero__photo { max-height: max(150px, calc(100svh - 440px)); }
  .ttp-hero__actions { order: 3; margin-top: 14px; flex-wrap: nowrap; gap: 10px; width: 100%; max-width: 460px; }
  .ttp-hero__actions .ag-button { flex: 1 1 0; min-width: 0; padding-inline: 12px; gap: 7px; font-size: 0.9375rem; white-space: nowrap; }
  .ttp-hero__actions .ag-button .icon { width: 18px; height: 18px; flex: none; }
  .ttp-hero__sub { order: 4; }
  .ttp-pills { order: 5; }
}

/* < 900: a slim ticker between the hero and section 2 (owner 2026-10-01; it used to sit above the hero) */
@media (max-width: 899px) {
  main > .ttp-trust { padding-block: 0; overflow: hidden; }
  .ttp-trust__track { display: flex; width: max-content; animation: ttp-ticker 42s linear infinite; }
  .ttp-trust:hover .ttp-trust__track, .ttp-trust:active .ttp-trust__track, .ttp-trust:focus-within .ttp-trust__track { animation-play-state: paused; }
  .ttp-trust .ttp-trust__list, .ttp-trust .ttp-trust__list--dup {
    display: flex; gap: 0; margin: 0; padding: 0; max-width: none; width: max-content; grid-template-columns: none;
  }
  .ttp-trust .ttp-trust__item, .ttp-trust .ttp-trust__item:nth-child(4) {
    grid-column: auto; white-space: nowrap; padding: 12px 21px; font-size: var(--fs-14);
    border-right: 1px solid var(--line-on-ink-strong);
  }
  .ttp-trust .ttp-trust__item .icon { width: 18px; height: 18px; flex: none; }
  .ttp-trust .ttp-trust__face { width: 24px; height: 24px; }
}
@keyframes ttp-ticker { to { transform: translateX(-50%); } }
/* reduced motion: no ticker, the row can be swiped instead */
@media (max-width: 899px) {
  html.motion-off main > .ttp-trust { overflow-x: auto; }
  html.motion-off .ttp-trust__track { animation: none; }
  html.motion-off .ttp-trust__list--dup { display: none; }
}

/* Reviews pop out (owner 2026-09-26): the 5.0 score as a gold rating seal, review cards with a badge chip,
   a big gold quote mark and a stronger lift on hover. */
.ttp-score { align-items: center; }
@media (min-width: 1024px) { .ttp-score { align-items: flex-start; } }
.ttp-seal {
  position: relative; flex: none; width: 196px; aspect-ratio: 1; border-radius: 50%; color: var(--gold);
  background: radial-gradient(circle at 50% 35%, #34322d 0%, var(--ink) 72%);
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 7px var(--charcoal), 0 0 0 8px rgba(201, 168, 97, 0.45), 0 21px 42px rgba(0, 0, 0, 0.35);
}
.ttp-seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: ttp-seal-turn 48s linear infinite; }
.ttp-seal__ring text { fill: currentColor; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; }
@keyframes ttp-seal-turn { to { transform: rotate(360deg); } }
@media (hover: hover) { .ttp-score:hover .ttp-seal__ring { animation-play-state: paused; } }
html.motion-off .ttp-seal__ring { animation: none; }
.ttp-seal__core { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; }
.ttp-seal__num { font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; line-height: 0.9; letter-spacing: var(--tr-head); color: var(--cream); padding-top: 6px; }
.ttp-score .ttp-seal .ttp-stars .icon { width: 14px; height: 14px; color: var(--gold); }
.ttp-score__label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lead); color: var(--cream); }
@media (max-width: 479px) { .ttp-seal { width: 154px; } .ttp-seal__num { font-size: 2.75rem; } .ttp-seal__ring text { font-size: 15px; } }

.ttp-review { position: relative; overflow: hidden; }
.ttp-review::before {
  content: '\201C'; position: absolute; top: -14px; right: 21px; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: 9rem; line-height: 1; color: var(--gold); opacity: 0.16;
  transition: opacity var(--duration-quick) var(--ease-soft), translate var(--duration-lift) var(--ease-settle);
}
.ttp-review > * { position: relative; }
.ttp-review__stars {
  display: inline-flex; align-items: center; gap: 3px; align-self: flex-start;
  padding: 6px 12px 6px 9px; border: 1px solid rgba(201, 168, 97, 0.45); border-radius: 999px; background: rgba(201, 168, 97, 0.1);
}
.ttp-review__stars .icon { width: 16px; height: 16px; color: var(--gold); }
.ttp-review__score { margin-left: 6px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-14); color: var(--gold); line-height: 1; padding-top: 2px; }
@media (hover: hover) {
  .ttp-reviews .ttp-reviews__cards > .ttp-review:hover { translate: 0 -6px; border-color: var(--gold); box-shadow: 0 21px 42px rgba(0, 0, 0, 0.35); }
  .ttp-review:hover::before { opacity: 0.32; translate: 0 6px; }
}
.ttp-reviews .ttp-reviews__cards > .ttp-review:focus-visible { border-color: var(--gold); }
.ttp-reviews .ttp-reviews__cards > .ttp-review { transition-property: opacity, transform, translate, border-color, box-shadow; }