/* ==========================================================================
   KIMI STYLESHEET, imported verbatim from tools/kimi/style.css (sha256 9d04bef58fa2). Do not edit here: edit the source and run tools/build-kimi.py.
   ========================================================================== */

/* ==========================================================================
   Oak Tree Dental — Poway, CA
   Design system & site styles
   Palette: deep oak green + warm cream + brushed gold
   ========================================================================== */

:root {
  /* Brand palette — sampled from the Oak Tree Dental logo:
     charcoal tooth (#404040) + bronze leaf (#b08050).
     (Variable names are legacy; values map to the brand palette.) */
  --green-950: #242322;   /* deepest charcoal */
  --green-900: #2e2c2a;
  --green-800: #353331;
  --green-700: #403e3b;   /* tooth charcoal */
  --green-600: #4f4c48;
  --green-100: #e7e1d6;
  --green-50:  #f6f2ea;   /* warm light tint */
  --gold-600:  #9c7040;   /* deep bronze (text) */
  --gold-500:  #b08050;   /* logo bronze */
  --gold-400:  #c09262;
  --gold-100:  #efe4d3;
  --cream:     #faf7f1;
  --paper:     #ffffff;
  --ink:       #1e1c1a;
  --ink-soft:  #4e4a45;
  --line:      #e8e3da;
  --danger:    #b3261e;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --container: 1180px;
  --container-narrow: 820px;
  --radius-s: 10px;
  --radius: 18px;
  --radius-l: 28px;
  --shadow-s: 0 1px 2px rgba(46, 44, 42, .07), 0 2px 8px rgba(46, 44, 42, .07);
  --shadow-m: 0 6px 18px rgba(46, 44, 42, .11), 0 2px 6px rgba(46, 44, 42, .09);
  --shadow-l: 0 24px 60px rgba(36, 34, 32, .20);
  --header-h: 84px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-600); }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200; background: var(--green-900); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-s) var(--radius-s);
  text-decoration: none; font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; }
:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Layout primitives ---------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container.narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.section.tint { background: var(--green-50); }
.section.dark { background: var(--green-900); color: #eaf2ed; }
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark a { color: var(--gold-400); }
.grid { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.split {
  display: grid; gap: clamp(2rem, 1.5rem + 2.5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
  align-items: center;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600; line-height: 1.12;
  color: var(--green-950);
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.7rem + 3.4vw, 4.2rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.9rem, 1.45rem + 2.2vw, 3rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.3rem, 1.15rem + .8vw, 1.65rem); }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 700; color: var(--green-900); }
p { max-width: 68ch; }
.lede { font-size: clamp(1.1rem, 1.02rem + .45vw, 1.3rem); color: var(--ink-soft); max-width: 56ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold-500); border-radius: 2px; }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { margin-top: .9rem; color: var(--ink-soft); }
.dark .lede, .dark p { color: #cfe0d5; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.7rem; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1;
  transition: transform .25s var(--ease-out), box-shadow .25s, background-color .2s, color .2s, border-color .2s;
  will-change: transform;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-primary { background: var(--gold-500); color: var(--green-950); box-shadow: 0 8px 22px rgba(176, 128, 80, .38); }
.btn-primary:hover { background: var(--gold-400); color: var(--green-950); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(176, 128, 80, .48); }
.btn-dark { background: var(--green-800); color: #fff; }
.btn-dark:hover { background: var(--green-700); color: #fff; transform: translateY(-2px); }
.btn-outline { border-color: var(--green-700); color: var(--green-800); background: transparent; }
.btn-outline:hover { background: var(--green-800); color: #fff; transform: translateY(-2px); }
.btn-ghostlight { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn-ghostlight:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .3s, box-shadow .3s, transform .35s var(--ease-out);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: var(--header-h);
}
.site-header.solid, .site-header.inner {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-s);
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img {
  width: 52px; height: 52px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 6px;
  box-shadow: var(--shadow-s); flex: none;
}
.brand .wordmark { display: flex; flex-direction: column; line-height: 1.15; }
.brand .wordmark strong {
  font-family: "Cinzel", "Fraunces", Georgia, serif; font-weight: 600;
  font-size: 1.08rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--green-900);
}
.brand .wordmark span { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-600); font-weight: 600; }
.site-header:not(.solid):not(.inner) .brand .wordmark strong { color: #fff; }

.main-nav ul { display: flex; align-items: center; gap: clamp(.5rem, .2rem + 1vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.main-nav a {
  text-decoration: none; font-weight: 600; font-size: .98rem;
  color: var(--ink); padding: .5rem .35rem; position: relative;
}
.main-nav a::after {
  content: ""; position: absolute; left: .35rem; right: .35rem; bottom: .1rem;
  height: 2px; background: var(--gold-500); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--green-800); }
.site-header:not(.solid):not(.inner) .main-nav a { color: rgba(255,255,255,.92); }
.site-header:not(.solid):not(.inner) .main-nav a[aria-current="page"] { color: #fff; }
.header-cta { display: flex; align-items: center; gap: .8rem; }
.header-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; font-size: .95rem; color: var(--green-900); text-decoration: none;
  white-space: nowrap;
}
.header-phone svg { width: 1.05em; height: 1.05em; color: var(--gold-600); }
.site-header:not(.solid):not(.inner) .header-phone { color: #fff; }
.header-phone:hover { color: var(--gold-500); }
.btn-header { padding: .7rem 1.3rem; font-size: .92rem; }

/* Mobile nav toggle */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 0; background: transparent; border-radius: var(--radius-s);
}
.nav-toggle .lines { position: relative; width: 24px; height: 2px; background: var(--green-900); border-radius: 2px; transition: background .2s; }
.nav-toggle .lines::before, .nav-toggle .lines::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: var(--green-900); border-radius: 2px;
  transition: transform .3s var(--ease-out), top .3s;
}
.nav-toggle .lines::before { top: -7px; }
.nav-toggle .lines::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .lines { background: transparent; }
.nav-toggle[aria-expanded="true"] .lines::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .lines::after { top: 0; transform: rotate(-45deg); }
.site-header:not(.solid):not(.inner) .nav-toggle .lines,
.site-header:not(.solid):not(.inner) .nav-toggle .lines::before,
.site-header:not(.solid):not(.inner) .nav-toggle .lines::after { background: #fff; }
.site-header:not(.solid):not(.inner) .nav-toggle[aria-expanded="true"] .lines { background: transparent; }

@media (max-width: 1279px) {
  .nav-toggle { display: inline-flex; }
  .header-phone span { display: none; }
  .btn-header { display: none; }
  .main-nav {
    position: fixed; inset: 0; z-index: -1;
    background: rgb(36, 34, 32);
    display: grid; place-items: center;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .main-nav.open { opacity: 1; visibility: visible; }
  .main-nav ul { flex-direction: column; gap: 1.4rem; text-align: center; }
  .main-nav a { font-size: 1.6rem; font-family: var(--font-display); color: #fff !important; }
  .main-nav a::after { display: none; }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { background: transparent; box-shadow: none; backdrop-filter: none; }
  body.nav-open .brand .wordmark strong, body.nav-open .header-phone { color: #fff; }
  body.nav-open .nav-toggle .lines { background: transparent; }
  body.nav-open .nav-toggle .lines::before { top: 0; transform: rotate(45deg); background: #fff; }
  body.nav-open .nav-toggle .lines::after { top: 0; transform: rotate(-45deg); background: #fff; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: min(82vh, 820px);
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 3.5rem) 0 7rem;
  color: #fff; overflow: hidden;
  background: var(--green-950);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 78% 30%, rgba(176,128,80,.22), transparent 70%),
    linear-gradient(115deg, rgba(36,34,32,.95) 0%, rgba(46,44,42,.88) 45%, rgba(46,44,42,.55) 100%);
}
.hero .grid { grid-template-columns: minmax(0, 58rem); }
.hero h1 { color: #fff; margin-bottom: 1.3rem; }
.hero h1 em { font-style: italic; color: var(--gold-400); }
.hero .lede { color: #d8e6dd; margin-bottom: 2rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  padding: .5rem 1.1rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  margin-bottom: 1.6rem; backdrop-filter: blur(6px);
}
.hero-badge svg { width: 1em; height: 1em; color: var(--gold-400); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-top: 2.8rem; }
.hero-trust .stat strong { font-family: var(--font-display); font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); color: #fff; display: block; line-height: 1; }
.hero-trust .stat span { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: #b9d2c3; }

/* Hero card */
.hero-card {
  position: relative; background: rgba(255,255,255,.96);
  color: var(--ink); border-radius: var(--radius-l);
  padding: 2.2rem; box-shadow: var(--shadow-l);
  transform: rotate(1.5deg);
}
.hero-card::before {
  content: ""; position: absolute; inset: -14px; z-index: -1;
  border-radius: calc(var(--radius-l) + 10px);
  border: 1.5px solid rgba(255,255,255,.35);
}
.hero-card h2 { font-size: 1.45rem; margin-bottom: .4rem; }
.hours-mini { margin: 1.1rem 0 1.4rem; border-top: 1px solid var(--line); }
.hours-mini div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.hours-mini dt { color: var(--ink-soft); }
.hours-mini dd { margin: 0; font-weight: 700; color: var(--green-900); text-align: right; white-space: nowrap; }
.hours-mini .today dt, .hours-mini .today dd { color: var(--gold-600); }
.hero-card address { font-style: normal; font-size: .95rem; color: var(--ink-soft); margin-bottom: 1.4rem; display: flex; gap: .5rem; align-items: flex-start; }
.hero-card address svg { width: 1.1em; height: 1.1em; flex: none; margin-top: .2em; color: var(--gold-600); }

/* Wave divider under hero */
.wave { display: block; width: 100%; height: clamp(48px, 6vw, 96px); margin-top: -1px; }

/* ---------- Cards ---------- */
.card {
  background: var(--paper); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow-s);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease-out), box-shadow .35s;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }
.card .icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 1.3rem;
  background: var(--green-50); color: var(--green-700);
  transition: background-color .3s, color .3s, transform .35s var(--ease-out);
}
.card .icon svg { width: 28px; height: 28px; }
.card:hover .icon { background: var(--green-800); color: var(--gold-400); transform: rotate(-6deg) scale(1.06); }
.card h3 { margin-bottom: .55rem; }
.card h3 a { text-decoration: none; color: inherit; }
.card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.card p { color: var(--ink-soft); font-size: .98rem; }
.card .more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem; color: var(--gold-600); margin-top: 1rem; }
.card:hover .more { color: var(--green-700); }

/* Service hub list */
.svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: .9rem; list-style: none; padding: 0; }
.svc-list a {
  display: flex; align-items: center; gap: .8rem; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 1rem 1.2rem; font-weight: 600; color: var(--green-900); font-size: .98rem;
  transition: border-color .25s, transform .25s var(--ease-out), box-shadow .25s;
}
.svc-list a:hover { border-color: var(--gold-500); transform: translateX(4px); box-shadow: var(--shadow-s); }
.svc-list svg { width: 22px; height: 22px; flex: none; color: var(--gold-600); }

/* Feature split media */
.frame { position: relative; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-l); }
.frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.4; }
.frame .tag {
  position: absolute; left: 1.2rem; bottom: 1.2rem;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  padding: .7rem 1.1rem; border-radius: var(--radius-s);
  font-size: .85rem; font-weight: 700; color: var(--green-900); box-shadow: var(--shadow-s);
  display: flex; gap: .5rem; align-items: center;
}
.frame .tag svg { width: 1.1em; height: 1.1em; color: var(--gold-600); }

.checklist { list-style: none; padding: 0; display: grid; gap: .85rem; margin-top: 1.4rem; }
.checklist li { display: flex; gap: .8rem; align-items: flex-start; }
.checklist svg { width: 22px; height: 22px; flex: none; color: var(--green-600); margin-top: .15em; }
.checklist strong { display: block; }
.checklist span { color: var(--ink-soft); font-size: .95rem; }
.dark .checklist span { color: #cfe0d5; }

/* Doctors */
.doc-card { text-align: left; }
.doc-card .avatar {
  width: 100%; aspect-ratio: 1 / .82; border-radius: var(--radius-s);
  display: grid; place-items: center; margin-bottom: 1.2rem;
  background: linear-gradient(140deg, var(--green-100), var(--gold-100));
  font-family: var(--font-display); font-size: 3rem; font-weight: 600; color: var(--green-800);
  position: relative; overflow: hidden;
}
.doc-card .avatar::after {
  content: ""; position: absolute; inset: auto -20% -35% auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(176,128,80,.3), transparent 65%);
}
.doc-card .role { color: var(--gold-600); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.doc-card p { font-size: .93rem; margin-top: .5rem; }
.doc-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.doc-card .avatar:has(img)::after { display: none; }
.photo-strip .frame { border-radius: var(--radius); }

/* Steps */
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 1.6rem; }
.steps li { position: relative; padding-left: 4.6rem; counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.35rem;
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 600;
  color: transparent; -webkit-text-stroke: 1.5px var(--gold-500);
}
.steps h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.steps p { color: var(--ink-soft); font-size: .97rem; }

/* FAQ accordion */
.faq { display: grid; gap: .8rem; }
.faq details {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s);
  overflow: hidden; transition: border-color .25s, box-shadow .25s;
}
.faq details[open] { border-color: var(--green-100); box-shadow: var(--shadow-s); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 1.4rem; font-weight: 700; color: var(--green-950); font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--green-50); display: grid; place-items: center;
  transition: transform .3s var(--ease-out), background-color .3s;
}
.faq summary .chev svg { width: 16px; height: 16px; color: var(--green-700); }
.faq details[open] summary .chev { transform: rotate(180deg); background: var(--gold-100); }
.faq .answer { padding: 0 1.4rem 1.25rem; color: var(--ink-soft); font-size: .97rem; }
.faq .answer p + p { margin-top: .7rem; }

/* Reviews strip */
.review-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.4rem; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  box-shadow: var(--shadow-s);
}
.stars { display: inline-flex; gap: .15rem; color: var(--gold-500); }
.stars svg { width: 22px; height: 22px; }
.review-banner .big { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; color: var(--green-900); line-height: 1; }
.disclaimer { font-size: .8rem; color: var(--ink-soft); margin-top: .8rem; max-width: 60ch; }
.micro { font-size: .8rem; color: var(--ink-soft); }

/* Marquee of neighborhoods */
.marquee { overflow: hidden; padding-block: 1.1rem; border-block: 1px solid var(--line); background: var(--paper); }
.marquee .track { display: flex; gap: 3rem; width: max-content; animation: marquee 36s linear infinite; }
.marquee .track span {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--green-800);
  display: inline-flex; align-items: center; gap: 3rem; white-space: nowrap;
}
.marquee .track span::after { content: "✦"; color: var(--gold-500); font-size: .8rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* CTA band */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--radius-l);
  background: linear-gradient(120deg, var(--green-900), var(--green-700));
  color: #fff; padding: clamp(2.4rem, 2rem + 3vw, 4.5rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
}
.cta-band::before {
  content: ""; position: absolute; right: -6rem; top: -6rem; width: 22rem; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(176,128,80,.35), transparent 65%); border-radius: 50%;
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: #cfe0d5; margin-top: .6rem; max-width: 48ch; }

/* Insurance chips */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; }
.chips li {
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem 1.1rem; font-size: .88rem; font-weight: 600; color: var(--green-900);
}

/* Forms */
.form-card { background: var(--paper); border-radius: var(--radius-l); box-shadow: var(--shadow-l); padding: clamp(1.6rem, 1.2rem + 2vw, 2.8rem); }
.form-grid { display: grid; gap: 1.15rem; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 700; font-size: .9rem; color: var(--green-950); }
.field label .req { color: var(--danger); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line); border-radius: var(--radius-s);
  padding: .85rem 1rem; background: var(--cream); transition: border-color .2s, box-shadow .2s, background-color .2s;
  width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green-600); background: #fff;
  box-shadow: 0 0 0 4px rgba(64, 62, 59, .14);
}
.field .hint { font-size: .8rem; color: var(--ink-soft); }
.form-status { border-radius: var(--radius-s); padding: 1rem 1.2rem; font-weight: 600; display: none; }
.form-status.ok { display: block; background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-100); }
.form-status.err { display: block; background: #fdeceb; color: var(--danger); border: 1px solid #f5c6c2; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Page hero (interior pages) */
.page-hero {
  position: relative; isolation: isolate; color: #fff; overflow: hidden;
  padding: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 5.5rem)) 0 clamp(3.5rem, 3rem + 3vw, 5.5rem);
  background: linear-gradient(120deg, rgba(36,34,32,.96), rgba(46,44,42,.88));
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lede { color: #cfe0d5; margin-top: 1rem; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 60% at 85% 20%, rgba(176,128,80,.18), transparent 70%);
}

