/* =============================================================================
   DENTAL LAYER over clinical-ivyrehab-static (Design Studio loop 1, 2026-09-26)
   -----------------------------------------------------------------------------
   Loaded AFTER the base's css/style.css (inherited, pinned on the base), so every
   rule here is additive and only this composition ships it. It styles the
   dental components (hero, trust story, services list, the dentist, the
   before/after slider, the closing band) and re-tones two inherited bands for
   the page's rhythm: light canvas / white / TINT / canvas / DARK / tint / white
   / canvas / DARK / brand footer (templates/blueprints/clinical/DENTAL_GOAL.md).

   One accent: every accent below is var(--teal*), the build's own brand slot
   (theme.json, mapped from the business's real scheme). Nothing here names a hue
   of its own except the two dark grounds, which are the brand's deep tone mixed
   toward near-black so they are dark on ANY palette, and the neutral warm grey of
   the sample "before" panel.

   Faux-bold guard: the base fonts link requests the serif upright at
   400/500/600/700 and italic only at 400/500, so no rule here sets an italic
   serif heavier than 500 (blueprint-gate faux-bold).
   ============================================================================= */

:root {
  --d-dark: color-mix(in srgb, var(--teal-darker) 52%, #0b1110);
  --d-dark-2: color-mix(in srgb, var(--teal-darker) 38%, #080c0b);
  --d-line-dark: rgba(255, 255, 255, .14);
  --d-radius: calc(var(--radius) * 1.45);
  --d-h2: calc(clamp(2rem, 1.25rem + 2.3vw, 3.05rem) * var(--display-scale, 1) * var(--emph-scale, 1));
}

/* ---------- shared: display headings, links, marked placeholders ---------- */

.dhero h1,
.dabout h2, .dservices h2, .ddoctor h2, .dba h2, .dvisit h2 {
  font-weight: var(--display-weight, 600);
  text-wrap: balance;
}
.dabout h2, .dservices h2, .ddoctor h2, .dba h2, .dvisit h2 {
  font-size: var(--d-h2);
  line-height: 1.08;
  margin-bottom: 1.1rem;
  max-width: 22ch;
}
.dabout .eyebrow, .dservices .eyebrow, .ddoctor .eyebrow, .firstvisit .eyebrow { color: var(--teal-deep); }

.text-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.4rem;
  font-weight: 600; font-size: 0.9375rem;
  color: var(--teal-deep);
  text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--teal) 38%, transparent);
  padding-bottom: 2px;
}
.text-link::after { content: "\2192"; transition: transform .18s ease; }
.text-link:hover { border-bottom-color: var(--teal-deep); }
.text-link:hover::after { transform: translateX(3px); }

/* A MARKED placeholder frame: a drawn surface that says it is a sample. It never
   carries a face and never imitates a result (template.json $placeholders). */
.ph-frame {
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-content: center; justify-items: center; gap: 0.7rem;
  padding: 1.5rem; text-align: center;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--teal) 5%, var(--paper)) 0 14px,
      color-mix(in srgb, var(--teal) 10%, var(--paper)) 14px 28px);
  border: 1.5px dashed color-mix(in srgb, var(--teal-deep) 45%, transparent);
  border-radius: inherit;
  color: var(--ink);
}
.ph-tag {
  display: inline-block;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--ink); color: #fff;
  padding: 0.34rem 0.75rem; border-radius: 999px;
  pointer-events: none;
}
.ph-note { font-family: var(--serif); font-size: 1.15rem; max-width: 18ch; line-height: 1.3; }

/* ---------- 1. utility bar: the phone-width trim the base intended --------- */
/* The base hides address and email under 720px with `.utility-hide-sm { display: none }`, but its
   own `.utility .wrap > span { display: inline-flex }` (0,2,1) outranks that (0,1,0), so at 390
   the bar stacked three rows (measured on the first dental build, 2026-09-26). Same intent, a
   selector that wins. Base defect reported, not patched in the base from here. */
@media (max-width: 720px) {
  .utility .wrap > .utility-hide-sm { display: none; }
}

/* ---------- 2. nav: one CTA ------------------------------------------------ */
/* The base spaced a two-control group; with one pill the group needs no gap. */
.nav-actions { gap: 0; }

/* ---------- 3. hero ------------------------------------------------------- */

