/*! Lakeside Family & Implant Dentistry — generated by PD Landing Page Generator
 *  template implants-a (Implants A) · https://template.bosciaimplantslp.kinsta.cloud/
 *  variant 1 (Standard) · Split hero with the lead card alongside, card grids, quiet spacing.
 *  Edit templates/styles/*.css and re-run the generator instead of this file.
 */

:root {
  --color-primary: #4486ce;
  --color-primary-rgb: 68, 134, 206;
  --color-primary-wash: #ecf2fa;
  --color-primary-soft: #f0f5fb;
  --color-primary-tint: #d6e4f4;
  --color-primary-mid: #3a73b1;
  --color-primary-deep: #274e77;
  --color-on-primary: #000000;
  --color-cta: #4486ce;
  --color-cta-hover: #6299d6;
  --color-cta-active: #78a8dc;
  --color-on-cta: #000000;
  --color-cta-rgb: 68, 134, 206;
  --color-link: #33649a;
  --color-link-hover: #2a527e;
  --color-heading: #0b1622;
  --color-eyebrow: #33649a;
  --color-eyebrow-accent: #3569a1;
  --color-icon: #4486ce;
  --color-icon-soft: #e5eef8;
  --color-marker: #4486ce;
  --color-check: #4486ce;
  --color-accent-icon: #3569a1;
  --color-rule: #b0ccea;
  --color-focus: #4486ce;
  --color-focus-ring: rgba(68, 134, 206, .32);
  --color-band-wash: #ecf2fa;
  --color-band-tint: #ecf3fa;
  --color-band-tint-strong: #dae7f5;
  --color-band-accent: #ebf0f6;
  --color-band-brand: #3b74b3;
  --color-on-band-brand: #ffffff;
  --color-on-band-brand-muted: #f4f8f8;
  --color-brand-border: #d6e4f4;
  --color-brand-border-strong: #b0ccea;
  --color-secondary: #14283d;
  --color-secondary-rgb: 20, 40, 61;
  --color-secondary-soft: #e8eaec;
  --color-secondary-deep: #0d1a28;
  --color-secondary-ink: #14283d;
  --color-on-secondary: #ffffff;
  --color-accent: #3569a1;
  --color-accent-rgb: 53, 105, 161;
  --color-accent-soft: #e7edf4;
  --color-accent-btn: #3569a1;
  --color-accent-btn-hover: #2d5887;
  --color-accent-btn-active: #264c74;
  --color-on-accent: #ffffff;
  --color-ink: #000000;
  --color-ink-2: #393d41;
  --color-ink-3: #5b6065;
  --color-ink-4: #62656a;
  --color-line: #b8c6d6;
  --color-line-strong: #a0adbc;
  --color-surface: #ffffff;
  --color-surface-2: #ecf2fa;
  --color-surface-3: #ecf3fa;
  --color-canvas: #ecf2fa;
  --color-white: #ffffff;
  --color-dark: #09121b;
  --color-dark-2: #162c42;
  --color-dark-3: #060d13;
  --color-dark-rgb: 9, 18, 27;
  --color-dark-card: #1a232b;
  --color-dark-line: #353d44;
  --color-on-dark: #ffffff;
  --color-on-dark-rgb: 255, 255, 255;
  --color-on-dark-muted: #c9cbcd;
  --color-dark-eyebrow: #5c87b4;
  --color-dark-icon: #3569a1;
  --color-scrim-rgb: 6, 13, 19;
  --color-scrim-brand-rgb: 15, 30, 46;
  --color-video-bg: #060d13;
  --font-heading: "Mulish", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: "Mulish", system-ui, -apple-system, Segoe UI, sans-serif;
  --weight-heading: 700;
  --tracking-heading: -0.01em;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px -2px rgba(0, 0, 0, .08);
  --shadow-md: 0 12px 28px -12px rgba(0, 0, 0, .18), 0 2px 8px -4px rgba(0, 0, 0, .1);
  --shadow-lg: 0 34px 60px -28px rgba(0, 0, 0, .32), 0 8px 24px -12px rgba(0, 0, 0, .14);
  --shadow-glow: 0 18px 40px -18px rgba(68, 134, 206, .5);
  --shadow-brand: 0 20px 44px -26px rgba(68, 134, 206, .55);
  --shadow-accent: 0 20px 44px -26px rgba(53, 105, 161, .55);
  --gradient-brand: linear-gradient(135deg, #3b74b3 0%, #264a72 52%, #14283d 100%);
  --gradient-soft: linear-gradient(180deg, #ecf3fa 0%, #ecf2fa 62%, #ffffff 100%);
  --gradient-dark: linear-gradient(140deg, #09121b 0%, #162c42 100%);
  --gradient-rule: linear-gradient(90deg, #4486ce 0%, #3569a1 100%);
  --gradient-scrim: linear-gradient(180deg, rgba(6, 13, 19, .62) 0%, rgba(6, 13, 19, .40) 45%, rgba(15, 30, 46, .74) 100%);
  --gradient-scrim-bold: linear-gradient(90deg, rgba(15, 30, 46, .92) 0%, rgba(6, 13, 19, .74) 50%, rgba(6, 13, 19, .5) 100%), linear-gradient(180deg, rgba(6, 13, 19, .5) 0%, rgba(6, 13, 19, .3) 45%, rgba(6, 13, 19, .8) 100%);
}

/* ==========================================================================
   Base — reset, typography scale, layout primitives, buttons.
   Mobile-first.

   COLOUR RULE: no rule in this project may name a brand colour. Every colour
   below resolves to a token derived in generate.js from the client's own
   primary / secondary / accent, so the same stylesheet reads as four different
   practices. The only literal colours allowed anywhere are deliberate
   neutrals (#ffffff / transparent) used as structural hairlines.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Room for the sticky mobile call bar. */
  padding-bottom: env(safe-area-inset-bottom);
}

img,
svg,
iframe { display: block; max-width: 100%; }

img { height: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: 1.15;
  color: var(--color-heading);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.2vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 3.8vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-link-hover); }

ul, ol { margin: 0; padding: 0; list-style: none; }

blockquote { margin: 0; }

::selection { background: var(--color-primary-tint); color: var(--color-ink); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--color-cta);
  color: var(--color-on-cta);
  font-weight: 700;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* --- layout primitives --------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
}

.pd-section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section-head {
  max-width: 62ch;
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}

.section-title { margin-bottom: .6rem; color: var(--color-heading); }

.section-lede {
  color: var(--color-ink-3);
  font-size: 1.05rem;
}

/* --- eyebrow + brand rule ------------------------------------------------
   PD's own templates set a short brand-coloured rule under the eyebrow on
   every section head; it is one of the cheapest ways the brand reads on a
   page full of body copy. */

.eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.section-head .eyebrow::after,
.pd-split__copy .eyebrow::after,
.pd-begin__copy .eyebrow::after,
.pd-survey__copy .eyebrow::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: .55rem 0 0;
  border-radius: var(--radius-pill);
  background: var(--gradient-rule);
}
.section-head .eyebrow::after { margin-inline: auto; }