/* Breadcrumbs */
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin-bottom: 1.4rem; font-size: .85rem; }
.crumbs li { display: flex; align-items: center; gap: .5rem; color: #b9d2c3; }
.crumbs li + li::before { content: "/"; color: rgba(255,255,255,.35); }
.crumbs a { color: #fff; text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--gold-400); }
.crumbs [aria-current] { color: var(--gold-400); font-weight: 600; }

/* Prose (service pages, legal) */
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 1.2vw, 2.1rem); margin-top: 2.6rem; }
.prose h3 { font-size: 1.25rem; margin-top: 2rem; font-family: var(--font-body); font-weight: 800; color: var(--green-900); }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: .5rem; }
.prose .callout {
  background: var(--gold-100); border-left: 4px solid var(--gold-500);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 1.2rem 1.4rem; color: var(--green-950); font-weight: 500;
}
.prose .callout p { color: var(--green-950); }
.prose strong { color: var(--green-950); }

/* Two-col with sticky CTA (service pages) */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3.5rem; align-items: start; }
.aside-cta { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.2rem; }
.aside-cta address { display: flex; gap: .5rem; align-items: flex-start; font-style: normal; }
.aside-cta address svg { width: 1.15em; height: 1.15em; flex: none; color: var(--gold-600); margin-top: .2em; }
@media (max-width: 960px) { .with-aside { grid-template-columns: 1fr; } .aside-cta { position: static; } }

