/* The original WordPress/Elementor kit's own body font (its global styles
   define --e-global-typography-text-font-family / -accent-... as "Nunito
   Sans" — see site/wp-content/uploads/elementor/css/post-6_*.css). The
   mirror only links it on the pages that happen to use it natively;
   declared here so it's guaranteed on all 28 pages, and used as --bd-sans
   for paragraphs, nav, buttons, and every other small/functional bit of
   text we style ourselves — matching the WordPress site's real typography
   instead of substituting a different sans. */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");
/* also still used natively by a handful of the mirror's own untouched
   Elementor widgets, kept loaded for those */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* The client's brand display face, for headings only (the mirror only links
   its own @font-face on one page — declare it ourselves so it's on all 28). */
@font-face {
  font-family: "Recline";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("/wp-content/uploads/2026/04/Recline-Light.ttf") format("truetype");
}

/* ===========================================================================
   BeauDent — our overrides on top of the captured beaudent.ca mirror.
   Loaded last on every page. Grouped by the client's change-list item.
   Palette (client brand colours, set by the "Global Colors" brand review):
     navy #19283C · turquoise #81D9E6 · gold/yellow #FFD21A · beige #faf8f5
   =========================================================================== */

:root {
  --bd-navy: #19283c;       /* brand Dark Navy */
  --bd-navy-2: #223650;     /* one step lighter, for layered header bars */
  --bd-aqua: #81d9e6;       /* brand Turquoise */
  --bd-aqua-2: #b7e4eb;     /* lighter turquoise, for hovers */
  --bd-aqua-deep: #258493;  /* darkened turquoise — readable on white */
  --bd-cream: #faf8f5;      /* brand Offwhite/Beige */
  --bd-hair: #e8e2d9;
  --bd-gold: #ffd21a;       /* brand Gold/Yellow */
  --bd-gold-2: #eab700;     /* a touch deeper, for hover */
  --bd-grey: #7c828c;       /* medium grey — grey button fill */
  --bd-grey-ink: #55585f;   /* medium grey — grey button/label text */
  --bd-font: "Recline", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Recline ships a single Light face — never ask for a bold it doesn't have
   (that triggers an ugly faux-bold / fallback). Weight comes from size,
   colour and spacing instead. */
.bd-announce, .bd-topbar, .bd-mainbar, .bd-infoline,
.bd-announce *, .bd-topbar *, .bd-mainbar *, .bd-infoline * {
  font-weight: 400;
  font-synthesis: none;
}

/* ===========================================================================
   #2  FULL HEADER REBUILD  (reference layout, BeauDent colours)
   =========================================================================== */
header.elementor-location-header[data-bd-replaced] { display: none !important; }

/* wrapper generates no box so the sticky main bar sticks against <body> */
.bd-header { display: contents; }
.bd-announce, .bd-topbar, .bd-mainbar, .bd-infoline { font-family: var(--bd-font); box-sizing: border-box; }
.bd-mainbar *, .bd-topbar *, .bd-infoline * { box-sizing: border-box; }

/* --- announcement ribbon (#10) --- */
.bd-announce {
  background: var(--bd-navy);
  color: var(--bd-aqua);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 10px 16px;
}

/* --- header right-side cluster: Call + Book (yellow) + search ------------ */
.bd-headactions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.bd-headactions a { text-decoration: none; }
/* Call + Book: matched yellow pills (kept yellow — client review round 6:
   only the hero's two CTA buttons move to blue, everything else that was
   already yellow stays yellow). Real bold sans, not the Recline display
   face — Recline only ships a Light weight, and its faux-bold rendering
   was reading as thin/hard to read at button sizes (client review round 8). */
.bd-topbar__call,
.bd-topbar__book {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bd-gold);
  color: var(--bd-navy);
  font-family: var(--bd-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  text-transform: none;
  padding: 12px 20px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background-color .2s ease, transform .16s ease;
}
.bd-topbar__call svg { width: 16px; height: 16px; color: var(--bd-navy); flex: none; }
.bd-topbar__call:hover,
.bd-topbar__book:hover { background: var(--bd-gold-2); transform: translateY(-1px); }

/* address — now lives on the info line, under the logo */
.bd-topbar__addr { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; letter-spacing: .012em; color: inherit; text-decoration: none; }
.bd-topbar__addr:hover { text-decoration: underline; }
.bd-topbar__addr svg { width: 16px; height: 16px; flex: none; color: var(--bd-aqua); }

/* --- main bar (sticky) --- */
.bd-mainbar {
  position: sticky;
  top: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bd-navy);
  padding: 22px clamp(16px, 5vw, 60px);
  box-shadow: 0 2px 18px rgba(10, 16, 26, .18);
}
.bd-logo { flex: none; display: inline-flex; }
.bd-logo img { height: 80px; width: auto; display: block; }

.bd-nav { margin-left: auto; }
.bd-nav__list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bd-nav__item { position: relative; }
.bd-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 200px;                /* every tab the same size (fits the widest label) */
  background: var(--bd-aqua);
  color: var(--bd-navy);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: .01em;
  padding: 12px 18px;
  border-radius: 10px;            /* rounded rectangle, matches the CTA buttons */
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.bd-nav__link:hover,
.bd-nav__item:focus-within > .bd-nav__link { background: var(--bd-gold); color: var(--bd-navy); }
.bd-nav__link.is-active { background: #fff; color: var(--bd-navy); }
.bd-caret { width: 16px; height: 16px; opacity: .85; }
.bd-nav__toggle { display: none; }

.bd-nav__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 256px;
  background: #fff;
  border: 1px solid var(--bd-hair);
  border-radius: 12px;
  box-shadow: 0 24px 48px -20px rgba(16, 26, 36, .35);
  padding: 8px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.bd-nav__item--has-sub:hover > .bd-nav__drop,
.bd-nav__item--has-sub:focus-within > .bd-nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.bd-nav__drop li a {
  display: block;
  padding: 10px 14px;
  border-radius: 7px;
  color: var(--bd-navy);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.bd-nav__drop li a:hover { background: var(--bd-cream); color: var(--bd-aqua-deep); }

.bd-search {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.bd-search svg { width: 19px; height: 19px; }
.bd-search:hover { border-color: var(--bd-aqua); color: var(--bd-aqua); }

.bd-burger { display: none; }

/* --- info line (#7): address (under the logo) · fee-guide text · socials --- */
.bd-infoline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 22px;
  background: var(--bd-navy-2);
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  font-weight: 500;
  padding: 12px clamp(16px, 5vw, 56px);
}
.bd-infoline__txt { flex: 1 1 auto; text-align: center; }
.bd-infoline .bd-topbar__addr { flex: none; color: rgba(255, 255, 255, .92); }
.bd-infoline__txt b { color: var(--bd-aqua); margin: 0 5px; }
.bd-social { display: inline-flex; align-items: center; gap: 10px; }
.bd-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bd-social a:hover { background: var(--bd-aqua); border-color: var(--bd-aqua); color: var(--bd-navy); }
.bd-social svg { width: 15px; height: 15px; }

/* --- responsive: burger nav below 1024px --- */
@media (max-width: 1023px) {
  .bd-burger {
    order: 3;
    margin-left: auto;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;
    cursor: pointer;
  }
  .bd-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: .2s; }
  .bd-mainbar.is-open .bd-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .bd-mainbar.is-open .bd-burger span:nth-child(2) { opacity: 0; }
  .bd-mainbar.is-open .bd-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .bd-search { display: none; }

  .bd-nav {
    order: 4;
    flex-basis: 100%;
    margin: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height .28s ease;
  }
  .bd-mainbar.is-open .bd-nav { max-height: 80vh; overflow-y: auto; }
  .bd-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-top: 10px; }
  .bd-nav__item { border-top: 1px solid rgba(255, 255, 255, .1); }
  .bd-nav__link {
    padding: 15px 6px;
    font-size: 17px;
    border-radius: 0;
    flex: 1;
    background: transparent;
    color: #fff;
  }
  .bd-nav__link:hover,
  .bd-nav__link.is-active { background: rgba(255, 255, 255, .08); color: var(--bd-aqua); }
  .bd-nav__item--has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .bd-nav__item--has-sub > .bd-nav__link .bd-caret { display: none; }
  .bd-nav__toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
  }
  .bd-nav__toggle .bd-caret { width: 20px; height: 20px; transition: transform .2s ease; }
  .bd-nav__item.is-open .bd-nav__toggle .bd-caret { transform: rotate(180deg); }
  .bd-nav__drop {
    position: static;
    flex-basis: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, .16);
    padding: 4px 4px 10px;
    display: none;
  }
  .bd-nav__item.is-open > .bd-nav__drop { display: block; }
  .bd-nav__drop li a { color: rgba(255, 255, 255, .85); }
  .bd-nav__drop li a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
}

@media (max-width: 640px) {
  .bd-topbar { flex-direction: column; gap: 8px; text-align: center; padding: 10px 14px; }
  .bd-topbar__right { gap: 14px; }
  .bd-infoline { font-size: 12.5px; gap: 6px 14px; }
}

/* ===========================================================================
   #9  Services tiles right after the hero (replaces "04 · Services overview")
   =========================================================================== */
body.page-id-11 .elementor-element-a48e614 { display: none !important; }

.bd-services { background: #fff; }
.bd-services__eyebrow {
  margin: 0 0 12px;
  font-family: var(--bd-font);
  font-size: 19px;
  letter-spacing: .04em;
  color: var(--bd-aqua-deep);
}
.bd-services__h {
  margin: 0 0 clamp(34px, 4vw, 52px);
  font-family: var(--bd-font);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  line-height: 1.14;
  color: var(--bd-navy);
  max-width: 22ch;
}
.bd-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.bd-svc-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 36px 34px 32px;
  border: 1px solid var(--bd-hair);
  border-radius: 18px;
  background: var(--bd-cream);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.bd-svc-card:hover {
  transform: translateY(-4px);
  background: #fff;
  border-color: var(--bd-aqua-2);
  box-shadow: 0 30px 52px -28px rgba(16, 26, 36, .4);
}
.bd-svc-num {
  font-family: var(--bd-font);
  font-size: 18px;
  letter-spacing: .12em;
  color: var(--bd-aqua-deep);
}
.bd-svc-title {
  font-family: var(--bd-font);
  font-size: 1.55rem;
  color: var(--bd-navy);
  line-height: 1.22;
}
.bd-svc-desc { font-size: 17px; line-height: 1.6; color: #444; flex: 1; }
.bd-svc-more {
  margin-top: 8px;
  font-family: var(--bd-font);
  font-size: 15.5px;
  letter-spacing: .02em;
  color: var(--bd-aqua-deep);
}
@media (max-width: 1180px) {
  .bd-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .bd-services__grid { grid-template-columns: 1fr; }
}

/* ---------- Homepage section type: the eyebrow label is the headline,
   the old headline drops to a supporting sub-line under it ---------- */
body.page-id-11 .elementor.elementor-11 h6.elementor-heading-title {
  font-family: var(--bd-font) !important;
  font-weight: 900 !important;
  font-synthesis: weight !important;
  -webkit-text-stroke: 0.4px currentColor;
  /* same canonical size as every other homepage section heading (client
     review round 5: "should not vary throughout the page") */
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.6rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0.06em !important;
  color: var(--bd-navy);
  margin-bottom: .3em;
  text-transform: none;
}
body.page-id-11 .elementor.elementor-11 h2 {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #55606c;
}
body.page-id-11 .elementor.elementor-11 .elementor-widget-text-editor {
  font-size: 1.375rem !important;
  line-height: 1.7 !important;
  font-weight: 300 !important;
}
body.page-id-11 .elementor.elementor-11 .elementor-widget-text-editor p {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

/* ===========================================================================
   #8  Sticky "Book Online" rail
   =========================================================================== */
.bd-sticky-book {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  z-index: 9999;
  background: var(--bd-gold);
  color: var(--bd-navy);
  font-family: var(--bd-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 12px;
  /* rotate(180deg) above flips this — net result: curved on the left (facing
     the page), straight flush against the right screen edge */
  border-radius: 0 10px 10px 0;
  box-shadow: 0 6px 24px rgba(16, 26, 36, .28);
  transition: background-color .2s ease, padding .2s ease;
}
.bd-sticky-book:hover { background: var(--bd-gold-2); padding-right: 16px; }
@media (max-width: 767px) {
  .bd-sticky-book {
    top: auto; bottom: 14px; right: 14px;
    transform: none; writing-mode: horizontal-tb;
    border-radius: 10px; padding: 12px 20px; font-size: 13px;
  }
}

/* ===========================================================================
   #11 / #12 / #13  Pull sections 05, 07, 08 off the homepage
   Content re-used on the New Patients / Invisalign pages.
   =========================================================================== */
body.page-id-11 .elementor-element-7da564d,   /* 05 · New patient experience */
body.page-id-11 .elementor-element-a4d64e9,   /* 07 · Invisalign feature    */
body.page-id-11 .elementor-element-a33c3ba,   /* 08 · CDCP                   */
body.page-id-11 .elementor-element-ab4c390 {  /* mid-page accreditation ribbon — now in the header */
  display: none !important;
}

/* ===========================================================================
   #14  FAQ: plain list, copied from lumi-dental.ca's FAQ layout at the
   client's request (round 26) — centred heading, a left-aligned list of
   plain rows below it, each separated by a thin bottom divider, chevron on
   the right, no cards/badges/shadows. Our own questions and answers, their
   layout.
   =========================================================================== */
.elementor-element-7845ccb .e-n-accordion {
  display: flex;
  flex-direction: column;
}
.elementor-element-7845ccb .e-n-accordion-item {
  margin: 0 !important;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bd-hair);
  border-radius: 0;
}
.elementor-element-7845ccb .e-n-accordion-item::-webkit-details-marker { display: none; }
.elementor-element-7845ccb .e-n-accordion-item-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 4px !important;
  font-family: var(--bd-font) !important;
  font-weight: 500 !important;
  color: var(--bd-navy) !important;
  cursor: pointer;
  transition: color .2s ease;
}
.elementor-element-7845ccb .e-n-accordion-item-title-header { flex: 1 1 auto; }
.elementor-element-7845ccb .e-n-accordion-item-title:hover { color: var(--bd-aqua-deep) !important; }
.elementor-element-7845ccb .e-n-accordion-item[open] .e-n-accordion-item-title {
  color: var(--bd-aqua-deep) !important;
}
.elementor-element-7845ccb .e-n-accordion-item-title-icon {
  flex: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--bd-navy);
  transition: transform .3s ease;
}
.elementor-element-7845ccb .e-n-accordion-item-title-icon svg { width: 15px; height: 15px; }
.elementor-element-7845ccb .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  color: var(--bd-aqua-deep);
  transform: rotate(180deg);
}
.elementor-element-7845ccb .e-n-accordion-item-title + * { padding: 0 28px 22px 4px !important; }