.hl { color: var(--color-link); }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;              /* tap target */
  padding: .8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--color-focus-ring); }

.btn--primary {
  background: var(--color-cta);
  border-color: var(--color-cta);
  color: var(--color-on-cta);
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); color: var(--color-on-cta); }
.btn--primary:active { background: var(--color-cta-active); border-color: var(--color-cta-active); }

/* The practice's own CTA colour, used for the header and hero buttons when the
   extractor found the live site painting its buttons in it. The surface is the
   real brand hex and the LABEL moves to suit it — never the other way round, so
   a light brand yellow stays yellow instead of resolving to olive. */
.btn--accent {
  background: var(--color-accent-btn);
  border-color: var(--color-accent-btn);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
}
.btn--accent:hover { background: var(--color-accent-btn-hover); border-color: var(--color-accent-btn-hover); color: var(--color-on-accent); }
.btn--accent:active { background: var(--color-accent-btn-active); border-color: var(--color-accent-btn-active); }

.btn--outline {
  background: transparent;
  border-color: var(--color-cta);
  color: var(--color-link);
}
.btn--outline:hover { background: var(--color-cta); color: var(--color-on-cta); }

.btn--ghost {
  background: var(--color-surface);
  border-color: var(--color-brand-border-strong);
  color: var(--color-link);
}
.btn--ghost:hover { background: var(--color-band-wash); border-color: var(--color-cta); color: var(--color-link-hover); }

.btn--phone {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-on-secondary);
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.btn--phone svg { width: 20px; height: 20px; }

.btn--lg { min-height: 54px; padding: 1rem 1.9rem; font-size: 1rem; }
.btn--sm { min-height: 42px; padding: .55rem 1.1rem; font-size: .85rem; }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
/* On narrow screens the CTAs share a row so the lead capture stays high up. */
.btn-row > .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .btn-row > .btn { flex: 0 0 auto; } }
.btn-row--center { justify-content: center; }

/* --- reveal on scroll ---------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* --- stars --------------------------------------------------------------- */

.stars { display: inline-flex; gap: 2px; color: var(--color-line-strong); }
.stars .star { width: 18px; height: 18px; }
.stars .star.is-on { color: var(--color-accent-icon); }


/* ==========================================================================
   Components — the Progressive Dental campaign sections.
   One rule set per section; variants only re-arrange and re-weight these.

   Every colour here is a derived brand token (see buildTheme in generate.js).
   Nothing names a hex.
   ========================================================================== */

/* --- header -------------------------------------------------------------- */

.pd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-brand-border);
  box-shadow: inset 0 3px 0 var(--color-primary);
  transition: box-shadow .2s ease;
}
.pd-header.is-scrolled { box-shadow: inset 0 3px 0 var(--color-primary), var(--shadow-sm); }

.pd-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
  padding-block: .6rem;
}

.pd-logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
}
.pd-logo__img { width: auto; max-height: 52px; object-fit: contain; }
.pd-logo__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--gradient-brand);
  color: var(--color-on-band-brand);
  font-family: var(--font-heading);
  font-weight: 800;
}
.pd-logo__text { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-heading); }

.pd-header__actions { display: flex; align-items: center; gap: .6rem; }

.pd-header__phone {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .35rem .7rem;
  border-radius: var(--radius-pill);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.pd-header__phone svg { width: 20px; height: 20px; color: var(--color-icon); }
.pd-header__phone:hover { background: var(--color-primary-soft); color: var(--color-link); }

/* On phones the header CTA collapses; the tel: link and the sticky bar carry it. */
.pd-header__cta { display: none; }

@media (min-width: 720px) {
  .pd-header__cta { display: inline-flex; }
}
@media (max-width: 359px) {
  .pd-header__phone-num { display: none; }
  .pd-header__phone { padding: .35rem; }
}

/* --- hero ---------------------------------------------------------------- */

.pd-hero {
  position: relative;
  background: var(--gradient-soft);
  border-bottom: 1px solid var(--color-brand-border);
  overflow: hidden;
}
/* A soft brand bloom behind the copy, so the fold is the practice's colour
   rather than a white page with a coloured button on it. */
.pd-hero::before {
  content: "";
  position: absolute;
  inset: -30% 45% 30% -20%;
  background: radial-gradient(closest-side, rgba(var(--color-primary-rgb), .22), transparent 100%);
  pointer-events: none;
}

.pd-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2rem, 5vw, 4rem);
}