/* Info panel (contact) */
.info-panel { display: grid; gap: 0; }
.info-panel .row { display: flex; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.info-panel .row:last-child { border-bottom: 0; }
.info-panel svg { width: 24px; height: 24px; flex: none; color: var(--gold-600); margin-top: .15em; }
.info-panel strong { display: block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.hours-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours-table div { display: flex; justify-content: space-between; padding: .45rem 0; }
.hours-table dt { color: var(--ink-soft); }
.hours-table dd { margin: 0; font-weight: 700; color: var(--green-900); }

/* Footer */
.site-footer { background: var(--green-950); color: #b9d2c3; padding: clamp(3rem, 2.5rem + 2vw, 5rem) 0 2rem; }
.site-footer .brand .wordmark strong { color: #fff; }
.site-footer .micro, .site-footer .disclaimer { color: #8fae9d; }
.site-footer a { color: #dcebe2; text-decoration: none; }
.site-footer a:hover { color: var(--gold-400); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer-grid h2, .footer-grid h3 { color: #fff; font-size: 1.02rem; font-family: var(--font-body); font-weight: 800; margin-bottom: 1.1rem; letter-spacing: .02em; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: .94rem; }
.footer-brand p { font-size: .94rem; margin-top: 1rem; max-width: 34ch; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 3rem; padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: .84rem; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; padding: 0; margin: 0; }
.nap address { font-style: normal; line-height: 1.7; }
.nap .tel { font-size: 1.25rem; font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.nap .tel svg { width: 1em; height: 1em; color: var(--gold-400); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* Floating call button (mobile) */
.call-fab {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  display: none; align-items: center; gap: .55rem;
  background: var(--green-700); color: #fff; text-decoration: none;
  padding: .95rem 1.4rem; border-radius: 999px; font-weight: 800;
  box-shadow: 0 12px 32px rgba(36,34,32,.4);
  animation: fab-pulse 2.6s infinite;
}
.call-fab svg { width: 1.15em; height: 1.15em; color: var(--gold-400); }
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(36,34,32,.4), 0 0 0 0 rgba(64,62,59,.5); }
  55% { box-shadow: 0 12px 32px rgba(36,34,32,.4), 0 0 0 16px rgba(64,62,59,0); }
}
@media (max-width: 720px) { .call-fab { display: inline-flex; } }

/* ---------- Reveal animations ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].revealed { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .hero .grid { grid-template-columns: 1fr; }
  .hero-card { transform: none; max-width: 30rem; }
}
@media (max-width: 620px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-trust { gap: 1.2rem 2rem; }
}

/* ---------- Blog & content templates ---------- */
.post-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin-top: 1.2rem; font-size: .92rem; color: #b9d2c3; }
.post-meta > span { display: inline-flex; align-items: center; gap: .45rem; }
.post-meta svg { width: 1.1em; height: 1.1em; flex: none; }
.post-meta .chip { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .3rem .95rem; font-weight: 600; color: #fff; text-decoration: none; }
.post-meta .chip:hover { background: var(--gold-500); color: var(--green-950); }

.post-list { display: grid; gap: 1.1rem; }
.post-item {
  display: grid; grid-template-columns: 76px 1fr; gap: 1.4rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.7rem; box-shadow: var(--shadow-s);
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.post-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--gold-100); }
.post-item .date { text-align: center; background: var(--green-50); border-radius: var(--radius-s); padding: .7rem .3rem; align-self: start; }
.post-item .date strong { display: block; font-family: var(--font-display); font-size: 1.55rem; color: var(--green-900); line-height: 1.05; }
.post-item .date span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600); font-weight: 700; }
.post-item h3 { margin-bottom: .35rem; font-size: 1.3rem; }
.post-item h3 a { text-decoration: none; color: inherit; }
.post-item h3 a:hover { color: var(--green-700); }
.post-item p { color: var(--ink-soft); font-size: .96rem; }
.post-item .meta-line { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-top: .8rem; font-size: .85rem; }
.post-item .cat { color: var(--gold-600); font-weight: 700; text-decoration: none; }
.post-item .read { margin-left: auto; font-weight: 700; color: var(--green-700); display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; }
.post-item .read svg { width: 1em; height: 1em; }
@media (max-width: 560px) { .post-item { grid-template-columns: 1fr; } .post-item .date { display: none; } }

.pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 2.8rem; list-style: none; padding: 0; }
.pagination a, .pagination span.pg {
  display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 .9rem;
  border-radius: 14px; border: 1px solid var(--line); background: var(--paper);
  text-decoration: none; font-weight: 700; color: var(--green-900); font-size: .95rem;
  transition: border-color .2s, background-color .2s, color .2s;
}
.pagination a:hover { border-color: var(--gold-500); color: var(--gold-600); }
.pagination span.pg[aria-current] { background: var(--green-800); color: #fff; border-color: var(--green-800); }

/* Single testimonial */
.quote-block {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow-m);
  padding: clamp(2.6rem, 2rem + 3vw, 4rem); max-width: 52rem; margin: 2.5rem auto 0; text-align: center;
}
.quote-block::before {
  content: "\201C"; position: absolute; top: -2.1rem; left: 50%; transform: translateX(-50%);
  width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--gold-500); color: var(--green-950);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 3rem; line-height: 1;
  box-shadow: var(--shadow-m);
}
.quote-block .stars { justify-content: center; margin-bottom: 1.2rem; }
.quote-block blockquote {
  font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + .9vw, 1.6rem);
  line-height: 1.55; color: var(--green-950); margin: 0 0 1.5rem; text-wrap: balance;
}
.quote-block .who { font-weight: 800; color: var(--green-900); }
.quote-block .who span { display: block; font-weight: 500; font-size: .86rem; color: var(--ink-soft); margin-top: .2rem; }

/* Landing page (minimal chrome, conversion-focused) */
.lp-header { position: static; background: var(--green-950); }
.lp-header .bar { height: 78px; }
.lp-hero { padding: clamp(3.5rem, 3rem + 3vw, 6rem) 0 clamp(4rem, 3rem + 3vw, 6.5rem); }
.lp-legal { background: var(--green-950); color: #8fae9d; padding: 1.6rem 0; font-size: .84rem; }
.lp-legal a { color: #dcebe2; }
.lp-legal .container { display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between; align-items: center; }
.review-mini { display: grid; gap: 1rem; }
.review-mini blockquote { font-size: .98rem; color: var(--ink-soft); margin: 0 0 .8rem; }
.review-mini .who { font-weight: 800; color: var(--green-900); font-size: .92rem; }

/* HTML sitemap */
.sitemap-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: 2.2rem; }
.sitemap-cols h3 { font-size: .95rem; font-family: var(--font-body); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600); margin-bottom: .9rem; }
.sitemap-cols ul { list-style: none; padding: 0; display: grid; gap: .45rem; font-size: .95rem; }
.sitemap-cols a { text-decoration: none; color: var(--ink-soft); }
.sitemap-cols a:hover { color: var(--green-700); }

/* ==========================================================================
   ACCESSIBILITY OVERLAY (Dalia): docs/marketing/design/kimi/kimi-a11y-overlay.css, verbatim
   ========================================================================== */

/* Oak Tree Dental - Kimi design: ACCESSIBILITY OVERLAY. Owner: Dalia. Load AFTER Kimi's style.css (or merge these rules into it).
   Mohsen, 4 Oct 2026: "apply all the one-line fixes in our build without changing the look". Every rule below keeps Kimi's look; each fixes one finding in KIMI-DESIGN-SYSTEM.md section 5.
   Some findings also need a markup change; those are listed in BUILD-BRIEF.md and are NOT in this file. */

/* 1. Small bronze text fails (3.9 to 4.4:1). Only the TEXT token darkens, to #8e663a (4.57:1 on the sand tint, 4.78:1 on cream, 5.11:1 on white).
      --gold-500 (#b08050: button fill, rules, stars, focus ring) and --gold-400 are untouched. */
:root { --gold-600: #8e663a; }

/* 2. Form control boundaries were 1.28:1; WCAG 1.4.11 needs 3:1. #8a8580 is 3.65:1 on white. */
.field input, .field select, .field textarea { border-color: #8a8580; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-700); }

/* 3. Moving content (WCAG 2.2.2). The neighbourhood marquee stops on hover and keyboard focus within it, and is a static wrapped list for people who ask for reduced motion
      (Kimi's own reduced-motion rule froze it half-scrolled). A visible pause button is in BUILD-BRIEF.md (it needs markup + 6 lines of JS). */
.marquee:hover .track, .marquee:focus-within .track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee .track { animation: none !important; transform: none !important; flex-wrap: wrap; width: auto; justify-content: center; gap: 1rem 2rem; }
  .marquee .track span:nth-child(n+15) { display: none; } /* the second copy of the list that makes the loop seamless */
}
/* The Call Now button pulses once, not forever. */
.call-fab { animation-iteration-count: 1; animation-delay: 1s; }

/* 4. Content visible without JavaScript. Kimi hides every [data-reveal] element at opacity 0 and relies on main.js to reveal it.
      Default is visible; the hidden starting state applies only when the page's inline script has added the "js" class to <html> (snippet in BUILD-BRIEF.md). */
[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal]:not(.revealed) { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) { .js [data-reveal]:not(.revealed) { opacity: 1; transform: none; } }

/* 5. The floating Call Now button must not cover content or focused controls on phones (WCAG 2.4.11).
      Page content gets room underneath it, and keyboard focus scrolls clear of it. The button's look is unchanged. */
@media (max-width: 720px) {
  body { padding-bottom: 5.5rem; }
  html { scroll-padding-bottom: 6.5rem; }
}
html { scroll-padding-top: calc(var(--header-h) + 1rem); } /* focused and anchor targets also clear the fixed header */

/* 6. Blog pagination: 30 page links in a non-wrapping row made the page scroll sideways (1055px wide at 390, 1580px at 1440). */
.pagination { flex-wrap: wrap; }

/* 7. Optional (not a WCAG fail, our 44px target standard): the nav links are 35px tall and the header button 41px. */
@media (min-width: 1280px) { .main-nav a { padding-block: .8rem; } } /* the full-screen phone menu keeps its own larger links */
.btn-header { min-height: 44px; }

/* ==========================================================================
   GLUE (ours): tools/kimi/glue.css
   ========================================================================== */

/* Oak Tree Dental: glue for Kimi's stylesheet inside WordPress (Michael). Kimi's own rules are imported verbatim above this file; nothing here restyles them.
   Only things WordPress adds that Kimi's static pages never had. Fonts: Kimi names Fraunces, Inter and Cinzel; they are self-hosted (latin subset, variable files for the
   weights Kimi uses, font-display: swap; SIL OFL texts are in fonts/). Waseem's yes, 4 Oct 2026. */

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/kimi-cinzel-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/kimi-fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/kimi-inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
/* Contact Form 7 messages use Kimi's form-status look. */
.wpcf7-not-valid-tip { color: var(--danger); font-size: .9rem; }
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: var(--radius-s); border: 1px solid var(--line); }

/* ---- Footer: Kimi's footer with our 24 links in four labelled columns. Layout adaptation only (Kimi's grid has four columns, ours needs five); Dalia to review. ---- */
.footer-grid--ours { grid-template-columns: 250px 1fr 240px; gap: 2rem; grid-template-areas: "brand nav nap"; align-items: start; }
.footer-grid--ours .footer-brand { grid-area: brand; }
.footer-grid--ours .foot-nav { grid-area: nav; }
.footer-grid--ours .nap { grid-area: nap; }
.foot-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.foot-label { color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 1.02rem; margin-bottom: 1.1rem; letter-spacing: .02em; }
.foot-col ul { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: .94rem; }
.foot-heading { color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 1.02rem; margin: 1.2rem 0 .5rem; }
.footer-brand .nap address { font-style: normal; line-height: 1.7; }
.footer-brand .foot-social, .foot-social { display: flex; flex-direction: row; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .9rem 0 0 -8px; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.footer-legal ul { margin-left: auto; }
.foot-social svg { width: 28px; height: 28px; }
/* Tablet: logo block and the Visit Us column on the first row, the four link columns below in one row. Phone: Kimi's stacking, Visit Us last before the bottom bar. */
@media (max-width: 1100px) { .footer-grid--ours { grid-template-columns: 1fr 1fr; grid-template-areas: "brand nap" "nav nav"; } .foot-nav { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } }
@media (max-width: 640px) { .foot-nav { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid--ours { grid-template-columns: 1fr; grid-template-areas: "brand" "nav" "nap"; } }

/* ---- Service page: Kimi's sticky Book/Call card and the page's own content in .prose. The page's legacy blocks keep their markup; these rules only space and style them like Kimi's prose. ---- */
.aside-title { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--green-950); margin-bottom: .4rem; }
.aside-actions { display: grid; gap: .7rem; margin-top: 1.1rem; }
.aside-cta hr { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }
.aside-cta .hours-label { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.prose section, .prose .content-block, .prose .container, .prose .row, .prose .col { display: block; width: auto; max-width: none; padding: 0; margin: 0; float: none; }
.prose section + section { margin-top: 2.2rem; }
.prose section > * + * { margin-top: 1.15rem; }
.prose .call-out { background: var(--green-50); border-left: 3px solid var(--gold-500); padding: 1.1rem 1.4rem; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.prose .call-out p { color: var(--green-950); }
.prose img { height: auto; border-radius: var(--radius-s); }
.prose .hide-on-med-and-down { display: block; }
.prose hr, .prose .divider { border: 0; border-top: 1px solid var(--line); }
.prose a { color: var(--gold-600); }
.prose .btn { text-decoration: none; }
.page-hero h1 span { color: inherit; }
.page-hero .btn-row { margin-top: 1.8rem; }
.foot-directions { margin-top: .5rem; } .foot-directions a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Accessibility widget (AWDA), kept as a function: Materialize's floating button is not loaded, so the list opens on hover, focus or the button. ---- */
.awda-sticky { position: fixed; left: 0; bottom: 60px; z-index: 95; }
.awda-sticky ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; left: 10px; bottom: 44px; gap: .5rem; flex-direction: column; }
.awda-sticky:hover ul, .awda-sticky:focus-within ul, .awda-sticky.open ul { display: flex; }
.awda-sticky a.btn-floating { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--green-900); color: #fff; box-shadow: var(--shadow-m); cursor: pointer; }
.awda-sticky a.btn-floating.white { background: #fff; color: #000; }
.awda-sticky a.btn-floating svg { width: 20px; height: 20px; fill: currentColor; }
.awda-sticky .btn-large { width: 44px; height: 44px; border-radius: 0 22px 22px 0; }
@media (max-width: 600px) { .awda-sticky { display: block !important; bottom: 14px; z-index: 89; } }

/* ---- Header menu base for Dalia's nav-dropdowns.css (her file styles the panels; these are the plain basics under it: positioning context, button reset, chevron shape). ---- */
.main-nav li { position: relative; }
.main-nav .sub-toggle, .main-nav .sub-label { background: none; border: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; display: inline-flex; align-items: center; }
.main-nav .chev { display: inline-block; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-25%); margin-left: .35em; }
.main-nav .sub { list-style: none; }

/* ---- Home page (preview): our words in Kimi's hero, and the services / why blocks. Kimi styles .hero h1; our hero words are header elements (not headings), so they take the same look. ---- */
.hero .hero-title { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: #fff; font-size: clamp(2.4rem, 1.7rem + 3.4vw, 4.2rem); letter-spacing: -.015em; margin-bottom: 1.3rem; text-wrap: balance; display: block; }
.hero .hero-title .otd-hero__accent { font-style: italic; color: var(--gold-400); }
.hero .hero-lede { display: block; color: #d8e6dd; margin-bottom: 2rem; font-size: clamp(1.1rem, 1.02rem + .45vw, 1.3rem); max-width: 56ch; }
.hero .hero-media picture { display: block; width: 100%; height: 100%; }
.hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.section-head.center { text-align: center; margin-inline: auto; }
.center-link { margin-top: 2.2rem; text-align: center; max-width: none; } /* Kimi's paragraph width limit left this block at the left, off-centre */
.why-intro { margin-top: 1rem; }
.checklist h3.point { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: inherit; line-height: 1.4; }
.section.dark .checklist span { color: #cfe0d5; }
.why-cards { gap: 1.4rem; }
.section.dark .why-cards .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.section.dark .why-cards .card .icon { background: rgba(255,255,255,.1); color: var(--gold-400); }
.section.dark .why-cards .card h3 { color: #fff; }
.home-legacy { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.home-legacy section, .home-legacy .row, .home-legacy .col, .home-legacy article { display: block; float: none; width: auto; max-width: none; padding-inline: 0; margin-inline: 0; }
.home-legacy article + article { margin-top: 1.6rem; }
.home-legacy img { height: auto; }
/* Header over the home hero (transparent state): the menu buttons take the same white as Kimi's links. */
.site-header:not(.solid):not(.inner) .main-nav .sub-label, .site-header:not(.solid):not(.inner) .main-nav .sub-toggle { color: #fff; }
@media (max-width: 1279px) { .site-header:not(.solid):not(.inner) .main-nav .sub-label, .site-header:not(.solid):not(.inner) .main-nav .sub-toggle { color: #fff; } }

/* ---- Home: Kimi's "Visit our Poway office" hours card on its own (the left column of Kimi's split carried text we do not use). ---- */
.office-wrap { display: grid; justify-items: center; }
.office-wrap .hero-card { width: min(100%, 30rem); }
.office-links { margin-top: .9rem; text-align: center; }
.office-links a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Closing band: Kimi's .cta-band h2 look for our paragraph headline (a heading would add an H2 to every page). ---- */
.cta-band .band-title { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: #fff; font-size: clamp(1.9rem, 1.45rem + 2.2vw, 3rem); letter-spacing: -.01em; max-width: 22ch; text-wrap: balance; }
.cta-wrap { padding-top: 0; }

/* ---- Outside office hours (Poway clock; class is-closed set on <html> before first paint by the head script): the Call buttons are hidden. The Book button's primary look is Dalia's closed-state.css. ---- */
.is-closed [data-call-hide] { display: none !important; }

/* The neighbourhood strip, as Kimi's (no visible label; the section carries aria-label "Areas we serve"). The list is five real names once; with script it loops three copies (translateX(-33.3333%)), at Kimi's speed (set from the width by script), paused on hover, focus or the Pause button; without script or with reduced motion it is a static wrapped list. */
.marquee { display: flex; align-items: center; gap: .6rem; padding-inline: 0; position: relative; }
.marquee-view { overflow: hidden; flex: 1 1 auto; min-width: 0; }
.marquee .track { width: auto; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; animation: none; margin-inline: auto; }
.marquee.is-moving .track { width: max-content; flex-wrap: nowrap; justify-content: flex-start; animation: marquee-third var(--marquee-dur, 36s) linear infinite; margin-inline: 0; }
.marquee.is-moving.is-paused .track { animation-play-state: paused; }
@keyframes marquee-third { to { transform: translateX(-33.3333%); } }
/* Pause control (WCAG 2.2.2): a small quiet text button at the right end; still a real button with a visible focus ring and 4.5:1 text. */
.marquee-pause { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); z-index: 2; font: inherit; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .35rem .6rem; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--green-800); cursor: pointer; opacity: .75; min-height: 28px; }
.marquee-pause:hover, .marquee-pause:focus-visible { opacity: 1; }
.marquee-pause:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .marquee .track [aria-hidden] { display: none; } .marquee-pause { display: none; } }

/* The hours card title is an H3 now (Karim's outline): same look as Kimi's .hero-card h2. */
.hero-card h3 { font-size: 1.45rem; margin-bottom: .4rem; }

/* Scroll reveal (Kimi's), made safe: content is visible without script (the head script adds .has-js) and for people who ask for reduced motion. */
html:not(.has-js) [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Doctor cards under Our Team: name-only cards, the name is a link in Kimi's heading style. */
.doc-grid { margin-top: 2.4rem; }
.doc-card h3 a { color: inherit; text-decoration: none; }
.doc-card h3 a:hover { color: var(--gold-600); }

/* A styled paragraph that looks like Kimi's section H2 (used where the heading level is not settled: Karim). */
.section-head .section-title { font-family: var(--font-display); font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.8rem); line-height: 1.15; font-weight: 600; color: var(--green-900); margin-bottom: 1rem; }

/* Our Team content under the doctor cards, inside the same section. */
.team-under { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* Our Team text without the photo: Kimi's narrow text width, same heading style as the split blocks. */
.home-text .prose h2 { margin-top: 0; font-size: clamp(1.9rem, 1.45rem + 2.2vw, 3rem); letter-spacing: -.01em; margin-bottom: 1rem; }
.home-text .btn-row { margin-top: 1.8rem; }

/* FAQ as buttons inside H3s (Karim's structure) in Kimi's accordion look (Kimi uses details/summary). Answers are in the HTML; they are collapsed only when script runs (.has-js). */
.faq h3 { margin: 0; font-size: inherit; font-family: inherit; letter-spacing: 0; }
.faq .faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.faq .faq-item.open { border-color: var(--green-100); box-shadow: var(--shadow-s); }
.faq .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; font-weight: 700; color: var(--green-950); font-size: 1.02rem; }
.faq .faq-q .chev { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--green-50); display: grid; place-items: center; transition: transform .3s var(--ease-out), background-color .3s; }
.faq .faq-q .chev svg { width: 16px; height: 16px; color: var(--green-700); }
.faq .faq-item.open .chev { transform: rotate(180deg); background: var(--gold-100); }
.has-js .faq .faq-item:not(.open) .answer { display: none; }
.faq .answer a { text-decoration: underline; text-underline-offset: 3px; }

/* Footer office hours list (Kimi's footer list look). */
.foot-hours { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; font-size: .94rem; }

/* Phone menu overlay: the Book Online button on top (hidden when the menu is the normal header row). */
.main-nav .nav-book { display: none; }
@media (max-width: 1279px) {
  .main-nav .nav-book { display: block; }
  .main-nav .nav-book a.btn { font-family: var(--font-body); font-size: 1rem; color: #fff !important; }
}
/* Floating button: when the office is closed Call Now (hidden by [data-call-hide]) is replaced by Book Online in the same place and size. */
.call-fab--book { display: none; }
@media (max-width: 720px) { .is-closed .call-fab--book { display: inline-flex; } }
.call-fab--book .otd-book__label { color: inherit; }

/* Phones: the header shows only the logo and the menu button (Waseem 4 Oct). The tel link is hidden with display:none, so it is not left as an empty focusable link; the floating Call Now button and the footer keep the number reachable. Matches the floating button breakpoint. */
@media (max-width: 720px) { .header-cta .header-phone { display: none; } }

/* Dark sections: card text uses Kimi's light text colour (the card paragraph rule was winning with its dark grey). */
.section.dark .card p, .section.dark .card .micro { color: #cfe0d5; }
/* Our Team text under the doctor cards: left edge on the card grid's left edge, full width of the card grid (Waseem: wider so it looks shorter), with the button centred under it. */
.home-text .prose { max-width: none; }
.home-text .btn-row { justify-content: center; }
/* Name-only doctor cards: no empty band under the name. */
.doc-card .avatar { margin-bottom: 1rem; }
.doc-card h3 { margin: 0; }
/* Phone menu overlay button: a 44px tap target. */
.main-nav .nav-book a.btn { min-height: 44px; }

/* Home hero: the one H1 holds Kimi's small line (looks exactly like Kimi's badge) and Kimi's big headline. */
.hero h1 { font-size: inherit; line-height: inherit; letter-spacing: normal; font-weight: inherit; margin-bottom: 0; }
.hero h1 .hero-eyebrow { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); padding: .5rem 1.1rem; border-radius: 999px; font-family: var(--font-body); font-size: .85rem; line-height: 1.4; font-weight: 600; letter-spacing: .04em; color: #fff; margin-bottom: 1.6rem; backdrop-filter: blur(6px); }
.hero h1 .hero-headline { display: block; font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: #fff; font-size: clamp(2.4rem, 1.7rem + 3.4vw, 4.2rem); letter-spacing: -.015em; margin-bottom: 1.3rem; text-wrap: balance; }
.hero h1 .otd-hero__accent { font-style: italic; color: var(--gold-400); }
.home-welcome h2 { font-size: clamp(1.9rem, 1.45rem + 2.2vw, 3rem); letter-spacing: -.01em; margin-bottom: 1.2rem; }

/* Header menu (Waseem 4 Oct): the four top items are identical. "Patient Education" is a button with no page, so it took the browser's button size and a full-white colour; it now takes Kimi's link size, weight, colour and padding. */
.main-nav .sub-label, .main-nav .sub-toggle { font-size: .98rem; font-weight: 600; }
.main-nav .sub-label { padding: .5rem .35rem; color: var(--ink); }
.site-header:not(.solid):not(.inner) .main-nav .sub-label, .site-header:not(.solid):not(.inner) .main-nav .sub-toggle { color: rgba(255,255,255,.92); }
@media (min-width: 1280px) {
  .main-nav .sub-label, .main-nav .sub-toggle { color: inherit; }
  .main-nav > ul > li > .sub-label { color: var(--ink); }
  .site-header:not(.solid):not(.inner) .main-nav > ul > li > .sub-label { color: rgba(255,255,255,.92); }
}
/* Dropdown panels: every item on one line at 1280px and wider; the panel is as wide as its longest item needs (columns stay), never wider than the screen. */
@media (min-width: 1280px) {
  .site-header .main-nav .sub a { white-space: nowrap; }
  /* The script (glue.js) measures the longest item of each panel and sets --sub-col-w; the panel is exactly as wide as its columns need: columns x that width + column gaps + padding + border. */
  .site-header .main-nav .sub:has(> li:nth-child(n+8))  { width: calc(var(--sub-col-w, 22rem) * 2 + .4rem + 1.2rem + 2px); max-width: calc(100vw - 2rem); }
  .site-header .main-nav .sub:has(> li:nth-child(n+24)) { width: calc(var(--sub-col-w, 22rem) * 3 + .8rem + 1.2rem + 2px); max-width: calc(100vw - 2rem); }
}

/* The phone-menu Book Online item is the LAST list item (hidden on desktop), so the last dropdown is now the second-to-last item. */
@media (min-width: 1280px) { .site-header .main-nav li.has-sub:not(:nth-last-child(2)) > .sub { left: calc(-.9rem + var(--sub-shift, 0px)); } .main-nav li.has-sub:nth-last-child(2) > .sub { left: auto; right: -.9rem; } }

/* Welcome box: full content width, same edges as the service-card grid (Waseem 4 Oct); paragraph and callout both span it. */
.home-welcome .prose, .home-welcome .prose p, .home-welcome .callout { max-width: none; }

/* Welcome box centred like Kimi's other centred sections (Waseem 4 Oct): eyebrow and heading in the centred section header, the paragraph centred, the callout a centred block. */
.home-welcome .prose { text-align: center; }
.home-welcome .prose p { margin-inline: auto; }
.home-welcome .callout { max-width: 62rem; margin-inline: auto; text-align: center; }

/* The Our Team paragraph under the doctor cards runs the full grid width: Kimi's paragraph measure is lifted for it (and for the Welcome paragraph above). */
.home-text .prose p, .home-text .prose { max-width: none; }

/* Welcome in Kimi's layout: one H2 holding the eyebrow and the headline; our paragraph underneath at the full container width. */
.welcome-h2 { font-size: inherit; }
.welcome-h2 .eyebrow { display: flex; font-family: var(--font-body); line-height: 1.4; }
.welcome-h2 .headline { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 1.45rem + 2.2vw, 3rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; color: var(--green-900); }
.home-welcome-under { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.home-welcome-under .prose, .home-welcome-under .prose p { max-width: none; }

/* The two added paragraphs (Welcome and Our Team) are centred under their Kimi sections (Waseem 4 Oct). */
.home-welcome-under .prose p, .home-text .prose p { text-align: center; }

/* Footer columns share one top line: the first heading of the address column loses its top margin so "Office" starts level with Treatments, Care, Patients, Oak Tree Dental and the logo block. */
.nap > .foot-heading:first-child { margin-top: 0; }
.footer-grid--ours { align-items: start; }

/* Blog post body inside Kimi's prose column: the theme's share icons, divider and Next/Previous links, spaced and sized (no theme CSS runs here). */
.prose .sm-share-links { display: flex; gap: .5rem; margin: 0 0 1.2rem; }
.prose .sm-share-links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green-50); color: var(--green-800); }
.prose .sm-share-links svg { width: 20px; height: 20px; }
.prose .divider { border: 0; border-top: 1px solid var(--line); height: 0; margin: 1.4rem 0; }
.prose .bullet-list { list-style: disc; padding-left: 1.3rem; }
.prose .blogs-pagination { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.prose .blogs-pagination a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Blog index: Kimi's list with each post's picture where Kimi puts its date. */
.post-item.has-thumb { grid-template-columns: 170px 1fr; }
.post-item .thumb { display: block; align-self: start; border-radius: var(--radius-s); overflow: hidden; }
.post-item .thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }
@media (max-width: 560px) { .post-item.has-thumb { grid-template-columns: 1fr; } .post-item .thumb img { height: 180px; } }
.pagination { flex-wrap: wrap; }
.pagination .pg-step a { border: 0; background: none; font-weight: 700; }

/* Blog post hero: date and category chips (Karim's rulings); the breadcrumb trail uses Kimi's own .crumbs styling. */
.page-hero .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; color: #cfe0d5; font-size: .92rem; }
.page-hero .post-meta svg { width: 1em; height: 1em; vertical-align: -.12em; }
.page-hero .post-meta .chip { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: .2rem .8rem; font-size: .8rem; color: #fff; }
.recent-articles { margin-top: 1.6rem; }
.recent-articles .aside-sub { font-weight: 800; color: var(--green-900); margin-bottom: .8rem; }
.recent-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.recent-list a { display: block; font-weight: 700; color: var(--green-900); text-decoration: none; line-height: 1.3; }
.recent-list a:hover { color: var(--green-700); }
.recent-list time { display: block; margin-top: .25rem; font-size: .82rem; color: var(--ink-soft); }

/* Legacy theme grid markup that sits inside some locked bodies (legal and landing pages): no negative margins, no floated columns, nothing hidden by the theme left visible. */
.prose .row { margin-left: 0; margin-right: 0; }
.prose .col { float: none; width: 100%; padding-left: 0; padding-right: 0; }
.prose .hide-on-small-only { display: none; }
@media (max-width: 992px) { .prose .hide-on-med-and-down { display: none; } }
.prose .inner-intro .inner-image-container { max-width: none; width: 100%; height: clamp(200px, 24vw, 320px); margin: 0 0 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-s); }
.prose .inner-intro .inner-image-container a, .prose .inner-intro .inner-image-container picture { display: block; width: 100%; height: 100%; }
.prose .inner-intro .inner-image-container img { width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 0; box-shadow: none; display: block; }
.prose .inner-intro .inner-image-container.cover img { object-fit: cover; }
br.pgap { display: block; content: ""; margin-top: .9rem; line-height: 0; }
.prose .valign-wrapper { display: block; }

/* A long unbreakable string in a locked body must not widen the page: grid children may shrink, and long words wrap. */
.with-aside > .prose, .with-aside > aside { min-width: 0; }
.prose { overflow-wrap: anywhere; }

/* Contact page: our Contact Form 7 in Kimi's card and field styling (the theme's Materialize classes are laid out as Kimi's two-column grid). */
.cf-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; margin: 0; }
.cf-card .input-field { grid-column: span 1; position: relative; display: grid; gap: .4rem; margin: 0; }
.cf-card .input-field.s12:not(.m6) { grid-column: 1 / -1; }
.cf-card .input-field > svg { display: none; }
.cf-card .wpcf7-form-control-wrap { display: block; }
.cf-card input[type="text"], .cf-card input[type="tel"], .cf-card input[type="email"], .cf-card textarea {
  width: 100%; border: 1.5px solid #8a8580; border-radius: var(--radius-s); padding: .85rem 1rem; background: var(--cream); font: inherit; color: var(--ink); box-shadow: none; height: auto;
}
.cf-card textarea { min-height: 140px; resize: vertical; }
.cf-card input:focus, .cf-card textarea:focus { outline: none; border-color: var(--green-600); background: #fff; box-shadow: 0 0 0 4px rgba(64, 62, 59, .14); }
.cf-card .wpcf7-submit { width: 100%; cursor: pointer; border: 0; border-radius: 999px; padding: 1rem 1.6rem; font-weight: 800; font-size: 1rem; background: var(--gold-500); color: var(--green-950); box-shadow: 0 8px 22px rgba(176, 128, 80, .38); transition: transform .2s, background-color .2s; }
.cf-card .wpcf7-submit:hover, .cf-card .wpcf7-submit:focus-visible { background: var(--gold-400); transform: translateY(-2px); }
.cf-card .otd-recaptcha-note { margin-top: .9rem; font-size: .8rem; color: var(--ink-soft); }
.cf-card .otd-recaptcha-note a { text-decoration: underline; }
.cf-card .hidden-fields-container { border: 0; padding: 0; margin: 0; }
@media (max-width: 640px) { .cf-card .row { grid-template-columns: 1fr; } .cf-card .input-field { grid-column: 1 / -1; } }
.info-title { font-size: 1.15rem; margin-bottom: .8rem; }
.kimi-info { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.8rem .6rem; box-shadow: var(--shadow-s); }
.map-frame { aspect-ratio: 16 / 7; }
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

.cf-card .wpcf7-response-output:empty, .cf-card .wpcf7 form .wpcf7-response-output:empty { display: none; }

/* Reviews page: the page's own review block (buttons, live Google cards, Yelp list) in Kimi's look. */
.hero-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; }
.hero-split .hero-frame { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-l); }
.hero-split .hero-frame img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; } }
.page-hero .hero-intro { color: #d8e6dd; max-width: 56ch; margin-top: .9rem; }
.review-banner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); box-shadow: var(--shadow-s); }
.review-banner .stars { display: inline-flex; gap: .15rem; color: var(--gold-500); }
.review-banner .stars svg { width: 1.4rem; height: 1.4rem; }
.review-banner .disclaimer { margin-top: 1rem; font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 860px) { .review-banner { grid-template-columns: 1fr; } }
.reviews-block .otd-reviews__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-bottom: 2rem; }
.reviews-block .otd-reviews__actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.4rem; border-radius: 999px; font-weight: 800; text-decoration: none; border: 2px solid var(--green-800); color: var(--green-900); background: transparent; }
.reviews-block .otd-reviews__actions a.otd-book--primary { background: var(--gold-500); border-color: var(--gold-500); color: var(--green-950); box-shadow: 0 8px 22px rgba(176, 128, 80, .38); }
.reviews-block .otd-reviews__actions a:hover, .reviews-block .otd-reviews__actions a:focus-visible { transform: translateY(-2px); }
.reviews-block .otd-reviews__summary { display: flex; align-items: center; gap: .6rem; justify-content: center; margin-bottom: 1.2rem; font-size: 1.1rem; }
.reviews-block .otd-reviews__cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.reviews-block .otd-review { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-s); display: grid; gap: .6rem; align-content: start; }
.reviews-block .otd-review__author { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.reviews-block .otd-review__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.reviews-block .otd-review__name { font-weight: 800; color: var(--green-900); text-decoration: none; }
.reviews-block .otd-review__time { color: var(--ink-soft); font-size: .85rem; }
.reviews-block .otd-review__stars, .reviews-block .otd-reviews__stars { color: var(--gold-500); letter-spacing: .1em; }
.reviews-block .otd-review__text { color: var(--ink-soft); font-size: .96rem; }
.reviews-block .otd-reviews__attrib { margin-top: 1rem; font-size: .8rem; color: var(--ink-soft); text-align: center; }
.reviews-block .otd-reviews__google-logo { height: 18px; width: auto; }
.reviews-block .otd-reviews__yelp { margin-top: 2.5rem; }
.reviews-block .otd-reviews__yelp-label { font-weight: 800; font-size: 1.1rem; color: var(--green-900); text-align: center; }
.reviews-block .otd-reviews__yelp-note { text-align: center; color: var(--ink-soft); font-size: .9rem; margin: .3rem 0 1.2rem; }
.reviews-block .otd-reviews__yelp-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.reviews-block .otd-reviews__yelp-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.reviews-block a { text-decoration: underline; text-underline-offset: 3px; }
.reviews-block .otd-reviews__actions a { text-decoration: none; }

/* About page: Kimi's story, doctor and team cards, with our own bios under them in a photo-and-text row. */
.about-ours { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.about-ours .prose, .about-ours .prose p { max-width: none; }
.doc-card .doc-name, .team-card .doc-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--green-900); margin: 0; }
.doc-card .doc-name a, .team-card .doc-name a { color: inherit; text-decoration: none; }
.doc-card .doc-name a:hover, .team-card .doc-name a:hover { color: var(--gold-600); }
.team-card { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; }
.team-card .avatar { width: 64px; height: 64px; aspect-ratio: auto; border-radius: 50%; margin: 0; flex: none; font-size: 1.3rem; display: grid; place-items: center; }
.team-card .role { margin: 0; }
.bios { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); display: grid; gap: 2.4rem; }
.bio-row { display: grid; grid-template-columns: 240px 1fr; gap: 1.6rem 2rem; align-items: start; }
.bio-photo img { width: 100%; height: auto; border-radius: var(--radius); display: block; box-shadow: var(--shadow-s); }
.bio-text h3 { margin-bottom: .3rem; }
.bio-text .role { color: var(--gold-600); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .6rem; }
.bio-text p + p { margin-top: .8rem; }
@media (max-width: 720px) { .bio-row { grid-template-columns: 1fr; } .bio-photo { max-width: 260px; } }

/* The About H1 is "About" + "Oak Tree Dental" in two pieces with no space between them in the page's own markup: a space is added visually. */
.page-hero h1 .text-contrast::after { content: " "; }
.post-item .cat { display: inline; }

/* Patient information: Kimi's page with our policy text under Kimi's headings, the payment logos, and the hero's Contact Us block. */
.page-hero .hero-contact { color: #fff; font-size: 1.15rem; margin-top: 1.4rem; }
.wide-frame img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
.prose h3 { font-size: 1.25rem; margin-top: 1.8rem; }
.pay-section .payments-section-paragraph h5 { font-size: 1.05rem; font-weight: 800; color: var(--green-900); text-align: center; margin: 0 0 1.2rem; }
.pay-section .payment { list-style: none; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; padding: 0; margin: 0; }
.pay-section .payment-method a { display: flex; align-items: center; justify-content: center; width: 84px; height: 56px; background: var(--green-900); border-radius: var(--radius-s); padding: .5rem; }
.pay-section .payment-method img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* Content pages (services index, sitemap, hub, terminology, category archives): the page's own content in Kimi's container, the theme's grid and boxes laid out as Kimi cards. */
.legacy .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; margin: 0 0 1.4rem; }
.legacy .col { float: none; width: auto; padding: 0; }
.legacy .divider { border: 0; border-top: 1px solid var(--line); height: 0; margin: 1.2rem 0; }
.legacy .center-align { text-align: center; }
.legacy h2, .legacy h3 { margin-top: 1.4rem; }
.legacy h4, .legacy h5 { font-family: var(--font-display); color: var(--green-900); margin: 1.2rem 0 .6rem; }
.legacy p { margin: .8rem 0; max-width: none; }
.legacy a { color: var(--green-800); text-decoration: underline; text-underline-offset: 3px; }
.legacy .service-wrapper { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-s); height: 100%; }
.legacy .service-wrapper img { width: 48px; height: 48px; margin-bottom: .6rem; object-fit: contain; }
.legacy .service-wrapper h4 { margin: 0 0 .7rem; font-size: 1.15rem; }
.legacy .service-list, .legacy .bullet-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.legacy .service-list a, .legacy .bullet-list a { text-decoration: none; }
.legacy .service-list a:hover, .legacy .bullet-list a:hover { text-decoration: underline; }
.legacy .search-form { display: flex; gap: .6rem; align-items: center; margin: 0 0 1.5rem; }
.legacy .search-form input[type="search"] { flex: 1; border: 1.5px solid #8a8580; border-radius: var(--radius-s); padding: .75rem 1rem; background: var(--cream); font: inherit; }
.legacy .search-form .search-submit { border: 0; border-radius: 999px; padding: .8rem 1.4rem; font-weight: 800; background: var(--gold-500); color: var(--green-950); cursor: pointer; }
.legacy .label-icon, .legacy .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.legacy .def-letter { display: inline-block; margin: .15rem; }
.legacy .def-letter a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-50); text-decoration: none; font-weight: 800; }
.legacy .maps iframe { width: 100%; border: 0; border-radius: var(--radius); }
.legacy .otd-hub__pg, .legacy ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; }
.legacy-category .post-list { margin-bottom: 2rem; }