/* ===========================================================================
   Post-FAQ closing section: cleaner, more navigable (client request)
   Replaces the old "Let's get started" CTA + an empty spacer section.
   =========================================================================== */
body.page-id-11 .elementor-element-f6e3688,
body.page-id-11 .elementor-element-4a4c741 { display: none !important; }

.bd-cta { background: var(--bd-navy); font-family: var(--bd-font); }
.bd-cta__inner {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 100px) clamp(20px, 5vw, 40px);
  text-align: center;
}
.bd-cta__eyebrow {
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bd-aqua);
}
.bd-cta__h {
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.18;
  color: #fff;
  font-weight: 400;
}
.bd-cta__sub {
  margin: 0 auto 32px;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}
.bd-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.bd-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 10px;
  font-size: 16px;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.bd-cta__btn--primary { background: var(--bd-aqua); color: var(--bd-navy); }
.bd-cta__btn--primary:hover { background: var(--bd-aqua-2); transform: translateY(-2px); }
.bd-cta__btn--ghost { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.bd-cta__btn--ghost:hover { border-color: var(--bd-aqua); color: var(--bd-aqua); }

.bd-cta__quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 26px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.bd-cta__quick a {
  font-size: 15px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color .15s ease;
}
.bd-cta__quick a:hover { color: var(--bd-aqua); }

/* ===========================================================================
   #16  Footer: Clinic Hours column (replaces Quick Links)
   =========================================================================== */
.bd-hours-col .elementor-heading-title { color: #fff; }
.bd-hours { list-style: none; margin: 12px 0 0; padding: 0; }
.bd-hours li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .82);
}
.bd-hours li span:first-child { color: rgba(255, 255, 255, .58); }

/* ===========================================================================
   SERVICE PAGES  (our own clean pages — /dental-checkups-cleanings-beaumont/ etc.)
   =========================================================================== */
body.bd-service-page {
  margin: 0;
  background: #fff;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
body.bd-service-page * { box-sizing: border-box; }
body.bd-service-page .bd-sp img { max-width: 100%; height: auto; }

.bd-sp__wrap { max-width: 1040px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 40px); }

.bd-sp__hero { background: var(--bd-navy); color: #fff; padding: clamp(48px, 7vw, 90px) 0; }
.bd-sp__eyebrow {
  margin: 0 0 14px;
  font-family: var(--bd-font);
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bd-aqua);
}
.bd-sp__h1 {
  margin: 0;
  font-family: var(--bd-font);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem);
  line-height: 1.12;
}
.bd-sp__tagline {
  margin: 14px 0 0;
  font-family: var(--bd-font);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  color: var(--bd-aqua);
}
.bd-sp__hero p:not(.bd-sp__tagline):not(.bd-sp__eyebrow) {
  margin: 20px 0 0;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, .82);
}
.bd-sp__hero-cta {
  display: inline-block;
  margin-top: 30px;
  padding: 14px 28px;
  border-radius: 10px;
  background: var(--bd-aqua);
  color: var(--bd-navy);
  font-family: var(--bd-font);
  font-size: 16px;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.bd-sp__hero-cta:hover { background: var(--bd-aqua-2); transform: translateY(-2px); }

/* Each section is now its own full-width band (client review round 7:
   alternating section backgrounds) — .bd-sp__wrap inside it (injected by
   scripts/alternate-section-backgrounds.mjs) handles the readable-width
   centring that .bd-sp__body used to provide on pages with multiple
   sections. The blogs listing page (one single section, nothing to
   alternate) still uses .bd-sp__body directly for that same padding. */
.bd-sp__body { padding: clamp(44px, 6vw, 76px) 0; }
.bd-sp__sec, .bd-sp__related { padding: clamp(40px, 6vw, 68px) 0; }
.bd-alt-a { background: var(--bd-cream); }
.bd-alt-b { background: #fff; }
.bd-sp__sec h2 {
  margin: 0 0 14px;
  font-family: var(--bd-font);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem);
  line-height: 1.2;
  color: var(--bd-navy);
}
.bd-sp__sec p { margin: 0 0 14px; }
.bd-sp__sec p:last-child { margin-bottom: 0; }

.bd-sp__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px 24px;
}
.bd-sp__list li {
  position: relative;
  padding-left: 28px;
  line-height: 1.5;
}
.bd-sp__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--bd-aqua-deep);
  border-bottom: 2px solid var(--bd-aqua-deep);
  transform: rotate(-45deg);
}

.bd-sp__related h2 { font-size: 1.3rem; }
.bd-sp__related ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.bd-sp__related a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--bd-hair);
  border-radius: 999px;
  color: var(--bd-navy);
  text-decoration: none;
  font-size: 15px;
  transition: border-color .15s ease, background-color .15s ease;
}
.bd-sp__related a:hover { border-color: var(--bd-aqua); background: var(--bd-cream); }

.bd-sp__cta { background: var(--bd-cream); border-top: 1px solid var(--bd-hair); }
.bd-sp__cta .bd-sp__wrap { padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); text-align: center; }
.bd-sp__cta h2 {
  margin: 0 0 10px;
  font-family: var(--bd-font);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  color: var(--bd-navy);
}
.bd-sp__cta p { margin: 0 auto 26px; max-width: 48ch; color: #555; }
.bd-sp__cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bd-sp__btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 10px;
  font-family: var(--bd-font);
  font-size: 16px;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.bd-sp__btn--primary { background: var(--bd-navy); color: #fff; }
.bd-sp__btn--primary:hover { background: #33455f; transform: translateY(-2px); }
.bd-sp__btn--ghost { border: 1px solid var(--bd-navy); color: var(--bd-navy); }
.bd-sp__btn--ghost:hover { border-color: var(--bd-aqua-deep); color: var(--bd-aqua-deep); }

/* ===========================================================================
   Clean footer for our own pages (buildFooter)
   =========================================================================== */
.bd-footer { background: #16212f; color: rgba(255, 255, 255, .72); font-family: var(--bd-font); }
.bd-footer__grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) clamp(18px, 5vw, 48px) 32px;
  display: grid;
  gap: 36px;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
}
.bd-footer__logo { height: 52px; width: auto; }
.bd-footer__brand p { margin: 16px 0 18px; font-size: 15px; max-width: 30ch; }
.bd-footer__social { display: flex; gap: 10px; }
.bd-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px; color: #fff; transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.bd-footer__social a:hover { background: var(--bd-aqua); border-color: var(--bd-aqua); color: var(--bd-navy); }
.bd-footer__social svg { width: 15px; height: 15px; }
.bd-footer__col h3 { margin: 0 0 14px; font-family: var(--bd-font); font-weight: 600; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.bd-footer__col ul { list-style: none; margin: 0; padding: 0; }
.bd-footer__col li { margin: 8px 0; }
.bd-footer__col a { color: rgba(255, 255, 255, .72); text-decoration: none; font-size: 15px; }
.bd-footer__col a:hover { color: var(--bd-aqua); }
.bd-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 20px 16px;
  text-align: center;
  font-size: 13px;
}
@media (max-width: 860px) {
  .bd-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .bd-footer__grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   NEW PATIENTS PAGE  (/new-patients/ — one page, anchored subsections)
   =========================================================================== */
.bd-np__sec { scroll-margin-top: 130px; padding: clamp(44px, 6vw, 72px) 0; }
.bd-np__sec > h2 {
  margin: 0 0 16px;
  font-family: var(--bd-font);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
  color: var(--bd-navy);
}
.bd-np__sec > p { margin: 0 0 14px; }

.bd-np__figure {
  display: grid;
  place-items: center;
  min-height: clamp(200px, 34vw, 360px);
  margin: 22px 0 6px;
  border: 1px dashed var(--bd-hair);
  border-radius: 16px;
  background: var(--bd-cream);
  color: #9a9186;
  font-family: var(--bd-font);
  font-size: 15px;
}

.bd-np__steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.bd-np__step {
  display: flex;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--bd-hair);
  border-radius: 16px;
  background: #fff;
}
.bd-np__step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--bd-aqua);
  color: var(--bd-navy);
  font-family: var(--bd-font);
  font-size: 17px;
}
.bd-np__step h3 {
  margin: 2px 0 6px;
  font-family: var(--bd-font);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--bd-navy);
}
.bd-np__step p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #555; }