.hero.dhero {
  background: var(--paper);
  padding-block: clamp(2.25rem, 5.5vw, 5rem) clamp(2.75rem, 6vw, 5.5rem);
  isolation: auto;
}
.dhero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.75rem);
  align-items: start;
}
.dhero-eyebrow {
  display: inline-flex; align-items: center;
  margin: 0 0 1.15rem;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: calc(0.15em + var(--eyebrow-track-delta, 0em));
  text-transform: var(--eyebrow-case, uppercase);
  color: var(--teal-deep);
  background: color-mix(in srgb, var(--teal) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--teal) 24%, transparent);
  padding: 0.5rem 0.95rem; border-radius: 999px;
}
.dhero h1 {
  font-size: calc(clamp(2.35rem, 1.1rem + 3.7vw, 4.15rem) * var(--display-scale, 1));
  line-height: 1.04;
  letter-spacing: calc(-0.02em + var(--display-track-delta, 0em));
  color: var(--ink);
  max-width: 15ch;
  margin: 0 0 1.1rem;
  text-shadow: none; /* the base's photo-scrim shadow, meaningless on a light canvas */
  text-wrap: balance;
}
/* The accent word on a light canvas is COLOUR, not the base's dark plate (that plate exists for
   a word painted over a scrimmed photograph). Upright, so no synthetic italic is requested. */
