/* =============================================================================
   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); }
/* One line on desktop (operator note #15, "make this copy one line"): the section heading spans
   the band instead of the shared 22ch measure; it still wraps where the viewport is too narrow. */
.dservices h2 { max-width: none; }

.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). */
/* No matched photo: a calm brand-tint panel with the faint plus motif takes the photo's place, so
   the card keeps the row's shape instead of stretching into empty white (proof 2026-09-27,
   dentistryonthemountain.com: 5 of 9 cards read as blank boxes). Never a wrong picture (rule 79). */
.svc-card--plain::before {
  content: ""; display: block; aspect-ratio: 4 / 3;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg stroke='%23000' stroke-opacity='.07' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 8v10M7 13h10' transform='rotate(45 12 13)'/%3E%3Cpath d='M36 30v10M31 35h10' transform='rotate(45 36 35)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(145deg, color-mix(in srgb, var(--teal) 16%, #fff) 0%, color-mix(in srgb, var(--teal) 6%, #fff) 100%);
}
.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));
}
/* Half the size, centred (operator note #35, "make this 50% smaller"). */
.dba-cases:has(> .ba-case:only-child) { grid-template-columns: minmax(0, 36rem); justify-content: center; }
.dba-head { margin-inline: auto; text-align: center; }
.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 {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  align-items: stretch;
}
/* The sub line under the Google chip gets air and weight (operator note #17, "move this down is
   too close to the Google part and gets lost and then make it bold"). */
.reviews-head > p { margin-top: 1.25rem; font-weight: 600; color: var(--ink); }
/* 45% less space above and below the sub line (operator note #34): the header photo's fade
   padding and the head's bottom margin both shrink by 45%. */
.reviews-hero.has-photo { --reviews-pad-b: clamp(1.65rem, 3.3vw, 2.75rem); }
.reviews-head > p { margin-top: 0.7rem; }
.reviews-head { margin-bottom: clamp(1.25rem, 2.75vw, 1.95rem); }
/* A LONGER, softer fade on the reviews header photo (operator note #28, "the fade needs to be
   longer ... it just kind of stops now"): the base fades inside the bottom padding only (#66 asked
   hard); dental fades over the lower 60% of the band, from a slightly lighter photo. */
.reviews-hero.has-photo {
  /* Dental keeps the band's own top padding (section 8), so the photo bleeds up through it and
     starts at the band edge instead of under a strip of bare tint. */
  --reviews-bleed: var(--rhythm, 5rem);
  --reviews-pad-b: clamp(3rem, 6vw, 5rem);
  --reviews-fade: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .85) 35%, rgba(0, 0, 0, .4) 65%, rgba(0, 0, 0, .1) 85%, rgba(0, 0, 0, 0) 100%);
}
.reviews-hero-photo { opacity: 0.9; }
/* The eyebrow over the fade-in header photo sits on a white pill so it reads (note #27). */
.reviews-hero .eyebrow {
  display: inline-block; background: rgba(255, 255, 255, .92); color: var(--teal-deep);
  padding: 0.4rem 0.85rem; border-radius: 999px; box-shadow: 0 6px 18px -10px rgba(7, 11, 10, .35);
}
/* No floating preview pill (operator 2026-09-26 21:28, "hide concept preview pill"). The
   disclosure itself stays on the page: the footer's "Concept preview by PXLNorth, not affiliated
   with <business>" line (CLAUDE.md safety; blueprint-gate preview-disclosure reads it). */
.preview-badge { display: none !important; }
/* The base reserves 3.5rem under the photo credit so the badge never covered it; with no badge
   that is dead space (operator 2026-09-26 23:23, "get rid of this padding"). */
.photo-colophon { padding-bottom: 0; }
.footer-bottom { padding-bottom: 1.25rem; }
/* No photo patches beside the review cards (operator 2026-09-26 19:56): a stock face next to a
   reviewer's name reads as that reviewer. Happy people live only in the header photo above. */
.reviews-bleed { display: none !important; }
/* margin 0: .quote-card is a <figure>, whose UA margin (1em 40px) the base's flex column hid. */
.review-stack .quote-card { display: flex; flex-direction: column; margin: 0; }
.review-stack .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; overflow: clip; 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;
  /* Low opacity over the dark ground: the photo reads, the light text stays legible on it. With
     the form in the right column, the photo shows across the whole band (no side mask). */
  opacity: 0.5;
  /* Soft blur, as the first version read (operator 2026-09-26 23:22, "do the original blur for
     visit us bg"); scaled a touch so the blurred edges never show. */
  filter: blur(7px);
  transform: scale(1.06);
  /* Fades out toward the bottom so the band blends into the footer (operator note #23). */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.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; }