.bd-np__promos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 6px;
}
.bd-np__promo {
  padding: 26px;
  border: 1px solid var(--bd-aqua);
  border-radius: 16px;
  background: var(--bd-aqua-tint, #ecfbfd);
}
.bd-np__promo h3 {
  margin: 0 0 8px;
  font-family: var(--bd-font);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--bd-navy);
}
.bd-np__promo p { margin: 0; color: #40484f; }

.bd-np__inline-cta { margin-top: 20px; }

/* --- the form block --- */
.bd-np__formwrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  margin-top: 22px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(16, 26, 36, .4);
}
.bd-np__clinic { background: #fff; border: 1px solid var(--bd-hair); border-right: 0; padding: clamp(24px, 3vw, 36px); }
.bd-np__clinic h3 {
  margin: 0 0 14px;
  font-family: var(--bd-font);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--bd-navy);
}
.bd-np__clinic .bd-np__hours-h { margin-top: 26px; }
.bd-np__clinic ul { list-style: none; margin: 0; padding: 0; }
.bd-np__clinic > ul > li { margin: 12px 0; font-size: 15px; line-height: 1.5; }
.bd-np__clinic > ul > li span { display: block; font-family: var(--bd-font); color: var(--bd-aqua-deep); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.bd-np__clinic a { color: var(--bd-navy); text-decoration: none; }
.bd-np__clinic a:hover { text-decoration: underline; }
.bd-np__clinic .bd-hours { margin: 10px 0 0; }
.bd-np__clinic .bd-hours li { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 14.5px; color: #40484f; }
.bd-np__clinic .bd-hours li span:first-child { color: #8a8378; }

.bd-npform {
  background: var(--bd-navy);
  color: #fff;
  padding: clamp(24px, 3vw, 38px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.bd-npform__title {
  margin: 0 0 18px;
  font-family: var(--bd-font);
  font-size: 1.5rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bd-npform label { display: block; margin-bottom: 16px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.bd-npform em { color: var(--bd-aqua); font-style: normal; }
.bd-npform input,
.bd-npform textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 11px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
}
.bd-npform input:focus,
.bd-npform textarea:focus { outline: none; border-bottom-color: var(--bd-aqua); }
.bd-npform input::placeholder { color: rgba(255, 255, 255, .4); }
.bd-npform input[type="datetime-local"] { color-scheme: dark; }
.bd-npform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.bd-npform__choice { border: 0; padding: 0; margin: 4px 0 16px; }
.bd-npform__choice legend { padding: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.bd-npform__radio {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 10px 22px 0 0; text-transform: none; letter-spacing: normal;
  font-size: 15px; color: #fff;
}
.bd-npform__radio input { width: auto; margin: 0; }
.bd-npform button {
  margin-top: 8px;
  padding: 14px 30px;
  background: var(--bd-aqua);
  color: var(--bd-navy);
  border: 0;
  border-radius: 10px;
  font-family: var(--bd-font);
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease;
}
.bd-npform button:hover { background: var(--bd-aqua-2); }
.bd-npform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bd-npform__status { margin: 14px 0 0; font-size: 14px; text-transform: none; letter-spacing: normal; min-height: 1.2em; }
.bd-npform__status.is-ok { color: var(--bd-aqua); }
.bd-npform__status.is-err { color: #ff9d9d; }

@media (max-width: 800px) {
  .bd-np__steps, .bd-np__promos { grid-template-columns: 1fr; }
  .bd-np__formwrap { grid-template-columns: 1fr; }
  .bd-np__clinic { border-right: 1px solid var(--bd-hair); border-bottom: 0; }
}

/* ===========================================================================
   CHANGES v2.0  (client review round — homepage)
   Appended last so these rules win over the originals above.
   =========================================================================== */
:root { --bd-band: #19283c; }         /* one bluish-grey for all header bars */
:root { --bd-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* (a) all four header bars the same colour → reads as one block */
.bd-announce { background: var(--bd-band); }
.bd-topbar   { background: var(--bd-band); color: #fff; border-bottom: 1px solid rgba(255,255,255,.07); }
.bd-mainbar  { background: var(--bd-band); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(10,16,26,.22); }
.bd-infoline { background: var(--bd-band); }
.bd-infoline .bd-topbar__addr { color: rgba(255, 255, 255, .92); }
.bd-infoline .bd-topbar__addr svg { color: var(--bd-aqua); }

/* (c) larger logo */
.bd-logo img { height: clamp(88px, 7vw, 112px); }

/* (e) social icons matched to the search button size */
.bd-social { gap: 12px; }
.bd-social a { width: 44px; height: 44px; }
.bd-social svg { width: 19px; height: 19px; }

/* (g) hero + homepage body copy in a normal readable sans, not Recline */
body.page-id-11 .elementor.elementor-11 .elementor-widget-text-editor,
body.page-id-11 .elementor.elementor-11 .elementor-widget-text-editor p {
  font-family: var(--bd-sans) !important;
  font-weight: 400 !important;
}

/* (h) hero buttons: swap order, normal font, a touch larger, sit close together */
body.page-id-11 .elementor-element-365526c {
  direction: rtl;
  grid-template-columns: auto auto !important;
  justify-content: center !important;
  column-gap: 14px !important;
}
body.page-id-11 .elementor-element-365526c > * { direction: ltr; }
body.page-id-11 .elementor-element-486a780 .elementor-button {
  font-family: var(--bd-sans) !important;
  font-size: 17px !important;
  padding: 16px 32px !important;
  letter-spacing: .01em !important;
}

/* (j) "01 — Our services" eyebrow: bold  (n) turquoise */
.bd-services__eyebrow {
  font-family: var(--bd-sans);
  font-weight: 700;
  color: var(--bd-aqua-deep);
}

/* (k) tile headers: navy bluish-grey, same Recline as the section headings */
.bd-svc-title {
  font-family: var(--bd-font);
  font-weight: 600;
  color: var(--bd-navy);
  font-size: 1.7rem;
  line-height: 1.2;
}

/* (l) drop the tile numbers, add a clean outlined icon per tile */
.bd-svc-num { display: none; }
.bd-svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--bd-aqua-deep);
  border-radius: 13px;
  color: var(--bd-aqua-deep);
  margin-bottom: 2px;
}
.bd-svc-icon svg {
  width: 25px; height: 25px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* (o) "Our Story" section centred (single centred column) */
body.page-id-11 .elementor-element-1c958b3 { justify-content: center; }
body.page-id-11 .elementor-element-11101aa { display: none !important; }
body.page-id-11 .elementor-element-82c075f {
  max-width: 780px;
  text-align: center;
  align-items: center;
}
body.page-id-11 .elementor-element-82c075f .elementor-widget,
body.page-id-11 .elementor-element-82c075f .elementor-button-wrapper {
  align-self: center;
  text-align: center;
}

/* (u) footer Clinic Hours column matched to the other footer columns */
.bd-hours-col .elementor-heading-title { color: #f4f4f4; font-size: 28px; }
.bd-hours { font-family: var(--bd-font); }
.bd-hours li { font-size: 16px; color: #f4f4f4; }
.bd-hours li span:first-child { color: rgba(244, 244, 244, .6); }

/* (s/t) accreditation strip — understated / see-through. Position moved
   in-hero and resized smaller by the "CHANGES v4.0" block further down. */
.bd-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 7vw, 96px);
  flex-wrap: wrap;
  padding: 18px 20px;
  background: var(--bd-navy);
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 3px solid var(--bd-aqua);
}
.bd-badges img {
  height: 44px;
  width: auto;
  opacity: .92;
  filter: brightness(0) invert(1);   /* force any logo to clean white on navy */
}
.bd-badges .bd-badge-ph {
  font-family: var(--bd-sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  border: 1px dashed rgba(255, 255, 255, .3);
  padding: 12px 18px;
  border-radius: 8px;
}

/* ===========================================================================
   CHANGES v2.1  (header restructure — merged top bar + nav bar)
   - one block: logo spans both rows on the left
   - top row: address (left) + Call/Book (right), lined up with the tab row
   - search stays at the far right; tabs a little thinner
   =========================================================================== */

/* undo v2.0's row-reverse so it's address-left / Call+Book-right again */
.bd-utility { flex-direction: row; }
.bd-topbar__addr { padding-right: 0; }

@media (min-width: 1024px) {
  /* v2.1's own grid/sizing rules are superseded by the round-34+ block
     below (search "round 34" further down this file) — .bd-mainbar's base
     rule already covers position/z-index/background/shadow, so only the
     one property neither block redeclares is kept here. A stale
     grid-column:2 left on .bd-nav by this block is what caused round 34's
     "left: 50%" centering bug (see the note further down), so nothing
     past this point sets per-child grid placement any more. */
  .bd-headmid > .bd-burger { display: none; }
}

@media (max-width: 1023px) {
  .bd-headmid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 6px;
  }
  /* Call + Book drop onto their own centered row under the logo/burger;
     the search button stays hidden on small screens */
  .bd-navrow > .bd-headactions {
    order: 4;
    flex-basis: 100%;
    justify-content: center;
    gap: 10px;
    padding-top: 4px;
  }
  .bd-navrow > .bd-nav { order: 5; }
}

/* round 36: .bd-nav and .bd-headactions are wrapped in .bd-navrow so desktop
   can centre them as ONE group (see the desktop block below). display:contents
   keeps mobile's existing layout working exactly as before — the wrapper's
   box disappears and .bd-nav / .bd-headactions act as direct flex children
   of .bd-headmid again, same as pre-wrapper markup. */
.bd-navrow { display: contents; }

/* ===========================================================================
   Homepage: Our Mission / Our Vision / Our Values  (new sections)
   =========================================================================== */
.bd-mvv__sec { background: #fff; padding: clamp(48px, 7vw, 88px) 0; }
.bd-mvv__sec--cream { background: var(--bd-cream); }
.bd-mvv__wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 60px);
  text-align: center;
}
.bd-mvv__wrap--wide { max-width: 1100px; }
.bd-mvv__eyebrow {
  margin: 0 0 12px;
  font-family: var(--bd-font);
  font-size: 16px;
  color: var(--bd-aqua-deep);
}
.bd-mvv__h {
  margin: 0 0 18px;
  font-family: var(--bd-font);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
  line-height: 1.15;
  color: var(--bd-navy);
}
.bd-mvv__wrap > p {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #40484f;
}
.bd-mvv__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 34px;
  text-align: left;
}
.bd-mvv__tile {
  padding: 28px 30px;
  border: 1px solid var(--bd-hair);
  border-radius: 16px;
  background: #fff;
}
.bd-mvv__tile h3 {
  margin: 0 0 8px;
  font-family: var(--bd-font);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--bd-navy);
}
.bd-mvv__tile p { margin: 0; font-size: 16px; line-height: 1.55; color: #4a4a4a; }
@media (max-width: 700px) {
  .bd-mvv__grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   CHANGES v2.2  (ribbon over the hero, nav spacing, tile font)
   Header opacity reverted to solid (v2.0 --bd-band).
   =========================================================================== */

/* even spacing between the equal-width nav pills */
.bd-nav__list { gap: 11px; }

/* every tile heading uses the same Recline weight as the section headings */
.bd-svc-title,
.bd-mvv__tile h3,
.elementor-element-52edbf4 .elementor-icon-box-title {
  font-family: var(--bd-font) !important;
  font-weight: 600 !important;
  font-size: 1.42rem;
  line-height: 1.25;
  color: var(--bd-navy);
  letter-spacing: 0;
}

/* ===========================================================================
   CHANGES v2.3  —  ONE call-to-action button style, site-wide
   Every "book / call / check / request" button gets the same eye-catching
   aqua treatment so visitors read it instantly as an action.
   =========================================================================== */
.bd-sp__hero-cta,
.bd-sp__btn,
.bd-sp__btn--primary,
.bd-sp__btn--ghost,
.bd-cta__btn,
.bd-cta__btn--primary,
.bd-cta__btn--ghost,
.bd-np__inline-cta,
.bd-npform button[type="submit"],
main .elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bd-aqua) !important;
  color: var(--bd-navy) !important;
  /* the display face, same as every heading; faux-bolds since Recline is
     Light-only, and reads bigger/bolder here so it still lands as a CTA */
  font-family: var(--bd-font) !important;
  font-synthesis: weight;
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
  text-decoration: none !important;
  padding: 15px 30px !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 26px -8px rgba(108, 218, 231, .6), 0 3px 8px rgba(16, 26, 36, .18) !important;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}
.bd-sp__hero-cta:hover,
.bd-sp__btn:hover,
.bd-cta__btn:hover,
.bd-np__inline-cta:hover,
.bd-npform button[type="submit"]:hover,
main .elementor-widget-button .elementor-button:hover {
  background: var(--bd-aqua-2) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -10px rgba(108, 218, 231, .75), 0 4px 10px rgba(16, 26, 36, .22) !important;
}

/* nav tabs: readable sans, not the display face (client: hard to read) */
.bd-nav__link {
  font-family: var(--bd-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}

/* the sticky vertical rail — real bold sans, same reasoning as every other
   CTA button (client review round 8: Recline's faux-bold was too thin) */
.bd-sticky-book {
  font-family: var(--bd-sans);
  font-weight: 700;
  font-size: 15px;
}

/* nail the mirrored Elementor buttons' type too (higher specificity) */
main .elementor-widget-button .elementor-button.elementor-button,
main a.elementor-button.elementor-button {
  font-family: var(--bd-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* ===========================================================================
   One heading style, site-wide.
   Every heading matches the homepage "Our Story" h2: the Recline face at
   weight 600. Recline ships only a Light face, so the browser faux-bolds it
   — that is the exact look the client signed off on, so font-synthesis is
   left at its default (never "none" here) and the weight is pinned to 600.
   =========================================================================== */
.bd-services__h,
.bd-mvv__h,
.bd-mvv__tile h3,
.bd-svc-title,
.bd-cta__h,
.bd-sp__h1,
.bd-sp__sec h2,
.bd-sp__related h2,
.bd-sp__cta h2,
.bd-np__sec > h2,
.bd-np__step h3,
.bd-np__promo h3,
.bd-np__clinic h3,
.bd-footer__col h3,
.elementor-element-52edbf4 .elementor-icon-box-title {
  font-family: var(--bd-font) !important;
  font-weight: 600 !important;
  font-synthesis: weight;
}
/* FAQ questions and the booking-form title are UI, not display headings —
   they were in the list above; force them back to the readable sans (also
   beats the compound .elementor-element-7845ccb selector's higher specificity) */
.elementor-element-7845ccb .e-n-accordion-item-title,
.bd-npform__title {
  font-family: var(--bd-sans) !important;
  font-weight: 700 !important;
}

/* .bd-topbar__call svg needs an explicit colour since currentColor would
   otherwise pick up the pill's own text colour (still navy either way,
   whether the pill itself is yellow or, in the hero, blue). */
.bd-topbar__call svg { color: var(--bd-navy) !important; }

/* ===========================================================================
   Section type inversion (custom sections): the small eyebrow becomes the
   headline; the former headline becomes a supporting sub-line.
   =========================================================================== */
.bd-services__eyebrow {
  margin: 0 0 8px !important;
  font-family: var(--bd-font) !important;
  font-weight: 600 !important;
  font-synthesis: weight;
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem) !important;
  line-height: 1.12 !important;
  letter-spacing: .006em !important;
  color: var(--bd-navy) !important;
  text-transform: none !important;
}
.bd-services__h {
  margin: 0 0 clamp(28px, 3.5vw, 44px) !important;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #55606c !important;
  max-width: 44ch;
}

/* Mission / Vision / Values: one heading only (the eyebrow), sized as a
   section headline — the old duplicate <h2> was removed from the markup */
.bd-mvv__eyebrow {
  margin: 0 0 16px !important;
  font-family: var(--bd-font) !important;
  font-weight: 600 !important;
  font-synthesis: weight;
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem) !important;
  line-height: 1.12 !important;
  letter-spacing: .006em !important;
  color: var(--bd-navy) !important;
  text-transform: none !important;
}

/* ===========================================================================
   CHANGES v3.0  —  client review round 2 (homepage change list, 32 items)
   Appended last so these rules are authoritative.
   =========================================================================== */

/* --- Header (items 1–9) ------------------------------------------------------
   announcement ribbon gone · logo big + centred on its own top row · nav row
   beneath it with the Call pill pushed to the far right · Call is a
   yellow-outline / white-text pill, matched to the nav-pill width */
.bd-announce { display: none !important; }

.bd-topbar__call,
.bd-topbar__book {
  min-width: 200px;                       /* == .bd-nav__link width */
  justify-content: center;
  gap: 0 !important;
}

/* round 42: desktop header layout lives at the end of this file */

/* --- Hero (items 11–15) ----------------------------------------------------- */
/* two equal-width, icon-free, capsule buttons, matched to the nav-tab aqua
   (client review round 5: every CTA shares one colour/style — see the
   "CHANGES v5.1" block near the end of this file for the exact values) */
body.page-id-11 .elementor-element-365526c {
  direction: ltr !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px !important;
  grid-template-columns: none !important;
}
body.page-id-11 .elementor-element-365526c > .elementor-widget-button { flex: 0 1 262px; direction: ltr; }
body.page-id-11 .elementor-element-9e217ba { order: 1; }   /* Call first */
body.page-id-11 .elementor-element-26a115d { order: 2; }   /* Schedule a Visit */
body.page-id-11 .elementor-element-365526c a.elementor-button.elementor-button {
  width: 100%;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: var(--bd-sans) !important;
  font-weight: 700 !important;
}
body.page-id-11 .elementor-element-365526c .elementor-button-icon { display: none !important; }

/* sticky vertical rail: longer, and sentence case (item 15). Client review
   round 18: scaled up 1.5x (padding + font-size) — see the font-size rule
   in CHANGES v7.0 below too. */
.bd-sticky-book {
  text-transform: none !important;
  letter-spacing: .05em;
  padding: 60px 18px !important;
  border-radius: 0 14px 14px 0;
}

/* --- shared: full-bleed photo panel (covers its whole side, edge to edge) - */
/* full-bleed photo panel — an <img>, cropped to cover its whole side */
.bd-ph--full {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  background: var(--bd-cream); /* shows briefly while the photo loads */
  object-fit: cover;
  object-position: center 22%; /* keep faces/hands in frame, not the ceiling */
}

/* --- Our Services tagline (client review round 3 restyles the section
   itself as a full-width tile grid — see the "CHANGES v4.0" block at the
   end of this file — but the tagline type treatment is shared/kept here) */
.bd-services__tagline {
  margin: 0 0 22px !important;
  font-family: var(--bd-font) !important;
  font-weight: 700 !important;
  font-synthesis: weight;
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.6rem) !important;
  line-height: 1.06 !important;
  letter-spacing: .004em !important;
  color: var(--bd-navy) !important;
  text-transform: none !important;
  max-width: none !important;
}

/* --- Our Story ("Where Beaumont finds its smile."): removed entirely,
   client review round 8 --- */
body.page-id-11 .elementor-element-1c958b3 { display: none !important; }

/* --- retire Mission / Vision / Values from the homepage (item 22) -------- */
.bd-mvv { display: none !important; }

/* --- Closing CTA: beige ground, dark text, grey buttons (items 24–26) --- */
.bd-cta { background: var(--bd-cream) !important; }
.bd-cta__eyebrow { color: var(--bd-aqua-deep) !important; }
.bd-cta__h { color: var(--bd-navy) !important; }
.bd-cta__sub { color: #55606c !important; }
.bd-cta__btn,
.bd-cta__btn--primary,
.bd-cta__btn--ghost {
  background: var(--bd-grey) !important;
  color: #fff !important;
  border: 0 !important;
  border-color: var(--bd-grey) !important;
  box-shadow: none !important;
}
.bd-cta__btn:hover,
.bd-cta__btn--primary:hover,
.bd-cta__btn--ghost:hover {
  background: #6a6f78 !important;
  border-color: #6a6f78 !important;
  color: #fff !important;
}
.bd-cta__quick { border-top-color: rgba(25, 40, 60, .16) !important; }
.bd-cta__quick a { color: #55606c !important; }
.bd-cta__quick a:hover { color: var(--bd-aqua-deep) !important; }

/* --- Footer: one font family across the columns (item 32) --------------- */
.bd-hours li,
.bd-hours li span { font-family: var(--bd-sans) !important; }

/* day on the left, time on the right — the time value never breaks mid-line;
   only Saturday's "(alternate)" note drops beneath it */
.bd-hours li { align-items: baseline; gap: 8px 14px; }
.bd-hours li > span:last-child { text-align: right; white-space: nowrap; }
.bd-hours li > span:last-child em {
  display: block;
  font-style: normal;
  font-size: .82em;
  opacity: .72;
}

/* ===========================================================================
   CHANGES v3.2  —  headings use the brand display face (Recline); every
   paragraph, button, nav item, dropdown, form and small UI label uses the
   readable sans instead. (v3.5 below restores Recline as --bd-font itself —
   this block only carries the weight/contrast tweaks that still apply.)
   =========================================================================== */

/* section display type: real bold, Recline's only weight is Light so this
   faux-bolds it (font-synthesis:weight, set where these classes are defined).
   High specificity so it beats the mirror's `.elementor-11 h2 { font-weight:500 }`
   inversion rule, which also matches these injected <h2>s. */
body.page-id-11 .elementor.elementor-11 h2.bd-services__tagline,
body.page-id-11 .elementor.elementor-11 h2.bd-cta__h,
body.page-id-11 .elementor.elementor-11 h2.bd-welcome__h,
body.page-id-11 .elementor.elementor-11 h2.bd-why__h,
.bd-services__heading,
.bd-services__tagline,
.bd-cta__h,
.bd-welcome__h,
.bd-why__h {
  /* client review round 28: round 27's lighter, unbolded headings weren't
     wanted after all — back to heavy, and pushed further than the old
     700 for real visible weight. */
  font-weight: 900 !important;
  font-synthesis: weight !important;
  -webkit-text-stroke: 0.4px currentColor;
  letter-spacing: 0.06em !important;
  /* the mirror's own blanket "h2 { color }" rule (same specificity tier)
     was winning for welcome__h/why__h specifically — round 26 uniformity
     fix, restated at matching specificity so every homepage heading is
     unmistakably the same navy. */
  color: var(--bd-navy) !important;
}

/* the mirror's blanket "body.page-id-11 .elementor-11 h2" rule (elsewhere in
   this file) clamps every plain <h2> down to a small supporting-line size —
   it also catches every <h2> we inject on the homepage, so restate the one
   canonical big-heading size here at matching specificity to win over it.
   Every major homepage section heading (and the hero H1) now shares this
   exact size/weight — client review round 5: "headings shouldn't vary". */
body.page-id-11 .elementor.elementor-11 h2.bd-services__tagline,
body.page-id-11 .elementor.elementor-11 h2.bd-cta__h,
body.page-id-11 .elementor.elementor-11 h2.bd-welcome__h,
body.page-id-11 .elementor.elementor-11 h2.bd-why__h {
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.6rem) !important;
  line-height: 1.06 !important;
}

/* closing CTA supporting copy: readable weight + contrast */
.bd-cta__eyebrow { font-weight: 700 !important; }
.bd-cta__sub { font-weight: 500 !important; color: #4a535d !important; }
.bd-cta__quick a { font-weight: 600 !important; }

/* the captured mirror hard-codes "Recline" on its own Elementor headings via
   its stylesheet — our --bd-font swap doesn't reach those, so declare it here
   too. Real headings only; list text, tab/toggle labels, descriptions and
   body copy are forced to the sans in v3.5 below. */
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-icon-box-title,
.elementor-image-box-title,
.elementor-post__title,
.elementor-cta__title {
  font-family: var(--bd-font) !important;
  font-synthesis: weight;
}
/* the mirror's big hero H1 leans very light — give it real weight, and pin
   its size to the exact same canonical scale as every other homepage
   heading (client review round 5: "should not vary throughout the page") */
body.page-id-11 .elementor-element-db76901 .elementor-heading-title {
  font-weight: 700 !important;
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.6rem) !important;
  line-height: 1.06 !important;
}

/* ===========================================================================
   CHANGES v3.3  —  header: drop the search button; Call pill aligns with the
   social icons on the info line below it (see matched inline padding above).
   =========================================================================== */
.bd-search { display: none !important; }

/* --- Insurance section: removed entirely, client review round 8 --- */
body.page-id-11 .elementor-element-2703004 { display: none !important; }

/* ===========================================================================
   CHANGES v3.5  —  Recline restored as the heading/display face; every
   paragraph, button, nav item, dropdown, form field and small UI label stays
   on the readable sans. (The client's two notes reconciled: "use the font in
   the picture as the global font, paragraphs stay normal sans" + the earlier
   "don't use the thin font anywhere it's hard to read" — that complaint was
   about small chrome text, not big headings, so headings get Recline back
   and everything functional/small stays sans.)
   =========================================================================== */
:root {
  --bd-font: "Recline", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, sans-serif;
}

/* header: nav pills, dropdown, address, search — sans. The Call pill is a
   CTA button, so it keeps the base header rule's var(--bd-font) (Recline). */
.bd-announce, .bd-topbar, .bd-mainbar, .bd-infoline {
  font-family: var(--bd-sans) !important;
}

/* closing CTA: sans base for the section copy; the headline and the CTA
   buttons both use the display face */
.bd-cta { font-family: var(--bd-sans) !important; }
.bd-cta__h, .bd-cta__btn { font-family: var(--bd-font) !important; }

/* footer: sans throughout (brand blurb, column labels, links, hours) */
.bd-footer, .bd-footer__col h3 { font-family: var(--bd-sans) !important; }

/* service pages: the eyebrow label is UI, not a heading — but its CTA
   buttons (hero-cta, btn) now match every other CTA button on Recline */
.bd-sp__eyebrow { font-family: var(--bd-sans) !important; }

/* New Patients page: form chrome + small labels stay sans; the submit
   button is a CTA, so it's left on the display face like the rest */
.bd-np__figure,
.bd-np__step-num,
.bd-np__clinic > ul > li span,
.bd-npform__title {
  font-family: var(--bd-sans) !important;
}

/* Our Services tile links + "See all Services" */
.bd-svc-more { font-family: var(--bd-sans) !important; }

/* "PHOTO" placeholder labels */
/* FAQ questions, list/tab/toggle labels, descriptions and every paragraph in
   the mirrored Elementor content — all body-weight sans, not the display face */
.e-n-accordion-item-title,
.e-n-accordion-item-title-text,
.elementor-icon-list-text,
.elementor-tab-title,
.elementor-toggle-title,
.elementor-icon-box-description,
.elementor-image-box-description,
.elementor-testimonial__text,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  font-family: var(--bd-sans) !important;
  font-synthesis: initial;
}

/* ===========================================================================
   CHANGES v3.6  —  hero is too tall: the announcement line + CTA buttons
   land below the fold on a normal laptop screen. The mirror sets 150px
   top/bottom padding on the hero container; tighten it responsively so the
   whole hero (through the buttons) fits a typical viewport.
   =========================================================================== */
body.page-id-11 .elementor-element-486a780 {
  padding-top: clamp(44px, 6vw, 84px) !important;
  padding-bottom: clamp(44px, 6vw, 84px) !important;
}

/* the hero paragraph at 22px/1.7 was the single biggest reason the CTA row
   sat below the fold on a normal laptop screen; tighten it (and the gaps
   around it) without touching the copy itself */
body.page-id-11 .elementor.elementor-11 .elementor-element-486a780 .elementor-widget-text-editor p {
  font-size: 1.15rem !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}
body.page-id-11 .elementor-element-db76901 { margin-bottom: -8px; }

/* ===========================================================================
   CHANGES v3.7  —  site-wide scroll animation
   Reveal-on-scroll for sections/cards, a thin top progress bar, a deeper
   header shadow once scrolled, and smooth anchored scrolling. Everything
   here is progressive enhancement (overrides.js only adds classes) and is
   fully disabled under prefers-reduced-motion.
   =========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bd-header-h, 150px) + 16px);
  /* Disables the browser's scroll-anchoring feature site-wide. It exists to
     stop a page from visually jumping when content ABOVE the viewport
     changes size — but our sticky header is exactly that: an in-flow
     element whose own height changes in direct response to scroll position.
     Left on, anchoring compensates for the header's resize by nudging
     scrollTop, which re-fires the scroll listener that resized the header,
     which resizes it back, which gets compensated again — a genuine
     infinite bounce. This is the only layout-height change on the site
     that's tied to scroll position, so disabling anchoring globally has no
     downside here. */
  overflow-anchor: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* thin gradient progress bar, pinned above everything including the header */
.bd-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 10000;
  background: linear-gradient(90deg, var(--bd-aqua), var(--bd-gold));
  transition: width .12s linear;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .bd-progress { display: none; }
}

/* header: a touch more shadow once the page has scrolled, so the sticky bar
   reads as "lifted" over the content instead of just sitting flush on it —
   AND it shrinks: the full-size logo only belongs at the very top of the
   page. Once you scroll, the sticky bar compacts down to a slim strip (small
   logo, tight padding) so it doesn't sit over a big chunk of the screen the
   whole time you're reading the page. Nav pills + Call button keep their
   size and position throughout — only the logo and the bar's own padding
   change. */
.bd-headmid {
  transition: box-shadow .3s cubic-bezier(.645, .045, .355, 1),
              padding .22s cubic-bezier(.645, .045, .355, 1),
              row-gap .22s cubic-bezier(.645, .045, .355, 1);
  /* THE continuous-bounce fix: .bd-headmid is position:sticky, which still
     occupies real space in normal document flow — it does not float free of
     it the way "fixed" would. So when its own height changes (shrinking or
     growing on scroll), everything below it in the document shifts too.
     Browsers have a feature called scroll anchoring that automatically
     adjusts scrollTop to compensate for layout shifts that happen above the
     viewport, to stop the page from visually jumping under a normal user's
     eye — but here, the "layout shift above the viewport" *is* our own
     resize, so the compensation feeds directly back into the scroll
     listener that triggered it: shrink -> anchor adjusts scrollTop -> that
     crosses the threshold -> grow -> anchor adjusts again -> shrink -> ...
     forever. That is exactly a continuous bounce. overflow-anchor:none
     opts this element out of being a scroll-anchoring target and breaks the
     loop at its source. */
  overflow-anchor: none;
}
/* the logo image needs its own complete transition list (height for the
   scroll shrink, opacity+transform for the load-in flip/reveal) — it used
   to share a shorthand with .bd-headmid above, which silently replaced
   .bd-reveal's own "transition: opacity, transform" for this element (a
   transition shorthand always resets the *entire* property list, it doesn't
   merge with another rule's list), so the flip-in was jumping straight from
   its start state to its end state with no animation at all. One dedicated
   rule, all three properties, no clobbering. */
.bd-headmid > .bd-logo img {
  transition: height .22s cubic-bezier(.645, .045, .355, 1),
              opacity 1.1s cubic-bezier(.445, .05, .55, .95),
              transform 1.1s cubic-bezier(.445, .05, .55, .95);
  /* the shorthand above defaults every group's delay to 0s, which would
     otherwise beat .bd-reveal's own delay (higher specificity here: this
     selector has an extra tag) and silently ignore --bd-reveal-delay */
  transition-delay: 0s, var(--bd-reveal-delay, 0ms), var(--bd-reveal-delay, 0ms);
}
.bd-headmid.is-scrolled {
  box-shadow: 0 2px 0 rgba(255, 255, 255, .06), 0 14px 30px -10px rgba(6, 10, 18, .45);
}
@media (min-width: 1024px) {
  .bd-headmid.is-scrolled { padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }
  .bd-headmid.is-scrolled > .bd-logo img { height: clamp(46px, 3.4vw, 58px); }
}
@media (max-width: 1023px) {
  .bd-headmid.is-scrolled { padding-top: 8px; padding-bottom: 8px; }
  .bd-headmid.is-scrolled > .bd-logo img { height: clamp(44px, 7vw, 54px); }
}

/* ===========================================================================
   Reveal-on-scroll. Tuned to match the reference site's motion (lumi-dental.ca):
   pure opacity + a short, gentle translate — no blur, no scale, no tilt. Their
   own reveal transitions run on cubic-bezier(.645,.045,.355,1) at ~0.4s; ours
   use the same curve, a touch longer since our sections are larger blocks.
   Gated on prefers-reduced-motion (the classes still land, they just do
   nothing) and only ever *adds* a class, so a no-JS visitor sees normal,
   fully-visible content.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .bd-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .6s cubic-bezier(.645, .045, .355, 1),
                transform .6s cubic-bezier(.645, .045, .355, 1);
    transition-delay: var(--bd-reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .bd-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* two-column sections: halves converge from opposite sides — a shorter,
     purely horizontal version of the same move, matching the reference
     site's "reveal from the side" treatment */
  .bd-reveal.bd-reveal--left  { transform: translate3d(-40px, 0, 0); }
  .bd-reveal.bd-reveal--right { transform: translate3d(40px, 0, 0); }
  .bd-reveal.bd-reveal--left.is-in,
  .bd-reveal.bd-reveal--right.is-in { transform: none; }

  /* hero load-in cascade: slower, larger-throw and clearly staggered —
     lumi-dental.ca's own hero entrance runs ~1.2s per element; this is a
     one-time page-load moment, not a repeated scroll cue, so it can afford
     to be more deliberate than the snappier scroll reveals */
  .bd-reveal.bd-reveal--entrance {
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.445, .05, .55, .95);
  }
  .bd-reveal.bd-reveal--entrance:not(.bd-reveal--left):not(.bd-reveal--right) {
    transform: translate3d(0, 34px, 0);
  }

  /* logo flip-in on load — checked lumi-dental.ca's own hero mark directly:
     it plays perspective(800px) rotateX(90deg -> 0deg) + fade over 1.2s, a
     "falling forward into place" flip rather than a flat fade or slide.
     Matched here for our header logo. */
  .bd-reveal.bd-reveal--flip {
    /* opacity stays at 1 the whole time — the base .bd-reveal rule fades
       from 0, and with both opacity and the rotation riding the same slow
       ease-in-out curve, the logo is nearly invisible for most of the 1.1s
       and then both finish close together: what you actually see is "blank,
       blank, blank... it's just there," not a visible flip. Keeping it
       fully opaque throughout means the rotation itself is what's visible,
       which is the whole point of matching the reference site's effect. */
    opacity: 1;
    transform: perspective(800px) rotateX(90deg);
    transform-origin: center bottom;
    transition-duration: 1.1s;
    transition-timing-function: cubic-bezier(.445, .05, .55, .95);
  }
  .bd-reveal.bd-reveal--flip.is-in {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg);
  }
}

/* ===========================================================================
   CHANGES v3.8  —  a distinct background per homepage section, so each one
   reads as its own "chapter" while scrolling. Kept to soft neutrals + one
   pale brand-tint + the existing dark-navy accents, rather than saturated
   colour, to stay premium instead of busy. No two adjacent sections share
   the same tone.
   Sequence: hero (video) → white → cream → pale turquoise → white (navy
   accent panel) → pale navy → cream (unchanged CTA) → dark navy (footer).
   =========================================================================== */
:root {
  --bd-tint-aqua: #eaf8fb;  /* faint turquoise wash */
  --bd-tint-navy: #eef1f6;  /* faint cool grey-blue wash */
}
body.page-id-11 .elementor-element-52edbf4 { background-color: var(--bd-tint-aqua) !important; }
body.page-id-11 .elementor-element-c94a5e5 { background-color: var(--bd-tint-navy) !important; }

/* ===========================================================================
   CHANGES v4.0  —  client review round 3 (Website Build change list)
   Header: old menu labels + two header CTAs restored (see overrides.js),
   info line recoloured. Hero: paragraph narrowed under the heading, the
   accreditation strip moved in-hero (smaller) below the paragraph, CTA
   buttons pushed below that. Services: full-width 8-tile grid, no photo
   panel. Footer: one heading style across every column, every page.
   =========================================================================== */

/* --- header info line (fee-guide / insurance line): light turquoise, so
   the header reads as three tiers instead of one navy slab (item 6). The
   original tint (#eaf8fb) read as nearly white — client review round 7
   asked for a light blue that's still clearly blue, so it's a touch more
   saturated here, not lighter in the literal lightness sense. --- */
.bd-infoline {
  background: #d3f2f6;
  color: var(--bd-navy);
}
.bd-infoline .bd-topbar__addr { color: var(--bd-navy); }
.bd-infoline .bd-topbar__addr svg { color: var(--bd-aqua-deep); }
.bd-infoline__txt b { color: var(--bd-aqua-deep); }
.bd-social a { border-color: rgba(25, 40, 60, .28); color: var(--bd-navy); }
.bd-social a:hover { background: var(--bd-aqua); border-color: var(--bd-aqua); color: var(--bd-navy); }

/* --- hero: paragraph reads as a subtitle under the heading instead of
   stretching full-bleed across the whole hero (item 7). !important is
   required here: Elementor's own per-page stylesheet sets a competing
   `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }`
   rule with higher specificity (4 classes vs. our 3), which was silently
   winning and leaving the paragraph at its original ~66% width — this is
   also why the hero didn't read as centred (a very wide ragged-edge
   paragraph looks off-centre even though it technically is). --- */
body.page-id-11 .elementor-element-486a780 .elementor-element-d084764 {
  max-width: 950px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- hero: accreditation strip now lives under the paragraph (moved there
   in overrides.js) instead of overlapping the header/hero seam, and reads
   as a small supporting row rather than a full-width ribbon (items 8–9) --- */
.bd-badges {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4vw, 44px);
  flex-wrap: wrap;
  margin: 4px 0 22px;
  padding: 0;
  background: none;
  border: 0;
}
.bd-badges img { height: 84px; opacity: .92; }

/* --- Our Services: full-width tile grid, no photo panel (items 10–13) --- */
.bd-services--full { background: #fff; padding: clamp(56px, 7vw, 104px) 0; }
.bd-services__full-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
}
.bd-services__tagline--center {
  text-align: center;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.bd-services__grid--full { margin-top: clamp(36px, 5vw, 56px); }

/* --- footer: one heading style across every column, on every page —
   matches the mirrored homepage footer's own "Clinic Hours" treatment
   instead of the small uppercase label the clean JS-built footer used on
   service/new-patient pages (item: "standardize the fonts") --- */
.bd-footer__col h3 {
  font-family: var(--bd-font) !important;
  font-weight: 600 !important;
  font-synthesis: weight;
  font-size: 28px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #f4f4f4 !important;
}

/* ===========================================================================
   CHANGES v5.0  —  "Website Build – BEAUDENT" doc (client review round 4)
   New homepage sections: "We are accepting New Patients" (after the hero)
   and "What Makes BeauDent Family Dental Different?" (replaces the old
   6-tile grid). Closing CTA reverted to a rounded card over a clinic photo.
   =========================================================================== */

/* --- "We are accepting New Patients" ------------------------------------ */
.bd-welcome { background: var(--bd-cream); padding: clamp(48px, 7vw, 88px) 0; }
.bd-welcome__layout {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.bd-welcome__h {
  margin: 0 0 20px;
  font-family: var(--bd-font);
  font-weight: 700;
  font-synthesis: weight;
  color: var(--bd-navy);
}
.bd-welcome__body-inner p {
  margin: 0 0 16px;
  font-family: var(--bd-sans);
  font-size: 1.08rem;
  line-height: 1.7;
  color: #40484f;
}
.bd-welcome__subhead {
  font-family: var(--bd-font);
  font-weight: 600;
  font-synthesis: weight;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem) !important;
  line-height: 1.35;
  color: var(--bd-aqua-deep);
}
.bd-welcome__lead {
  margin: 22px 0 18px !important;
  font-family: var(--bd-font) !important;
  font-weight: 600 !important;
  font-synthesis: weight;
  font-size: 1.25rem !important;
  color: var(--bd-navy) !important;
}
.bd-welcome__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.bd-welcome__aside img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  box-shadow: 0 30px 56px -26px rgba(16, 26, 36, 0.4);
}
@media (max-width: 900px) {
  .bd-welcome__layout { grid-template-columns: 1fr; }
  .bd-welcome__aside { order: -1; max-width: 460px; margin: 0 auto; }
}

/* --- "What Makes BeauDent Family Dental Different?" --------------------- */
.bd-why { background: #fff; padding: clamp(56px, 7vw, 96px) 0; }
.bd-why__inner { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.bd-why__h {
  margin: 0 0 clamp(32px, 4vw, 48px);
  max-width: 900px;
  font-family: var(--bd-font);
  font-weight: 600;
  font-synthesis: weight;
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem);
  line-height: 1.15;
  color: var(--bd-navy);
}
.bd-why__layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.bd-why__aside img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  box-shadow: 0 30px 56px -26px rgba(16, 26, 36, 0.4);
}
.bd-why__body p {
  margin: 0 0 18px;
  font-family: var(--bd-sans);
  font-size: 1.08rem;
  line-height: 1.7;
  color: #40484f;
}
.bd-why__body strong { color: var(--bd-navy); font-weight: 700; }
.bd-why__lead {
  margin: 0 0 16px !important;
  font-family: var(--bd-font) !important;
  font-weight: 600 !important;
  font-synthesis: weight;
  font-size: 1.35rem !important;
  color: var(--bd-navy) !important;
}
.bd-why__tagline {
  margin: 22px 0 0 !important;
  font-family: var(--bd-font) !important;
  font-weight: 600 !important;
  font-synthesis: weight;
  font-size: 1.25rem !important;
  color: var(--bd-aqua-deep) !important;
}
@media (max-width: 900px) {
  .bd-why__layout { grid-template-columns: 1fr; }
  .bd-why__aside { max-width: 460px; margin: 0 auto; }
}

/* --- Closing CTA: heading floats free over the photo (like every other H1
   on the site, client review round 8 — it used to sit inside the card),
   then a smaller card underneath holds just the supporting line + buttons.
   Authoritative: wins over every earlier .bd-cta rule in this file. ------- */
.bd-cta { background: var(--bd-navy) !important; font-family: var(--bd-sans); }
.bd-cta__photo {
  position: relative;
  padding: clamp(56px, 9vw, 110px) clamp(20px, 5vw, 40px);
  overflow: hidden;
}
.bd-cta__photo > img.bd-ph--full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 0;
  filter: brightness(0.94);
}
/* a top-down light wash behind the heading only — the card below is opaque
   and doesn't need it — so the dark navy heading text stays legible over
   whatever the photo is doing there (round 9: heading switched to dark text). */
.bd-cta__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0) 72%);
}
.bd-cta__heading {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto clamp(28px, 4vw, 40px);
  text-align: center;
}
.bd-cta__card {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 48px) clamp(24px, 6vw, 56px);
  border-radius: clamp(24px, 3.5vw, 36px);
  background: var(--bd-aqua) !important;
  text-align: center;
  box-shadow: 0 44px 84px -32px rgba(10, 16, 26, 0.55);
}
.bd-cta__eyebrow {
  margin: 0 0 10px !important;
  font-family: var(--bd-sans) !important;
  font-weight: 700 !important;
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.2rem) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--bd-aqua-deep) !important;
}
.bd-cta__h {
  margin: 0 !important;
  font-family: var(--bd-font) !important;
  font-weight: 700 !important;
  font-synthesis: weight;
  color: var(--bd-navy) !important;
}
.bd-cta__sub {
  margin: 0 0 26px !important;
  max-width: 46ch;
  margin-left: auto !important;
  margin-right: auto !important;
  font-family: var(--bd-sans) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  color: #26343f !important;
}
.bd-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.bd-cta__btn,
.bd-cta__btn--primary,
.bd-cta__btn--ghost {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 15px 28px !important;
  border-radius: 10px !important;
  font-family: var(--bd-sans) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-decoration: none;
  border: 0 !important;
  box-shadow: none !important;
  transition: transform 0.16s ease, background-color 0.16s ease;
}
.bd-cta__btn--primary { background: var(--bd-navy) !important; color: #fff !important; }
.bd-cta__btn--primary:hover { background: #2c4159 !important; transform: translateY(-2px); }
.bd-cta__btn--ghost { background: #fff !important; color: var(--bd-navy) !important; }
.bd-cta__btn--ghost svg { width: 15px; height: 15px; color: var(--bd-navy); }
.bd-cta__btn--ghost:hover { background: #eef1f4 !important; transform: translateY(-2px); }

.bd-cta__quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 26px;
  padding: 26px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.bd-cta__quick a { font-family: var(--bd-sans) !important; font-weight: 600 !important; font-size: 15px; color: rgba(255, 255, 255, 0.82) !important; text-decoration: none; }
.bd-cta__quick a:hover { color: var(--bd-aqua) !important; }

/* --- Our Team / Meet the Dentists / Meet the Team: person cards --------- */
.bd-team__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 24px;
}
.bd-staff__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.bd-team__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 32px 28px;
  border: 1px solid var(--bd-hair);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.bd-team__card:hover {
  transform: translateY(-3px);
  border-color: var(--bd-aqua-2);
  box-shadow: 0 24px 48px -26px rgba(16, 26, 36, 0.35);
}
.bd-team__photo {
  width: 140px;
  height: 140px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--bd-cream);
  border: 1px dashed var(--bd-hair);
  color: #9a9186;
  font-family: var(--bd-sans);
  font-size: 12.5px;
  line-height: 1.4;
  padding: 8px;
  overflow: hidden;
}
.bd-team__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.bd-team__name { margin: 0; font-family: var(--bd-font); font-weight: 600; font-size: 1.25rem; color: var(--bd-navy); }
.bd-team__role { margin: 0; font-family: var(--bd-sans); font-weight: 600; font-size: 14.5px; letter-spacing: 0.02em; color: var(--bd-aqua-deep); }
.bd-team__desc { margin: 0; font-size: 15px; line-height: 1.55; color: #555; }
.bd-team__more { font-family: var(--bd-sans); font-weight: 600; font-size: 14.5px; color: var(--bd-navy); }
@media (max-width: 620px) {
  .bd-team__grid { grid-template-columns: 1fr; }
}

/* --- Blog listing + article ---------------------------------------------- */
.bd-blog-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}
.bd-blog-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--bd-hair);
  border-radius: 18px;
  background: #fff !important;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.bd-blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--bd-aqua-2);
  box-shadow: 0 24px 48px -26px rgba(16, 26, 36, 0.3);
}
.bd-blog-card h3 { margin: 0; font-family: var(--bd-font); font-weight: 600; font-size: 1.3rem; color: var(--bd-navy) !important; text-decoration: none !important; }
.bd-blog-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #555 !important; text-decoration: none !important; }
.bd-blog-card span { font-family: var(--bd-sans); font-weight: 600; font-size: 14.5px; color: var(--bd-aqua-deep) !important; text-decoration: none !important; }