.pd-hero__headline { margin-bottom: .75rem; color: var(--color-heading); }
.pd-hero__sub { color: var(--color-ink-2); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 56ch; }

.pd-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: 1.5rem;
}
.pd-hero__badges li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-ink-2);
}
.pd-hero__badges svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: var(--color-icon-soft);
  color: var(--color-icon);
}

.pd-hero__call {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--color-link);
}
.pd-hero__call svg { width: 22px; height: 22px; }

.pd-hero__bg { display: none; }

@media (min-width: 900px) {
  .pd-hero__inner {
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
  }
}

/* Bold hero: full-bleed photo under a brand-tinted wash. */
.pd-hero--bold { color: var(--color-on-dark); background: var(--color-dark); }
.pd-hero--bold .pd-hero__bg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-hero--bold::before { display: none; }

/* Background video (bold variant). It inherits the full-bleed .pd-hero__bg
   rules above — object-fit works on <video> exactly as it does on <img>. The
   still is its stand-in for anyone who has asked for less motion. */

/* On wide screens the hero box is a shallower rectangle than the clip, so
   cover crops it vertically — centred, that took ~26px off the top and cut
   into faces. Anchoring to the top edge spends the whole crop on the bottom,
   which is usually ground. Desktop only: on phones the box is far TALLER than
   the clip, so the crop is horizontal there and this would do nothing. */
@media (min-width: 860px) {
  .pd-hero--bold .pd-hero__bg--video { object-position: 50% 0%; }
}
.pd-hero--bold .pd-hero__bg--still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pd-hero--bold .pd-hero__bg--video { display: none; }
  .pd-hero--bold .pd-hero__bg--still { display: block; }
}
.pd-hero--bold .pd-hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--gradient-scrim);
}
.pd-hero--bold .pd-hero__headline,
.pd-hero--bold .pd-hero__call { color: var(--color-on-dark); }
.pd-hero--bold .pd-hero__sub { color: var(--color-on-dark-muted); }
.pd-hero--bold .eyebrow { color: var(--color-dark-eyebrow); }
.pd-hero--bold .eyebrow::after { background: var(--color-dark-icon); }
.pd-hero--bold .btn--ghost { background: transparent; border-color: var(--color-dark-icon); color: var(--color-on-dark); }
.pd-hero--bold .btn--ghost:hover { background: var(--color-on-dark); color: var(--color-ink); border-color: var(--color-on-dark); }

/* Minimal hero: centred copy, lead card directly beneath, photo strip after. */
.pd-hero--minimal { background: var(--color-surface); border-bottom: 1px solid var(--color-brand-border); }
.pd-hero--minimal::before { inset: -40% 30% 40% -10%; opacity: .55; }
.pd-hero--minimal .pd-hero__inner { padding-block: clamp(2rem, 4vw, 3.25rem); }
.pd-hero--minimal .pd-hero__sub { margin-inline: auto; }
.pd-hero--minimal .pd-hero__strip { position: relative; z-index: 2; border-top: 3px solid var(--color-primary); }
.pd-hero--minimal .pd-hero__strip img { width: 100%; max-height: 320px; object-fit: cover; }

@media (min-width: 900px) {
  .pd-hero--minimal .pd-hero__inner { grid-template-columns: 1fr .8fr; align-items: start; }
}

/* --- lead capture card (mandatory, above the fold) ----------------------- */

.lead-card {
  position: relative;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border: 1px solid var(--color-brand-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.lead-card__title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-bottom: .4rem; color: var(--color-heading); }
.lead-card__sub { color: var(--color-ink-3); font-size: .95rem; }

.lead-card__points {
  display: grid;
  gap: .45rem;
  margin: 1rem 0;
}
.lead-card__points li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .92rem;
  color: var(--color-ink-2);
}
.lead-card__points svg { flex: none; width: 18px; height: 18px; margin-top: .18rem; color: var(--color-check); }

.hl-slot {
  padding: 1rem;
  border: 1px dashed var(--color-brand-border-strong);
  border-radius: var(--radius);
  background: var(--color-band-wash);
}

.lead-card__call { margin-top: .9rem; font-size: .9rem; color: var(--color-ink-3); text-align: center; }
.lead-card__call a { font-weight: 700; }
.lead-card__note { margin-top: .6rem; font-size: .78rem; color: var(--color-ink-4); text-align: center; }

/* --- benefit grid / check lists ------------------------------------------ */

.benefit-grid {
  display: grid;
  gap: 1rem;
}
.benefit-grid__item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-brand-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-weight: 600;
  color: var(--color-ink);
}
.benefit-grid__item svg { flex: none; width: 22px; height: 22px; color: var(--color-icon); }

@media (min-width: 640px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .benefit-grid { grid-template-columns: repeat(3, 1fr); } }

.check-list { display: grid; gap: .7rem; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: 1.02rem;
}
.check-list svg {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 3px;
  margin-top: .1rem;
  border-radius: 50%;
  background: var(--color-icon-soft);
  color: var(--color-icon);
}
.check-list--tight li { font-size: .98rem; }

@media (min-width: 800px) {
  .pd-candidacy .check-list {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin-inline: auto;
  }
}

/* --- candidacy "If You" cards (template B) ------------------------------- */

