/* ==========================================================================
   Sullivan Family Dental — brand stylesheet (bespoke; replaces the dental
   template's look entirely).

   Loading order enforced by @dental/core's Meta.astro:
     bootstrap → calander.css → THIS FILE (or issa-home.css) → responsive.css
   Two consequences this file has to live with:
     1. Bootstrap is already loaded. Every class here is `sfd-` prefixed so it
        can never collide with a Bootstrap class.
     2. The shared dental `responsive.css` loads AFTER this file and rewrites
        bare p/h1..h4 sizes. The site's Layout.astro re-asserts the type scale
        in a bundled <style> block (which loads last) — don't move that.
   ========================================================================== */

:root {
  /* Palette sampled from the practice's own logo. */
  --sfd-navy: #093f78;
  --sfd-blue: #356e93;
  --sfd-teal: #3c849b;
  --sfd-mist: #accbd3;
  --sfd-wash: #eef4f7;
  /* Deep navy used in the hero scrim / interior page-header overlay
     (rgba(6, 32, 60, …) above) — reused as a literal hex for the Family
     Discounts card so that card's gradient/ink pulls an exact shade already
     used elsewhere on the site, not an invented one. */
  --sfd-navy-deep: #06203c;

  --sfd-ink: #16242e;
  --sfd-body: #43535e;
  --sfd-line: #dbe4ea;
  --sfd-paper: #ffffff;
  --sfd-shell: #f7fafb;

  --sfd-font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sfd-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale. */
  --sfd-step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --sfd-step-0: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  --sfd-step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --sfd-step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --sfd-step-3: clamp(1.6rem, 1.35rem + 1.15vw, 2.3rem);
  --sfd-step-4: clamp(1.95rem, 1.5rem + 2vw, 3.1rem);

  --sfd-radius: 10px;
  --sfd-shadow: 0 1px 2px rgba(9, 63, 120, 0.06), 0 12px 32px -12px rgba(9, 63, 120, 0.18);
  --sfd-header-h: 92px;
}

/* --- base ---------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--sfd-paper);
  color: var(--sfd-body);
  font-family: var(--sfd-font-body);
  font-size: var(--sfd-step-0);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--sfd-font-head);
  color: var(--sfd-ink);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  font-weight: 700;
}

a { color: var(--sfd-blue); }
img { max-width: 100%; height: auto; }

.sfd-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.sfd-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sfd-section--wash { background: var(--sfd-shell); }

.sfd-eyebrow {
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sfd-teal);
  margin: 0 0 0.9rem;
}

.sfd-lede { font-size: var(--sfd-step-1); color: var(--sfd-body); max-width: 62ch; }

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

.sfd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border-radius: var(--sfd-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.sfd-btn:hover { transform: translateY(-1px); }
.sfd-btn:focus-visible { outline: 3px solid var(--sfd-teal); outline-offset: 3px; }

.sfd-btn--primary { background: var(--sfd-navy); color: #fff; }
.sfd-btn--primary:hover { background: #0b4f95; color: #fff; }

.sfd-btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
}
.sfd-btn--ghost:hover { background: #fff; color: var(--sfd-navy); border-color: #fff; }

.sfd-btn--outline { background: transparent; color: var(--sfd-navy); border-color: var(--sfd-line); }
.sfd-btn--outline:hover { border-color: var(--sfd-navy); color: var(--sfd-navy); }

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

.sfd-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid var(--sfd-line);
}
/* Utility strip above the logo (address · phone · email). Hidden on small
   screens, where the burger menu and the in-page contact links cover it. */
.sfd-topbar { background: var(--sfd-navy); color: rgba(255, 255, 255, 0.9); }
.sfd-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 1.6rem;
  padding-block: 0.5rem;
}
.sfd-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
  font-size: var(--sfd-step--1);
}
.sfd-topbar a:hover { color: #fff; text-decoration: underline; }
.sfd-topbar svg { flex: 0 0 auto; opacity: 0.85; }
/* Must hide at the SAME breakpoint the burger drawer appears (991px): the
   drawer is fixed at `top: var(--sfd-header-h)` and would sit under a visible
   topbar, overlapping the header. */
@media (max-width: 991px) { .sfd-topbar { display: none; } }

.sfd-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--sfd-header-h);
}
/* Tighter side padding than the site-wide .sfd-wrap default (which this
   element also carries — both classes land on the same div), so the logo
   sits further left and the nav has more room to fit an extra item on one
   line at typical desktop widths. */