.bd-blog__wrap { max-width: 760px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 40px); }
.bd-blog__body { padding: clamp(44px, 6vw, 76px) 0; font-size: 17px; line-height: 1.75; color: #333; }
.bd-blog__figure { margin: 0 0 2em; }
.bd-blog__figure img { width: 100%; height: auto; display: block; border-radius: 16px; }
.bd-blog__figure figcaption { margin-top: 8px; font-family: var(--bd-sans); font-size: 13px; color: #888; text-align: center; }
.bd-blog__body h2 {
  margin: 1.8em 0 0.6em;
  font-family: var(--bd-font);
  font-weight: 600;
  font-synthesis: weight;
  font-size: 1.5rem;
  color: var(--bd-navy);
}
.bd-blog__body h2:first-child { margin-top: 0; }
.bd-blog__body p { margin: 0 0 1.1em; }
.bd-blog__body ul { margin: 0 0 1.1em; padding-left: 1.3em; }
.bd-blog__body li { margin: 0.3em 0; }
.bd-blog__body a { color: var(--bd-aqua-deep); text-decoration: underline; }
.bd-blog__cta {
  margin-top: 2.5em;
  padding: clamp(28px, 4vw, 40px);
  border-radius: 20px;
  background: var(--bd-cream);
  text-align: center;
}
.bd-blog__cta h2 { margin-top: 0; }
.bd-blog__cta p { color: #40484f; }

/* ===========================================================================
   CHANGES v5.1  —  client review round 5, refined rounds 6–8
   One CTA button style for the hero and every service/blog/new-patients
   CTA — same aqua background, text colour, font size/weight and padding.
   Client review round 6: the header Call/Book Appointment pills and the
   sticky "Book online" rail were already yellow before any of this and
   are explicitly meant to STAY yellow — only the hero's two CTA buttons
   move to blue (matching the nav tabs). See the base "Call + Book" rule
   near the top of this file and the sticky-rail rule for their (yellow)
   colour; they're intentionally left out of the selector list below. The
   closing CTA card's navy/white button pair is also left out on purpose —
   it sits ON a turquoise card, so a turquoise button there would be nearly
   invisible against its own background. Round 8: rounded rectangles, not
   full capsules, and real bold sans instead of Recline's faux-bold (which
   was reading as thin/hard to read at button sizes).
   =========================================================================== */
.bd-sp__hero-cta,
.bd-sp__btn,
.bd-sp__btn--primary,
.bd-sp__btn--ghost,
.bd-np__inline-cta,
.bd-welcome__btn,
.bd-npform button[type="submit"],
main .elementor-widget-button .elementor-button,
body.page-id-11 .elementor-element-365526c a.elementor-button.elementor-button {
  background: var(--bd-aqua) !important;
  color: var(--bd-navy) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: var(--bd-sans) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  padding: 14px 28px !important;
  transition: background-color 0.16s ease, transform 0.16s ease;
}
.bd-sp__hero-cta:hover,
.bd-sp__btn:hover,
.bd-np__inline-cta:hover,
.bd-welcome__btn:hover,
.bd-npform button[type="submit"]:hover,
main .elementor-widget-button .elementor-button:hover,
body.page-id-11 .elementor-element-365526c a.elementor-button.elementor-button:hover {
  background: var(--bd-aqua-2) !important;
  color: var(--bd-navy) !important;
  transform: translateY(-2px);
}
/* header pills keep their nav-pill-matched minimum width; hero pills keep
   their equal-width flex sizing from the rule above — neither conflicts
   with the shared padding/font (different properties) */
.bd-topbar__call, .bd-topbar__book { min-width: 200px; }

/* ===========================================================================
   CHANGES v6.0  —  "Website Changes" doc, client review round 10
   Homepage: "Meet your Dentist" / "Meet Dr. Syed" buttons, the six value
   tiles under "What makes BeauDent different?", the patient-reviews carousel,
   and the FAQ intro photo. New-patient / Dr. Syed / CDCP page styles follow.
   =========================================================================== */

/* --- buttons: same canonical CTA style as every other button ------------- */
.bd-welcome__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.bd-why__btn,
.bd-reviews__btn,
.bd-dr__btn,
.bd-cdcp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bd-aqua) !important;
  color: var(--bd-navy) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: var(--bd-sans) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-decoration: none;
  padding: 14px 28px !important;
  transition: background-color 0.16s ease, transform 0.16s ease;
}
.bd-why__btn:hover,
.bd-reviews__btn:hover,
.bd-dr__btn:hover,
.bd-cdcp__btn:hover {
  background: var(--bd-aqua-2) !important;
  transform: translateY(-2px);
}
.bd-why__btn { margin-top: 26px; }

/* --- six value tiles ------------------------------------------------------ */
.bd-why { padding-bottom: 0; }
.bd-why__tiles {
  margin-top: clamp(48px, 6vw, 80px);
  background: #eaf7fa;
  padding: clamp(36px, 5vw, 64px) 0;
}
.bd-why__tiles-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bd-why__tile {
  padding: 26px 28px 28px;
  background: #fff;
  border: 1px solid #cdd8dd;
  border-radius: 16px;
}
.bd-why__tile-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: #e2f6fa;
  color: var(--bd-aqua-deep);
}
.bd-why__tile-ic svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.bd-why__tile-t {
  margin: 0 0 10px;
  font-family: var(--bd-font);
  font-weight: 600;
  font-synthesis: weight;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--bd-navy);
}
.bd-why__tile-d {
  margin: 0;
  font-family: var(--bd-sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: #5b6670;
}
@media (max-width: 980px) { .bd-why__tiles-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bd-why__tiles-inner { grid-template-columns: 1fr; } }

/* --- patient reviews carousel -------------------------------------------- */
.bd-reviews { background: var(--bd-cream); padding: clamp(56px, 7vw, 96px) 0; }
.bd-reviews__inner { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
body.page-id-11 .elementor.elementor-11 h2.bd-reviews__h {
  margin: 0 0 clamp(32px, 4vw, 52px);
  text-align: center;
  font-family: var(--bd-font) !important;
  font-weight: 900 !important;
  font-synthesis: weight !important;
  -webkit-text-stroke: 0.4px currentColor;
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.6rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0.06em !important;
  color: var(--bd-navy) !important;
}
.bd-reviews__carousel { position: relative; padding: 0 clamp(0px, 3vw, 28px); }
.bd-reviews__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 2px 14px;
}
.bd-reviews__track::-webkit-scrollbar { display: none; }
.bd-reviews__card {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
  margin: 0;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--bd-hair);
  border-radius: 16px;
  box-shadow: 0 18px 40px -30px rgba(16, 26, 36, 0.35);
}
.bd-reviews__stars { display: flex; gap: 3px; color: var(--bd-gold); }
.bd-reviews__stars svg { width: 20px; height: 20px; fill: currentColor; }
.bd-reviews__text {
  margin: 0;
  flex: 1;
  font-family: var(--bd-sans);
  font-size: 1.05rem;
  line-height: 1.65;
  color: #40484f;
}
.bd-reviews__by { display: flex; flex-direction: column; gap: 2px; font-family: var(--bd-sans); }
.bd-reviews__by b { color: var(--bd-navy); font-weight: 700; }
.bd-reviews__by span { font-size: 0.9rem; color: #7a848c; }
.bd-reviews__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-58%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--bd-navy);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.16s ease;
}
.bd-reviews__nav:hover { background: var(--bd-aqua-deep); }
.bd-reviews__nav--prev { left: 0; }
.bd-reviews__nav--next { right: 0; }
.bd-reviews__cta { margin-top: clamp(28px, 4vw, 44px); text-align: center; }
@media (max-width: 980px) { .bd-reviews__card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 640px) {
  .bd-reviews__card { flex-basis: 86%; }
  .bd-reviews__nav { display: none; }
}