.legacy .search-form { flex-wrap: wrap; }
.legacy .search-form input[type="search"] { min-width: 0; }

/* Ad landing pages (Kimi's /lp/ design): small header with the site number and a Book Online button that stays visible on phones, the page's own blocks as Kimi sections. */
.lp-header .header-cta { display: flex; align-items: center; gap: .8rem; }
.lp-header .header-phone { color: #fff; }
.lp-header .lp-book { display: inline-flex; padding: .7rem 1.3rem; font-size: .92rem; }
@media (max-width: 960px) { .lp-header .header-phone span { display: none; } .lp-header .lp-book { display: inline-flex; } }
.card .card-title, .hero-card .card-title, .doc-heading { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--green-900); line-height: 1.2; margin: 0 0 .5rem; }
.section-head .section-title { font-family: var(--font-display); font-size: clamp(1.9rem, 1.45rem + 2.2vw, 3rem); font-weight: 600; color: var(--green-900); line-height: 1.12; }
.doc-heading { font-size: clamp(1.7rem, 1.4rem + 1.6vw, 2.4rem); }
.review-mini blockquote { margin: 0; color: var(--ink-soft); font-size: .98rem; max-height: 15rem; overflow-y: auto; }
.review-mini .who { margin-top: .8rem; font-weight: 800; color: var(--green-900); }
.lp-faq .questions { font-weight: 800; color: var(--green-950); margin-top: 1.4rem; }
.lp-faq .answers { color: var(--ink-soft); margin-top: .3rem; max-width: none; }
.lp-faq .answers a { text-decoration: underline; text-underline-offset: 3px; }
.lp-faq h2 { text-align: center; }
.lp-faq .divider { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; height: 0; }
.lp-legal p + p { margin-top: 0; }

.post-item .item-title { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--green-900); line-height: 1.2; }
.post-item .item-title a { text-decoration: none; color: inherit; }
.post-item .item-title a:hover { color: var(--green-700); }

/* Insurance & Payment: the intro and the footnote run the width of the pill row (Waseem 4 Oct), wrapping only when the screen is narrow. */
.ins-section .section-head, .ins-section .section-head p, .ins-section .micro { max-width: none; }

/* The review card inside the home Patient Information section: Kimi's card unchanged, centred in the container under the Patient Information text. */
.home-review { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.home-review .review-banner { margin-inline: auto; }
.home-review .rv-title { font-size: 1.35rem; margin-bottom: .6rem; }

/* Doctor cards on the home page carry the role and the bio again (Karim's restore list). */
.doc-card .role { color: var(--gold-600); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin: .3rem 0 .6rem; }
.doc-card p:not(.role):not(.doc-name) { font-size: .93rem; margin-top: .5rem; }

/* Services index: Kimi's section header over the groups, and the lede under the H1 on the content pages. */
.legacy-services .section-head { margin-bottom: 2rem; }
.legacy .service-wrapper h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 .7rem; color: var(--green-900); }
.page-hero .lede { max-width: 56ch; }

/* Services index: the single search, centred under the intro. */
.legacy-services .services-search { max-width: 560px; margin: 0 auto 2.5rem; }
.legacy-services .services-search .search-form { margin: 0; justify-content: center; }
.legacy-services .services-search .input-field { flex: 1; min-width: 0; }

/* ---- Service page bottom (layout only): FAQ accordion, question chips, rail cards, related cards, call-outs, definitions. */
.sr-only, .prose p.questions > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prose .faq { margin-top: 1.4rem; }
.prose .faq h3 { margin: 0; font-size: inherit; font-family: inherit; letter-spacing: 0; }
.prose .faq .faq-q { font-size: 1.02rem; }
.prose .faq .answer p { color: var(--ink-soft); max-width: none; }
.prose .faq-section h2.center-align { text-align: left; }
.prose p.questions { display: inline-block; margin: .3rem .4rem .3rem 0; }
.prose p.questions a { display: inline-block; background: var(--green-50); border: 1px solid var(--green-100); border-radius: 999px; padding: .5rem 1rem; color: var(--green-900); text-decoration: none; font-weight: 600; font-size: .93rem; line-height: 1.3; }
.prose p.questions a:hover { background: var(--gold-100); border-color: var(--gold-500); }
.prose .call-out[class*="SPPQ"] { background: var(--green-50); border-left: 4px solid var(--gold-500); border-radius: 0 var(--radius-m, 14px) var(--radius-m, 14px) 0; padding: 1.4rem 1.8rem; }
.prose .call-out[class*="SPPQ"] h3 { margin: 0; max-width: none; font-family: var(--font-body); font-weight: 500; font-style: italic; font-size: 1.1rem; line-height: 1.55; color: var(--green-950); text-wrap: wrap; }
.prose .definitions .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.prose .definitions .col { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 1rem 1.2rem; }
.prose .definitions dt { font-weight: 800; color: var(--green-900); }
.prose .definitions dd { margin: .3rem 0 0; color: var(--ink-soft); }
.has-rail .aside-cta { position: static; }
.aside-cta .rail-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-s); overflow-wrap: anywhere; }
.aside-cta .rail-card h3, .aside-cta .rail-card h4, .aside-cta .rail-card h5 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0 0 .6rem; color: var(--green-950); }
.aside-cta .rail-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .92rem; }
.aside-cta .rail-card li { color: var(--ink-soft); }
.aside-cta .rail-card a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.aside-cta .rail-card .divider { border: 0; border-top: 1px solid var(--line); margin: .4rem 0 .7rem; height: 0; }
.aside-cta .rail-card br { display: none; }
.related-grid { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.related-grid .related-card { flex: 0 1 calc((100% - 1.25rem * (var(--rc, 3) - 1)) / var(--rc, 3)); min-width: 220px; position: relative; display: flex; flex-direction: column; gap: .8rem; justify-content: space-between; }
.related-grid.cols-1 { --rc: 1; } .related-grid.cols-2 { --rc: 2; } .related-grid.cols-3 { --rc: 3; } .related-grid.cols-4 { --rc: 4; }
.related-card > a { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; color: var(--green-950); text-decoration: none; overflow-wrap: anywhere; }
.related-card > a::after { content: ""; position: absolute; inset: 0; }
.related-card .more { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-weight: 800; color: var(--gold-600); font-size: .92rem; }
.related-card .more svg { width: 1em; height: 1em; }
.related-more { text-align: center; margin-top: 1.6rem; }
.related-more a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.related-services .section-head p { margin-inline: auto; }
@media (max-width: 960px) { .related-grid .related-card { flex-basis: calc(50% - .65rem); } }
@media (max-width: 600px) { .related-grid .related-card { flex-basis: 100%; } }
/* Header and card buttons never wrap their label. */
.site-header .btn, .main-nav .btn, .related-card .more { white-space: nowrap; }

/* Legacy icons inside the page and the rail are sized like text (the theme CSS that sized them is not loaded). */
.prose svg.svg-icon, .rail-card svg.svg-icon, .prose .label-icon svg { width: 1.25em; height: 1.25em; }

/* Header and its dropdown panels are fully opaque and above everything: no fade-through while a panel opens, solid header. */
.site-header.solid, .site-header.inner { background: #fff; }
@media (min-width: 1280px) {
  .site-header .main-nav .has-sub:hover > .sub, .site-header .main-nav .has-sub:focus-within > .sub, .site-header .main-nav .has-sub.open > .sub { transition: opacity 0s, transform .3s var(--ease-out), visibility 0s; }
}
.aside-cta .rail-card { background: #fff; position: relative; z-index: 0; }

/* Related cards: Kimi's card (icon, title, one-line description, Learn more), even heights per row, two-line title and three-line description clamps. */
.related-card .icon { flex: none; }
.related-card > a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.related-card > p { margin: 0; color: var(--ink-soft); font-size: .93rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.related-card .more { margin-top: auto; }
.related-grid .related-card { justify-content: flex-start; align-items: flex-start; }
/* Back to top: small centred outline button at the end of the article. */
.prose .back-top { text-align: center; margin-top: 2.4rem; max-width: none; }
.prose .back-top a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--green-900); }
.prose .back-top svg { transform: rotate(-90deg); width: 1em; height: 1em; }
/* Closing band: equal space above and below when the section before it has its own background. */
main:has(> section:last-child:is(.tint, .dark)) + .cta-wrap { padding-top: clamp(4rem, 3rem + 4vw, 7rem); }

/* Terminology block: compact two-column accordion (one column on phones); the extra terms are hidden only when script runs. */
.prose .term-list { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; align-items: start; margin-top: 1.2rem; }
.prose .term-list .faq-q { padding: .8rem 1.1rem; font-size: .97rem; }
.prose .term-list .faq-q dfn { font-style: normal; }
.prose .term-list .answer { padding: 0 1.1rem 1rem; }
.has-js .term-list:not(.show-all) .term-extra { display: none; }
.prose .term-more-wrap { text-align: center; margin-top: 1.2rem; max-width: none; }
@media (max-width: 760px) { .prose .term-list { grid-template-columns: 1fr; } }

/* About: one block per person, photo and bio side by side, sides alternating. */
.bios-stack { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); gap: 1.6rem; }
.bios-stack .bio-row { grid-template-columns: minmax(220px, 320px) 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.2rem, 1rem + 1.4vw, 2rem); align-items: center; }
.bios-stack .bio-row:nth-child(even) { grid-template-columns: 1fr minmax(220px, 320px); }
.bios-stack .bio-row:nth-child(even) .bio-photo { order: 2; }
.bios-stack .bio-text h3 a { color: inherit; text-decoration: none; }
.bios-stack .bio-text h3 a:hover { color: var(--green-700); }
@media (max-width: 720px) { .bios-stack .bio-row, .bios-stack .bio-row:nth-child(even) { grid-template-columns: 1fr; } .bios-stack .bio-row:nth-child(even) .bio-photo { order: 0; } }