/* Visit + book combined (18:37): the form card sits in the right column on the dark band. */
.dvisit-grid:has(.dvisit-form) { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.dvisit-form { scroll-margin-top: 110px; }
/* Same size and weight as the band's own H2 (operator note #25, "this font looks really weak for
   a header ... should be the same size as ready to book your visit"). */
.dvisit-form-title { color: #fff; font-family: var(--serif); font-weight: var(--display-weight, 600); font-size: var(--d-h2); line-height: 1.08; text-wrap: balance; margin: 0 0 1.25rem; }
@media (min-width: 861px) { .dvisit-grid:has(.dvisit-form) { align-items: start; } }
.dvisit-form .form-card { box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .6); }
.dvisit .hours-grid { max-width: 22rem; }
/* 16px form text: an iPhone zooms the whole page in when a field under 16px takes focus
   (operator 19:38, "the site zoomed in"; the base's fields are 15px). */
.field input, .field select, .field textarea { font-size: 16px; }
@media (max-width: 860px) { .dvisit-grid:has(.dvisit-form) { grid-template-columns: minmax(0, 1fr); } }
.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); }

/* Two short lines at most (operator note #22, "this goes out too far"): a tighter measure. */
.footer-summary { max-width: 24rem; text-wrap: balance; 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 readable (operator note #33, "too small to see it"): no white plate, the same white
   knockout the nav uses over the photo, at the nav's size. */
.footer-logo-plate { background: none; padding: 0; margin-bottom: 1rem; border-radius: 0; }
.footer-logo-plate img:not(.logo-badge) { width: clamp(220px, 24vw, 300px); height: auto; max-height: 72px; object-fit: contain; object-position: left center; }
.footer-logo-plate img.logo-badge { height: 80px; }
/* The mark on a dark ground is decided per logo by the fill (brandLogo.onDark, 2026-09-27):
   a dark mono wordmark inverts to white; a coloured or tiled mark sits on a light plate in its own
   colours (a blanket invert turned coppercreekdental.ca's tiled mark into a white square). */
.footer-logo-plate img.logo-invert { filter: brightness(0) invert(1); }
.footer-logo-plate img.logo-plate { background: #fff; padding: 0.4rem 0.6rem; border-radius: 10px; box-sizing: content-box; }
.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; }
/* No transitions until the page has settled (operator 19:37, "site flashes the top nav
   sometimes"): the bar used to paint solid, then fade to transparent once the script ran. */
.dnav.is-ready { transition: background-color .25s ease, box-shadow .25s ease; }
.dnav:not(.is-ready) .nav-logo, .dnav:not(.is-ready) .nav-logo img { transition: none !important; }
.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); }
/* Over the photo the logo has NO plate (operator note #18, "take the background off"): it turns
   into a white knockout of itself (filter), the way premium sites run a logo on a hero, and gets
   its own colours back once the bar is solid. Centred on the nav row like the links. */
.dnav .nav-logo { display: flex; align-items: center; align-self: center; }
.dnav.is-ready .nav-logo img { transition: filter .25s ease; }
.dnav .nav-logo img { display: block; }
.dnav.is-over .nav-logo img.logo-invert { filter: brightness(0) invert(1); }
.dnav.is-over .nav-logo img.logo-plate { background: rgba(255, 255, 255, .95); padding: 0.35rem 0.55rem; border-radius: 10px; box-sizing: content-box; }
.dnav .wrap { align-items: center; }
.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; }
/* +25% (operator note #30, "make a logo 25% bigger"). */
.dnav .nav-logo img:not(.logo-badge) { width: clamp(225px, 25vw, 362px); height: auto; max-height: 80px; object-fit: contain; object-position: left center; }
.dnav .nav-logo img.logo-badge { height: 75px; }
@media (max-width: 600px) {
  .dnav .nav-logo img:not(.logo-badge) { width: clamp(170px, 52vw, 256px); max-height: 58px; }
  .dnav .nav-logo img.logo-badge { height: 58px; }
}
/* No hairline under the bar in either state (operator note #29, "remove the black border");
   the solid bar keeps its soft shadow. */
.dnav { border-bottom: 0; }

/* Nav labels never wrap (gate nav-wrap); the gap gives way first. */
.dnav .nav-links { gap: clamp(0.85rem, 1.35vw, 1.5rem); }
.dnav .nav-links a { white-space: nowrap; }

/* ---------- 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: 1480px) {
  .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); }
/* TRUST STRIP (operator note #14, "make all of these items in this section into a trust strip so
   nobody's points overlap"): the rating and the published facts sit in ONE glass strip across the
   hero, divided by hairlines, each item on one line. The copy column widens for it; the H1 and sub
   keep their own measure. */