/* --- new-patients / CDCP / Dr. Syed page components (round 10) ------------ */
.bd-np__sec.bd-sp__sec { scroll-margin-top: 130px; }
.bd-np__lead {
  margin: 0 0 14px !important;
  font-family: var(--bd-font);
  font-weight: 600;
  font-synthesis: weight;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  line-height: 1.3;
  color: var(--bd-aqua-deep);
}
.bd-np__lead--closing { margin: 28px 0 0 !important; color: var(--bd-navy); }
.bd-np__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 26px 0 0;
}
.bd-np__cards--stack { margin-top: 30px; }
.bd-np__card {
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--bd-hair);
  border-radius: 14px;
  box-shadow: 0 16px 36px -30px rgba(16, 26, 36, 0.4);
}
.bd-alt-b .bd-np__card { background: var(--bd-cream); }
.bd-np__card h3 {
  margin: 0 0 10px;
  font-family: var(--bd-font) !important;
  font-weight: 600 !important;
  font-synthesis: weight;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--bd-navy);
}
.bd-np__card p { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.65; color: #40484f; }
.bd-np__card p:last-child { margin-bottom: 0; }
.bd-np__card strong { color: var(--bd-navy); }
.bd-np__gift {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  margin: 22px 0 22px;
}
.bd-np__gift-item {
  flex: 1 1 0;
  max-width: 330px;
  padding: 26px 24px;
  text-align: center;
  background: #ecfbfd;
  border: 1px solid var(--bd-aqua);
  border-radius: 14px;
  font-family: var(--bd-sans);
  font-size: 1.05rem;
  color: #40484f;
}
.bd-np__gift-item span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--bd-font);
  font-weight: 600;
  font-synthesis: weight;
  font-size: 1.55rem;
  color: var(--bd-navy);
}
.bd-np__gift-or {
  align-self: center;
  font-family: var(--bd-sans);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--bd-aqua-deep);
}
.bd-np__fine { margin: 22px 0 0 !important; font-size: 0.88rem; line-height: 1.55; color: #7a848c; }
.bd-np__inline-cta { margin-top: 26px; }
@media (max-width: 760px) {
  .bd-np__cards { grid-template-columns: 1fr; }
  .bd-np__gift { flex-direction: column; align-items: center; }
  .bd-np__gift-item { width: 100%; max-width: none; }
}

/* Dr. Syed page */
.bd-dr__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.bd-dr__photo { margin: 0; }
.bd-dr__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 30px 56px -26px rgba(16, 26, 36, 0.4);
}
.bd-dr__bio p { margin: 0 0 16px !important; font-size: 1.08rem; line-height: 1.75; color: #40484f; }
.bd-dr__rects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.bd-dr__rect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 26px;
  background: var(--bd-cream);
  border: 1px solid var(--bd-hair);
  border-radius: 12px;
  font-family: var(--bd-font);
  font-weight: 600;
  font-synthesis: weight;
  font-size: 1.3rem;
  color: var(--bd-navy);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.bd-dr__rect:hover {
  transform: translateY(-3px);
  border-color: var(--bd-aqua);
  box-shadow: 0 22px 40px -28px rgba(16, 26, 36, 0.45);
}
.bd-dr__rect span { color: var(--bd-aqua-deep); }
.bd-dr__actions { margin-top: 30px; }
@media (max-width: 860px) {
  .bd-dr__layout { grid-template-columns: 1fr; }
  .bd-dr__photo { max-width: 420px; }
  .bd-dr__rects { grid-template-columns: 1fr; }
}

/* --- service pages, round 13: hero button row + "at a glance" checklist ---- */
.bd-sp__hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.bd-sp__hero-actions .bd-sp__hero-cta { margin-top: 0; }
.bd-sp__glance .bd-sp__list li { font-size: 1.08rem; }
.bd-sp__list a { color: var(--bd-navy); text-decoration: none; }
.bd-sp__list a:hover { color: var(--bd-aqua-deep); text-decoration: underline; text-underline-offset: 3px; }
.bd-sp__sec { scroll-margin-top: 130px; }
.bd-sp__sec p a, .bd-sp__related li a { color: var(--bd-aqua-deep); text-underline-offset: 3px; }
.bd-sp__sec p a:hover { color: var(--bd-navy); }

/* three buttons in the homepage welcome row: tighter so they sit on one line */
.bd-welcome__actions .bd-welcome__btn { padding: 14px 20px !important; font-size: 15px !important; white-space: nowrap; }

/* ===========================================================================
   CHANGES v7.0  —  client review round 14
   1. subheadings 1.5x   2. button font = beaudent.ca's (Recline, weight 900)
   3. homepage photos take the left/right half, alternating (welcome: right,
      why: left, FAQ: right)   4. per-section colour morph + photo wipe +
      heading accent   5. site-wide smoothness/cleanliness polish
   =========================================================================== */

:root {
  --bd-sub-scale: 1.5;
  /* left/right page gutter that lines up with the 1440px content column */
  --bd-edge: max(clamp(20px, 5vw, 60px), calc((100vw - 1440px) / 2 + 60px));
  --bd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- 1. subheadings x1.5 (original sizes kept inside calc so the fluid
   clamp() behaviour is preserved) ------------------------------------------ */
body .bd-welcome__subhead { font-size: calc(clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem) * var(--bd-sub-scale)) !important; line-height: 1.25 !important; }
body .bd-welcome__lead { font-size: calc(1.25rem * var(--bd-sub-scale)) !important; line-height: 1.25 !important; }
body .bd-why__lead { font-size: calc(1.35rem * var(--bd-sub-scale)) !important; line-height: 1.25 !important; }
body .bd-why__tagline { font-size: calc(1.25rem * var(--bd-sub-scale)) !important; line-height: 1.25 !important; }
body .bd-why__tile-t { font-size: calc(1.35rem * var(--bd-sub-scale)); line-height: 1.2; }
body .bd-svc-title { font-size: calc(1.42rem * var(--bd-sub-scale)) !important; line-height: 1.18 !important; }
body .bd-cta__eyebrow { font-size: calc(clamp(1.05rem, 0.95rem + 0.3vw, 1.2rem) * var(--bd-sub-scale)) !important; }
body .bd-sp__tagline { font-size: calc(clamp(1.25rem, 1rem + 1vw, 1.6rem) * var(--bd-sub-scale)); line-height: 1.25; }
body .bd-np__lead { font-size: calc(clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem) * var(--bd-sub-scale)); line-height: 1.25; }
body .bd-np__card h3 { font-size: calc(1.35rem * var(--bd-sub-scale)); line-height: 1.2; }
body .bd-np__step h3,
body .bd-np__promo h3 { font-size: calc(1.2rem * var(--bd-sub-scale)) !important; line-height: 1.2; }
body .bd-np__clinic h3 { font-size: calc(1.3rem * var(--bd-sub-scale)) !important; line-height: 1.2; }
body .bd-mvv__tile h3 { font-size: calc(1.42rem * var(--bd-sub-scale)) !important; line-height: 1.2; }
body .bd-team__name { font-size: calc(1.25rem * var(--bd-sub-scale)); line-height: 1.2; }
body .bd-blog-card h3 { font-size: calc(1.3rem * var(--bd-sub-scale)); line-height: 1.2; }
body .bd-dr__rect { font-size: calc(1.3rem * var(--bd-sub-scale)); line-height: 1.2; }
@media (max-width: 640px) { :root { --bd-sub-scale: 1.3; } }