/* ---- Parity pass (Mohsen, 5 Oct) ---- */
/* Landing page: the home hero rule must not shrink the landing H1; dark header stays dark; wordmark never wraps. */
.lp-hero h1 { font-size: clamp(2.4rem, 1.7rem + 3.4vw, 4.2rem); line-height: 1.12; letter-spacing: -.015em; font-weight: 600; margin-bottom: 1.3rem; }
.site-header.lp-header, .site-header.inner.lp-header { background: var(--green-950); }
.lp-header .brand, .lp-header .wordmark, .lp-header .wordmark strong, .lp-header .wordmark span { white-space: nowrap; }
.office-wrap .hero-card { transform: none; }
.lp-faq .faq { margin-top: 1.4rem; }
.lp-faq h2 { margin: .5rem 0 0; text-align: center; }
/* Service pages: Kimi's paragraph spacing inside the legacy sections. */
.prose .main-service-content .col > * + *, .prose .main-service-content p + p { margin-top: 1.15rem; }

/* Landing header on phones: everything fits in 390px. */
@media (max-width: 520px) {
  .lp-header .bar { gap: .5rem; }
  .lp-header .wordmark strong { font-size: .86rem; }
  .lp-header .wordmark span { font-size: .6rem; letter-spacing: .12em; }
  .lp-header .brand img { width: 34px; height: 34px; }
  .lp-header .header-cta { gap: .4rem; }
  .lp-header .lp-book { padding: .55rem .8rem; font-size: .82rem; }
}

/* Hub: Kimi's topic list above the page's own map block. */
.legacy-hub .hub-list { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.legacy-hub .hub-list a { overflow-wrap: anywhere; }

/* Staff page: Kimi's doc-card beside the bio. */
.staff-card { max-width: 24rem; margin-inline: auto; width: 100%; text-align: center; }
.staff-card .avatar { width: 100%; height: auto; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; }
.staff-card .avatar img { width: 100%; height: auto; display: block; }
.staff-card .doc-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--green-950); margin: 0; }
.staff-card .role { margin-top: .3rem; }
/* Buttons inside the page text keep their own colours (the prose link colour must not reach them). */
.prose a.btn-dark, .prose a.btn-dark:hover { color: #fff; }
.prose a.btn-primary { color: #fff; }

/* Services index: Kimi's categories (H3 + icon rows) stacked, not four legacy cards across. */
.legacy-services .row { display: block; }
.legacy-services .svc-cat + .svc-cat { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.legacy-services .svc-cat h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; color: var(--green-950); }
.legacy-services .svc-list a { color: var(--green-900); text-decoration: none; }
.legacy-services .svc-list span { overflow-wrap: anywhere; }

/* Patient information: "More detail" accordion under each of Kimi's summaries. */
.prose .more-detail { margin-top: 1rem; }
.prose .more-detail summary { cursor: pointer; }
.prose .more-detail .answer { padding-top: .4rem; }
.prose .more-detail .answer h3 { margin-top: .6rem; }

/* Blog: date badge on the index cards (over the thumbnail) and mini cards for recent articles in the rail. */
.post-item.has-thumb { position: relative; }
.post-item.has-thumb > .date { position: absolute; top: 1.9rem; left: 2.1rem; z-index: 2; background: rgba(255,255,255,.95); min-width: 56px; box-shadow: var(--shadow-s); }
.post-item.mini { grid-template-columns: 56px 1fr; gap: .8rem; padding: .8rem .9rem; box-shadow: none; }
.post-item.mini .date { padding: .5rem .2rem; }
.post-item.mini .date strong { font-size: 1.2rem; }
.post-item.mini .item-title { margin: 0; font-size: 1rem; line-height: 1.3; }
.recent-articles .post-list { display: grid; gap: .7rem; }

/* ---- Parity Lows ---- */
.cf-card .cf-label { display: block; font-weight: 700; font-size: .9rem; margin: 0 0 .35rem; color: var(--green-900); }
.home-review .review-banner .btn, .review-banner .btn { justify-self: start; width: auto; }
.marquee .marquee-view { padding-right: 5.5rem; }
.legacy .container { width: auto; padding: 0; }
.prose .blogs-pagination a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; border: 1.5px solid var(--green-900); border-radius: 999px; padding: .6rem 1.1rem; color: var(--green-900); font-weight: 700; }
.prose .blogs-pagination a:hover { background: var(--green-900); color: #fff; }
.with-aside > .aside-cta { min-width: 0; width: 100%; max-width: 100%; }
.grecaptcha-badge { visibility: hidden; }

/* ---- Second parity pass ---- */
.post-item:not(.has-thumb):not(:has(> .date)) { grid-template-columns: 1fr; }
.lp-header .wordmark strong { color: #fff; }
.card .more { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.card .more svg { width: 1em; height: 1em; }
.pay-section h5 { font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); font-weight: 600; text-align: center; color: var(--green-950); margin: 0 0 1.4rem; line-height: 1.2; }
.pay-section .payment img[src*="carecredit"], .pay-section .payment img[src*="apple-pay"] { background: var(--green-900); border-radius: 8px; padding: .5rem .8rem; box-sizing: content-box; }
.otd-reviews__yelp-list { max-width: 100%; overflow: hidden; }
.otd-reviews__yelp-list iframe { max-width: 100%; }
.lp-hero .checklist li, .lp-hero .checklist li span, .lp-hero .checklist li div { color: #fff; }
.related-card > a { display: block; -webkit-line-clamp: unset; overflow: visible; }
.related-card > p { -webkit-line-clamp: 3; }
.aside-cta .aside-title { padding-bottom: .9rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.cf-card input:focus-visible, .cf-card textarea:focus-visible, .cf-card .wpcf7-submit:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
/* Accessibility launcher on phones: a slim tab inside the 20px text gutter, so it never covers body text. */
@media (max-width: 600px) {
  .awda-sticky a.btn-large { width: 22px; height: 50px; border-radius: 0 12px 12px 0; }
  .awda-sticky a.btn-large svg { width: 15px; height: 15px; }
}
/* Category archive pager and the blog category cards. */
.otd-hub__pager { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: center; margin-top: 2rem; }
.otd-hub__pager ol { display: flex; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.otd-hub__pager .otd-hub__pg { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 .9rem; border-radius: 999px; border: 1.5px solid var(--green-900); color: var(--green-900); text-decoration: none; font-weight: 700; }
.otd-hub__pager a.otd-hub__pg:hover { background: var(--green-900); color: #fff; }
.otd-hub__pager .otd-hub__pg[aria-current="page"] { background: var(--green-900); color: #fff; }
.otd-hub__pager .otd-hub__pg[aria-disabled="true"] { opacity: .45; }
.otd-hub__pg-count { color: var(--ink-soft); font-size: .9rem; }

/* Dental terminology glossary: compact letter blocks (columns of links) instead of an 84,000px strip. */
.legacy .definitions .row { display: block; margin: 0; }
.legacy .definitions .row.center-align { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.legacy .definitions .def-letter { display: block; width: auto; float: none; }
.legacy .definitions .def-letter a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--green-900); font-weight: 800; color: var(--green-900); text-decoration: none; }
.legacy .definitions .def-letter a:hover { background: var(--green-900); color: #fff; }
.legacy .letter-heading { margin: 2.4rem 0 .8rem; padding: 0; background: none; width: auto; }
.legacy .letter-heading h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin: 0; text-align: left; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.legacy .dev-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .15rem 1.2rem; background: none; padding: 0; }
.legacy .dev-container .col { width: auto; padding: 0; float: none; }
.legacy .dev-container a { display: block; padding: .3rem 0; font-size: .9rem; line-height: 1.3; color: var(--green-800); text-decoration: none; overflow-wrap: anywhere; }
.legacy .dev-container a:hover { text-decoration: underline; color: var(--green-950); }
.legacy-terms .row { display: block; margin: 0; }
.legacy-terms .row.center-align { display: flex; }

/* Glossary letter blocks: collapsed, one row per letter. */
.legacy .letter-block { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); margin-top: .7rem; }
.legacy .letter-block > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; padding: .9rem 1.2rem; }
.legacy .letter-block > summary::-webkit-details-marker { display: none; }
.legacy .letter-block > summary h2 { border: 0; padding: 0; margin: 0; font-size: 1.15rem; font-family: var(--font-body); font-weight: 700; color: var(--green-950); }
.legacy .letter-block > summary .chev { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--green-50); display: grid; place-items: center; transition: transform .3s; }
.legacy .letter-block > summary .chev svg { width: 16px; height: 16px; color: var(--green-700); }
.legacy .letter-block[open] > summary .chev { transform: rotate(180deg); }
.legacy .letter-block .dev-container { padding: .2rem 1.2rem 1.2rem; }

/* Second pass lows */
.g-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; margin-right: .5rem; vertical-align: middle; }
.g-ico svg { width: 14px; height: 14px; }
.marquee .marquee-view { margin-right: 5.8rem; padding-right: 0; }
/* Yelp embeds: wide enough cards so the widget is not cut off. */
.reviews-block .otd-reviews__yelp-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); }
.reviews-block .otd-reviews__yelp-item { padding: .6rem; overflow: hidden; }
.reviews-block .otd-reviews__yelp-item iframe { width: 100%; max-width: 100%; }

/* Back to top: the very bottom of the page content, centred, outline at rest and filled only on hover. */
.back-top-sec { padding-block: 0 clamp(2rem, 1.5rem + 2vw, 3rem); }
.back-top-sec .back-top { text-align: center; margin: 0; max-width: none; }
.back-top-sec .back-top a.btn { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 1.5px solid var(--green-700); color: var(--green-800); text-decoration: none; }
.back-top-sec .back-top a.btn:hover, .back-top-sec .back-top a.btn:focus-visible { background: var(--green-800); color: #fff; }
.back-top-sec .back-top svg { transform: rotate(-90deg); width: 1em; height: 1em; }
.prose p + p, .prose .content-block > * + * { margin-top: 1.15rem; }

/* Back to top inside the related-cards section: normal spacing above, the section's own padding below (no separate strip). */
.related-services .back-top { text-align: center; margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; max-width: none; }
.related-services .back-top a.btn { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 1.5px solid var(--green-700); color: var(--green-800); text-decoration: none; }
.related-services .back-top a.btn:hover, .related-services .back-top a.btn:focus-visible { background: var(--green-800); color: #fff; }
.related-services .back-top svg { transform: rotate(-90deg); width: 1em; height: 1em; }

.prose .inner-intro .inner-image-container.cover img { object-position: 50% 30%; }
/* Text fills the article column (Kimi's 68ch measure stays for hero ledes and the closing band only). */
.prose p, .prose li, .prose blockquote, .prose dd, .legacy p, .legacy li, .with-aside .prose > * { max-width: none; }
/* Rail booking card: the Call button stays on one line at every width the rail shows. */
.aside-cta .form-card { padding: 1.7rem 1.4rem; }
.aside-cta .aside-actions .btn, .aside-cta .btn { white-space: nowrap; padding-inline: 1.1rem; justify-content: center; }
/* Call-outs with a leading icon (the Yelp invitation): the icon sits inline at the start of the sentence, sized to the text, centred on the line. */
.prose .call-out p > svg.svg-icon:first-child, .prose .call-out > p > svg.svg-icon { display: inline-block; width: .85em; height: 1.15em; vertical-align: -.2em; margin-right: .45rem; color: #d32323; fill: currentColor; }

/* Contact: the two cards are a matched pair (same padding, titles on one line, equal height). */
.contact-pair .form-card { display: flex; flex-direction: column; }
.contact-pair .card-title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .5rem; color: var(--green-950); }
.contact-pair .info-card .card-title { margin-bottom: 1.1rem; }
.contact-pair .info-card .kimi-info { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }

/* Hours: today's row in bronze everywhere, and one status line over each list (reserved height, filled by script). */
.hours-table .today dt, .hours-table .today dd, .hours-mini .today dt, .hours-mini .today dd { color: var(--gold-600); }
.foot-hours .today, .foot-hours .today * { color: var(--gold-400); }
.hours-status { min-height: 1.5em; margin: .2rem 0 .6rem; font-size: .92rem; font-weight: 700; color: var(--green-800); max-width: none; }
.hours-status.is-closed { color: var(--ink-soft); }
.info-book { margin-top: 1.2rem; }
.info-book .btn { width: 100%; justify-content: center; }
/* Reveal fail-safe: only cards and images fade in; headings and plain text blocks are always visible. */
[data-reveal]:not(.card):not(.frame):not(.form-card):not(.review-banner):not(.cta-band):not(.hero-card):not(article):not(.post-item):not(.bio-row):not(.faq-item):not(figure) { opacity: 1; transform: none; }
[data-reveal].reveal-now { transition: none !important; }

/* Patient information: intro and Contact Us under the hero, payment methods with the Financial policy section (visible). */
.pi-intro .prose { max-width: 60rem; margin-inline: auto; }
.pi-intro .hero-contact { font-size: 1.25rem; margin-top: 1.4rem; }
.pay-inline { margin-top: 1.6rem; padding: 1.2rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.pay-inline h5 { font-family: var(--font-body); font-size: 1rem; font-weight: 800; color: var(--green-950); margin: 0 0 .9rem; text-align: left; }
.pay-inline .payment { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.pay-inline .payment img { height: 34px; width: auto; max-width: none; }
.pay-inline .payment img[src*="carecredit"], .pay-inline .payment img[src*="apple-pay"] { background: var(--green-900); border-radius: 8px; padding: .4rem .7rem; box-sizing: content-box; }

/* "Call us today" closing block: Kimi's callout, so it reads as the article's closing call to action. */
.prose section.SPCTA { background: var(--green-50); border-left: 4px solid var(--gold-500); border-radius: 0 var(--radius) var(--radius) 0; padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem) clamp(1.4rem, 1rem + 2vw, 2.4rem); margin-top: 2.4rem; }
.prose section.SPCTA > * + * { margin-top: .9rem; }
.prose section.SPCTA h2 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.prose section.SPCTA .divider { display: none; }
.prose section.SPCTA a { font-weight: 700; }

/* No visible post dates: tidy card layouts without the badge. */
.post-item.mini.nodate { grid-template-columns: 1fr; }
.post-item.has-thumb:not(:has(> .date)) { }

/* ---- Posts (Waseem 5 Oct) ---- */
.post-item p { max-width: none; }
.prose .post-lead { margin: 0 0 1.4rem; height: clamp(200px, 24vw, 340px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-s); }
.prose .post-lead img { width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 0; box-shadow: none; display: block; }
.prose .post-lead.cover img { object-fit: cover; object-position: 50% 30%; }
.prose p:has(> img:only-child), .prose figure { margin-bottom: 1.4rem; }
.prose .call-out { margin-top: 1.6rem; margin-bottom: 1.2rem; }
.prose .google-callout { text-align: left; }
.prose .google-callout .yelp-ico { display: inline-block; vertical-align: -.2em; margin-right: .45rem; color: #d32323; }
.prose .google-callout .yelp-ico svg { display: inline-block; width: .85em; height: 1.15em; fill: currentColor; }
.prose .post-section { margin-top: 1.6rem; }
.prose .center-align:has(> a.btn) { margin: 1rem 0 1.4rem; text-align: left; }
.prose .sm-share-links { display: flex; align-items: center; gap: .6rem; margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.prose .sm-share-links .share-label { font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-right: .3rem; }
.prose .sm-share-links a svg { width: 20px; height: 20px; }
/* Recent articles: one rail card like the service pages' cards (title, rule, plain link list). */
.aside-cta .rail-card .rail-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0 0 .6rem; color: var(--green-950); max-width: none; }
/* Intro and lead pictures (Waseem's go 5 Oct): full width of the text column, edge to edge, no tint, nothing cut off. pic-wide: own ratio, uncropped. pic-frame: 16:9 frame (max 450px), object-fit cover, focal point inline per picture.
   pic-contain: white-background illustration shown whole on a white frame. No filters; the browser's own scaling (image-rendering: auto). */
.prose .inner-intro .inner-image-container, .prose .post-lead { margin: 0 0 1.4rem; max-width: none; width: 100%; padding: 0; border: 0; background: none; border-radius: var(--radius); overflow: hidden; display: block; line-height: 0; height: auto; }
.prose .inner-intro .inner-image-container a, .prose .inner-intro .inner-image-container picture { display: block; width: 100%; height: 100%; }
.prose .inner-intro .inner-image-container img, .prose .post-lead img { display: block; width: 100%; image-rendering: auto; filter: none; border-radius: 0; box-shadow: none; max-width: none; }
.prose .inner-intro .inner-image-container.pic-wide img, .prose .post-lead.pic-wide img { height: auto; max-height: none; object-fit: fill; }
.prose .inner-intro .inner-image-container.pic-frame, .prose .post-lead.pic-frame, .prose .inner-intro .inner-image-container.pic-contain, .prose .post-lead.pic-contain { aspect-ratio: 16 / 9; max-height: 450px; }
.prose .inner-intro .inner-image-container.pic-frame img, .prose .post-lead.pic-frame img { height: 100%; object-fit: cover; }
.prose .inner-intro .inner-image-container.pic-contain, .prose .post-lead.pic-contain { background: #fff; border: 1px solid var(--line); }
.prose .inner-intro .inner-image-container.pic-contain img, .prose .post-lead.pic-contain img { height: 100%; object-fit: contain; }

/* Terminology page: closing callout and the Helpful related links card in Kimi's components. */
.legacy section.SPCTA { background: var(--green-50); border-left: 4px solid var(--gold-500); border-radius: 0 var(--radius) var(--radius) 0; padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem) clamp(1.4rem, 1rem + 2vw, 2.4rem); margin: 2.4rem 0 0; }
.legacy section.SPCTA .row, .legacy section.SPCTA .col { display: block; padding: 0; margin: 0; width: auto; }
.legacy section.SPCTA > * + *, .legacy section.SPCTA .col > * + * { margin-top: .9rem; }
.legacy section.SPCTA h2 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); text-align: left; }
.legacy section.SPCTA .divider { display: none; }
.legacy section.SPCTA a { font-weight: 700; }
.legacy .SPTS { max-width: 36rem; margin: 2rem 0 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-s); display: block; }
.legacy .SPTS .col { display: block; width: auto; padding: 0; }
.legacy .SPTS h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0 0 .6rem; color: var(--green-950); text-align: left; }
.legacy .SPTS .divider { border: 0; border-top: 1px solid var(--line); margin: .4rem 0 .7rem; height: 0; }
.legacy .SPTS ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .92rem; }
.legacy .SPTS li { color: var(--ink-soft); }
.legacy .SPTS a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legacy .SPTS br { display: none; }
.legacy .SPBC .divider, .legacy-terms .SPBC { display: none; }