.sfd-header__bar.sfd-wrap { padding-inline: clamp(0.75rem, 2vw, 1.25rem); }
.sfd-header__logo { flex: 0 0 auto; display: block; }
.sfd-header__logo img { width: clamp(158px, 20vw, 210px); display: block; }

.sfd-nav { display: flex; align-items: center; gap: clamp(0.25rem, 1.2vw, 0.85rem); }
.sfd-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.1rem, 0.8vw, 0.45rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sfd-nav__item { position: relative; }
.sfd-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sfd-ink);
  text-decoration: none;
  padding: 0.6rem 0.5rem;
  border-radius: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.sfd-nav__link:hover,
.sfd-nav__link[aria-expanded='true'] { color: var(--sfd-blue); background: var(--sfd-wash); }
.sfd-nav__link[aria-current='page'] { color: var(--sfd-navy); box-shadow: inset 0 -2px 0 var(--sfd-teal); }
.sfd-nav__link:focus-visible { outline: 3px solid var(--sfd-teal); outline-offset: 2px; }

.sfd-nav__caret { width: 9px; height: 9px; transition: transform 0.18s ease; }
.sfd-nav__link[aria-expanded='true'] .sfd-nav__caret { transform: rotate(180deg); }

/* Dropdown: hidden by default; shown on hover (pointer) or when its toggle
   reports aria-expanded=true (keyboard + touch). */
.sfd-drop {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 246px;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--sfd-line);
  border-radius: var(--sfd-radius);
  box-shadow: var(--sfd-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.sfd-nav__item:hover > .sfd-drop,
.sfd-nav__item[data-open='true'] > .sfd-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* A dropdown parent that is ALSO a page: the label links, the caret toggles. */
.sfd-nav__group { display: flex; align-items: center; }
.sfd-nav__link--group { padding-right: 0.25rem; }
.sfd-nav__toggle { padding-left: 0.35rem; padding-right: 0.5rem; }
.sfd-nav__link--group[aria-current='true'] { color: var(--sfd-navy); }
.sfd-nav__item[data-open='true'] .sfd-nav__caret { transform: rotate(180deg); }
.sfd-drop a {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  font-size: var(--sfd-step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--sfd-ink);
  text-decoration: none;
}
.sfd-drop a:hover { background: var(--sfd-wash); color: var(--sfd-navy); }

/* Slightly tighter than the site-wide .sfd-btn default so the CTA doesn't
   dominate the nav row's width now that there's one more item beside it. */
.sfd-nav__cta { padding: 0.7rem 1.15rem; margin-left: 0.15rem; }

.sfd-header__phone {
  font-family: var(--sfd-font-head);
  font-weight: 700;
  color: var(--sfd-navy);
  text-decoration: none;
  white-space: nowrap;
}
.sfd-header__phone span {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sfd-teal);
}

.sfd-burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--sfd-line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.sfd-burger__bars, .sfd-burger__bars::before, .sfd-burger__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--sfd-ink);
  border-radius: 2px;
  position: relative;
}
.sfd-burger__bars::before { content: ''; position: absolute; top: -6px; }
.sfd-burger__bars::after { content: ''; position: absolute; top: 6px; }