/* --- 2. button font: exactly what beaudent.ca uses (Recline, weight 900).
   Recline only ships a Light cut, so 900 renders as the same synthetic bold
   the live site shows. -------------------------------------------------------- */
.bd-topbar__call,
.bd-topbar__book,
.bd-sticky-book,
.bd-nav__link,
.bd-sp__hero-cta,
.bd-sp__btn,
.bd-sp__btn--primary,
.bd-sp__btn--ghost,
.bd-cta__btn,
.bd-cta__btn--primary,
.bd-cta__btn--ghost,
.bd-np__inline-cta,
.bd-welcome__btn,
.bd-why__btn,
.bd-reviews__btn,
.bd-dr__btn,
.bd-cdcp__btn,
.bd-npform button[type="submit"],
main .elementor-widget-button .elementor-button,
main a.elementor-button.elementor-button,
body.page-id-11 .elementor-element-365526c a.elementor-button.elementor-button {
  font-family: var(--bd-font) !important;
  font-weight: 900 !important;
  font-synthesis: weight !important;
  letter-spacing: 0.01em !important;
  /* Recline's synthetic bold is faint at button sizes; a hair of stroke keeps
     the exact same typeface but makes it clearly readable */
  -webkit-text-stroke: 0.5px currentColor;
}
.bd-sp__hero-cta,
.bd-sp__btn,
.bd-cta__btn,
.bd-np__inline-cta,
.bd-welcome__btn,
.bd-why__btn,
.bd-reviews__btn,
.bd-dr__btn,
.bd-cdcp__btn,
.bd-npform button[type="submit"],
main .elementor-widget-button .elementor-button,
body.page-id-11 .elementor-element-365526c a.elementor-button.elementor-button {
  font-size: 19px !important;
  /* these run at 19px vs. the nav/Call pills' 17px — the shared 0.5px stroke
     above reads visibly thinner at the larger size (a smaller stroke-to-
     glyph ratio), which is exactly the "less bold than Call" the client
     keeps flagging; a hair more stroke here keeps the ratio, and the look,
     the same as the reference Call button (client review round 20). */
  -webkit-text-stroke: 0.65px currentColor !important;
}
.bd-nav__link { font-size: 17px !important; }
/* round 36: .bd-topbar__call/.bd-topbar__book dropped from this rule —
   their font-size is now set explicitly per desktop tier (round 36's
   match-the-nav-tabs sizing), and this unscoped rule would otherwise win
   the cascade over that and over mobile's own size too. */
.bd-sticky-book { font-size: 27px !important; }
.bd-welcome__actions .bd-welcome__btn { font-size: 18px !important; padding: 17px 28px !important; white-space: nowrap; }

/* --- 3. homepage photos: half the screen, edge to edge, alternating ------- */
body.page-id-11 .bd-why { padding: 0 !important; }
body.page-id-11 .bd-welcome { padding: 0 !important; }

/* welcome: text left, photo right — text column widened again (rounds 20,
   23, 24) so the heading has real room to be big while staying one line
   and clearly inside the left column, not spanning the full section width. */
.bd-welcome__layout {
  max-width: none !important;
  padding: 0 !important;
  gap: 0 !important;
  grid-template-columns: 2fr 1fr !important;
  align-items: stretch !important;
}
.bd-welcome__body {
  display: flex;
  align-items: center;
  padding: clamp(56px, 7vw, 112px) clamp(28px, 5vw, 56px) clamp(56px, 7vw, 112px) var(--bd-edge);
}
.bd-welcome__body-inner { max-width: 1100px; }
.bd-welcome__aside {
  position: relative;
  min-height: clamp(480px, 44vw, 720px);
  overflow: hidden;
  border-radius: 56px 0 0 56px;
}
/* why: photo left, text right */
.bd-why__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.bd-why__aside {
  position: relative;
  min-height: clamp(520px, 48vw, 780px);
  overflow: hidden;
  border-radius: 0 56px 56px 0;
}
.bd-why__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(56px, 7vw, 112px) var(--bd-edge) clamp(56px, 7vw, 112px) clamp(28px, 5vw, 80px);
}
.bd-why__h { margin: 0 0 22px !important; max-width: none !important; }
.bd-welcome__aside img,
.bd-why__aside img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
.bd-why__tiles { margin-top: 0; background: rgba(255, 255, 255, 0.55); }