.ifyou-grid { display: grid; gap: 1rem; }
.ifyou {
  padding: 1.5rem 1.35rem;
  border-radius: var(--radius);
  background: var(--gradient-brand);
  border: 1px solid var(--color-band-brand);
  color: var(--color-on-band-brand);
  text-align: center;
}
.ifyou__prefix {
  display: block;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-on-band-brand-muted);
}
.ifyou__label { margin: .5rem 0 0; font-size: 1.05rem; line-height: 1.35; color: var(--color-on-band-brand); }

@media (min-width: 640px) { .ifyou-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ifyou-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- CTA band + call bar + value prop ------------------------------------ */

.pd-cta-band {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block: 1px solid var(--color-brand-border);
  box-shadow: inset 0 3px 0 var(--color-primary);
}
.pd-cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.pd-call-bar {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.pd-call-bar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
/* A circular portrait, so it fills the frame rather than letterboxing inside
   it the way a logo would. */
/* Scales with the viewport so it stays a portrait rather than an icon. The
   bar is a centred column, so growing this only makes the band taller — there
   is nothing beside it to crowd. */
.pd-call-bar__mark {
  width: clamp(112px, 14vw, 152px);
  height: clamp(112px, 14vw, 152px);
  object-fit: cover;
  border-radius: 50%;
}
.pd-call-bar__title {
  margin: 0;
  color: inherit;
  font-size: clamp(1.25rem, 2.8vw, 1.85rem);
}
.pd-call-bar .btn--phone {
  background: var(--color-surface);
  border-color: var(--color-surface);
  color: var(--color-link);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
}
.pd-call-bar .btn--phone:hover { background: var(--color-band-wash); color: var(--color-link-hover); }

.pd-value-prop {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.pd-value-prop__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
/* Matched to the call bar: both bands are centred columns fronted by a
   circular portrait, so they scale together. Change one, change the other. */
.pd-value-prop__mark {
  width: clamp(112px, 14vw, 152px);
  height: clamp(112px, 14vw, 152px);
  object-fit: cover;
  border-radius: 50%;
}
.pd-value-prop__title { margin: 0; font-size: clamp(1.25rem, 2.8vw, 1.9rem); }

/* --- treatments ---------------------------------------------------------- */

.treatment-grid { display: grid; gap: 1.25rem; }

.treatment {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.treatment::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--gradient-rule);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.treatment:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-brand-border-strong); }
.treatment:hover::after { transform: scaleX(1); }

.treatment__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.treatment__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: 1.25rem;
  flex: 1;
}
.treatment__num {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--color-link);
}
.treatment__title { margin: 0; font-size: 1.2rem; color: var(--color-heading); }
.treatment__desc { color: var(--color-ink-3); font-size: .95rem; }
.treatment__features { display: grid; gap: .35rem; margin: .2rem 0 .4rem; }
.treatment__features li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .9rem;
  color: var(--color-ink-2);
}
.treatment__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-marker);
}
.treatment__body .btn { margin-top: auto; }

@media (min-width: 620px) { .treatment-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .treatment-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- split sections (benefits / restorations / results / deserve) -------- */

.pd-split__inner { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }

.pd-split__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}
.pd-split__media { position: relative; margin: 0; }
/* Brand-coloured offset plate behind the photograph. */
.pd-split__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-band-tint-strong);
}
.pd-split__copy .section-title { color: var(--color-heading); }

@media (min-width: 900px) {
  .pd-split__inner { grid-template-columns: 1fr 1fr; }
  .pd-split__inner--reverse .pd-split__copy { order: 2; }
  .pd-split__inner--reverse .pd-split__media { order: 1; }
  .pd-split__inner--reverse .pd-split__media::before { inset: 1.25rem 1.25rem -1.25rem -1.25rem; }
}

/* --- doctors ------------------------------------------------------------- */

.doctor-list { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }

.doctor {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.doctor__media { position: relative; margin: 0; }
.doctor__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1rem -1rem -1rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--gradient-brand);
  opacity: .28;
}
.doctor__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.doctor__initials {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--gradient-brand);
  color: var(--color-on-band-brand);
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
}

.doctor__name { margin-bottom: .25rem; color: var(--color-heading); }
.doctor__role {
  margin-bottom: .9rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-link);
}
.doctor__creds {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}
.doctor__creds li {
  padding: .25rem .7rem;
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  background: var(--color-band-wash);
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-link);
}
.doctor__body p { color: var(--color-ink-2); }
.doctor__location {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .8rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-ink-3);
}
.doctor__location svg { width: 18px; height: 18px; color: var(--color-icon); }

@media (min-width: 780px) {
  .doctor { grid-template-columns: minmax(220px, 320px) 1fr; gap: 2.25rem; }
}

/* --- begin / how-do-I-start ---------------------------------------------- */

.pd-begin__inner { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.pd-begin__media { margin: 0; }
.pd-begin__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-brand-border);
  box-shadow: var(--shadow-md);
}

.step-list { display: grid; gap: .85rem; margin-top: 1.25rem; }
.step-list li { display: flex; align-items: flex-start; gap: .75rem; }
.step-list__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--color-on-band-brand);
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 800;
}

@media (min-width: 900px) {
  .pd-begin__inner { grid-template-columns: .85fr 1.15fr; }
}

/* --- warranty ------------------------------------------------------------ */

.pd-warranty {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--color-brand-border);
}
.pd-warranty__inner { display: flex; gap: 1.25rem; align-items: flex-start; }
.pd-warranty__inner > svg {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 8px;
  border-radius: 50%;
  background: var(--color-cta);
  color: var(--color-on-cta);
}
.pd-warranty__title { font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: var(--color-heading); }
.pd-warranty__fine { font-size: .8rem; color: var(--color-ink-4); }

/* Icon above the copy once the band is narrow. Side by side, the badge sits
   off to the left of centred text and reads as though it has come adrift.
   Matched to the breakpoint where this band's text centres, so the two rules
   cannot disagree. */