.dhero--full .hero-grid { grid-template-columns: minmax(0, 72rem); }
.dhero--full .dhero-sub { max-width: 34rem; }
.dhero--full .dhero-proof {
  display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  max-width: 100%;
  margin-top: 2rem; padding: 0;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px;
  background: rgba(7, 11, 10, .5);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .85);
}
.dhero--full .dhero-proof li { white-space: nowrap; padding: 0.85rem 1.25rem; }
.dhero--full .dhero-proof li + li { border-left: 1px solid rgba(255, 255, 255, .18); }
@media (max-width: 860px) {
  .dhero--full .dhero-proof { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .dhero--full .dhero-proof li { white-space: normal; padding: 0.75rem 0.9rem; font-size: 0.85rem; }
  .dhero--full .dhero-proof li + li { border-left: 0; }
  .dhero--full .dhero-proof li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .18); }
  .dhero--full .dhero-proof li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .18); }
}
.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; }
/* TRUST BAR (note #20): a white strip straddling the hero's lower edge and the band below. */
.hero.dhero--full { overflow: visible; }
.dtrust {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  transform: translateY(50%);
  padding-inline: var(--gutter, 1.25rem);
  display: flex; justify-content: center;
  pointer-events: none;
}
.dtrust-bar {
  pointer-events: auto;
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch;
  background: #fff; color: var(--ink-soft);
  border-radius: 18px;
  box-shadow: 0 24px 50px -28px rgba(7, 11, 10, .45), 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
  max-width: min(100%, 74rem);
}
.dtrust-bar li {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.2rem;
  padding: 1.05rem clamp(1rem, 2vw, 1.75rem);
  text-align: center; font-size: 0.875rem; line-height: 1.35;
}
.dtrust-bar li + li { border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.dtrust-bar strong { color: var(--ink); font-weight: 700; font-size: 0.95rem; }
.dtrust-rating .stars { height: 16px; }
.dtrust-areas strong { font-weight: 600; }
/* The band under the hero makes room for the half of the strip that sits on it. */
.dhero--full + * { padding-top: calc(var(--rhythm, 5rem) + 3rem); }
@media (max-width: 860px) {
  .dtrust { position: relative; transform: none; margin-top: 1.75rem; padding-inline: 0; }
  .dtrust-bar { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .dtrust-bar li + li { border-left: 0; }
  .dtrust-bar li:nth-child(even) { border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
  .dtrust-bar li:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
  .dtrust-bar li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dhero--full + * { padding-top: var(--rhythm, 5rem); }
  .hero.dhero--full { flex-direction: column; justify-content: flex-end; align-items: stretch; }
}

/* Hours in their own bordered card again (operator note #21, "I like the pill we had previously"). */
.dvisit .dvisit-hours {
  background: rgba(8, 12, 11, .45);
  border: 1px solid var(--d-line-dark);
  border-radius: var(--d-radius);
  padding: 1.1rem 1.25rem;
  backdrop-filter: blur(2px);
  max-width: 26rem;
}

/* CALMER (operator note #31, "the hero section it's far too busy in general"): on the full-bleed
   hero the eyebrow pill goes (the H1 already says what and where), the sub is a single quiet line,
   and the trust facts live in the strip below, so the photo carries the band: H1, one line, two
   buttons. */
.dhero--full .dhero-eyebrow { display: none; }
.dhero--full .dhero-sub { font-size: clamp(1.05rem, 1rem + 0.2vw, 1.15rem); opacity: 0.92; }
.dhero--full .dhero-actions { margin-top: 1.5rem; }
/* CENTRED (operator note #19, "since the logo is on this side ... having a copy on the side too
   it's a little bit aggressive ... experiment with having it either in the middle"): the copy
   block sits centred on the photo, the shade is even with a soft vignette instead of a hard left
   side, and the trust strip centres under the buttons. */
/* RIGHT-ALIGNED over a people photo (operator 2026-09-26 22:54, "hero image is weak", with #19's
   "in the middle or on the right"): the hero now leads with a happy patient, who sits in the left
   of the frame, so the copy takes the right column with the shade on that side, and her face stays
   clear. Centred copy would sit on the face. */
@media (min-width: 861px) {
  .dhero--full .hero-grid { justify-items: end; }
  .dhero--full .hero-copy { text-align: left; max-width: 34rem; }
  .dhero--full h1 { max-width: 14ch; }
  .dhero--full .hero-media img { object-position: 30% center; }
  .dhero--full .hero-media::after {
    background:
      linear-gradient(270deg, rgba(7, 11, 10, .8) 0%, rgba(7, 11, 10, .62) 32%, rgba(7, 11, 10, .2) 58%, rgba(7, 11, 10, .04) 100%),
      linear-gradient(180deg, rgba(7, 11, 10, .45) 0%, rgba(7, 11, 10, 0) 22%);
  }
}
@media (max-width: 860px) {
  /* PHONE: photo on top (the nav floats over it), copy BELOW on the dark ground, so a people
     photo's face is never under the headline. */
  .hero.dhero--full { display: block; min-height: 0; padding: 0 0 2.5rem; }
  .dhero--full .hero-grid { display: flex; flex-direction: column; padding-top: 0; }
  .dhero--full .hero-media {
    order: -1; position: relative; inset: auto;
    width: 100vw; margin-inline: calc(50% - 50vw);
    height: min(58vh, 460px);
  }
  .dhero--full .hero-media img { object-position: 30% 22%; }
  .dhero--full .hero-copy { margin-top: 1.25rem; }
  .dhero--full .hero-media::after {
    /* A shade under the floating nav at the top and a fade into the dark ground at the bottom. */
    background: linear-gradient(180deg, rgba(7, 11, 10, .5) 0%, rgba(7, 11, 10, 0) 26%, rgba(7, 11, 10, 0) 70%, var(--d-dark) 100%);
  }
}

/* ---------- first-visit FAQ (note #8) ------------------------------------- */
.dfaq { background: #fff; padding-bottom: calc(var(--rhythm, 5rem) * 0.5); }
.dfaq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.dfaq h2 { font-size: var(--d-h2); line-height: 1.08; font-weight: var(--display-weight, 600); margin-bottom: 0.9rem; text-wrap: balance; }
.dfaq .eyebrow { color: var(--teal-deep); }
.dfaq-head > p:not(.eyebrow) { color: var(--ink-soft); max-width: 40ch; }
.dfaq-media { margin-top: 1.75rem; border-radius: var(--d-radius); overflow: hidden; aspect-ratio: 4 / 3.2; background: var(--tint); }
.dfaq-media > picture { display: contents; }
.dfaq-media img { width: 100%; height: 100%; object-fit: cover; }
.dfaq-head { position: sticky; top: 110px; }
@media (max-width: 860px) { .dfaq-head { position: static; } .dfaq-media { aspect-ratio: 16 / 9; } }
/* Footer bottom row: no dead space under it (operator note #24). */
.footer-bottom { margin-top: 1.5rem; padding-block: 1rem; }
.footer { padding-bottom: 0.25rem; }
.dfaq-list { border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.dfaq-item { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.dfaq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink);
}
.dfaq-item summary::-webkit-details-marker { display: none; }
.dfaq-item summary::after {
  content: "+"; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-content: center;
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  color: var(--teal-deep); font-family: var(--sans); font-size: 1.1rem; font-weight: 600;
  transition: transform .2s ease;
}
.dfaq-item[open] summary::after { content: "\2212"; }
.dfaq-item summary:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; border-radius: 6px; }
.dfaq-item > p { margin: -0.2rem 0 1.2rem; max-width: 62ch; color: var(--ink-soft); line-height: 1.65; }
.dfaq-pending { display: flex; align-items: center; gap: 0.6rem; font-style: italic; }
@media (max-width: 860px) { .dfaq-grid { grid-template-columns: 1fr; } }

/* ---------- a photo fading in at the top of a section (standard, 17:51) -------
   "THE FADE IN AT THE TOP OF A SECTION IS ALSO ANOTHER WAY FOR A POP OF IMAGE WITHOUT OVER DOING
   IT". Static, no motion. The base already paints this on the reviews band when
   reviews.headerPhoto is authored (its #66 port); the dental layer keeps it and only makes sure
   the band's own padding clears it. Used on at most 2-3 bands, never two in a row. */

/* ---------- 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); }
.footer { background-image: var(--d-grain-light); }
/* The before/after band: a very subtle brand-tone glow behind the slider over the grain
   (operator 2026-09-26 21:33, "add a very subtle bg for the teeth before after"). */
/* Plus signs set sideways, very faint, for texture (operator 2026-09-26 23:22, "add some more
   abstract visual bg for smile gallery, like some plus signs sideways ... subtle"): a 64px tile of
   two tilted pluses in white at ~7%, under the glow and the grain. */
:root {
  --d-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 8v10M7 13h10' transform='rotate(45 12 13)'/%3E%3Cpath d='M44 38v10M39 43h10' transform='rotate(45 44 43)'/%3E%3C/g%3E%3C/svg%3E");
}
.dba {
  background-image:
    var(--d-grain-light),
    var(--d-plus),
    radial-gradient(ellipse 55% 60% at 50% 62%, color-mix(in srgb, var(--teal) 22%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 40% 45% at 15% 20%, color-mix(in srgb, var(--teal-light) 8%, transparent) 0%, transparent 70%);
}