/* FAQ: no photo (client review round 18) — one centred column, full width,
   so the accordion reads as a clean, professional Q&A list on its own. */
@media (min-width: 901px) {
  body.page-id-11 .elementor-element-c94a5e5 {
    padding: 0 !important;
    background: transparent !important;
  }
  body.page-id-11 .elementor-element-c94a5e5 > .e-con-inner {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: clamp(56px, 7vw, 104px) clamp(28px, 4vw, 64px) !important;
  }
}
@media (max-width: 900px) {
  .bd-welcome__layout,
  .bd-why__layout { grid-template-columns: 1fr !important; }
  .bd-welcome__body { padding: 40px var(--bd-edge) 56px; }
  .bd-why__body { padding: 40px var(--bd-edge) 56px; }
  .bd-welcome__aside,
  .bd-why__aside {
    order: -1;
    max-width: none;
    margin: 0;
    min-height: 0;
    height: clamp(260px, 62vw, 420px);
    border-radius: 0 0 36px 36px;
  }
  body.page-id-11 .elementor-element-c94a5e5 { padding-left: var(--bd-edge) !important; padding-right: var(--bd-edge) !important; }
}

/* --- 4. section backgrounds: plain, static white/beige alternation ---------
   Client review round 26: removed the scroll-driven colour-morph entirely
   (JS no longer sets/observes a body[data-tone] at all — see
   initSectionTone's removal in overrides.js). Each section just has its own
   fixed background-color now, exactly like the alternating bands on the
   inner pages (.bd-alt-a / .bd-alt-b) — no transition, no glow, nothing
   scroll-triggered. */