/* Search results and 404 (Kimi list cards, search field, link cards). */
.sys-page { max-width: none; }
.sys-search { max-width: none; margin: 0 0 2rem; }
.sys-search .search-form { display: flex; gap: .6rem; align-items: center; margin: 0; flex-wrap: nowrap; justify-content: flex-start; }
.sys-search .input-field { flex: 1; min-width: 0; }
.sys-search .search-form input[type="search"] { width: 100%; min-width: 0; border: 1.5px solid #8a8580; border-radius: var(--radius-s); padding: .75rem 1rem; background: var(--cream); font: inherit; }
.sys-search .search-submit { border: 0; border-radius: 999px; padding: .8rem 1.4rem; font-weight: 800; background: var(--gold-500); color: var(--green-950); cursor: pointer; }
.sys-search .label-icon, .sys-search .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sys-result { grid-template-columns: 1fr; }
.sys-empty { text-align: left; margin-top: 1rem; }
.sys-empty .btn-row { display: flex; gap: .8rem; justify-content: flex-start; flex-wrap: wrap; margin-top: 1rem; }
.sys-links { max-width: none; margin: 0; }
.sys-links li a span strong { display: block; color: var(--green-950); }
.pagination .pg.dots { border: 0; }

/* /services/: "services offered" as a section head over a grid of cards. The section is white, between the tinted "Good habits" band above and the cream closing band below. */
.section.paper { background: #fff; border-block: 1px solid var(--line); }
.svc-offered .section-head { max-width: 52rem; }
.svc-offered .section-head h2 { margin-bottom: 1rem; }
.svc-offered .section-head p { max-width: 68ch; margin-inline: auto; font-size: 1.04rem; line-height: 1.7; color: var(--ink-soft); }
.svc-info-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 760px) { .svc-info-grid { grid-template-columns: repeat(2, 1fr); } }
.svc-info-grid .card { display: flex; flex-direction: column; height: 100%; padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); }
.svc-info-grid .card:hover { transform: none; }
.svc-info-grid .card h3 { font-size: 1.35rem; margin-bottom: .7rem; }
.svc-info-grid .card p { font-size: 1rem; line-height: 1.7; margin: 0; }
.svc-info-grid .card p a { color: var(--green-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* /patient-information/: intro and Contact Us under the hero in the page container, two columns (lede on the left, card on the right), stacked on phones. */
.pi-intro-row { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
.pi-lede { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); line-height: 1.6; color: var(--ink); max-width: none; margin: 0; }
.pi-contact { padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.pi-contact h3 { font-size: 1.3rem; margin: 0 0 .7rem; }
.pi-contact p { margin: 0 0 .8rem; color: var(--ink-soft); max-width: none; }
.pi-contact .pi-addr { color: var(--green-950); font-weight: 600; line-height: 1.6; }
.pi-contact p a[href^="tel:"] { white-space: nowrap; font-weight: 700; color: var(--green-800); }
.pi-contact .pi-dir { margin: 0; font-size: .92rem; }
.pi-contact .pi-dir a { font-weight: 700; color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

/* Memberships row: two equal white chips, centred, under Kimi's eyebrow. */
.member-row { margin-top: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); text-align: center; }
.member-row .eyebrow { justify-content: center; margin-bottom: 1.2rem; }
.member-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.2rem; }
.member-chip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); height: 112px; min-width: 200px; padding: 1.1rem 2rem; display: grid; place-items: center; }
.member-chip img { display: block; width: auto; max-width: 100%; }
.member-chip--ada img { height: 72px; }
.member-chip--cda img { height: 72px; width: auto; }
.member-chip--sdcds img { height: auto; width: 220px; }
.home-members { padding-top: 0; }
@media (max-width: 480px) { .member-chip { width: min(100%, 320px); } .member-chip--sdcds img { width: 200px; } }

/* Contact Us card at full container width: two equal halves, both top-aligned (title and sentence left, address and directions right); one column on phones. */
.pi-contact { padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.pi-contact-body { display: grid; grid-template-columns: 1fr; gap: 1rem 3rem; }
@media (min-width: 760px) { .pi-contact-body { grid-template-columns: 1fr 1fr; align-items: start; } }
.pi-contact-body h3 { margin: 0 0 .7rem; font-size: 1.3rem; line-height: 1.3; }
.pi-contact-body .pi-sent p, .pi-contact-body .pi-where p:last-child { margin-bottom: 0; }
.pi-contact-body .pi-where .pi-addr { margin-top: 0; font-size: 1.3rem; line-height: 1.3; font-family: var(--font-display); font-weight: 600; color: var(--green-950); }

/* /reviews/: every text line over the review cards uses the whole container (the same grid as the cards); Google and Yelp cards share one 3-column grid; Yelp is its own section with Kimi's heading style. */
.reviews-block .otd-reviews__attrib, .reviews-block .otd-reviews__yelp-label, .reviews-block .otd-reviews__yelp-note, .reviews-block .otd-reviews__summary { width: 100%; max-width: none; justify-self: stretch; box-sizing: border-box; }
.reviews-block .otd-reviews__cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); }
.reviews-block .otd-reviews__yelp { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); border-top: 1px solid var(--line); }
.reviews-block .otd-reviews__yelp-label { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.15; color: var(--ink); text-align: center; }
.reviews-block .otd-reviews__yelp-note { margin: .7rem 0 1.8rem; font-size: 1rem; }
/* Two buttons stacked as a pair are identical: same width (the whole column), same height, same padding, centred label and icon. */
.review-banner .btn-pair .btn { justify-self: stretch; width: 100%; min-height: 52px; height: 52px; padding-block: 0; justify-content: center; }
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn:not(:only-child) { width: 100%; justify-content: center; }
  .reviews-block .otd-reviews__actions { flex-direction: column; align-items: stretch; }
  .reviews-block .otd-reviews__actions a { width: 100%; }
}

/* Memberships sentence: above the logos on About, a caption under them on the home page. */
.member-sentence { max-width: 68ch; margin: 0 auto 1.4rem; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; }
.member-chips + .member-sentence { margin: 1.4rem auto 0; max-width: none; font-size: .95rem; }