@media (max-width: 1023px) {
  .pd-warranty__inner {
    flex-direction: column;
    align-items: center;
    gap: .9rem;
  }
}

/* --- survey (template B) -------------------------------------------------- */

.pd-survey__inner { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
/* Held a little under the column width so it reads as a supporting image
   rather than competing with the form beside it. Centred on what it gives up. */
.pd-survey__img {
  display: block;
  width: 100%;
  max-width: 88%;
  margin-top: 1.25rem;
  margin-inline: auto;
  border-radius: var(--radius-lg);
}
.pd-survey__form .hl-slot {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-style: solid;
  border-color: var(--color-brand-border);
  border-top: 4px solid var(--color-primary);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

/* The survey copy reads as an invitation, so it is centred in its column —
   eyebrow rule included, which is left-aligned by default. */
.pd-survey__copy { text-align: center; }
.pd-survey__copy .eyebrow::after { margin-inline: auto; }

@media (min-width: 900px) {
  .pd-survey__inner { grid-template-columns: 1fr 1fr; }
}

/* --- patient photo testimonials ------------------------------------------ */

.patient-grid { display: grid; gap: 1.25rem; }
.patient {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-brand-border);
  border-bottom: 3px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.patient__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.patient__body { padding: 1.1rem 1.2rem; }
.patient__quote { margin: .5rem 0 .75rem; font-size: .95rem; color: var(--color-ink-2); }
.patient__meta { display: flex; flex-direction: column; margin: 0; }
.patient__name { font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); }
.patient__treatment { font-size: .85rem; color: var(--color-link); }

@media (min-width: 620px) { .patient-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .patient-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- video testimonials --------------------------------------------------- */

.video-grid { display: grid; gap: 1.25rem; }
.video-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-brand-border);
  box-shadow: var(--shadow-sm);
}
.video-card__link { position: relative; display: block; }
.video-card__thumb { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.video-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), .92);
  box-shadow: var(--shadow-md);
}
.video-card__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--color-on-primary);
}
/* Real embed. The frame keeps the player fluid at the same 16/11 crop the
   thumbnail shell uses, so a card with a video and a card without are the same
   height and the grid does not reflow. */
.video-card__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  background: var(--color-video-bg);
}
.video-card__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-card__body { padding: 1rem 1.15rem; }
.video-card__title { margin: 0 0 .15rem; font-size: 1.05rem; color: var(--color-heading); }
.video-card__treatment { margin: 0; font-size: .85rem; color: var(--color-ink-3); }

@media (min-width: 620px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .video-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- gallery (Empower Your Smile) ---------------------------------------- */

.gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.gallery-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 2px solid var(--color-brand-border);
}

@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Google reviews ------------------------------------------------------ */

.review-grid { display: grid; gap: 1.25rem; }
.review {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-brand-border);
  border-top: 3px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.review__quote { font-size: .96rem; color: var(--color-ink-2); }
.review__meta { display: flex; flex-direction: column; margin: 0; margin-top: auto; }
.review__name { font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); }
.review__source { font-size: .8rem; color: var(--color-link); }

@media (min-width: 760px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- footer -------------------------------------------------------------- */

.pd-footer {
  background: var(--color-dark-3);
  color: var(--color-on-dark-muted);
  border-top: 4px solid var(--color-primary);
}
.pd-footer a { color: var(--color-on-dark); }
.pd-footer a:hover { color: var(--color-dark-eyebrow); }
.pd-footer h2, .pd-footer h3 { color: var(--color-on-dark); }

.pd-footer__inner {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.pd-footer__logo { max-height: 62px; width: auto; object-fit: contain; }
.pd-footer__wordmark { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; color: var(--color-on-dark); }
.pd-footer__about { margin-top: .9rem; font-size: .92rem; max-width: 40ch; }

.pd-footer__social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.pd-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 40px;
  padding: .35rem .8rem;
  border: 1px solid var(--color-dark-line);
  border-radius: var(--radius-pill);
  font-size: .82rem;
  text-decoration: none;
}
.pd-footer__social svg { width: 16px; height: 16px; color: var(--color-dark-icon); }
.pd-footer__social a:hover { background: var(--color-dark-card); border-color: var(--color-dark-icon); }

.pd-footer__locations { display: grid; gap: 1.5rem; }
.pd-footer__loc-name { margin-bottom: .5rem; font-size: 1rem; }
.pd-footer__row { margin-bottom: .5rem; font-size: .92rem; }
.pd-footer__label {
  display: block;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-dark-eyebrow);
}
.pd-footer__phone { font-size: 1.1rem; font-weight: 700; }
.pd-footer__addr-line { display: block; }

.pd-footer__hours dt { font-weight: 700; color: var(--color-on-dark); }
.pd-footer__hour { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; padding-block: .15rem; }
.pd-footer__hour dd { margin: 0; }

.pd-footer__legal { border-top: 1px solid var(--color-dark-line); background: var(--color-dark-2); }
.pd-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.1rem;
  font-size: .82rem;
}
.pd-footer__legal p { margin: 0; }
.pd-footer__links { display: flex; gap: 1rem; }

@media (min-width: 860px) {
  .pd-footer__inner { grid-template-columns: 1.1fr 1fr .8fr; }
  .pd-footer__locations { grid-template-columns: 1fr; }
}

/* --- sticky mobile click-to-call (mandatory module) ---------------------- */