.dhero .h1-accent {
  background: none; padding: 0; border-radius: 0;
  color: var(--teal-deep);
  font-style: normal;
}
.dhero-sub {
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0;
}
.dhero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.dhero-call .ico { stroke: var(--teal); transition: stroke .18s ease; }
.dhero-call:hover .ico { stroke: #fff; }

.dhero-proof {
  list-style: none; padding: 1.35rem 0 0; margin: 1.9rem 0 0;
  border-top: 1px solid var(--grey-line);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem;
  font-size: 0.9rem; color: var(--ink-soft);
  max-width: 38rem;
}
.dhero-proof li { display: inline-flex; align-items: center; gap: 0.5rem; }
.dhero-proof strong { color: var(--ink); font-weight: 700; }
.dhero-proof .stars { height: 15px; }
.proof-count { color: var(--ink-soft); }
.proof-fact::before {
  content: ""; flex: none;
  width: 0.55rem; height: 0.3rem;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: translateY(-2px) rotate(-45deg);
}
.dhero-areas {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 1rem 0 0; font-size: 0.875rem; color: var(--ink-soft);
}
/* A map pin drawn in CSS (a rotated rounded square with a hole): an inline svg here would make
   .hero-copy the third svg-carrying child and trip icon-grids (see the hero component). */
.dhero-areas::before {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border: 2px solid var(--teal-deep);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  margin: 0 0.15rem 0 0.1rem;
}

.hero-media {
  position: relative;
  aspect-ratio: 4 / 4.7;
  border-radius: var(--d-radius);
  overflow: hidden;
  background: var(--tint);
  box-shadow: 0 30px 60px -38px color-mix(in srgb, var(--ink) 55%, transparent);
}
.hero-media > picture { display: contents; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .dhero .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .dhero h1 { max-width: none; }
  .hero-media { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
  .dhero-actions .pill { flex: 1 1 auto; }
  .dhero-proof { gap: 0.6rem 1.25rem; }
}

/* ---------- 4. trust story ------------------------------------------------ */

.dabout { background: #fff; }
.dabout-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5.5vw, 5.25rem);
  align-items: center;
}
.dabout-solo .dabout-grid { grid-template-columns: minmax(0, 48rem); }
.dabout-media { position: relative; border-radius: var(--d-radius); overflow: hidden; aspect-ratio: 5 / 4.4; background: var(--tint); }
.dabout-media > picture { display: contents; }
.dabout-media img { width: 100%; height: 100%; object-fit: cover; }
.dabout-copy > p { max-width: min(60ch, var(--measure, 60ch)); }

.check-list {
  list-style: none; padding: 0; margin: 1.6rem 0 1.4rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem 2rem;
}
.check-list li {
  position: relative; padding-left: 1.9rem;
  font-size: 0.9375rem; line-height: 1.5; color: var(--ink);
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.12em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1.5px solid var(--teal);
}
.check-list li::after {
  content: ""; position: absolute; left: 0.42rem; top: 0.36em;
  width: 0.28rem; height: 0.52rem;
  border-right: 2px solid var(--teal-deep); border-bottom: 2px solid var(--teal-deep);
  transform: rotate(45deg);
}
@media (max-width: 860px) {
  .dabout-grid { grid-template-columns: 1fr; }
  .check-list { grid-template-columns: 1fr; }
}

/* ---------- 5. services: numbered 2-column list on the tint band ---------- */

/* Loop 2: PHOTO CARDS, one matched photo per service (operator note #3). 3 / 2 / 1 columns. */
.dservices { background: var(--tint); }
.dservices-intro { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.dservices-lede > p { max-width: min(56ch, var(--measure, 56ch)); color: var(--ink-soft); }

.svc-group + .svc-group { margin-top: clamp(2.25rem, 4vw, 3rem); }
.svc-group-label {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 1rem;
}
.svc-cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.svc-card {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--d-radius);
  overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 18px 40px -30px color-mix(in srgb, var(--ink) 45%, transparent);
}
.svc-card-media { aspect-ratio: 4 / 3; background: var(--paper); overflow: hidden; }
.svc-card-media > picture { display: contents; }
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-card:hover .svc-card-media img { transform: scale(1.03); }
/* No matched photo: a calm tint panel carries the card instead of a wrong picture (rule 79). */
.svc-card--plain { border-top: 4px solid color-mix(in srgb, var(--teal) 55%, transparent); }
.svc-card-body { padding: 1.15rem 1.25rem 1.35rem; }
.svc-card h4 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.2rem; line-height: 1.25; color: var(--ink);
  margin: 0 0 0.35rem;
}
.svc-card p { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.dservices .services-foot { margin-top: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
@media (max-width: 1000px) { .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .svc-card-media img { transition: none; } .svc-card:hover .svc-card-media img { transform: none; } }

/* ---------- 6. the dentist ------------------------------------------------ */

.ddoctor { background: var(--paper); }
.ddoctor-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2.25rem, 6vw, 5.75rem);
  align-items: center;
}
.ddoctor-media { position: relative; aspect-ratio: 4 / 4.9; margin: 16px 0 0 16px; }
/* The offset accent frame (pacificsignature): a hairline rectangle sitting up and to the left. */
.ddoctor-media::before {
  content: ""; position: absolute; inset: -16px 16px 16px -16px;
  border: 1.5px solid color-mix(in srgb, var(--teal) 50%, transparent);
  border-radius: var(--d-radius);
  pointer-events: none;
}
.ddoctor-media > img, .ddoctor-media > picture > img, .ddoctor-media > .ph-frame {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--d-radius);
}
.ddoctor-media > picture { display: contents; }
.ddoctor-role {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--teal-deep);
  margin: -0.35rem 0 1.25rem;
}
.ddoctor-copy > p:not(.eyebrow):not(.ddoctor-role) { max-width: min(60ch, var(--measure, 60ch)); }
.chip-list {
  list-style: none; padding: 0; margin: 1.5rem 0 1.9rem;
  display: flex; flex-wrap: wrap; gap: 0.55rem;
}
.chip-list li {
  font-size: 0.875rem; font-weight: 500; color: var(--ink);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
}
.ddoctor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.ddoctor-actions .text-link { margin-top: 0; }
@media (max-width: 860px) {
  .ddoctor-grid { grid-template-columns: 1fr; }
  .ddoctor-media { max-width: 26rem; }
}

/* ---------- 7. before / after slider (DARK band) --------------------------- */