@media (max-width: 991px) {
  .sfd-burger { display: grid; }
  .sfd-header__phone { display: none; }
  .sfd-nav {
    position: fixed;
    inset: var(--sfd-header-h) 0 auto 0;
    display: block;
    max-height: calc(100vh - var(--sfd-header-h));
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--sfd-line);
    box-shadow: var(--sfd-shadow);
    padding: 0.5rem clamp(1rem, 4vw, 2rem) 1.5rem;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  .sfd-nav[data-open='true'] { opacity: 1; visibility: visible; transform: translateY(0); }
  .sfd-nav__list { display: block; }
  .sfd-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 0.95rem 0.25rem;
    border-bottom: 1px solid var(--sfd-line);
    border-radius: 0;
  }
  /* On mobile the dropdown is an inline accordion, not a floating panel. */
  .sfd-drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0.25rem 0 0.5rem 0.75rem;
    display: none;
  }
  .sfd-nav__item:hover > .sfd-drop { display: none; }
  .sfd-nav__item[data-open='true'] > .sfd-drop { display: block; }
  .sfd-nav__cta { margin-top: 1rem; width: 100%; }
  /* Link fills the row, caret button sits at the right edge as the tap target. */
  .sfd-nav__group { border-bottom: 1px solid var(--sfd-line); }
  .sfd-nav__group .sfd-nav__link--group { flex: 1 1 auto; border-bottom: 0; }
  .sfd-nav__group .sfd-nav__toggle { flex: 0 0 auto; border-bottom: 0; width: auto; padding: 0.95rem 0.5rem; }
}

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

.sfd-hero { position: relative; isolation: isolate; background: var(--sfd-navy); }
.sfd-hero__stage { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.sfd-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.sfd-hero__slide[data-active='true'] { opacity: 1; }
.sfd-hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Readability scrim — these are bright daylight photographs. */
.sfd-hero__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 32, 60, 0.82) 0%, rgba(6, 32, 60, 0.55) 46%, rgba(6, 32, 60, 0.18) 100%),
    linear-gradient(to top, rgba(6, 32, 60, 0.45), transparent 55%);
}