.sticky-call {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  gap: .5rem;
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 2px solid var(--color-primary);
  box-shadow: 0 -8px 24px -14px rgba(var(--color-dark-rgb), .5);
}
.sticky-call a {
  flex: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 50px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
}
.sticky-call__phone { background: var(--color-cta); color: var(--color-on-cta); }
@media (max-width: 400px) { .sticky-call a { font-size: .82rem; } }
.sticky-call__phone svg { width: 19px; height: 19px; }
.sticky-call__cta { border: 2px solid var(--color-cta); color: var(--color-link); }

@media (min-width: 860px) { .sticky-call { display: none; } }
@media (max-width: 859px) { body { padding-bottom: 74px; } }

/* --- sticky reviews button ----------------------------------------------- */

/* Bottom-left overlay linking out to the Google listing, matching the button
   Lakeside runs on their own site: white pill, 2em radius, soft shadow, Google
   mark, amber rating. Their measurements are kept in em as they wrote them. */
.sticky-reviews {
  position: fixed;
  bottom: 2em;
  left: 2em;
  z-index: 999;
  display: flex;
  align-items: center;
  padding: 1em;
  border-radius: 2em;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .05);
  line-height: 100%;
  text-decoration: none;
}
.sticky-reviews__mark { width: 1.75em; height: 1.75em; margin-right: .5em; flex: none; }
.sticky-reviews__text { display: flex; flex-direction: column; gap: .25em; }
/* Lakeside sets this in their own brand blue. We take the client's heading
   colour instead, so the button reads correctly on all four palettes. */
.sticky-reviews__top {
  text-transform: uppercase;
  font-size: .875em;
  color: var(--color-heading);
}
.sticky-reviews__rating {
  display: flex;
  align-items: center;
  gap: .35em;
  color: #f69942;
  font-weight: 600;
}

/* Lakeside hides theirs below 767px. Ours hides below 860px instead — that is
   where OUR sticky call bar appears, and the two would otherwise collide. */
@media (max-width: 859px) {
  .sticky-reviews { display: none; }
}

/* Practices that only publish a knockout (white) logo get a dark chip in the
   light header so the mark stays legible. */
.pd-logo--on-dark {
  padding: .35rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--gradient-dark);
}

/* On phones the hero is compressed so the lead-capture card reaches the fold.
   (Mandatory module: lead capture above the fold on mobile and desktop.) */
@media (max-width: 559px) {
  .pd-hero__inner { padding-block: 1rem; gap: .9rem; }
  /* Down from ~36px. The headline was running to four lines at 166px, which on
     its own pushed the lead form under the fold. */
  .pd-hero__headline { font-size: 1.75rem; line-height: 1.15; }
  .pd-hero__sub { font-size: .92rem; }
  .pd-hero__badges { margin-top: .75rem; gap: .3rem .9rem; }
  .pd-hero__badges li { font-size: .84rem; }

  /* base.css already intends the two CTAs to share a row here, but `flex: 1 1
     auto` lets a .btn--lg keep its natural width, so they wrapped to two rows
     and cost 122px. Forcing a zero flex-basis makes them actually share it. */
  .pd-hero .btn-row { margin-top: .9rem; gap: .5rem; flex-wrap: nowrap; }
  .pd-hero .btn-row > .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: .6rem;
    font-size: .9rem;
  }

  .lead-card { padding: 1rem; }
  .lead-card__sub { font-size: .9rem; }
  .lead-card__points { margin: .6rem 0; gap: .35rem; }
}

/* ==========================================================================
   BAND SYSTEM — where the brand colour actually lands.

   generate.js stamps every rendered <section> with `pd-band pd-band--<tone>`
   from the per-template map in SECTION_BANDS. The tones alternate white,
   brand-tinted, solid brand and dark, which is the rhythm PD's own templates
   get their branded feel from. A tone can only ever restyle a section the
   canonical order already renders — it cannot add, remove or reorder one.
   ========================================================================== */

.pd-band { position: relative; }

.pd-band--surface { background: var(--color-surface); }
.pd-band--wash    { background: var(--color-band-wash); }
.pd-band--tint    { background: var(--color-band-tint); }
.pd-band--accent  { background: var(--color-band-accent); }

/* Solid brand strip, white copy. */
.pd-band--brand {
  background: var(--gradient-brand);
  color: var(--color-on-band-brand);
}
/* Brand-shifted dark strip, white copy. */
.pd-band--dark {
  background: var(--gradient-dark);
  color: var(--color-on-dark-muted);
}

/* --- copy on a tinted band ----------------------------------------------- */

.pd-band--tint .treatment,
.pd-band--tint .patient,
.pd-band--tint .video-card,
.pd-band--tint .review,
.pd-band--accent .treatment,
.pd-band--accent .patient,
.pd-band--accent .video-card,
.pd-band--accent .review { border-color: var(--color-brand-border-strong); }

.pd-band--tint .benefit-grid__item,
.pd-band--accent .benefit-grid__item { background: var(--color-surface); }

/* --- copy on a brand or dark band ---------------------------------------- */

.pd-band--brand h1, .pd-band--brand h2, .pd-band--brand h3,
.pd-band--brand .section-title,
.pd-band--brand .pd-call-bar__title,
.pd-band--brand .pd-value-prop__title { color: var(--color-on-band-brand); }
.pd-band--brand .section-lede,
.pd-band--brand p { color: var(--color-on-band-brand-muted); }
.pd-band--brand .eyebrow { color: var(--color-on-band-brand-muted); }
.pd-band--brand .eyebrow::after { background: var(--color-on-band-brand); }

.pd-band--dark h1, .pd-band--dark h2, .pd-band--dark h3,
.pd-band--dark .section-title,
.pd-band--dark .pd-call-bar__title,
.pd-band--dark .pd-value-prop__title,
.pd-band--dark .treatment__title,
.pd-band--dark .video-card__title,
.pd-band--dark .patient__name,
.pd-band--dark .review__name,
.pd-band--dark .doctor__name,
.pd-band--dark .lead-card__title { color: var(--color-on-dark); }