.dba { background: var(--d-dark); color: rgba(255, 255, 255, .82); }
.dba .eyebrow { color: color-mix(in srgb, var(--teal-light) 55%, #fff); }
.dba h2 { color: #fff; }
.dba-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.dba-head p { color: rgba(255, 255, 255, .8); }
.dba-cases {
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
}
.dba-cases:has(> .ba-case:only-child) { grid-template-columns: minmax(0, 62rem); }
.ba-case { margin: 0; }
.ba-slider {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 9.5;
  border-radius: var(--d-radius);
  overflow: hidden;
  background: #111;
  user-select: none;
}
.ba-after, .ba-before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px;
  background: #fff;
  pointer-events: none; z-index: 2;
}
.ba-handle::after {
  content: "\2039\00a0\203A";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-content: center;
  background: #fff; color: var(--ink);
  font-family: var(--sans); font-size: 1.25rem; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.ba-slider:has(.ba-range:focus-visible) .ba-handle::after { outline: 3px solid var(--teal-light); outline-offset: 3px; }
.ba-range {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.ba-label {
  position: absolute; top: 1rem; z-index: 2;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: rgba(10, 14, 13, .66);
  padding: 0.36rem 0.75rem; border-radius: 999px;
  pointer-events: none;
}
.ba-label-before { left: 1rem; }
.ba-label-after { right: 1rem; }
/* The marked sample: two drawn panels, a neutral warm grey "before" and a brand-tint "after",
   each naming what goes there. Nothing about them imitates a treatment result. */
.ba-ph { display: block; }
.ba-ph span {
  position: absolute; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif); font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem);
  white-space: nowrap;
}
.ba-ph-before {
  background: repeating-linear-gradient(135deg, #dcd6cc 0 16px, #d3ccc1 16px 32px);
  color: #2f2a25;
}
.ba-ph-before span { left: 25%; }
.ba-ph-after {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--teal) 10%, #fff) 0 16px,
    color-mix(in srgb, var(--teal) 17%, #fff) 16px 32px);
  color: var(--ink);
}
.ba-ph-after span { left: 75%; }
/* Bottom-left, clear of the handle's line and knob and of both top labels. */
.ba-tag { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; }
.ba-case figcaption { margin-top: 0.9rem; text-align: center; font-size: 0.9rem; color: rgba(255, 255, 255, .78); }
.dba-foot { margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
@media (max-width: 600px) {
  .ba-slider { aspect-ratio: 4 / 3.4; }
  .ba-ph span { font-size: 0.95rem; }
}

/* ---------- 8. reviews: own top padding, cards in a row ------------------- */
/* The base pulls the reviews band UP with a negative margin and zero top padding (#52), which
   assumes the band above ends in empty padding of a similar ground. Here the band above is the
   DARK slider band, so the pull-up ate its bottom edge and the eyebrow sat on the seam. The band
   keeps its own rhythm instead. With no bleed photographs (dental declares none), the base's
   narrow single column of cards becomes a row of equal cards (dental-clarkson section 11),
   attribution pinned to each card's foot so names line up. */
.reviews { margin-top: 0; padding-top: var(--rhythm); }
.review-stack:not(:has(.reviews-bleed)) {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  align-items: stretch;
}
/* margin 0: .quote-card is a <figure>, whose UA margin (1em 40px) the base's flex column hid. */
.review-stack:not(:has(.reviews-bleed)) .quote-card { display: flex; flex-direction: column; margin: 0; }
.review-stack:not(:has(.reviews-bleed)) .quote-card blockquote { flex: 1 1 auto; }

/* ---------- 9. first visit: re-toned LIGHT (the base paints it dark) ------- */
/* On this page the dark grounds belong to the slider and the closing band; a third
   dark band in between would flatten the rhythm. Same markup, same numbering. */
.firstvisit { background: #fff; background-image: none; color: var(--ink-soft); }
.firstvisit h2 { color: var(--ink); font-style: normal; font-weight: var(--display-weight, 600); }
.firstvisit-lede { color: var(--ink-soft); }
.steps li { border-top-color: color-mix(in srgb, var(--ink) 14%, transparent); }
.step-num { color: var(--teal-deep); font-style: normal; font-weight: 600; }
.steps h3 { color: var(--ink); font-weight: 600; }
.steps p { color: var(--ink-soft); }
.firstvisit .pill-ghost-light { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.firstvisit .pill-ghost-light:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- 11. where and when (DARK closing band) ------------------------- */

.dvisit { position: relative; isolation: isolate; background: var(--d-dark-2); color: rgba(255, 255, 255, .82); }
/* Loop 2 (note #11): a STATIC low-opacity photo of the practice behind the band. No motion. */
.dvisit-bg {
  position: absolute; inset: 0; z-index: -1;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: 0.42;
  /* The text column stays on clean dark; the photo shows behind the hours card and the air. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 60%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 60%);
}
@media (max-width: 860px) {
  .dvisit-bg {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 45%, transparent 75%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 45%, transparent 75%);
  }
}
.dvisit .eyebrow { color: color-mix(in srgb, var(--teal-light) 55%, #fff); }
.dvisit h2 { color: #fff; }
/* Loop 2 (note #4): both columns carry weight; the map is a strip under them. */
.dvisit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.dvisit-copy > p { max-width: 40ch; }
.dvisit-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.dvisit-actions .pill-white .ico { stroke: var(--teal-deep); }
.dvisit-card {
  background: rgba(8, 12, 11, .45);
  backdrop-filter: blur(2px);
  border: 1px solid var(--d-line-dark);
  border-radius: var(--d-radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.dvisit-map {
  display: block; width: 100%; height: clamp(220px, 24vw, 300px);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border: 1px solid var(--d-line-dark); border-radius: var(--d-radius);
  background: var(--d-dark);
}
.dvisit-lines { display: grid; gap: 1rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--d-line-dark); }
.dvisit-line { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.dvisit-line .ico { stroke: color-mix(in srgb, var(--teal-light) 60%, #fff); margin-top: 0.2rem; }
.dvisit-line p { margin: 0; line-height: 1.6; }
.dvisit-line strong { color: #fff; font-weight: 600; }
.dvisit-line a { color: #fff; text-underline-offset: 3px; }
.dvisit .hours-grid { max-width: none; margin-top: 0.5rem; }
@media (max-width: 860px) {
  .dvisit-grid { grid-template-columns: 1fr; }
}

/* ---------- footer: dark, a summary line, two columns when the band has the week */
/* Dark rather than the base's brand fill (dental-clarkson section 13): the brand colour is the
   page's ONE accent, and a full-width band of it read as a second loud colour under the dark
   closing band. A hairline separates the two dark grounds. */
.footer { background: var(--d-dark); border-top: 1px solid var(--d-line-dark); }

.footer-summary { max-width: 30rem; margin: 0 0 0.9rem; font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, .86); }
/* Loop 2 (note #6, "too much space above the logo... needs to be cut down"): a tighter footer:
   less top padding, a snug logo plate, three columns (brand + contact / quick links / treatments). */
.footer { padding-block: clamp(2.25rem, 4vw, 3rem) 0; }
.footer-grid { gap: clamp(1.5rem, 3vw, 2.5rem); }
.footer-grid:not(:has(.hours-grid)) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr); }
.footer-logo-plate { padding: 0.5rem 0.75rem; margin-bottom: 0.9rem; border-radius: 8px; }
.footer h3 { margin-bottom: 0.75rem; }
.footer ul { gap: 0.4rem; }
.footer address { line-height: 1.6; }
.footer .footer-addr { align-items: flex-start; margin: 0 0 0.45rem; }
.footer .footer-addr .ico { margin-top: 0.2rem; }
.footer-bottom { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
@media (max-width: 860px) {
  .footer-grid:not(:has(.hours-grid)) { grid-template-columns: 1fr 1fr; }
  .footer-grid:not(:has(.hours-grid)) > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid:not(:has(.hours-grid)) { grid-template-columns: 1fr; }
}

/* =============================================================================
   LOOP 2 (Design Studio, 2026-09-26 evening): full-bleed hero, floating nav,
   bigger logo, paired nav pills, texture. Operator words are quoted per rule.
   ============================================================================= */

/* ---------- floating nav ("transparent nav that appears floating") --------- */
.dnav.is-floating { position: fixed; top: 0; left: 0; right: 0; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.dnav.is-floating:not(.is-over) { box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .45); }
/* Over the photo the bar has no fill, only a soft shade from the top edge so light links stay
   legible on a bright photograph (and the contrast check reads them as photo-backed). */
.dnav.is-over {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(7, 11, 10, .5) 0%, rgba(7, 11, 10, 0) 100%);
  backdrop-filter: none; border-bottom-color: transparent;
}
@media (min-width: 961px) {
  .dnav.is-over .nav-links a { color: rgba(255, 255, 255, .92); }
  .dnav.is-over .nav-links a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .8); }
}
.dnav.is-over .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .5); }
/* A dark logo on a photo: a snug white plate while over the hero, gone once solid. */
.dnav .nav-logo { border-radius: 12px; transition: background-color .25s ease, padding .25s ease; }
.dnav.is-over .nav-logo { background: rgba(255, 255, 255, .94); padding: 0.45rem 0.8rem; }
.dnav.is-over .nav-call { color: #fff; border-color: rgba(255, 255, 255, .6); }
.dnav.is-over .nav-call:hover { background: #fff; color: var(--ink); border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .dnav.is-floating, .dnav .nav-logo { transition: none; } }

/* ---------- bigger logo ("make the logo bigger in the nav") ---------------- */
/* Sized by the logo's own shape: a wide wordmark gets the width, a square mark the height.
   flex-shrink 0 so a flex row can never squeeze the width while the height stays pinned. */
.dnav .nav-logo { flex-shrink: 0; }
.dnav .nav-logo img:not(.logo-badge) { width: clamp(180px, 20vw, 290px); height: auto; max-height: 64px; object-fit: contain; object-position: left center; }
.dnav .nav-logo img.logo-badge { height: 60px; }
@media (max-width: 600px) {
  .dnav .nav-logo img:not(.logo-badge) { width: clamp(150px, 46vw, 205px); max-height: 46px; }
  .dnav .nav-logo img.logo-badge { height: 46px; }
}

/* ---------- paired nav pills (note #2) ------------------------------------ */
.nav-actions { gap: 0.6rem; }
.dnav .nav-call .ico { stroke: currentColor; }
/* The phone pill goes icon-only before the links run out of room; the base collapses the
   booking pill at 960. */
@media (max-width: 1240px) {
  .dnav .nav-call { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .dnav .nav-call .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- full-bleed hero ("do a full hero image") ----------------------- */
.hero.dhero--full {
  position: relative;
  min-height: clamp(600px, 88vh, 860px);
  display: flex; align-items: center;
  padding-block: calc(var(--dnav-h, 96px) + clamp(1.5rem, 4vw, 3rem)) clamp(3rem, 6vw, 5rem);
  background: var(--d-dark);
  color: #fff;
}
/* The grid stays STATIC so the absolutely placed photo anchors to the section (full bleed), and
   the copy is lifted above it. A relative grid made the photo cover the copy (first v3 deploy). */
.dhero--full .hero-grid { position: static; width: 100%; grid-template-columns: minmax(0, 40rem); }
.dhero--full .hero-copy { position: relative; z-index: 1; }
.dhero--full .hero-media {
  position: absolute; inset: 0; z-index: 0;
  aspect-ratio: auto; border-radius: 0; box-shadow: none;
  background: var(--d-dark);
}
/* Legibility first: the text side is darkened, the photo side stays open. */
.dhero--full .hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 11, 10, .82) 0%, rgba(7, 11, 10, .66) 38%, rgba(7, 11, 10, .22) 68%, rgba(7, 11, 10, .06) 100%),
    linear-gradient(180deg, rgba(7, 11, 10, .45) 0%, rgba(7, 11, 10, 0) 22%);
}
.dhero--full h1 { color: #fff; }
.dhero--full .h1-accent { color: color-mix(in srgb, var(--teal-light) 55%, #fff); }
.dhero--full .dhero-eyebrow { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(4px); }
.dhero--full .dhero-sub { color: rgba(255, 255, 255, .9); }
.dhero--full .dhero-call { color: #fff; }
.dhero--full .dhero-call .ico { stroke: currentColor; }
.dhero--full .dhero-call:hover { color: var(--ink); }
.dhero--full .dhero-proof { border-top-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .85); }
.dhero--full .dhero-proof strong { color: #fff; }
.dhero--full .proof-count { color: rgba(255, 255, 255, .8); }
.dhero--full .proof-fact::before { border-color: color-mix(in srgb, var(--teal-light) 60%, #fff); }
.dhero--full .dhero-areas { color: rgba(255, 255, 255, .85); }
.dhero--full .dhero-areas::before { border-color: #fff; }
@media (max-width: 860px) {
  .hero.dhero--full { min-height: 0; align-items: flex-end; padding-block: calc(var(--dnav-h, 76px) + 11rem) 2.5rem; }
  .dhero--full .hero-media::after {
    background: linear-gradient(180deg, rgba(7, 11, 10, .35) 0%, rgba(7, 11, 10, .25) 25%, rgba(7, 11, 10, .78) 55%, rgba(7, 11, 10, .9) 100%);
  }
}

/* ---------- texture ("even texture helps the flatness", standard #175) ------ */
/* A fine grain over the flat bands, ~2 KB, below any contrast impact. Dark bands take a
   light grain, light bands a dark one. */
:root {
  --d-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --d-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dservices, .dabout, .ddoctor, .firstvisit { background-image: var(--d-grain-dark); }
.dba, .footer { background-image: var(--d-grain-light); }