/* About: short bios. The block is no taller than its photo needs; the link sits under the teaser. */
.bios-stack .bio-row { align-items: center; }
.bios-stack .bio-text .read-bio { margin-top: 1rem; }
.bios-stack .bio-text .read-bio a { font-weight: 700; color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.bios-stack .bio-text .read-bio a:hover { color: var(--green-900); }

/* /reviews/: both blocks end with a centred outline button; card rows are centred (a lone last card sits in the middle) in the Google and Yelp grids alike. */
.reviews-block .otd-reviews__more, .reviews-block .otd-reviews__yelp-more { max-width: none; width: 100%; text-align: center; margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 0; }
.reviews-block .otd-reviews__more-link, .reviews-block .otd-reviews__yelp-link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8rem 1.6rem; border-radius: 999px; border: 1.5px solid var(--green-700); background: transparent; color: var(--green-800); font-weight: 800; text-decoration: none; transition: background .2s, color .2s; }
.reviews-block .otd-reviews__more-link:hover, .reviews-block .otd-reviews__more-link:focus-visible, .reviews-block .otd-reviews__yelp-link:hover, .reviews-block .otd-reviews__yelp-link:focus-visible { background: var(--green-800); color: #fff; }
.reviews-block .otd-reviews__cards, .reviews-block .otd-reviews__yelp-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.reviews-block .otd-review, .reviews-block .otd-reviews__yelp-item { flex: 0 0 calc((100% - 2.4rem) / 3); max-width: calc((100% - 2.4rem) / 3); box-sizing: border-box; }
@media (max-width: 1000px) { .reviews-block .otd-review, .reviews-block .otd-reviews__yelp-item { flex-basis: calc((100% - 1.2rem) / 2); max-width: calc((100% - 1.2rem) / 2); } }
@media (max-width: 640px) { .reviews-block .otd-review, .reviews-block .otd-reviews__yelp-item { flex-basis: 100%; max-width: 100%; } }

/* /services/ category lists: columns chosen per group (item count) and per container width so that no card sits alone on a row; equal card heights per row with the name centred. Search field and button are one centred control. */
.legacy-services .svc-cat { container-type: inline-size; }
.legacy-services .svc-list { grid-template-columns: 1fr; }
.legacy-services .svc-list li { display: flex; }
.legacy-services .svc-list li > a { flex: 1; width: 100%; align-items: center; }
@container (min-width: 480px) {
  .legacy-services .svc-n-1 { grid-template-columns: repeat(1, 1fr); }
  .legacy-services .svc-n-2 { grid-template-columns: repeat(2, 1fr); }
  .legacy-services .svc-n-3 { grid-template-columns: repeat(1, 1fr); }
  .legacy-services .svc-n-4 { grid-template-columns: repeat(2, 1fr); }
  .legacy-services .svc-n-5 { grid-template-columns: repeat(1, 1fr); }
  .legacy-services .svc-n-6 { grid-template-columns: repeat(2, 1fr); }
  .legacy-services .svc-n-7 { grid-template-columns: repeat(1, 1fr); }
  .legacy-services .svc-n-8 { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 760px) {
  .legacy-services .svc-n-1 { grid-template-columns: repeat(1, 1fr); }
  .legacy-services .svc-n-2 { grid-template-columns: repeat(2, 1fr); }
  .legacy-services .svc-n-3 { grid-template-columns: repeat(3, 1fr); }
  .legacy-services .svc-n-4 { grid-template-columns: repeat(2, 1fr); }
  .legacy-services .svc-n-5 { grid-template-columns: repeat(3, 1fr); }
  .legacy-services .svc-n-6 { grid-template-columns: repeat(3, 1fr); }
  .legacy-services .svc-n-7 { grid-template-columns: repeat(4, 1fr); }
  .legacy-services .svc-n-8 { grid-template-columns: repeat(4, 1fr); }
}
@container (min-width: 1100px) {
  .legacy-services .svc-n-1 { grid-template-columns: repeat(1, 1fr); }
  .legacy-services .svc-n-2 { grid-template-columns: repeat(2, 1fr); }
  .legacy-services .svc-n-3 { grid-template-columns: repeat(3, 1fr); }
  .legacy-services .svc-n-4 { grid-template-columns: repeat(4, 1fr); }
  .legacy-services .svc-n-5 { grid-template-columns: repeat(5, 1fr); }
  .legacy-services .svc-n-6 { grid-template-columns: repeat(3, 1fr); }
  .legacy-services .svc-n-7 { grid-template-columns: repeat(4, 1fr); }
  .legacy-services .svc-n-8 { grid-template-columns: repeat(4, 1fr); }
}
.legacy-services .svc-n-9, .legacy-services .svc-n-10, .legacy-services .svc-n-11, .legacy-services .svc-n-12 { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.legacy-services .services-search .search-form { width: 100%; max-width: 560px; margin-inline: auto; flex-wrap: nowrap; justify-content: center; gap: .6rem; }
.legacy-services .services-search .input-field { flex: 1 1 auto; min-width: 0; }
.legacy-services .services-search .search-form input[type="search"] { width: 100%; }
.legacy-services .svc-list { grid-auto-rows: 1fr; }

/* Question blocks: a tidy two-column link list (one column on phones). "Questions answered on this page" rows jump within the page and show a down arrow; "People also ask" rows go to other pages and show a right arrow. Section spacing between the blocks. */
.prose .faq-section { display: grid; grid-template-columns: 1fr; column-gap: 2.4rem; align-content: start; }
@media (min-width: 760px) { .prose .faq-section { grid-template-columns: 1fr 1fr; } }
.prose .faq-section > h2, .prose .faq-section > .divider, .prose .faq-section > .faq, .prose .faq-section > :not(p.questions) { grid-column: 1 / -1; }
.prose .faq-section > .divider { display: none; }
.prose .faq-section > h2 { margin: 0 0 .8rem; text-align: left; }
.prose .faq-section > h2 ~ h2 { margin-top: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); }
.prose p.questions { display: block; margin: 0; padding: 0; border-bottom: 1px solid var(--line); max-width: none; }
.prose p.questions a { display: flex; align-items: flex-start; gap: .8rem; background: none; border: 0; border-radius: 0; padding: .85rem .1rem; color: var(--green-900); font-weight: 600; font-size: 1rem; line-height: 1.4; text-decoration: none; }
.prose p.questions a::before { content: ""; flex: none; width: 1.05rem; height: 1.4em; background-color: var(--gold-600); -webkit-mask: var(--q-ico) center / 1rem 1rem no-repeat; mask: var(--q-ico) center / 1rem 1rem no-repeat; --q-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.prose p.questions.q-up a::before { --q-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); }
.prose p.questions.q-down a::before { --q-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.prose p.questions a:hover, .prose p.questions a:focus-visible { background: var(--green-50); color: var(--green-950); }

/* Primary bronze buttons (Waseem's decision, 5 Oct): white label and icon on the darker bronze #986e45 (4.51:1; Kimi's #b08050 with white is 3.47). The fill against cream 4.22, white 4.51, tint 4.04, dark section 3.08, hero/band/footer 3.48 (all above 3:1); the fill is unchanged on hover (Kimi's lift and shadow only), so the label stays 4.51; the gold focus ring is 3.1 to 4.5 against every background. Decorative bronze stays Kimi's. */
.btn-primary, .cf-card .wpcf7-submit, .legacy .search-form .search-submit, .sys-search .search-submit, .reviews-block .otd-reviews__actions a.otd-book--primary { background: #986e45; border-color: #986e45; color: #fff; box-shadow: 0 8px 22px rgba(152, 110, 69, .38); }
.btn-primary:hover, .btn-primary:focus-visible, .cf-card .wpcf7-submit:hover, .legacy .search-form .search-submit:hover, .sys-search .search-submit:hover, .reviews-block .otd-reviews__actions a.otd-book--primary:hover { background: #986e45; color: #fff; box-shadow: 0 12px 28px rgba(152, 110, 69, .5); }
.btn-primary svg { color: #fff; }

/* The phone-menu Book Online button inherited the menu's translucent white link colour (white 92% on bronze, about 3.3:1): its label is white like every other primary bronze button (4.51:1). */
.site-header .main-nav a.btn-primary, .site-header:not(.solid):not(.inner) .main-nav a.btn-primary { color: #fff; }

/* /poway-ca/ topic groups: jump buttons, then one section per group (alternating background) with the links as icon rows in columns that flow down (no single link alone in a column): 4 columns on desktop, 3, 2, 1 on phones. */
.hub-jump ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.hub-jump .btn { padding: .55rem 1.1rem; font-size: .92rem; }
.hub-group .container { container-type: inline-size; }
.hub-group h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin: 0 0 1.2rem; scroll-margin-top: 6rem; }
.hub-group .svc-list.hub-list { display: block; column-count: 1; column-gap: 1rem; }
.hub-group .svc-list.hub-list > li { break-inside: avoid; margin: 0 0 .9rem; }
@container (min-width: 480px) {
  .hub-group .svc-list.hub-list.hub-w2-1 { column-count: 1; }
  .hub-group .svc-list.hub-list.hub-w2-2 { column-count: 2; }
  .hub-group .svc-list.hub-list.hub-w2-3 { column-count: 3; }
  .hub-group .svc-list.hub-list.hub-w2-4 { column-count: 4; }
}
@container (min-width: 760px) {
  .hub-group .svc-list.hub-list.hub-w3-1 { column-count: 1; }
  .hub-group .svc-list.hub-list.hub-w3-2 { column-count: 2; }
  .hub-group .svc-list.hub-list.hub-w3-3 { column-count: 3; }
  .hub-group .svc-list.hub-list.hub-w3-4 { column-count: 4; }
}
@container (min-width: 1100px) {
  .hub-group .svc-list.hub-list.hub-w4-1 { column-count: 1; }
  .hub-group .svc-list.hub-list.hub-w4-2 { column-count: 2; }
  .hub-group .svc-list.hub-list.hub-w4-3 { column-count: 3; }
  .hub-group .svc-list.hub-list.hub-w4-4 { column-count: 4; }
}
#poway-ca, .hub-group { scroll-margin-top: 6rem; }
.hub-jump .btn { text-decoration: none; }

/* Closed-state booking button: it takes the same primary style as every bronze call to action (Waseem 5 Oct): white label and icon on #986e45, fill unchanged on hover. */
html.is-closed :is(.btn-ghostlight, .btn-outline)[data-otd-booking-track], html.is-closed :is(.btn-ghostlight, .btn-outline)[data-otd-booking-track]:hover, html.is-closed :is(.btn-ghostlight, .btn-outline)[data-otd-booking-track]:focus-visible { background: #986e45; border-color: #986e45; color: #fff; box-shadow: 0 8px 22px rgba(152, 110, 69, .38); }
html.is-closed :is(.btn-ghostlight, .btn-outline)[data-otd-booking-track]:hover { box-shadow: 0 12px 28px rgba(152, 110, 69, .5); }
html.is-closed :is(.btn-ghostlight, .btn-outline)[data-otd-booking-track] svg { color: #fff; }

/* Hero Google-rating stat: the label may carry a second line (empty until cleared). */



/* Phone menu (Waseem 5 Oct): the list is vertically centred in the overlay like Kimi's (grid, centred), with Book Online as the last item of the block; the overlay scrolls when the list is taller than the screen. */
@media (max-width: 1279px) {
  .site-header .main-nav { align-items: normal; place-items: normal center; overflow-y: auto; }
  .site-header .main-nav > ul { margin-block: auto; }
}
/* Phone menu, second pass (Waseem 5 Oct): the list is centred in the space BELOW the header (equal gap above Services and below Book Online), and the three dropdown chevrons are the same size. */
@media (max-width: 1279px) {
  .site-header .main-nav { padding: 84px 20px 0; place-items: normal center; }
  .site-header .main-nav .chev { width: 10px; height: 10px; }
}

/* Phone hero (Dalia's hero-phone.css values, 5 Oct), at the specificity our hero markup needs: the badge on one line, and the picture anchored to its right edge so the ceiling light slides off the left. */
/* The badge is the largest size that still fits on one line (Waseem 5 Oct): the text is about 23.4 times the font size wide, the column is the viewport minus 40px, the padding takes 28px; capped at 14px, never under 12px. */
@media (max-width: 480px) {
  .hero h1 .hero-eyebrow { font-size: clamp(12px, calc((100vw - 76px) / 23.4), 14px); letter-spacing: .02em; padding: 7px 14px; white-space: nowrap; width: max-content; max-width: 100%; }
}
@media (max-width: 349px) {
  .hero h1 .hero-eyebrow { white-space: normal; width: auto; }
}
@media (max-width: 600px) {
  .hero .hero-media img { object-position: 100% 42% !important; }
}

/* Phone menu Book Online: identical to the standard primary button (padding .95rem 1.7rem, 52px, weight 700, pill, shadow); the nav link rules were shrinking it. */
.site-header .main-nav .nav-book a.btn { padding: .95rem 1.7rem; min-height: 52px; font-weight: 700; border-radius: 999px; font-size: 1rem; box-shadow: 0 8px 22px rgba(152, 110, 69, .38); }

/* Home page, phones: the floating button (Call Now, or Book Online when the office is closed) stays hidden while the hero's Book an Appointment button is on screen and fades in once it has scrolled out of view; it is not focusable or clickable while hidden. */
html.fab-gated .call-fab { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s; }
html.fab-gated .call-fab.fab-show { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { html.fab-gated .call-fab { transition: none; } }

/* Phone menu, third pass (Waseem 5 Oct, real phone): (1) the overlay is as tall as the VISIBLE area (dvh, then svh, then vh), so the browser's address and tool bars do not push the block low; (2) every label is centred on its own words: the chevron of Services and About hangs to the right of the label (grid, label in the middle column) and the Patient Education chevron is taken out of the flow. */
@media (max-width: 1279px) {
  .site-header .main-nav { bottom: auto; height: 100vh; height: 100svh; height: 100dvh; }
  .site-header .main-nav > ul > li.has-sub { display: grid; grid-template-columns: 1fr auto 1fr; justify-items: center; align-items: center; }
  .site-header .main-nav > ul > li.has-sub > a { grid-column: 2; }
  .site-header .main-nav > ul > li.has-sub > .sub-toggle { grid-column: 3; justify-self: start; margin-left: 0; min-width: 32px; padding: 0 .35rem; }
  .site-header .main-nav > ul > li.has-sub > .sub-label { grid-column: 2; position: relative; }
  .site-header .main-nav > ul > li.has-sub > .sub-label .chev { position: absolute; left: calc(100% + .45em); top: calc(50% - 6px); margin-left: 0; }
  .site-header .main-nav > ul > li.has-sub > .sub { grid-column: 1 / -1; justify-self: center; }
}

/* Yelp heading without the rating line (Waseem 6 Oct: the hand-entered Yelp line goes): the cards sit the same distance under the heading as under any Kimi section heading (.section-head margin-bottom). */
.reviews-block .otd-reviews__yelp-label + .otd-reviews__yelp-list { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

/* 0.9.3: Tarek's device-pass minors (5 Oct, stamp 6200). */
/* (1) The CareCredit and Apple Pay logos keep their own shape: the 47px height came from the box, not from the picture. */
.pay-section .payment img, .pay-inline .payment img { height: auto; max-height: 34px; width: auto; object-fit: contain; }
/* (3) Home hero numbers: held invisible until the count starts from 0, so the final value never shows and then drops. A 0.3 s fallback shows the printed numbers if the page script does not run; reduced motion shows them at once. */
@keyframes otd-count-show { to { opacity: 1; } }
.hero-trust .stat strong[data-count]:not(.is-counting) { opacity: 0; animation: otd-count-show 0s .3s forwards; }
@media (prefers-reduced-motion: reduce) { .hero-trust .stat strong[data-count]:not(.is-counting) { opacity: 1; animation: none; } }
/* (4) Desktop menu: Escape dismisses a panel that hover or focus is holding open, until the pointer or focus leaves it. */
.site-header .main-nav .has-sub.esc-closed > .sub { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
/* (5) Contact hours: the time range stays on one line at 390px. */
.hours-table dd { white-space: nowrap; }
.hours-table div { gap: .6rem; }
/* (7) Landing page hero: the tick icons are bronze on the dark hero (they inherited a dark grey). */
.lp-hero .checklist li svg { color: var(--gold-400); }
/* (8) Accessibility tab on phones: exactly the 20px text gutter, so it cannot touch the first letters of the hero stats. */
@media (max-width: 600px) {
  .awda-sticky a.btn-large { width: 20px; }
  .awda-sticky a.btn-large svg { width: 14px; height: 14px; }
}

/* 0.9.3 (Karim 5 Oct, via Mohsen): the service intro picture is shown on tablets and phones too (above the opening text, in the 0.9.2 frame; the picture element, its jpg source, width, height and lazy loading are the same as on desktop). */
@media (max-width: 992px) {
  .prose .inner-intro .hide-on-med-and-down { display: block; }
}
/* Service pages and posts with the right rail (Waseem 6 Oct): the first content block (picture and opening text) starts at the same height as the rail's first card. */
@media (min-width: 961px) {
  .with-aside > .prose > .divider-thin:first-child { display: none; }
  .with-aside > .prose > :first-child:not(.divider-thin) { margin-top: 0; }
  .with-aside .prose .inner-intro, .with-aside .prose .page-data { margin-top: 0; }
}
/* /services/: the "Oak Tree Dental services offered" introduction runs wider on desktop so it reads shorter (Waseem 5 Oct; no text change). */
@media (min-width: 1100px) {
  .svc-offered .section-head { max-width: min(100%, 58rem); }
  .svc-offered .section-head p { max-width: none; }
}

/* 0.9.9 (Dalia, design/kimi/POST-IMAGES.md, approved by Waseem 7 Oct): the 600 x 400 lead picture of the older posts fills the 804 column as a 3:2 frame, the first paragraph starts below it. Only the first image of the first paragraph. */
.prose .DGspeakableP1 > img:first-child { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-s); margin: 0 0 1.4rem; }

/* 0.9.13 (Dalia, design/kimi/SERVICE-DISCLAIMER.md; Mona's results note, Waseem approved 7 Oct): the note at the foot of every service page and the permanent* footnote link. */
p.disclaimer.svc-disclaimer { font-size: .85rem; line-height: 1.55; color: var(--ink-soft); max-width: none; margin: 1.6rem 0 0; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 560px) { p.disclaimer.svc-disclaimer { font-size: .875rem; margin-top: 1.4rem; } }
p.svc-disclaimer:target { background: var(--gold-100); border-radius: var(--radius-s); padding: .5rem .7rem; margin-left: -.7rem; }
p.svc-disclaimer .note-back { display: block; margin-top: .4rem; }
a.note-ref { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
a.note-ref sup { font-size: .75em; vertical-align: super; line-height: 0; }

/* the note at the end of the home page: air before the closing band (home page only) */
.home-results-note { padding-top: 1.4rem; padding-bottom: 2rem; }
.home-results-note p.disclaimer.svc-disclaimer { margin-top: 0; }

/* 0.9.14 (Dalia, SERVICE-DISCLAIMER.md home-page placement rule): the home note is the last child of the questions block's narrow container, under "Established in 1974." */
p.disclaimer.svc-disclaimer.faq-home-note { margin: 1.6rem 0 0; max-width: none; }

/* 0.9.16 (Dalia v2 mock): the Google G mark takes the Yelp icon's place at the same box size, on service pages and posts */
.google-g, .prose p .google-g { display: inline-block; width: 1.05em; height: 1.05em; max-width: none; vertical-align: middle; position: relative; top: -.1em; margin-right: .45rem; object-fit: contain; } /* Dalia 8 Oct: 18 x 18 px at 1440, 17 px at 390, centred on the first line */

/* 0.9.17 (Dalia, TEAM-PAGES.md): the team page rows are 240 px photo / 842 px text in the 1180 container at 861 px and up, the photo alternating sides; one column below, photo 260 px wide and 16 px padding at 560 px and below. */
.bios-stack .bio-row { grid-template-columns: 1fr; gap: 1.2rem; align-items: center; }
.bios-stack .bio-row .bio-photo { max-width: 260px; }
.bios-stack .bio-text p { max-width: none; }
@media (min-width: 861px) {
  .bios-stack .bio-row { grid-template-columns: 240px 1fr; gap: 2rem; }
  .bios-stack .bio-row:nth-child(even) { grid-template-columns: 1fr 240px; }
  .bios-stack .bio-row:nth-child(even) .bio-photo { order: 2; }
  .bios-stack .bio-row .bio-photo { max-width: none; }
}
@media (max-width: 560px) { .bios-stack .bio-row { padding: 1rem; } }
.bios-stack .bio-photo img { width: 100%; height: auto; }

/* ==========================================================================
   FONT FALLBACKS (Dalia): docs/marketing/design/kimi/font-fallbacks.css, verbatim
   ========================================================================== */

/* Oak Tree Dental - Kimi design: METRIC-MATCHED FALLBACK FACES for Fraunces, Inter and Cinzel. Owner: Dalia. 4 Oct 2026.
   While a self-hosted font swaps in (font-display: swap), the browser shows a system face first. These faces make that system face the same width
   as the real one, so headings and paragraphs do not re-wrap or move when the swap happens (no layout shift from fonts).
   They load nothing: each src is a local() lookup of a font already on the visitor's device. If the device has none of them, the stack falls through to Kimi's own fallbacks.
   Paste after the three @font-face blocks in glue.css; the :root and .wordmark rules at the bottom replace Kimi's two font stacks.
   Measured in Chromium against the hosted files on staging, real site strings. Fallback width vs real font: Fraunces 600 is +4.7% at 67px (h1), +0.5% at 48, -0.4% at 40, -1.2% at 32, -2.0% at 24; Inter 400/600/700 within 0.7%, 800 -2.0%; Cinzel wordmark +0.8%. */

/* Fraunces (headings are weight 600; 500 is used twice) -> Georgia / Georgia Bold. Georgia is on Windows and Mac. */
@font-face { font-family: "Fraunces Fallback"; font-weight: 500; src: local("Georgia"), local("Georgia Regular");
  size-adjust: 104%; ascent-override: 94%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; font-weight: 600; src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 91%; ascent-override: 107.5%; descent-override: 28%; line-gap-override: 0%; }

/* Inter (body 400, nav and labels 600, buttons 700, a few 800) -> Arial / Arial Bold (Helvetica on Apple devices) */
@font-face { font-family: "Inter Fallback"; font-weight: 400 500; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 106.3%; ascent-override: 91.2%; descent-override: 22.7%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 600 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica Bold");
  size-adjust: 102%; ascent-override: 95%; descent-override: 23.6%; line-gap-override: 0%; }

/* Cinzel (the wordmark only, 600, uppercase, 0.07em spacing) -> Georgia Bold */
@font-face { font-family: "Cinzel Fallback"; font-weight: 500 600; src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 92.5%; ascent-override: 105.5%; descent-override: 40.2%; line-gap-override: 0%; }

/* The stacks. Kimi's originals are kept after the new faces, so a device without Georgia or Arial still gets what Kimi chose. */
:root {
  --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.brand .wordmark strong { font-family: "Cinzel", "Cinzel Fallback", "Fraunces", Georgia, serif; }

/* ==========================================================================
   HEADER DROPDOWNS (Dalia): docs/marketing/design/kimi/nav-dropdowns.css, verbatim
   ========================================================================== */

/* Oak Tree Dental - Kimi design: HEADER DROPDOWN PANELS and PHONE DRAWER SUBMENUS. Owner: Dalia. 4 Oct 2026.
   Replaces Michael's functional-only block ("Header menu: dropdowns. FUNCTIONAL ONLY") in glue.css. Load after Kimi's style.css and glue.css.
   Menu content, order and behaviour are ours and unchanged (hover, focus-within, the .sub-toggle button, .open, Esc). Only the look changes.
   Markup it expects (Michael's): li.has-sub > a + button.sub-toggle > i.chev + ul.sub > li (li.sub-heading = "View all ..."); a parent with no page is li.has-sub > button.sub-label + ul.sub.
   Tokens are Kimi's: --paper, --line, --ink, --radius, --radius-s, --gold-500 (#b08050), --gold-600 (#8e663a after the a11y overlay), --green-900 (#242322), --font-body, --font-display. */

/* ---------- Shared: the list itself ---------- */
.main-nav .sub { list-style: none; margin: 0; padding: .55rem; text-align: left; white-space: normal; }
.main-nav .sub li { margin: 0; break-inside: avoid; }
.main-nav .sub a {
  display: flex; align-items: center; min-height: 44px; padding: .5rem .9rem;
  font-family: var(--font-body); font-size: .95rem; font-weight: 500; line-height: 1.3;
  color: var(--ink) !important; text-decoration: none; border-radius: var(--radius-s);
  transition: background-color .2s, color .2s;
}
.main-nav .sub a::after { display: none; } /* Kimi's growing underline belongs to the top-level links only */
.main-nav .sub .sub-heading a {
  font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600) !important;
  justify-content: space-between; gap: .8rem; border-radius: var(--radius-s) var(--radius-s) 0 0;
  border-bottom: 1px solid var(--line); margin-bottom: .35rem; padding-bottom: .65rem;
}
.main-nav .sub .sub-heading a::before { /* the arrow after "View all ..." */
  content: ""; order: 2; width: .9em; height: .9em; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--ease-out);
}
.main-nav .sub .sub-heading a:hover::before { transform: translateX(3px); }
.main-nav .sub a:hover, .main-nav .sub a:focus-visible { background: #f6f2ea; color: var(--green-900) !important; }
.main-nav .sub .sub-heading a:hover, .main-nav .sub .sub-heading a:focus-visible { color: var(--gold-600) !important; }
.main-nav .sub a:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.main-nav .sub a[aria-current="page"] { color: var(--green-900) !important; background: #f6f2ea; box-shadow: inset 3px 0 0 var(--gold-500); }

/* Labels never wrap; the toggle sits on the same line as its link (Michael's inline-block pair wrapped between 961 and 1280px). */
.main-nav > ul > li { display: flex; align-items: center; white-space: nowrap; }
.main-nav > ul > li > a, .main-nav .sub-label, .btn-header { white-space: nowrap; }

/* The small button that opens a panel for keyboards and touch. */
.main-nav .sub-toggle, .main-nav .sub-label { transition: color .2s; }
.main-nav .sub-label { min-height: 44px; }
.main-nav .sub-toggle { min-width: 32px; min-height: 44px; margin-left: -.35rem; padding: 0 .35rem; border-radius: var(--radius-s); }
.main-nav .sub-toggle:focus-visible, .main-nav .sub-label:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.main-nav .chev { width: .46em; height: .46em; border-width: 2px; transition: transform .25s var(--ease-out); }

/* ---------- Desktop: the glass panel ---------- */
@media (min-width: 1280px) {
  .main-nav .sub {
    display: block; position: absolute; top: calc(100% + 1.6rem); left: -.9rem; z-index: 130;
    min-width: 15.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; /* solid: a backdrop blur nested inside Kimi's already-blurred header renders see-through and the hero shows through */
    border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem;
    box-shadow: 0 22px 48px rgba(46, 44, 42, .18), 0 4px 12px rgba(46, 44, 42, .08);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s, transform .3s var(--ease-out), visibility 0s linear .3s;
  }
  .main-nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -1.6rem; height: 1.6rem; } /* hover bridge: no dead zone between link and panel */
  /* The panel is as tall as its list needs; long lists flow into columns so Services (33 links) is not a 1,300px strip. */
  .main-nav .sub:has(> li:nth-child(n+8))  { column-count: 2; column-gap: .4rem; width: 31rem; max-height: none; }
  .main-nav .sub:has(> li:nth-child(n+24)) { column-count: 3; width: 45rem; max-height: none; }
  .main-nav .sub .sub-heading { column-span: all; }
  .main-nav .has-sub:hover > .sub, .main-nav .has-sub:focus-within > .sub, .main-nav .has-sub.open > .sub {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .2s, transform .3s var(--ease-out), visibility 0s;
  }
  /* Keep a wide panel on screen: the last menu item opens leftwards from its right edge. */
  .main-nav li.has-sub:last-child > .sub { left: auto; right: -.9rem; }
  /* The parent link keeps its bronze underline and the chevron turns while the panel is open. */
  .main-nav .has-sub:hover > a::after, .main-nav .has-sub:focus-within > a::after, .main-nav .has-sub.open > a::after { transform: scaleX(1); }
  .main-nav .has-sub:hover > .sub-toggle .chev, .main-nav .has-sub.open > .sub-toggle .chev, .main-nav .has-sub:hover > .sub-label .chev, .main-nav .has-sub.open > .sub-label .chev { transform: rotate(225deg) translate(-12%, -12%); }
}
@media (min-width: 1280px) and (max-height: 760px) { .main-nav .sub a { min-height: 40px; padding-block: .4rem; } }
/* Our four-item menu has longer labels than Kimi's seven, so between 961 and 1180px the phone number collapses to its icon (the link keeps its aria-label) and the wordmark stays on two lines. */
@media (min-width: 1280px) and (max-width: 1180px) {
  .header-phone span { display: none; }
  .header-phone { min-width: 44px; min-height: 44px; justify-content: center; }
  .brand .wordmark, .brand .wordmark strong, .brand .wordmark span { white-space: nowrap; }
  .brand .wordmark span { letter-spacing: .16em; }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav .sub, .main-nav .has-sub:hover > .sub, .main-nav .has-sub.open > .sub, .main-nav .has-sub:focus-within > .sub { transition: none; transform: none; }
}

/* ---------- Phone and tablet (960px and below): submenus inside Kimi's full-screen charcoal drawer ---------- */
@media (max-width: 1279px) {
  .main-nav { overflow-y: auto; place-items: start center; padding: 6.5rem 1.25rem 4rem; }
  .main-nav > ul > li { justify-content: center; }
  .main-nav .has-sub { flex-wrap: wrap; }
  .main-nav .sub-label { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: #fff !important; }
  .main-nav .sub-toggle { min-width: 44px; margin-left: .2rem; color: #fff; }
  .main-nav .has-sub.open > .sub-toggle, .main-nav .has-sub.open > .sub-label, .main-nav .has-sub.open > a { color: #c09262 !important; }
  .main-nav .has-sub.open > .sub-toggle .chev, .main-nav .has-sub.open > .sub-label .chev { transform: rotate(225deg) translate(-12%, -12%); }
  .main-nav .sub {
    display: none; flex: 0 0 100%; width: min(100%, 24rem); margin: .9rem auto .3rem; padding: .5rem;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius);
    text-align: left; position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; column-count: 1;
  }
  .main-nav .has-sub.open > .sub { display: block; }
  .main-nav .sub a {
    font-family: var(--font-body); font-size: 1.02rem; font-weight: 500; color: rgba(255, 255, 255, .88) !important;
  }
  .main-nav .sub a:hover, .main-nav .sub a:focus-visible, .main-nav .sub a:active { background: rgba(176, 128, 80, .22); color: #fff !important; }
  .main-nav .sub a:focus-visible { outline-color: #c09262; }
  .main-nav .sub a[aria-current="page"] { background: rgba(176, 128, 80, .22); color: #fff !important; box-shadow: inset 3px 0 0 #c09262; }
  .main-nav .sub .sub-heading a { color: #c09262 !important; border-bottom-color: rgba(255, 255, 255, .16); }
  .main-nav .sub .sub-heading a:hover, .main-nav .sub .sub-heading a:focus-visible { color: #e0b98c !important; }
}

/* ==========================================================================
   HOME HERO OVERLAY (Dalia): docs/marketing/design/kimi/hero-overlay.css, verbatim
   ========================================================================== */

/* Oak Tree Dental - Kimi design: HOME HERO OVERLAY over OUR team photo. Owner: Dalia. 4 Oct 2026.
   Problem (Mohsen, staging stamp .3700): Kimi's overlay is tuned for their dark hallway photo. Over our team photo (black scrubs, dark brick) the same
   .95 / .88 / .55 charcoal flattens everything to near-black. This keeps Kimi's ingredients (charcoal #242322 gradient, the bronze radial glow, the header scrim idea)
   but weights the dark to where the words are, so the team shows on the right and in the middle. No new concept, no filter on the photo, hero words and layout unchanged.
   Replaces Kimi's .hero::before background. The photo keeps object-position 50% 40% (Kimi uses 50% 42%): checked at 1920, 1440, 1100, 768 and 390px; every face except the three
   people behind the left edge of the headline is clear, and nobody's face is cut off at the top. */

.hero::before {
  background:
    radial-gradient(60% 55% at 78% 30%, rgba(176,128,80,.18), transparent 70%),                 /* Kimi's bronze glow, a touch softer (.22 to .18) */
    linear-gradient(180deg, rgba(36,34,32,.62) 0, rgba(36,34,32,0) 22%),                        /* header scrim: white nav text stays 9:1 or better over the brick */
    linear-gradient(100deg, rgba(36,34,32,.90) 0%, rgba(36,34,32,.82) 50%, rgba(36,34,32,.36) 76%, rgba(36,34,32,.10) 100%); /* dark under the words, open on the right */
}
/* Tablet and phone: the words span the full width, so the dark has to as well; only the last sixth of the hero (below the buttons) opens up. */
@media (max-width: 960px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(36,34,32,.62) 0, rgba(36,34,32,0) 20%),
      linear-gradient(180deg, rgba(36,34,32,.84) 0%, rgba(36,34,32,.82) 66%, rgba(36,34,32,.64) 84%, rgba(36,34,32,.42) 100%);
  }
}

/* Measured contrast (lightest 5% of the pixels behind each element, text hidden, Chromium; targets: 4.5 for normal text, 3 for large text):
   width  badge  headline  bronze italic  lede  outline-button  nav links  phone
   1920   9.2    8.3       3.7            6.0   10.6            13.5+      10.7
   1440   9.5    6.4       3.7            7.8   10.7            13.4+      11.0
   1100   10.3   5.0       3.5            8.5   10.3            13.3+      9.6
   1000   10.4   4.5       3.4            8.4   9.6             14.3+      9.1
   768    7.3    9.9       3.5            8.1   12.5            9.8+       -
   390    8.9    9.7       3.6            7.5   13.6            9.6+       -
   Kimi's own overlay over the same photo: bronze italic 3.8 / 3.4 / 3.2 / 3.1 at 1440 / 1100 / 768 / 390, so nothing here is worse than theirs; the italic is large text (3:1). The Call button
   (charcoal on bronze, 4.55:1) is Kimi's own pairing and does not depend on the photo. */

/* ==========================================================================
   OFFICE-CLOSED STATE (Dalia): docs/marketing/design/kimi/closed-state.css, verbatim
   ========================================================================== */

/* Oak Tree Dental - Kimi design: OFFICE-CLOSED STATE. Owner: Dalia. 4 Oct 2026.
   Waseem's rule: outside office hours the Call buttons are hidden and Book is what visitors are asked to do. When the Call button is gone, the Book button
   that was the quiet second button (hero: ghost on dark; closing band: ghost on dark; service-page card: outline on white) becomes Kimi's primary bronze, so it never
   reads as a leftover. Nothing else moves.
   Put class "is-closed" on <html> (see the note below), hide the Call buttons however you already do, and load this after style.css.
   The header "Book Now" is already primary and is not touched. */

/* Kimi's .btn-primary, applied to every booking button that is secondary when the office is open. */
.is-closed :is(.btn-ghostlight, .btn-outline)[data-otd-booking-track] {
  background: var(--gold-500); border-color: var(--gold-500); color: var(--green-950);
  box-shadow: 0 8px 22px rgba(176, 128, 80, .38);
}
.is-closed :is(.btn-ghostlight, .btn-outline)[data-otd-booking-track]:hover,
.is-closed :is(.btn-ghostlight, .btn-outline)[data-otd-booking-track]:focus-visible {
  background: var(--gold-400); border-color: var(--gold-400); color: var(--green-950);
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(176, 128, 80, .48);
}
/* The hero's booking link is also .otd-book; its label span inherits the colour. */
.is-closed .otd-book .otd-book__label { color: inherit; }

/* Alignment: leave each container's own layout alone, because it already puts a single button in the right place.
   hero .btn-row           flex, left-aligned, so Book sits exactly where Call was (the words above it are left-aligned too)
   .cta-band .btn-row      flex, space-between with the headline, so Book stays on the right as Kimi designed it (on a phone it wraps under the text, left-aligned)
   .aside-cta .aside-actions  grid, one column, so Book is the full-width button of the card
   Heights: the hero keeps its height (min-height) and the band is as tall as its text, so neither jumps. On a phone the hero's button row goes from two stacked buttons (118px) to one (52px) and the hero text re-centres by about 33px, which is invisible if the class is there before first paint and a visible jump if it is added late. */

/* Layout shift: set the class BEFORE first paint, not after load. In <head>, before the stylesheet:
   <script>if (closed) document.documentElement.classList.add('is-closed')</script>   where 'closed' is Poway time outside the hours from the one hours source
   Then the page is laid out single-button from the first frame and nothing jumps. (If the script cannot run, the page shows both buttons, the safe default.)
   The service-page card is the one place a late class would move things (the card is 63px shorter without the Call button), which is another reason to do it in <head>. */

/* ==========================================================================
   HOME SECTIONS (Dalia): docs/marketing/design/kimi/home-sections.css, verbatim
   ========================================================================== */

/* Oak Tree Dental - Kimi design: the surviving OLD HOME SECTIONS mapped onto Kimi's components. Owner: Dalia. 4 Oct 2026.
   Nothing here is a new component: Welcome = .section + .container.narrow + .eyebrow + .prose + .callout; Our Team and Patient Information = .section + .split + .frame + .btn-outline.
   These few lines only cover what Kimi's markup does with inline styles or a different image shape. */
/* Our H1 is an <h1> (Karim: one H1, "Oak Tree Dental") but in this section it takes Kimi's h2 size, not the 67px page-title size. */
.home-welcome h1 { font-size: clamp(1.9rem, 1.45rem + 2.2vw, 3rem); letter-spacing: -.01em; margin-bottom: 1.2rem; }
.home-welcome .prose p a { color: var(--green-950); font-weight: 700; text-decoration-color: var(--gold-500); text-underline-offset: .2em; }
/* Our two photos are 2:1 (400 by 200); Kimi's frame crops to 4:3.4 and would cut people out of the team photo. */
.home-split .frame img { aspect-ratio: 2 / 1; }
.home-split .prose h2 { margin-top: 0; font-size: clamp(1.9rem, 1.45rem + 2.2vw, 3rem); letter-spacing: -.01em; margin-bottom: 1rem; }
.home-split .btn-row { margin-top: 1.8rem; }

/* ==========================================================================
   PHONE HERO (Dalia): docs/marketing/design/kimi/hero-phone.css, verbatim
   ========================================================================== */

/* Oak Tree Dental - Kimi design: PHONE HERO (up to 600px wide). Owner: Dalia. 5 Oct 2026. Staging .6020, measured at 390 x 844 and 360 x 800 (and 375, 412 for the badge).
   Three fixes, nothing else changes. Kimi's own phone hero is the reference: its padding, type sizes, overlay and focal point are kept.

   1. The hallway's ceiling light. At phone width the hero is as tall as the photo, so object-position's second value does nothing; only the first (left/right) moves the picture.
      With the default 50% the light sits dead centre, behind the badge and the headline. Anchoring the picture to its right edge slides the light just off the left of the screen and shows
      the right-hand side of the corridor (doors, wall pattern). Measured contrast of every text element stays at or above target (lowest: the bronze italic "grown" 4.1:1 against a 3:1 target). */
@media (max-width: 600px) {
  .hero-media img { object-position: 100% 42%; }
}

/*  2. Top spacing. It ALREADY matches Kimi's phone hero exactly: padding-top calc(var(--header-h) + 3.5rem) = 140px, so the badge starts 56px below the 84px header (Kimi's badge is at y=140 on
      390 and 360 wide too), and the gap from badge to headline is 25.6px on both. No change is needed. If it is still judged too airy, `padding-top: calc(var(--header-h) + 2rem)` (116px) is
      the value, but that departs from Kimi, so it is left out. The hero gets 19px shorter by itself once the badge is one line (below).

    3. Badge on one line. "Dentist in Poway, CA · Accepting New Patients" is 366px wide at Kimi's badge values (13.6px, 0.04em, 8px 17.6px), more than the 350px (at 390) or 320px (at 360) column,
      so it wraps to two lines and the pill grows from 37px to 56px. At 12px, 0.02em, 7px 14px it is 309px wide, 11px of spare at 360, one line at 360, 375, 390 and 405. Above 405px Kimi's own values
      already fit (366px in a 372px column at 412), so they are left alone. */
@media (max-width: 405px) {
  .hero-eyebrow { font-size: 12px; letter-spacing: .02em; padding: 7px 14px; white-space: nowrap; width: max-content; max-width: 100%; }
}
/* Very small phones (under 350px, column under 310px): let it wrap rather than overflow. */
@media (max-width: 349px) {
  .hero-eyebrow { white-space: normal; width: auto; }
}