body.page-id-11 { background-color: #ffffff; }
body.page-id-11 .bd-welcome     { background: #ffffff !important; }
body.page-id-11 .bd-services    { background: #f3e9d8 !important; }
body.page-id-11 .bd-why         { background: #ffffff !important; }
body.page-id-11 .bd-reviews     { background: #f3e9d8 !important; }
body.page-id-11 .elementor-element-c94a5e5 { background: #ffffff !important; }
body.page-id-11 .bd-cta         { background: #f3e9d8 !important; }

/* heading accent: a gold-to-turquoise rule that draws itself in */
.bd-welcome__h::after,
.bd-why__h::after,
.bd-services__tagline::after,
.bd-reviews__h::after {
  content: "";
  display: block;
  width: 84px;
  height: 5px;
  margin-top: 20px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--bd-aqua), var(--bd-gold));
}
.bd-services__tagline::after,
.bd-reviews__h::after { margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: no-preference) {
  .bd-welcome__h::after,
  .bd-why__h::after,
  .bd-services__tagline::after,
  .bd-reviews__h::after { transition: width 1s var(--bd-ease) 0.45s; }
  .bd-reveal:not(.is-in) .bd-welcome__h::after,
  .bd-reveal:not(.is-in) .bd-why__h::after,
  .bd-reveal:not(.is-in) .bd-services__tagline::after,
  .bd-reveal:not(.is-in) .bd-reviews__h::after { width: 0; }

  /* photos wipe in from their outer edge while settling from a slight zoom.
     The clip lives on the <img>, not on the observed wrapper — Chrome's
     IntersectionObserver treats a fully clip-path'd target as invisible and
     would never fire the reveal. */
  .bd-welcome__aside.bd-reveal,
  .bd-why__aside.bd-reveal { opacity: 1; transform: none; transition: none; }
  .bd-welcome__aside img,
  .bd-why__aside img {
    transition: clip-path 1.5s var(--bd-ease), transform 2.2s var(--bd-ease);
    clip-path: inset(0 0 0 0);
  }
  .bd-welcome__aside.bd-reveal:not(.is-in) img { clip-path: inset(0 0 0 100%); transform: scale(1.16); }
  .bd-why__aside.bd-reveal:not(.is-in) img { clip-path: inset(0 100% 0 0); transform: scale(1.16); }
}

/* --- 5. smooth + clean ---------------------------------------------------- */
html, body { overflow-x: clip; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--bd-aqua); color: var(--bd-navy); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--bd-aqua-deep);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: no-preference) {
  .bd-svc-card, .bd-why__tile, .bd-np__card, .bd-reviews__card, .bd-blog-card, .bd-team__card, .bd-dr__rect {
    transition: transform 0.45s var(--bd-ease), box-shadow 0.45s var(--bd-ease), border-color 0.3s ease, background-color 0.3s ease;
  }
  .bd-why__tile:hover, .bd-np__card:hover, .bd-reviews__card:hover, .bd-team__card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -30px rgba(16, 26, 36, 0.4); }
}

/* FAQ split: left-aligned copy and a full-width accordion in the text half */
@media (min-width: 901px) {
  body.page-id-11 .elementor-element-c94a5e5 > .e-con-inner {
    align-items: stretch !important;
    text-align: left !important;
  }
  body.page-id-11 .elementor-element-c94a5e5 .e-con-inner > .elementor-widget,
  body.page-id-11 .elementor-element-c94a5e5 .e-con-inner > .elementor-widget .e-n-accordion {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.page-id-11 .elementor-element-c94a5e5 .elementor-heading-title { text-align: left !important; }
}

/* review cards: keep the soft shadow from being clipped by the scroll track */
.bd-reviews__track { padding-bottom: 44px; margin-bottom: -30px; }

/* mobile: the floating Book chip was inheriting the desktop rail's tall
   padding and bigger type — keep it a compact pill in the corner */
@media (max-width: 767px) {
  .bd-sticky-book { padding: 11px 18px !important; font-size: 15px !important; letter-spacing: 0.01em !important; text-transform: none; }
}

/* footer column headings follow the same 1.5x subheading scale */
@media (min-width: 901px) {
  footer h3,
  .bd-footer__col h3 { font-size: calc(28px * var(--bd-sub-scale)) !important; line-height: 1.1 !important; }
}

/* --- BD monogram emblem above the homepage hero headline (round 15) ------- */
.bd-hero-mark { display: flex; justify-content: center; margin: 0 auto clamp(6px, 1vw, 14px); }
.bd-hero-mark img {
  display: block;
  width: clamp(84px, 8vw, 118px);
  height: auto;
  filter: drop-shadow(0 8px 22px rgba(6, 12, 22, 0.45));
}

/* framing for the round-16 homepage photos (Pexels, free for commercial use) */
.bd-welcome__aside img { object-position: 48% 30% !important; }
.bd-why__aside img { object-position: 56% 35% !important; }
/* --- /book-online/ — embedded ClearDent booking widget (round 17) -------- */
.bd-book__frame-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 34px rgba(25, 40, 60, 0.12);
  border: 1px solid var(--bd-hair);
}
.bd-book__frame { display: block; width: 100%; height: 900px; border: 0; }
.bd-book__fallback { margin: 18px 0 0; text-align: center; color: #555; font-size: 15px; }
.bd-book__fallback a { color: var(--bd-aqua-deep); font-weight: 700; text-decoration: none; }
.bd-book__fallback a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .bd-book__frame { height: 1150px; }
}

@media (max-width: 900px) {
  .bd-welcome__aside img { object-position: 50% 14% !important; }
  .bd-why__aside img { object-position: 56% 22% !important; }
}

/* ===========================================================================
   CHANGES v8.0  —  client review round 18
   1. "We are accepting New Patients" and "Dental Services for every smile in
      Beaumont" fit on one line (both are pinned to the site's shared
      2.5–4.4rem heading scale, which is too big for either string to ever
      fit on one line at any desktop width — give just these two their own
      smaller scale; every other heading keeps the shared size).
   2. "All Services" kicker above the services heading.
   3. The "What makes BeauDent different?" heading/photo block and the six
      tiles under it read as one continuous section (the tiles had their own
      background wash, breaking the section in two visually).
   4. Closing CTA: photo removed — heading free on the left, "Let's get
      started" moved inside the card as its own heading, card on the right.
   =========================================================================== */

/* round 20: back inside the left column (client: it should read as clearly
   on the left, not floating in a full-width band that looked centred) — the
   column itself was widened above (1.35fr vs 1fr, body-inner 660→820px) to
   give the heading enough room to be big and still hold one line, measured
   against the real column width. */
body.page-id-11 .elementor.elementor-11 h2.bd-welcome__h,
.bd-welcome__h {
  font-size: clamp(2.5rem, -0.27rem + 4.81vw, 4.1rem) !important;
  line-height: 1.12 !important;
  text-align: left !important;
}

/* services heading: wider column + bigger size than the shared scale would
   allow while still fitting one line (measured against the real container). */
.bd-services__tagline--center { max-width: 1100px !important; }
body.page-id-11 .elementor.elementor-11 h2.bd-services__tagline,
.bd-services__tagline {
  font-size: clamp(2rem, 1.3rem + 2.3vw, 3.4rem) !important;
  line-height: 1.15 !important;
}
.bd-services__subhead {
  margin: 14px 0 0;
  font-family: var(--bd-font);
  font-weight: 600;
  font-synthesis: weight;
  font-size: calc(clamp(1.1rem, 1rem + 0.4vw, 1.3rem) * var(--bd-sub-scale));
  line-height: 1.3;
  color: var(--bd-aqua-deep);
  text-align: center;
}

/* --- "What makes BeauDent different?" + the six tiles read as one section - */
.bd-why__tiles { background: transparent !important; }

/* "Meet Dr. Syed" — doubled in length (client review round 20) */
.bd-why__btn { padding: 18px 64px !important; }

/* --- Closing CTA: no photo — heading left, card right ---------------------- */
.bd-cta__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(24px, 5vw, 60px);
}
.bd-cta__heading {
  max-width: none;
  margin: 0;
  text-align: left;
}
.bd-cta__h { color: var(--bd-navy) !important; }
.bd-cta__card {
  max-width: none;
  margin: 0;
  padding: clamp(32px, 4.5vw, 48px) clamp(28px, 5vw, 48px);
  text-align: left;
  box-shadow: 0 30px 60px -24px rgba(10, 16, 26, 0.45);
}
.bd-cta__eyebrow {
  color: var(--bd-navy) !important;
  margin: 0 0 12px !important;
}
.bd-cta__sub {
  margin: 0 0 26px !important;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left;
}
.bd-cta__actions { justify-content: flex-start; }
@media (max-width: 900px) {
  .bd-cta__split { grid-template-columns: 1fr; padding: clamp(48px, 9vw, 72px) var(--bd-edge); }
  .bd-cta__heading { text-align: center; }
  .bd-cta__card { text-align: center; }
  .bd-cta__sub { margin-left: auto !important; margin-right: auto !important; }
  .bd-cta__actions { justify-content: center; }
}

/* ===========================================================================
   CHANGES v9.0  —  client review round 19
   1. FAQ section: fixed grey-blue wash overridden to plain white on every
      viewport (not just desktop) — see the static background block above
      for the full per-section colour list (round 26).
   =========================================================================== */
body.page-id-11 .elementor-element-c94a5e5 { background: #ffffff !important; }

/* ===========================================================================
   CHANGES v12.0  —  client review round 22
   1. Buttons were getting bolder/thicker each round (stroke crept up to
      0.65-0.9px) chasing a "match the Call button" boldness that was
      actually a colour-contrast illusion, not a real weight gap — that
      much stroke on a synthetic-bold display face reads heavy/blobby
      rather than crisp. Pulled every button's stroke back down to one
      light, uniform value.
   2. Letter-spacing increased again, further this time, across body copy,
      headings AND buttons/nav (client: "everywhere").
   =========================================================================== */
.bd-nav__link,
.bd-topbar__call,
.bd-topbar__book,
.bd-sticky-book,
.bd-sp__hero-cta,
.bd-sp__btn,
.bd-cta__btn,
.bd-np__inline-cta,
.bd-welcome__btn,
.bd-why__btn,
.bd-reviews__btn,
.bd-dr__btn,
.bd-cdcp__btn,
.bd-npform button[type="submit"],
main .elementor-widget-button .elementor-button,
main a.elementor-button.elementor-button {
  /* round 24: no extra stroke at all now — font-weight:900 alone carries
     the bold, the stroke was only ever there to reinforce it. */
  -webkit-text-stroke: 0 currentColor !important;
}

body, p, li,
.elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li,
.bd-svc-desc, .bd-why__tile-d, .bd-cta__sub, .bd-welcome__body-inner p,
.bd-welcome__subhead, .bd-services__subhead, .bd-why__lead, .bd-why__tagline,
.bd-np__lead, .bd-sp__tagline, .bd-nav__drop li a, .bd-footer p, .bd-footer__col li,
.e-n-accordion-item-title-text, .e-n-accordion-item-title + * {
  letter-spacing: 0.04em;
}
h1, h2, h3,
.elementor-heading-title,
.bd-welcome__h, .bd-services__tagline, .bd-why__h, .bd-cta__h,
.bd-sp__h1, .bd-sp__sec h2, .bd-reviews__h, .bd-footer__col h3,
.bd-svc-title, .bd-why__tile-t, .bd-np__card h3 {
  letter-spacing: 0.06em !important;
}
.bd-nav__link, .bd-topbar__call, .bd-topbar__book, .bd-sticky-book,
.bd-sp__hero-cta, .bd-sp__btn, .bd-cta__btn, .bd-np__inline-cta, .bd-welcome__btn,
.bd-why__btn, .bd-reviews__btn, .bd-dr__btn, .bd-cdcp__btn,
.bd-npform button[type="submit"], main .elementor-widget-button .elementor-button,
main a.elementor-button.elementor-button {
  letter-spacing: 0.08em !important;
}

/* ===========================================================================
   CHANGES v13.0  —  client review round 23
   1. Nav tabs vs. Call/Book, take two: checked with actual computed-style
      dumps on the live site this time (not assumptions) — font-family,
      weight, size, letter-spacing, stroke and even text colour are all
      byte-for-byte identical between the two. The only real difference is
      the background: the pale pastel aqua behind the nav tabs is simply a
      much softer, less vivid colour than the gold behind Call/Book, so
      identical text reads less punchy on it — no amount of font tweaking
      fixes that. Deepened the nav tabs' own background to a richer,
      more saturated teal (kept off the shared --bd-aqua variable so it
      doesn't ripple into every other aqua element site-wide).
   2. FAQ intro line: it's marked up as an Elementor "heading" widget in the
      mirror (hence the display-font styling) even though it reads like a
      supporting paragraph — forced to the sans body font, matching every
      other paragraph.
   =========================================================================== */
.bd-nav__link { background: #5cb6c5 !important; }
.bd-nav__link:hover,
.bd-nav__item:focus-within > .bd-nav__link { background: var(--bd-gold) !important; }
.bd-nav__link.is-active { background: #fff !important; }

.elementor-element-b554c1e .elementor-heading-title {
  font-family: var(--bd-sans) !important;
  font-weight: 500 !important;
  font-synthesis: initial !important;
}

/* Header "Call" pill only: fixes a faint inset ring along the rounded
   corners (a background/border-radius antialiasing artifact some browsers
   show at a sharp navy-header-to-gold-pill colour boundary) — clipping the
   background strictly to the padding box removes it. Scoped to this one
   button only, per client request. */
.bd-topbar__call {
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  /* round 28: this never actually won — a later !important rule (removing
     stroke from every nav/button element) beat it since this declaration
     had no !important of its own. Fixed, and bumped up so it's clearly
     visible this time. */
  -webkit-text-stroke: 0.5px currentColor !important;
}

/* every nav-row pill (tabs + Call + Book) truly the same width now — the
   158px floor above was smaller than "Call 780 888 8077" and "Book
   Appointment" actually need, so those two (and "Our Technology") were
   quietly growing past it while the shorter labels stayed floored,
   breaking the uniform-pill look. 200px covers the widest label with a
   little breathing room. */

/* ===========================================================================
   CHANGES v15.0  —  client review round 26: text uniformity pass
   Found the real bug behind the recurring "fonts aren't uniform" reports:
   an old high-specificity rule (body.page-id-11 .elementor.elementor-11
   h2.bd-XXX, added round 3) was silently beating the round-22 letter-
   spacing rule for 4 of the 6 homepage section headings — they were
   rendering at letter-spacing:0 this whole time no matter what the shared
   rule said, because a MORE SPECIFIC selector elsewhere pinned it to 0.
   Fixed at the source above (search "section display type"). Also matched
   every "subheading under a heading" element to the same navy every real
   heading uses, instead of some being navy and some being teal. */
.bd-welcome__subhead,
.bd-services__subhead {
  color: var(--bd-navy) !important;
}

/* Closing CTA now sits on beige like every other alternating section —
   recolour the heading and the quick-links row to read on a light
   background instead of the old dark-navy band's white/translucent text. */
.bd-cta__quick { border-top-color: rgba(25, 40, 60, 0.12) !important; }
.bd-cta__quick a { color: #55606c !important; }
.bd-cta__quick a:hover { color: var(--bd-aqua-deep) !important; }

/* ===========================================================================
   CHANGES v16.0  —  client review round 27, revised round 28
   Round 27 tried plain text nav links (no pill) to stop the row overflowing
   the screen. Client wants the rounded-box pills back — restored them, but
   still without the fixed 200px min-width that caused the overflow in the
   first place: each pill now sizes to its own label again (like the
   original design), which comfortably fits 6 tabs + Call + Book Appointment
   on one row at every normal desktop width.
   FAQ column widened (900px -> 1200px, see the round-18 rule above) so it
   no longer leaves large empty margins on wide screens.
   =========================================================================== */
@media (min-width: 1024px) {
  /* round 42: sizing/typography of the desktop nav pills now lives in the
     round-42 header block at the end of this file; only state colours here */
  .bd-nav__link:hover,
  .bd-nav__item:focus-within > .bd-nav__link {
    background: var(--bd-gold) !important;
    color: var(--bd-navy) !important;
  }
  .bd-nav__link.is-active {
    background: #fff !important;
    color: var(--bd-navy) !important;
  }
}

/* ===========================================================================
   CHANGES v17.0  —  client review round 30
   1. "Looking for a dentist in Beaumont, Alberta?" now matches the same
      weight/stroke treatment as "We are accepting New Patients" above it —
      same font, just smaller.
   2. Footer: column headings ("Clinic Hours", "Services", "Contact
      Information") were rendering in the Recline display face while every
      link/value under them is sans — that mismatch is exactly what read as
      "different fonts". Forced the footer headings to the same sans family,
      and shrank them + tightened the vertical rhythm for a more compact
      footer overall.
   3. Hero accreditation badges removed entirely (see heroTweaks() in
      overrides.js).
   4. Info strip (address / fee-guide line / socials) moved out of the
      sticky header into its own band between the hero and the next section
      (see buildInfoStrip() in overrides.js) — a little more vertical room
      now that it isn't squeezed under the nav row.
   =========================================================================== */
/* round 31: client meant the Recline FONT, not bold — back to the original
   regular weight, no stroke. Also found it was actually rendering in the
   sans body font this whole time: ".bd-welcome__body-inner p" (it's a <p>
   inside that container) outranks the plain ".bd-welcome__subhead" class
   rule in specificity, so the sans family was quietly winning. Forced
   Recline here to actually fix it. */
.bd-welcome__subhead {
  font-family: var(--bd-font) !important;
  font-weight: 600 !important;
  -webkit-text-stroke: 0 !important;
}

footer.elementor-location-footer .elementor-heading-title {
  font-family: var(--bd-sans) !important;
  font-weight: 700 !important;
  font-synthesis: initial !important;
  font-size: 19px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  color: #fff !important;
}
footer.elementor-location-footer .elementor-icon-list-text,
footer.elementor-location-footer .bd-hours li {
  font-size: 14.5px !important;
}
footer.elementor-location-footer .elementor-icon-list-items { margin: 0 !important; }
footer.elementor-location-footer .elementor-icon-list-item { margin: 0 0 6px !important; }
footer.elementor-location-footer .bd-hours { margin-top: 8px !important; }
footer.elementor-location-footer .bd-hours li { padding: 3px 0 !important; }
footer.elementor-location-footer .elementor-element.elementor-widget-heading { margin-bottom: 4px !important; }

.bd-infoline {
  padding: 16px clamp(16px, 5vw, 56px) !important;
  justify-content: center !important;
}

/* ===========================================================================
   CHANGES v18.0  —  client review round 31, refined round 33
   Address + socials live in their own slim band under the nav (.bd-headinfo)
   — full street address text, not just the pin icon. Round 33: regrouped
   as one centred cluster (address, a thin divider, then the social icons)
   instead of being stretched to opposite edges of the row with a big empty
   gap between them — reads as one deliberate unit instead of two
   disconnected pieces.
   =========================================================================== */
.bd-headinfo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  background: #d3f2f6;
  color: var(--bd-navy);
  font-size: 14.5px;
  font-weight: 500;
  padding: 11px clamp(16px, 5vw, 56px);
}
.bd-headinfo .bd-topbar__addr { color: var(--bd-navy); }
.bd-headinfo .bd-topbar__addr svg { color: var(--bd-aqua-deep); }
.bd-headinfo .bd-social {
  position: relative;
  padding-left: 18px;
}
.bd-headinfo .bd-social::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: rgba(25, 40, 60, .22);
}
.bd-headinfo .bd-social a {
  width: 28px;
  height: 28px;
  border-color: rgba(25, 40, 60, .28);
  color: var(--bd-navy);
}
.bd-headinfo .bd-social a:hover { background: var(--bd-aqua); border-color: var(--bd-aqua); color: var(--bd-navy); }
@media (max-width: 767px) {
  .bd-headinfo { font-size: 12.5px; gap: 10px; padding: 9px clamp(14px, 4vw, 24px); }
  .bd-headinfo .bd-topbar__addr span { white-space: normal; text-align: center; }
}

/* ===========================================================================
   CHANGES v22.0  —  client review rounds 42-43
   Desktop header matched to the client's reference mock-up: ONE row — logo
   left, six uniform aqua nav pills, Call/Book at the far right. Everything
   is sized in em off the header (font-size 0.8125vw = 13px at 1600px) so it
   scales as one piece. Round 43: nav pills 1.2x bigger and centred on the
   page, Call/Book the same box size as the pills and yellow again.
   =========================================================================== */
@media (min-width: 1024px) {
  .bd-headmid {
    font-size: clamp(10.6px, 0.8125vw, 16px);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 3.35em 2.2em 3.35em 5em;
  }
  .bd-headmid > .bd-logo { flex: none; }
  .bd-headmid > .bd-logo img { height: 6em; width: auto; }

  .bd-headmid .bd-nav {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 clamp(0px, calc((100vw - 1100px) * 0.1), 120px) 0 1.5em !important;
  }
  .bd-headmid .bd-nav__list {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1.1em !important;
  }
  .bd-headmid .bd-nav__item { flex: 0 1 8.3em; min-width: 0; }
  .bd-headmid .bd-nav__link {
    width: 100% !important;
    min-width: 0 !important;
    height: 2.48em;
    padding: 0 0.15em !important;
    gap: 0.3em !important;
    box-sizing: border-box;
    justify-content: center;
    background: var(--bd-aqua) !important;
    color: #1b2a3f !important;
    border-radius: 0.6em !important;
    font-family: var(--bd-font) !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    letter-spacing: 0.015em !important;
    line-height: 1 !important;
    -webkit-text-stroke: 0.25px currentColor !important;
    overflow: hidden;
    white-space: nowrap;
  }
  .bd-headmid .bd-nav__link .bd-caret { width: 0.75em; height: 0.75em; color: #fff; opacity: 1; flex: none; }

  .bd-headmid .bd-headactions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 1.2em !important;
    margin: 0;
    padding: 0;
  }
  .bd-headmid .bd-topbar__call,
  .bd-headmid .bd-topbar__book {
    width: 9.22em !important;
    min-width: 0 !important;
    height: 2.76em;
    padding: 0 0.3em !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    background: var(--bd-gold) !important;
    background-clip: border-box;
    border: 0 !important;
    border-radius: 0.6em !important;
    box-shadow: none !important;
    color: #1b2a3f !important;
    font-family: var(--bd-font) !important;
    font-size: 0.9em !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    -webkit-text-stroke: 0.3px currentColor !important;
    white-space: nowrap;
    overflow: hidden;
    transform: none !important;
  }
  .bd-headmid .bd-topbar__call:hover,
  .bd-headmid .bd-topbar__book:hover {
    background: var(--bd-gold-2) !important;
    color: #1b2a3f !important;
  }
}

/* wide enough for true centring: three equal-weight columns put the nav
   pills on the page's centre line (below 1360px the logo + Call/Book can't
   both fit beside a centred 6-pill row (under ~1360px), so the flex layout above stays) */
@media (min-width: 1360px) {
  .bd-headmid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
    padding-right: 5em;
  }
  .bd-headmid > .bd-logo { justify-self: start; }
  .bd-headmid .bd-nav { margin: 0 !important; width: 52.9em; }
  .bd-headmid .bd-nav { width: 55.3em; }
  .bd-headmid .bd-nav__item { flex-basis: 8.3em; }
  .bd-headmid .bd-nav__link { font-size: 1.1em !important; height: 2.66em; }
  .bd-headmid .bd-headactions { justify-self: end; }
  .bd-headmid .bd-topbar__call,
  .bd-headmid .bd-topbar__book { font-size: 0.87em !important; width: 9.54em !important; height: 3.37em; }
}

/* ===========================================================================
   CHANGES v23.0  —  client review round 48
   Desktop: the address now sits under the logo and the social icons under
   the Book Appointment button (same width as the button, edges aligned),
   both inside the navy bar; the pale strip under the header is gone.
   Mobile keeps the strip. (The desktop copies are separate elements from the
   strip's, so each layout shows only its own.)
   =========================================================================== */
.bd-deskaddr, .bd-desksocial { display: none; }
@media (min-width: 1024px) {
  .bd-headinfo { display: none !important; }
  .bd-headmid .bd-deskaddr {
    display: inline-flex;
    position: absolute;
    left: 5.88em;
    top: 11.4em;
    align-items: center;
    gap: 0.5em;
    font-size: 0.85em;
    line-height: 1.4;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s;
  }
  .bd-headmid .bd-deskaddr svg { width: 1.1em; height: 1.1em; color: var(--bd-aqua); flex: none; }
  .bd-headmid .bd-deskaddr:hover { text-decoration: underline; }
  .bd-headmid .bd-desksocial {
    display: flex;
    position: absolute;
    right: 2.2em;
    top: 9.15em;
    width: 8.3em;
    justify-content: space-between;
    gap: 0;
    transition: opacity 0.2s;
  }
  .bd-headmid .bd-desksocial a {
    width: 2.3em;
    height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    color: #fff;
  }
  .bd-headmid .bd-desksocial a svg { width: 1.1em; height: 1.1em; }
  .bd-headmid .bd-desksocial a:hover { background: var(--bd-aqua); border-color: var(--bd-aqua); color: var(--bd-navy); }
  .bd-headmid.is-scrolled .bd-deskaddr,
  .bd-headmid.is-scrolled .bd-desksocial { opacity: 0; pointer-events: none; }
}
@media (min-width: 1360px) {
  .bd-headmid .bd-desksocial { right: 5em; }
}

/* ===========================================================================
   CHANGES v24.0  —  client review round 50
   Service pages: each treatment is a two-column row — text on one side, a
   photo on the other — flipping sides every row (photo right, photo left...).
   The row's background keeps alternating cream / white as before.
   =========================================================================== */
.bd-sp__sec--media .bd-sp__wrap { max-width: 1180px; }
.bd-sp__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.bd-sp__row--rev .bd-sp__media { order: -1; }
.bd-sp__media { margin: 0; }
.bd-sp__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 18px;
  box-shadow: 0 18px 40px -22px rgba(25, 40, 60, 0.45);
}
@media (max-width: 800px) {
  .bd-sp__row { grid-template-columns: 1fr; gap: 22px; }
  .bd-sp__media,
  .bd-sp__row--rev .bd-sp__media { order: -1; }
}

/* ===========================================================================
   CHANGES v25.0  —  client review round 51
   New Patients + Our Technology: the same alternating text/photo rows as the
   service pages, with the dense card paragraphs turned into scannable pointer
   lists (aqua check bubbles), numbered steps, and short "chip" callouts.
   =========================================================================== */
.bd-sp__points {
  list-style: none;
  margin: 18px 0 8px;
  padding: 18px 22px;
  display: grid;
  gap: 12px;
  background: rgba(129, 217, 230, 0.14);
  border: 1px solid rgba(37, 132, 147, 0.18);
  border-radius: 16px;
}
.bd-alt-a .bd-sp__points { background: #fff; }
.bd-sp__points li {
  position: relative;
  padding-left: 38px;
  line-height: 1.5;
  font-size: 1.02rem;
  color: var(--bd-navy);
}
.bd-sp__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bd-aqua) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319283c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 15px no-repeat;
}
.bd-sp__points strong { font-weight: inherit; }
.bd-sp__points--steps { counter-reset: bdstep; }
.bd-sp__points--steps li { counter-increment: bdstep; }
.bd-sp__points--steps li::before {
  content: counter(bdstep);
  background: var(--bd-navy);
  color: #fff;
  font-family: var(--bd-sans);
  font-weight: 700;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}
.bd-sp__points--cols { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.bd-sp__chips { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bd-sp__chips li {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--bd-navy);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bd-sp__text .bd-np__inline-cta { margin-top: 14px; }
.bd-sp__text .bd-np__gift { margin: 16px 0; }
@media (max-width: 560px) { .bd-sp__points--cols { grid-template-columns: 1fr; } }
.bd-sp__text .bd-np__lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.45; margin: 4px 0 14px; }
.bd-sp__text .bd-np__inline-cta { margin: 14px 0 22px; }
.bd-sp__text .bd-np__fine { margin-top: 6px; clear: both; }