.sfd-hero__inner {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(430px, 62vh, 620px);
  padding: clamp(3rem, 8vw, 6rem) 0;
  max-width: 44rem;
}
.sfd-hero__eyebrow { color: #bfe0ea; }
.sfd-hero h1 { color: #fff; font-size: var(--sfd-step-4); margin-bottom: 1rem; text-wrap: balance; }
.sfd-hero p {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--sfd-step-1);
  margin: 0 0 2rem;
  max-width: 40ch;
}
.sfd-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.sfd-hero__dots {
  position: absolute;
  bottom: clamp(1rem, 3vw, 1.9rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 3;
}
.sfd-hero__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.sfd-hero__dot[aria-selected='true'] { background: #fff; transform: scale(1.18); }
.sfd-hero__dot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.sfd-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(6, 32, 60, 0.35);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(3px);
}
.sfd-hero__arrow:hover { background: rgba(6, 32, 60, 0.62); }
.sfd-hero__arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sfd-hero__arrow--prev { left: clamp(0.5rem, 2vw, 1.25rem); }
.sfd-hero__arrow--next { right: clamp(0.5rem, 2vw, 1.25rem); }
@media (max-width: 640px) { .sfd-hero__arrow { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sfd-hero__slide { transition: none; }
}

/* --- interior page header ------------------------------------------------ */

/* Interior page banner. The practice's own exterior photo sits behind the brand
   gradient — the photo is bright (white brick, sunlit leaves), so the gradient
   stays mostly opaque to keep the white heading readable. Change the photo here;
   it is a CSS background, not markup. */
.sfd-pagehead {
  /* PageHeader.astro overrides these two per page from `pageheadImages`
     (src/data/site-data.ts); the values here are the site-wide default. */
  --sfd-pagehead-img: url('https://storage.googleapis.com/ezstatic-assets/dental/399ef02d6a12_kylesullivandmd-pagehead.jpg');
  --sfd-pagehead-pos: center 35%;

  background-color: var(--sfd-navy);
  background-image:
    linear-gradient(118deg, rgba(9, 63, 120, 0.93) 0%, rgba(9, 63, 120, 0.82) 45%, rgba(53, 110, 147, 0.72) 100%),
    var(--sfd-pagehead-img);
  background-size: cover, cover;
  background-position: center, var(--sfd-pagehead-pos);
  background-repeat: no-repeat, no-repeat;
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4.25rem) 0;
}
.sfd-pagehead h1 { color: #fff; font-size: var(--sfd-step-4); margin-bottom: 0.5rem; }
.sfd-pagehead p { color: rgba(255, 255, 255, 0.9); font-size: var(--sfd-step-1); margin: 0; max-width: 60ch; }

.sfd-crumbs { font-size: var(--sfd-step--1); color: rgba(255, 255, 255, 0.75); margin-bottom: 0.75rem; }
.sfd-crumbs a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.sfd-crumbs a:hover { text-decoration: underline; }

/* --- cards / grids ------------------------------------------------------- */

.sfd-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.sfd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Membership plan tiers: wider minimum than the generic 3-up grid so plan
   names (e.g. "Periodontal Care Plan") stay on one line in the navy header. */
.sfd-grid--plans { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.sfd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Image + copy row; --reverse flips the order on wide screens only. */
.sfd-split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.sfd-split__media {
  width: 100%;
  border-radius: var(--sfd-radius);
  box-shadow: var(--sfd-shadow);
}
.sfd-split__body > :last-child { margin-bottom: 0; }
.sfd-split--reverse .sfd-split__media { order: 2; }
@media (max-width: 860px) {
  .sfd-split { grid-template-columns: 1fr; }
  .sfd-split--reverse .sfd-split__media { order: 0; }
}

.sfd-card {
  background: #fff;
  border: 1px solid var(--sfd-line);
  border-radius: var(--sfd-radius);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.sfd-card h3 { font-size: var(--sfd-step-2); margin-bottom: 0.5rem; }
.sfd-card p:last-child { margin-bottom: 0; }

/* Membership plan tiers: solid navy header band carrying the plan name,
   matching the practice's requested reference look. */
.sfd-plan { padding: 0; overflow: hidden; }
.sfd-plan__head { background: var(--sfd-navy); padding: 1.35rem 1.5rem; text-align: center; }
.sfd-plan__head h3 {
  color: #fff;
  margin: 0;
  font-size: var(--sfd-step-1);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .sfd-plan__head h3 { white-space: normal; }
}
.sfd-plan__body { padding: clamp(1.4rem, 3vw, 2rem); }

/* A whole card that is one link (payment options, resource tiles). */
.sfd-card--link {
  display: block;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.sfd-card--link:hover {
  border-color: var(--sfd-teal);
  transform: translateY(-2px);
  box-shadow: var(--sfd-shadow);
}
.sfd-card__more {
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step--1);
  font-weight: 600;
  color: var(--sfd-blue);
}

/* Service-category tiles: square photo + label underneath. Source images are
   as small as 280px, so the tile is capped to avoid upscaling blur. */
.sfd-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.sfd-cat {
  display: grid;
  gap: 0.85rem;
  text-decoration: none;
  text-align: center;
}
.sfd-cat img {
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: var(--sfd-shadow);
  transition: transform 0.2s ease;
}
.sfd-cat:hover img { transform: scale(1.03); }
.sfd-cat__label {
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step-1);
  font-weight: 600;
  color: var(--sfd-navy);
}
.sfd-cat:hover .sfd-cat__label { color: var(--sfd-teal); }

/* Team bios: square portrait beside the copy. */
.sfd-bio { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.sfd-bio:last-of-type { margin-bottom: 0; }
.sfd-bio__photo { max-width: 420px; aspect-ratio: 1; object-fit: cover; }
.sfd-bio .sfd-eyebrow { margin-top: -0.35rem; }
@media (min-width: 861px) {
  .sfd-bio { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}

/* Team-bio credential badge (e.g. "ADA & Academy of General Dentistry Member"). */
.sfd-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  margin: -0.3rem 0 1rem;
  border-radius: 999px;
  background: var(--sfd-navy);
  color: #fff;
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Team-bio highlighted callout box (advanced-training list, single-line
   credibility highlights like periodontal background or bilingual ability). */
.sfd-callout {
  border-left: 3px solid var(--sfd-teal);
  background: var(--sfd-wash);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--sfd-radius) var(--sfd-radius) 0;
  margin: 1.1rem 0;
}
.sfd-callout__label {
  font-family: var(--sfd-font-head);
  font-weight: 700;
  font-size: var(--sfd-step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sfd-navy);
  margin: 0 0 0.6rem;
}
.sfd-callout .sfd-ticks { margin-bottom: 0; }
.sfd-callout--line { font-weight: 600; color: var(--sfd-ink); }

/* Service-category page: "back" link, blocks, tick bullets. */
.sfd-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sfd-blue);
  text-decoration: none;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.sfd-back:hover { color: var(--sfd-navy); text-decoration: underline; }

.sfd-svc { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
.sfd-svc:last-of-type { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sfd-svc .sfd-split__media { margin-inline: auto; }
@media (min-width: 861px) {
  .sfd-svc { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

.sfd-ticks { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.45rem; }
.sfd-ticks li { position: relative; padding-left: 1.6rem; }
.sfd-ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sfd-teal);
}

/* Third-party financing logo link (CareCredit). */
.sfd-partner {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--sfd-line);
  border-radius: var(--sfd-radius);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.sfd-partner:hover { border-color: var(--sfd-teal); box-shadow: var(--sfd-shadow); transform: translateY(-1px); }
.sfd-partner img { width: 206px; height: auto; }
.sfd-partner span {
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step--1);
  font-weight: 600;
  color: var(--sfd-navy);
}
@media (max-width: 520px) {
  .sfd-partner { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

/* Downloadable-form list. */
.sfd-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.sfd-files a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--sfd-line);
  border-radius: var(--sfd-radius);
  background: #fff;
  text-decoration: none;
  font-family: var(--sfd-font-head);
  font-weight: 600;
  color: var(--sfd-navy);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.sfd-files a:hover { border-color: var(--sfd-teal); background: var(--sfd-wash); }
.sfd-files svg { flex: 0 0 auto; color: var(--sfd-teal); }
.sfd-files__hint {
  margin-left: auto;
  font-family: var(--sfd-font-body);
  font-size: var(--sfd-step--1);
  font-weight: 400;
  color: var(--sfd-body);
}
@media (max-width: 520px) { .sfd-files__hint { display: none; } }

.sfd-form__count {
  margin: 0.4rem 0 0;
  font-size: var(--sfd-step--1);
  color: var(--sfd-body);
  text-align: right;
}

.sfd-note {
  border-left: 3px solid var(--sfd-teal);
  background: var(--sfd-wash);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--sfd-radius) var(--sfd-radius) 0;
  font-size: var(--sfd-step--1);
}

.sfd-list { padding-left: 1.15rem; margin: 0; }
.sfd-list li { margin-bottom: 0.5rem; }

/* --- contact form -------------------------------------------------------- */

.sfd-form { display: grid; gap: 1.1rem; }
.sfd-form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sfd-form label {
  display: block;
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step--1);
  font-weight: 600;
  color: var(--sfd-ink);
  margin-bottom: 0.35rem;
}
.sfd-form input, .sfd-form select, .sfd-form textarea {
  width: 100%;
  font: inherit;
  color: var(--sfd-ink);
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--sfd-line);
  border-radius: 8px;
  background: #fff;
}
.sfd-form textarea { min-height: 148px; resize: vertical; }
.sfd-form input:focus, .sfd-form select:focus, .sfd-form textarea:focus {
  outline: 3px solid rgba(60, 132, 155, 0.35);
  outline-offset: 1px;
  border-color: var(--sfd-teal);
}
.sfd-form__consent { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--sfd-step--1); }
.sfd-form__consent input { width: auto; margin-top: 0.25rem; }
.sfd-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

.sfd-footer { background: var(--sfd-navy); color: rgba(255, 255, 255, 0.82); padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.sfd-footer a { color: #fff; text-decoration: none; }
.sfd-footer a:hover { text-decoration: underline; }
.sfd-footer__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.sfd-footer__logo { background: #fff; border-radius: var(--sfd-radius); padding: 0.9rem 1.1rem; display: inline-block; margin-bottom: 1.1rem; }
.sfd-footer__logo img { width: 190px; }
.sfd-footer h2 {
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step--1);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1rem;
}
.sfd-footer ul { list-style: none; margin: 0; padding: 0; }
.sfd-footer li { margin-bottom: 0.6rem; }
.sfd-footer address { font-style: normal; display: grid; gap: 0.45rem; }
.sfd-footer__social { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 1.1rem; }
.sfd-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--sfd-step--1);
  color: rgba(255, 255, 255, 0.9);
}
.sfd-footer__social a:hover { color: #fff; }
.sfd-footer__social svg { flex: 0 0 auto; }
.sfd-footer__bottom {
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 1.25rem 0;
  font-size: var(--sfd-step--1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}

/* --- family discounts (shared @dental/core component) --------------------- */
/* Restyled to match the brand palette via the component's documented
   --dfd-* custom properties only — markup/logic live in @dental/core. */
.dfd {
  /* Matches the practice-approved reference: solid navy card (using the exact
     navy shades already used in the header/hero), translucent tile panels,
     the component's own yellow accent kept as-is, and a solid white
     highlighted tile for the best-value tier.
     NOTE: the shared component ships its own default values for these same
     custom properties (a dark-green/yellow theme) at equal-or-later
     precedence, so a plain override was silently ignored — every value below
     is marked !important so the brand theme actually wins. */
  --dfd-from: var(--sfd-navy) !important;
  --dfd-to: var(--sfd-navy-deep) !important;
  --dfd-ink: #ffffff !important;
  /* NOTE: --sfd-body (#43535e) was originally used here, but that's a dark
     gray meant for light backgrounds — against this card's navy gradient it
     produced illegible low-contrast subheadline/disclaimer text. Use a
     translucent white instead (matches the footer's muted-text treatment on
     the same navy). */
  --dfd-muted: rgba(255, 255, 255, 0.85) !important;
  --dfd-accent: #fde047 !important;
  --dfd-tile-bg: rgba(255, 255, 255, 0.08) !important;
  --dfd-tile-border: rgba(255, 255, 255, 0.18) !important;
  --dfd-best-bg: #ffffff !important;
  --dfd-best-ink: var(--sfd-navy-deep) !important;
  --dfd-best-flag-bg: var(--dfd-accent) !important;
  --dfd-best-flag-ink: var(--sfd-navy-deep) !important;
  --dfd-radius: var(--sfd-radius) !important;
  --dfd-max-width: 1180px !important;
}

/* --- homepage trust bar --------------------------------------------------- */

.sfd-trust-bar {
  padding: clamp(1.1rem, 3vw, 1.6rem) 0;
  background: var(--sfd-wash);
  border-block: 1px solid var(--sfd-line);
}
.sfd-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem clamp(1.5rem, 5vw, 3rem);
}
.sfd-trust__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sfd-font-head);
  font-weight: 600;
  font-size: var(--sfd-step--1);
  color: var(--sfd-navy);
  text-align: center;
}
.sfd-trust__item a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--sfd-navy);
  text-decoration: none;
}
.sfd-trust__item a:hover { color: var(--sfd-teal); text-decoration: underline; }
.sfd-trust__item svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--sfd-teal); }

/* --- patient reviews ------------------------------------------------------ */

.sfd-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--sfd-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step--1);
  font-weight: 600;
  color: var(--sfd-body);
}
.sfd-google-badge svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sfd-review { display: grid; gap: 0.85rem; align-content: start; }
.sfd-review__stars { display: inline-flex; gap: 0.15rem; color: #f5b400; }
.sfd-review__text { font-size: var(--sfd-step-0); color: var(--sfd-ink); margin: 0; }
.sfd-review__name {
  font-family: var(--sfd-font-head);
  font-size: var(--sfd-step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sfd-navy);
  margin: 0;
}

/* --- utilities ----------------------------------------------------------- */

.sfd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sfd-center { text-align: center; margin-inline: auto; }
.sfd-stack > * + * { margin-top: 1rem; }