.pd-band--dark .section-lede,
.pd-band--dark p,
.pd-band--dark .treatment__desc,
.pd-band--dark .treatment__features li,
.pd-band--dark .video-card__treatment,
.pd-band--dark .patient__quote,
.pd-band--dark .review__quote,
.pd-band--dark .doctor__body p { color: var(--color-on-dark-muted); }

.pd-band--dark .eyebrow,
.pd-band--dark .treatment__num,
.pd-band--dark .doctor__role,
.pd-band--dark .patient__treatment,
.pd-band--dark .review__source,
.pd-band--dark .ifyou__prefix { color: var(--color-dark-eyebrow); }
.pd-band--dark .eyebrow::after { background: var(--color-dark-icon); }

.pd-band--dark .hl { color: var(--color-dark-eyebrow); }

.pd-band--dark .check-list svg,
.pd-band--dark .benefit-grid__item svg,
.pd-band--dark .doctor__location svg {
  background: var(--color-dark-card);
  color: var(--color-dark-icon);
}
.pd-band--dark .treatment__features li::before { background: var(--color-dark-icon); }
.pd-band--dark .stars { color: var(--color-dark-line); }
.pd-band--dark .stars .star.is-on { color: var(--color-dark-icon); }

/* Cards on a dark band become translucent panels rather than white boxes. */
.pd-band--dark .benefit-grid__item,
.pd-band--dark .treatment,
.pd-band--dark .patient,
.pd-band--dark .video-card,
.pd-band--dark .review,
.pd-band--dark .doctor__creds li {
  background: var(--color-dark-card);
  border-color: var(--color-dark-line);
  color: var(--color-on-dark-muted);
  box-shadow: none;
}
.pd-band--dark .benefit-grid__item { border-left-color: var(--color-dark-icon); }
.pd-band--dark .patient { border-bottom-color: var(--color-dark-icon); }
.pd-band--dark .review { border-top-color: var(--color-dark-icon); }
.pd-band--dark .doctor__creds li { color: var(--color-dark-eyebrow); }

.pd-band--dark .btn--ghost,
.pd-band--brand .btn--ghost {
  background: transparent;
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
}
.pd-band--dark .btn--ghost:hover,
.pd-band--brand .btn--ghost:hover { background: var(--color-on-dark); color: var(--color-ink); }

.pd-band--dark .btn--outline {
  border-color: var(--color-dark-icon);
  color: var(--color-on-dark);
}
.pd-band--dark .btn--outline:hover { background: var(--color-dark-icon); color: var(--color-ink); }

.pd-band--dark .hl-slot,
.pd-band--brand .hl-slot { background: var(--color-dark-card); border-color: var(--color-dark-line); }
/* The survey form is the conversion element on its section, so it stays a
   solid white card even when the band around it is dark. */
.pd-band--dark .pd-survey__form .hl-slot { background: var(--color-surface); border-color: var(--color-brand-border); }

.pd-band--dark .pd-split__media::before { background: var(--color-dark-card); }
.pd-band--dark .pd-begin__media img { border-color: var(--color-dark-line); }
.pd-band--dark .gallery-grid img { border-color: var(--color-dark-line); }

/* --- band adjacency ------------------------------------------------------
   A dark band that lands directly against a photographic band has no visible
   edge: the hero photograph is dark at its foot, the band under it is dark,
   and the two read as one undifferentiated mass with the section boundary
   gone. A pure-white hairline restores the edge. Driven by adjacency, so it
   holds for every client, template and variant — including palettes darker or
   lighter than today's four — and it changes nothing structural. */

.pd-band--image + .pd-band--dark,
.pd-band--dark + .pd-band--image { border-top: 1px solid #ffffff; }

/* --- mobile & tablet text alignment --------------------------------------
   On phones and tablets copy is centred by default: at those widths the page
   is a single column and centred text reads as deliberate. A band carrying a
   BULLET list is the exception — ragged-right bullets under centred headings
   look broken, so the whole band goes left-aligned, headings and all, not just
   the bullets themselves.

   Which lists count as bullets is decided at build time in generate.js
   (BULLET_LIST_CLASSES) and stamped on as .pd-band--has-bullets. Card and
   media grids are not bullets and stay centred.

   Kept last in this file so it beats the component-level centring above
   (.pd-survey__copy, .lead-card__note and friends) without needing !important.
   Buttons are untouched: .btn keeps its own centred label. */
@media (max-width: 1023px) {
  .pd-band { text-align: center; }

  .pd-band--has-bullets,
  .pd-band--has-bullets :where(
    h1, h2, h3, h4, h5, p, li, ul, ol, dl, dt, dd,
    figcaption, blockquote, .eyebrow, .section-head
  ) {
    text-align: left;
  }
  /* .section-head is a narrow centred block; left-aligned copy inside a block
     that is still centred in the column reads as a mistake. */
  .pd-band--has-bullets .section-head { margin-inline: 0; }
}

/* --- desktop chat launcher ------------------------------------------------
   Bottom-right counterpart to the reviews button, built on <details> so the
   toggle is native: keyboard operable, no JavaScript, and it still opens if
   scripts fail. Desktop only — below 860px the sticky call bar owns the
   bottom of the screen and two overlays would fight for it. */
.pd-chat {
  position: fixed;
  right: 2em;
  bottom: 2em;
  z-index: 999;
}

/* The launcher itself. list-style/marker rules strip the native disclosure
   triangle that <summary> ships with. */
.pd-chat__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85em 1.15em;
  border-radius: var(--radius-pill);
  background: var(--color-cta);
  color: var(--color-on-cta);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 10px 26px -10px rgba(var(--color-dark-rgb), .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pd-chat__toggle::-webkit-details-marker { display: none; }
.pd-chat__toggle::marker { content: ""; }
.pd-chat__toggle:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(var(--color-dark-rgb), .6); }
.pd-chat__toggle svg { width: 20px; height: 20px; flex: none; }

/* Open state: the launcher collapses to a compact close affordance so the
   panel is the thing being looked at, not the button under it. */
.pd-chat[open] .pd-chat__toggle-label { display: none; }
.pd-chat[open] .pd-chat__toggle { padding: .85em; }

/* The browser's default hiding of closed <details> content does not catch an
   absolutely positioned child — without this the panel renders permanently. */
.pd-chat:not([open]) .pd-chat__panel { display: none; }

/* The panel sits above the launcher and is anchored to the same corner. */
.pd-chat__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + .75rem);
  width: min(340px, calc(100vw - 4em));
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 24px 48px -20px rgba(var(--color-dark-rgb), .55);
  overflow: hidden;
}

.pd-chat__head {
  padding: 1rem 1.1rem;
  background: var(--gradient-brand);
  color: var(--color-on-band-brand);
}
.pd-chat__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
.pd-chat__sub { margin: .3rem 0 0; font-size: .85rem; opacity: .92; }

.pd-chat__body { padding: 1.1rem; }
.pd-chat__call { margin-top: .9rem; font-size: .9rem; color: var(--color-ink-3); text-align: center; }
.pd-chat__call a { font-weight: 700; }
.pd-chat__note { margin-top: .6rem; font-size: .78rem; color: var(--color-ink-4); text-align: center; }

@media (max-width: 859px) {
  .pd-chat { display: none; }
}

/* Chat panel form — the placeholder standing in for the HighLevel iframe.
   The hl-slot keeps its data attribute and marker comment so the handoff is
   still obvious in the markup, but sheds the dashed placeholder chrome: inside
   the panel it would read as a broken box rather than a form. */
.pd-chat .hl-slot {
  padding: 0;
  border: 0;
  background: none;
}
.pd-chat__form { display: grid; gap: .7rem; }
.pd-chat__field { margin: 0; display: grid; gap: .25rem; }
.pd-chat__field label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-ink-3);
}
.pd-chat__field input {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--color-brand-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: .92rem;
}
.pd-chat__field input::placeholder { color: var(--color-ink-4); }
.pd-chat__field input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.pd-chat__form .btn { margin-top: .2rem; }

/* An icon in a circular portrait slot. The photo size (112-152px) blows a
   192px icon up past its resolution and the circular crop bites into it, so
   icons render smaller and `contain` instead of `cover` — nothing gets cropped,
   and the surrounding disc reads as a badge rather than a broken photograph. */
.pd-call-bar__mark.is-icon,
.pd-value-prop__mark.is-icon {
  width: clamp(72px, 8vw, 92px);
  height: clamp(72px, 8vw, 92px);
  object-fit: contain;
  padding: .5rem;
  background: var(--color-surface);
}


/* ==========================================================================
   Skin: implants-a — reproduces the design language of
   https://template.bosciaimplantslp.kinsta.cloud/
   Light, airy, generous white space; centred section heads; soft cards; the
   brand carried by tinted bands, rules and icon fills rather than by weight.

   Section backgrounds are NOT set here — they come from the band tones in
   generate.js (SECTION_BANDS), so the alternation stays declarative and in
   one place. This file only adjusts type and shape.
   ========================================================================== */

.t-implants-a .section-title { text-transform: none; }

.t-implants-a .eyebrow {
  font-size: .82rem;
  letter-spacing: .18em;
  color: var(--color-secondary-ink);
}
.t-implants-a .pd-band--dark .eyebrow,
.t-implants-a .pd-band--brand .eyebrow { color: inherit; }
.t-implants-a .pd-band--dark .eyebrow { color: var(--color-dark-eyebrow); }

/* The Boscia page leans on quiet bands between the loud CTA strips, so the
   tinted ones are held back a step and the cards inside them stay white. */
.t-implants-a .benefit-grid__item {
  border-inline-width: 1px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-band-wash);
}
.t-implants-a .pd-band--tint .benefit-grid__item { background: var(--color-surface); }

.t-implants-a .treatment { border-radius: var(--radius); }

/* The candidacy checklist is the page's argument, so it gets a brand-tinted
   panel of its own inside the tinted band rather than sitting loose on it. */
.t-implants-a .pd-candidacy .check-list {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.t-implants-a .pd-reviews .review { text-align: left; }


/* ==========================================================================
   Variant 1 — Standard.
   Split hero with the lead card alongside, services in a grid, quiet spacing.

   Colour weight: the middle setting. The band rhythm, brand rules, icon fills
   and brand-tinted borders from components.css are used as authored — bold
   pushes them harder, minimal pulls them back. A variant is presentation only
   and never touches section structure.
   ========================================================================== */

.v-standard .pd-hero__aside { position: relative; }

@media (min-width: 1100px) {
  .v-standard .pd-hero__inner { grid-template-columns: 1.2fr .8fr; }
}

/* Two white sections in a row need an edge; a brand hairline is that edge. */
.v-standard .pd-band--surface + .pd-band--surface { border-top: 1px solid var(--color-brand-border); }

/* A brand-tinted seam under every section head keeps the colour present even
   on the plain white bands. */
.v-standard .pd-band--surface .section-head,
.v-standard .pd-band--wash .section-head { padding-bottom: .25rem; }