/**
 * Dental Compass frontend - shared and homepage styles.
 * Split from the former single dc-frontend.css; the rules for the other
 * feature areas are in dc-frontend-features.css, which loads straight after
 * this file everywhere except the anonymous homepage.
 */

/**
 * Base reset. The browser's default body margin (8px in the UA
 * stylesheet) was never zeroed anywhere in this theme - invisible
 * against a plain white background, but visible as a border once a
 * full-bleed dark section (header, hero) sits against the page edge.
 * Sitewide fix, not scoped to any one surface.
 */
/* The public site is designed on a light canvas. Declaring it keeps every
   page light whatever the browser's light/dark preference, instead of letting
   a dark canvas show behind transparent areas. Navy headers/footers, dark
   sections and cards set their own backgrounds and are unaffected. */
:root {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--dc-font-family-base);
  background-color: var(--dc-color-white);
}

/**
 * EXPERIENCE-001: the Dental Compass homepage - the visual benchmark
 * for every page that follows.
 *
 * Brand Experience Polish (Stage 2, Founder feedback 2026-08-04):
 * every section is a full-bleed colour band (background + vertical
 * padding on the <section> itself, no side padding of its own) wrapping
 * a single shared .dc-homepage__section-inner div that carries the
 * 72rem measure, centring, and side padding. Bands deliberately
 * alternate white/pale-blue so no two consecutive sections share a
 * background - the first pass had two blue-50 sections (Destinations,
 * Events) sitting flush against each other, each independently
 * border-radius'd, which produced a visible seam where their corners
 * met (found by reviewing the rendered page, not assumed). Vertical
 * rhythm is also no longer one repeated number: primary content
 * sections get generous padding (space-7/space-8), the Trust strip - a
 * lighter "breather" between denser sections - gets less (space-6).
 * Mobile-first throughout (every multi-column layout starts as a
 * single stacked column and only gains columns/rows at 48rem).
 */
.dc-homepage {
  overflow-x: hidden;
}

.dc-homepage__section-inner {
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--dc-space-4);
  box-sizing: border-box;
}

.dc-homepage__hero {
  /* HERO PRODUCTION PASS: subtle layered gradients only - a white-to-
     stone linear wash for warmth, plus a very soft navy radial glow
     positioned toward the photo side for depth. No shapes, icons, or
     artwork - colour only, per explicit "no distracting graphics"
     direction. */
  background: radial-gradient(60% 90% at 82% 45%, rgba(11, 30, 51, 0.05) 0%, transparent 70%),
    linear-gradient(165deg, var(--dc-color-white) 0%, #f5f7f8 55%, var(--dc-color-stone-100) 100%);
  padding-block: var(--dc-space-7);
}

.dc-homepage__hero-inner {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--dc-space-7);
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--dc-space-4);
  box-sizing: border-box;
}

.dc-homepage__hero-illustration {
  /* Frames the provisional photo. A true 4:5 portrait frame - width
     is fixed and height is left to the aspect-ratio itself, rather
     than the earlier min/max-height pair, which silently produced a
     landscape ~422x312 box at 48rem+ (flex-basis set the width
     independently of the height max-height then capped it to, so the
     ratio was never actually honoured there) and a similarly
     stretched box on mobile (align-items: stretch by default) -
     found by measuring the rendered box, not assumed. align-self:
     center stops the box stretching to the row's cross-axis width at
     every breakpoint, so the fixed width + aspect-ratio combination
     is what actually determines the box's size everywhere, not flex
     stretch. A soft lifted shadow (not a hard drop-shadow) gives the
     photo a premium, framed feel against the plain gradient
     background. */
  border-radius: var(--dc-radius-lg);
  overflow: hidden;
  position: relative;
  width: 15.6rem;
  aspect-ratio: 4 / 5;
  align-self: center;
  box-shadow: var(--dc-shadow-lg);
}

/* HERO JOURNEY CAROUSEL: each story is a full-frame slide stacked on
   the others (the illustration frame's own position: relative +
   overflow: hidden already contains them); only .is-active is
   visible, cross-faded by dc-hero-carousel.js toggling that class.
   Under prefers-reduced-motion the transition is skipped entirely -
   whichever slide is server-rendered .is-active (the first) just
   stays, no forced animation. */
.dc-homepage__hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.dc-homepage__hero-slide.is-active {
  opacity: 1;
}

/* The photos cross-fade, but the captions must never share the frame:
   the outgoing caption clears quickly and the incoming one only fades
   in once it has gone, so two sets of text are never visible at once. */
.dc-homepage__hero-caption {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dc-homepage__hero-slide.is-active .dc-homepage__hero-caption {
  opacity: 1;
  transition: opacity 0.5s ease 0.5s;
}

@media (prefers-reduced-motion: reduce) {
.dc-homepage__hero-slide,
  .dc-homepage__hero-caption,
  .dc-homepage__hero-slide.is-active .dc-homepage__hero-caption {
    transition: none;
  }

}

.dc-homepage__hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

/* Real patient caption (see the template's own comment) - a strong
   navy panel rather than a thin scrim, per the Founder's own
   readability direction: text must read clearly regardless of what's
   behind it, at a comfortable size, not shrunk to fit. */
.dc-homepage__hero-caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  margin: 0;
  padding: var(--dc-space-5, 1.25rem) var(--dc-space-4, 1rem) var(--dc-space-3, 0.75rem);
  background: linear-gradient(to top, rgba(11, 30, 51, 0.94) 0%, rgba(11, 30, 51, 0.82) 45%, rgba(11, 30, 51, 0) 100%);
  color: var(--dc-color-white);
  font-size: var(--dc-font-size-sm);
  line-height: 1.45;
}

.dc-homepage__hero-caption strong {
  display: block;
  font-size: var(--dc-font-size-base);
  font-weight: var(--dc-font-weight-semibold);
  margin-block-end: 0.25rem;
}

.dc-homepage__hero-caption-summary {
  display: block;
}

.dc-homepage__hero-caption-result {
  display: block;
  margin-block-start: 0.2rem;
  font-size: var(--dc-font-size-xs);
  color: rgba(255, 255, 255, 0.78);
}

.dc-homepage__hero-content h1 {
  font-size: var(--dc-font-size-xl);
  color: var(--dc-color-navy-900);
  line-height: var(--dc-line-height-tight);
  /* HOMEPAGE POLISH: a touch tighter tracking reads as more deliberate/
     authoritative at this size than the previous -0.01em. */
  letter-spacing: -0.02em;
  margin-block-end: var(--dc-space-4);
}

.dc-homepage__hero-accent {
  /* HOMEPAGE POLISH: a restrained teal accent on the heading's closing
     word - the same teal already used for every positive/interactive
     accent on this page (icons, links, primary actions), not a new
     colour. Purely typographic: the wording itself is unchanged. */
  color: var(--dc-color-teal-700);
}

.dc-homepage__hero-copy {
  color: var(--dc-color-ink-600);
  font-size: var(--dc-font-size-md);
  line-height: var(--dc-line-height-base);
  /* Comfortable reading width - stops the line length from running
     the full content-column width once that column is wide on large
     desktops. */
  max-width: 32rem;
  margin-block-end: var(--dc-space-6);
}

.dc-homepage__hero-trust {
  /* HOMEPAGE POLISH: wrap, not nowrap - a non-wrapping row of four
     pills has a fixed min-content width that never shrinks, which was
     forcing the hero photo column down to a sliver at the 48rem
     breakpoint (the text/trust column refused to shrink below that
     min-content width, so the illustration's flex-shrink absorbed all
     of it) and clipping the fourth pill outright under
     `.dc-homepage { overflow-x: hidden; }` on narrow mobile widths
     (found by inspecting the rendered layout, not assumed). Wrapping
     still reads as the intended single row everywhere it comfortably
     fits (desktop, most tablet widths) and simply flows to a second
     line where it doesn't. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-4);
  padding: 0;
  margin: var(--dc-space-6) 0 0;
  list-style: none;
}

.dc-homepage__hero-trust li {
  /* HOMEPAGE POLISH: a size step up (xs -> sm) and more generous
     padding so the trust strip reads as a confident, considered row
     rather than a small afterthought beneath the CTAs. */
  display: inline-flex;
  align-items: center;
  gap: var(--dc-space-2);
  background-color: var(--dc-color-white);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-pill);
  padding: var(--dc-space-3) var(--dc-space-5);
  font-size: var(--dc-font-size-sm);
  font-weight: var(--dc-font-weight-medium);
  color: var(--dc-color-navy-700);
  box-shadow: var(--dc-shadow-sm);
}

.dc-homepage__hero-trust .dc-icon {
  color: var(--dc-color-teal-600);
}

.dc-homepage__section {
  padding-block: var(--dc-space-7);
}

.dc-homepage__section-inner > h2 {
  display: flex;
  align-items: center;
  gap: var(--dc-space-2);
  font-size: var(--dc-font-size-xl);
  color: var(--dc-color-navy-900);
  letter-spacing: -0.01em;
  text-align: center;
  justify-content: center;
  margin-block-end: var(--dc-space-2);
}

.dc-homepage__section-inner > h2 .dc-icon {
  color: var(--dc-color-teal-600);
}

/* Alternating full-bleed bands - see file header. Never two of these
   back to back in the template's own section order. */
.dc-homepage__destinations,
.dc-homepage__entry,
.dc-homepage__learn,
.dc-homepage__process,
.dc-homepage__for-clinics {
  background-color: var(--dc-color-blue-50);
}

.dc-homepage__destination-cards,
.dc-homepage__learn-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dc-space-5);
  padding: 0;
  margin: 0;
  list-style: none;
}

.dc-homepage__events .dc-btn--tertiary {
  /* The event cards above are now centred (flex, capped width) rather
     than stretched full-row, so this trailing link needs its own
     centring to still read as attached to them. */
  display: table;
  margin-inline: auto;
}

.dc-homepage__event-cards li,
.dc-homepage__learn-card {
  text-align: center;
}

.dc-homepage__event-cards .dc-illustration,
.dc-homepage__learn-card .dc-illustration {
  margin-block-end: var(--dc-space-3);
}

.dc-homepage__continuing-care .dc-homepage__section-inner,
.dc-homepage__for-clinics .dc-homepage__section-inner {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-5);
  align-items: center;
}

.dc-homepage__continuing-care-illustration,
.dc-homepage__for-clinics-illustration {
  max-width: 20rem;
}

.dc-homepage__continuing-care p,
.dc-homepage__for-clinics p {
  color: var(--dc-color-ink-600);
  line-height: var(--dc-line-height-base);
}

.dc-homepage__for-clinics-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-2) var(--dc-space-4);
  padding: 0;
  margin: var(--dc-space-3) 0 var(--dc-space-4);
  list-style: none;
  font-weight: var(--dc-font-weight-medium);
  color: var(--dc-color-navy-700);
}

.dc-homepage__for-clinics-list li::before {
  content: '\2013\0020';
}

.dc-homepage__footer {
  background-color: var(--dc-color-navy-900);
  color: var(--dc-color-white);
  padding-block: var(--dc-space-7);
  text-align: center;
  /* HOMEPAGE POLISH (Priority 4 - Footer): a faint gold-toned top
     border gives the footer a deliberate frame instead of just being
     "where the navy band happens to end" - restrained (8% opacity),
     not a new decorative element, matching the same "colour only, no
     shapes" restraint used in the hero. */
  border-top: 1px solid rgba(212, 175, 55, 0.18);
}

.dc-homepage__footer p {
  margin: 0 0 var(--dc-space-5);
  opacity: 0.85;
  letter-spacing: 0.01em;
}

.dc-homepage__footer nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--dc-space-5);
}

.dc-homepage__footer a {
  color: var(--dc-color-white);
  font-size: var(--dc-font-size-sm);
  letter-spacing: 0.01em;
  transition: opacity var(--dc-transition-fast);
}

.dc-homepage__footer a:hover,
.dc-homepage__footer a:focus-visible {
  opacity: 0.7;
}

@media (min-width: 48rem) {
.dc-homepage__hero {
    padding-block: var(--dc-space-7);
  }

.dc-homepage__section {
    /* HOMEPAGE POLISH (Priority 3 - Global Rhythm): more air between
       major sections once there's room for it - mobile keeps the
       tighter space-7 rhythm, since cramming this onto a small screen
       would just mean more scrolling, not more calm. */
    padding-block: var(--dc-space-8);
  }

.dc-homepage__footer {
    padding-block: var(--dc-space-8);
  }

.dc-homepage__hero-inner {
    /* row-reverse: the photo (first in DOM, for a sensible mobile
       reading order of image-then-heading) renders on the RIGHT at
       desktop, copy on the LEFT - matching the approved reference
       layout. align-items: center lets the portrait sit at its own
       natural aspect-ratio size rather than being stretched to fill
       the row. */
    flex-direction: row-reverse;
    align-items: center;
  }

.dc-homepage__hero-illustration {
    /* Fixed-size (see the base rule) - flex: 0 0 auto keeps that
       width exact regardless of how much room the row has, rather
       than flex-basis: 46% silently fighting the aspect-ratio again. */
    flex: 0 0 auto;
  }

.dc-homepage__hero-content {
    /* min-width: 0 overrides the flex default of min-width: auto, so
       this column's own content can never again demand more than its
       54% share and crush the photo column next to it - the same
       failure class the hero-trust wrap fix above addresses, closed
       here at its source for any future content added to this
       column. */
    flex: 1 1 54%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

.dc-homepage__hero-content h1 {
    font-size: var(--dc-font-size-3xl);
  }

.dc-homepage__destination-cards,
  .dc-homepage__learn-cards {
    grid-template-columns: repeat(3, 1fr);
  }

.dc-homepage__continuing-care .dc-homepage__section-inner,
  .dc-homepage__for-clinics .dc-homepage__section-inner {
    flex-direction: row;
    text-align: left;
    align-items: center;
  }

.dc-homepage__for-clinics .dc-homepage__section-inner {
    flex-direction: row-reverse;
  }

.dc-homepage__continuing-care-illustration,
  .dc-homepage__for-clinics-illustration {
    flex: 0 0 18rem;
  }

.dc-homepage__continuing-care .dc-homepage__section-inner > div:last-child,
  .dc-homepage__for-clinics .dc-homepage__section-inner > div:first-child {
    flex: 1 1 auto;
  }

}

/**
 * Clinic Profile Header review.
 */
.node--type-provider .block-page-title-block {
  display: none;
}

/* Hide the default Drupal page title only on Clinic node pages. */
body.page-node-type-provider .block-page-title-block,
body.page-node-type-provider .block-system-page-title-block,
body.page-node-type-provider [data-drupal-selector="edit-title"],
body.page-node-type-provider .page-title {
  display: none;
}

/* Clinic Profile owns the single page heading. */
body.page-node-type-provider #block-dc-frontend-page-title {
  display: none;
}

/**
 * Provisional approved photography for Homepage cards.
 */
.dc-homepage__card-photo {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--dc-radius-md);
  margin-block-end: var(--dc-space-4, 1rem);
}

.dc-homepage__learn-photo {
  aspect-ratio: 3 / 2;
}

/**
 * ERA II SPRINT 1: Anonymous Comparison Continuity strip, populated by
 * dc-compare-continuity.js. Empty and hidden whenever there's no local
 * selection - deliberately calm (a quiet status bar, not a banner) per
 * Your-Compass-Experience.md's Respect section: no urgency colour, no
 * animation, no dismiss-to-punish pattern.
 */
.dc-compare-continuity:empty {
  display: none;
}

.dc-compare-continuity {
  box-sizing: border-box;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto var(--dc-space-4);
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.dc-compare-continuity__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-3);
  padding: var(--dc-space-3) var(--dc-space-4);
  background: var(--dc-color-blue-50);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-md);
}

.dc-compare-continuity__label {
  margin-inline-end: auto;
  color: var(--dc-color-ink-900);
  font-weight: 600;
  font-size: var(--dc-font-size-sm);
}

.dc-compare-continuity__note {
  width: 100%;
  margin: var(--dc-space-2) 0 0;
  color: var(--dc-color-ink-600);
  font-size: var(--dc-font-size-xs);
}

/* Selection Mode reorganisation (dc-compare-continuity.js): clinics
   already in the in-progress comparison move into "Your comparison",
   the rest stay in the browsable "Add another clinic" grid below - so
   the grid never reads as though every card in it is already compared. */
.dc-clinic-comparison__your-comparison {
  margin-block-end: 1.5rem;
}

.dc-clinic-comparison__your-comparison-heading,
.dc-clinic-comparison__add-another-heading {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  color: var(--dc-color-navy-900);
}

.dc-clinic-comparison__your-comparison-list {
  display: grid;
  /* auto-fit, not auto-fill: with fewer than a full row of chosen
     clinics (the common case - often just one), auto-fill still
     reserves empty tracks for the row's full width, leaving the
     actual card stranded in a single narrow column with dead space
     beside it. auto-fit collapses those empty tracks so the real
     card(s) fill the available row width instead. */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-block-end: 1.5rem;
}

.dc-clinic-comparison__selection-card--chosen {
  border-color: var(--dc-color-teal-600);
  box-shadow: 0 0 0 1px var(--dc-color-teal-600);
}

/* Header language dropdown (ClinicCompassController::buildLanguageSwitcher()):
   a native <details> disclosure showing a globe, the current language code and
   a chevron, with the configured languages' native names as links. Rendered
   inside dc-header__account-group on the navy header, so it uses the header
   toggle's border and white text. Without JavaScript the list opens in flow;
   dc-language-switcher.js adds .dc-language-switcher--enhanced, which floats
   the list (fixed, so the header's overflow clipping cannot cut it off). */
.dc-language-switcher {
  position: relative;
  color: var(--dc-color-white);
}

.dc-language-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding-inline: var(--dc-space-3);
  box-sizing: border-box;
  border: 1px solid var(--dc-color-navy-500);
  border-radius: var(--dc-radius-md);
  font-size: var(--dc-font-size-sm);
  font-weight: var(--dc-font-weight-semibold);
  letter-spacing: 0.04em;
  list-style: none;
  cursor: pointer;
}

.dc-language-switcher__toggle::-webkit-details-marker {
  display: none;
}

.dc-language-switcher__toggle:hover,
.dc-language-switcher[open] > .dc-language-switcher__toggle {
  background-color: rgb(255 255 255 / 8%);
}

.dc-language-switcher__toggle:focus-visible,
.dc-language-switcher__link:focus-visible {
  outline: 2px solid var(--dc-color-teal-400, #5eead4);
  outline-offset: 2px;
}

.dc-language-switcher__chevron {
  transition: transform 0.15s ease;
}

.dc-language-switcher[open] .dc-language-switcher__chevron {
  transform: rotate(180deg);
}

.dc-language-switcher__menu {
  min-width: 10rem;
  max-height: min(60vh, 20rem);
  margin: var(--dc-space-1) 0 0;
  padding: var(--dc-space-1);
  overflow-y: auto;
  list-style: none;
  background-color: var(--dc-color-navy-900);
  border: 1px solid var(--dc-color-navy-500);
  border-radius: var(--dc-radius-md);
}

.dc-language-switcher--enhanced .dc-language-switcher__menu {
  position: fixed;
  z-index: 1000;
  margin: 0;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 35%);
}

.dc-language-switcher__menu li {
  margin: 0;
  padding: 0;
}

.dc-language-switcher__link {
  display: block;
  padding: var(--dc-space-2) var(--dc-space-3);
  border-radius: var(--dc-radius-sm, 0.25rem);
  color: var(--dc-color-white);
  text-decoration: none;
}

.dc-language-switcher__link:hover {
  background-color: rgb(255 255 255 / 10%);
}

.dc-language-switcher__link--current {
  font-weight: var(--dc-font-weight-semibold);
  box-shadow: inset 3px 0 0 var(--dc-color-teal-400, #5eead4);
}

@media (prefers-reduced-motion: reduce) {
.dc-language-switcher__chevron {
    transition: none;
  }

}

@media print {
.dc-header,
  .dc-footer,
  .dc-language-switcher,
  .dc-clinic-quote__toolbar,
  .dc-clinic-quote__notice,
  .dc-clinic-quote-doc .dc-btn,
  .dc-clinic-quote-doc a.dc-btn {
    display: none !important;
  }

}

/* =========================================================
   HOMEPAGE REFERENCE ALIGNMENT PASS — 2026-08-21
   Visual-only refinement of hero + process + Get Started.
   Existing routes, content, carousel and five-stage model remain authoritative.
   ========================================================= */
.dc-homepage__hero {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
  background:
    radial-gradient(circle at 58% 48%, rgba(31, 168, 168, 0.07) 0, transparent 28%),
    radial-gradient(circle at 72% 45%, rgba(13, 27, 42, 0.06) 0, transparent 40%),
    linear-gradient(160deg, #ffffff 0%, #f7fafb 62%, #f7f5f0 100%);
}

.dc-homepage__hero-inner {
  gap: clamp(2rem, 5vw, 5rem);
}

.dc-homepage__hero-content {
  position: relative;
}

.dc-homepage__hero-content h1 {
  max-width: 48rem;
  font-size: clamp(2.35rem, 5vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin-block-end: 1.25rem;
}

.dc-homepage__hero-copy {
  max-width: 38rem;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  margin-block-end: 1.5rem;
}

.dc-homepage__hero-trust {
  gap: 0.65rem 0.8rem;
  margin-block-start: 0.5rem;
}

.dc-homepage__hero-trust li {
  padding: 0.55rem 0.9rem;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.72);
}

.dc-homepage__hero-illustration {
  width: clamp(14rem, 20vw, 18rem);
  box-shadow: 0 18px 42px rgba(13, 27, 42, 0.18);
}

@media (max-width: 47.99rem) {
/* Keep the reference hierarchy on mobile without forcing desktop proportions. */
.dc-homepage__hero {
    padding-block: 1.75rem 2.25rem;
  }

.dc-homepage__hero-content h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

.dc-homepage__hero-trust li {
    flex: 1 1 10rem;
    justify-content: center;
  }

}

/* Homepage polish: Upcoming Clinic Events is live/current content,
   not a second primary navigation section. Keep it compact when empty,
   but allow real event cards to expand naturally when present. */
.dc-homepage__events .dc-homepage__section-inner {
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
}

.dc-homepage__events h2 {
  margin-block: 0 0 0.35rem;
}

.dc-homepage__events--empty .dc-homepage__section-inner {
  padding-block: 1.25rem;
}

.dc-homepage__events--empty .dc-btn,
.dc-homepage__events--empty a {
  margin-block-start: 0.5rem;
}

/* =========================================================
   COMPASS ACADEMY — PERMANENT ARTICLE PRESENTATION
   ========================================================= */
/* The Academy article owns its title presentation. */
.page-node-type-academy-article .block-page-title-block {
  display: none;
}

.page-node-type-academy-article main {
  background:
    linear-gradient(
      180deg,
      rgba(239, 248, 250, 0.72) 0,
      rgba(255, 255, 255, 1) 22rem
    );
}

/* ==========================================================================
   CLINIC CONSULTATION STATION
   A completely separate professional workspace from the patient's own
   Dental Picture (.dc-tooth-chart__*, dc-tooth-chart.html.twig) - no
   shared classes, no shared markup. Compass Navy/Deep Navy/Compass
   Gold/Compass Teal/Clinical White/Soft Stone only.
   ========================================================================== */
.dc-consultation-station {
  --dcs-navy: #0D1B2A;
  --dcs-navy-deep: #10263F;
  --dcs-gold: #D4AF37;
  --dcs-teal: #1FA8A8;
  --dcs-white: #FFFFFF;
  --dcs-stone: #F7F5F0;
  color: var(--dcs-navy);
  background: var(--dcs-white);
}

.dc-consultation-station__chips-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--dc-color-ink-500, #6b7280);
}

.dc-consultation-station__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.35rem 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--dcs-navy);
  color: var(--dcs-white);
  font-size: 0.8rem;
  font-weight: var(--dc-font-weight-semibold);
}

.dc-consultation-station__chip-code {
  font-variant-numeric: tabular-nums;
}

.dc-consultation-station__chip-remove {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  cursor: pointer;
  color: var(--dcs-white);
  opacity: 0.75;
  font-size: 0;
}

.dc-consultation-station__chip-remove::before {
  content: "\2715";
  font-size: 0.65rem;
}

.dc-consultation-station__chip-remove:hover,
.dc-consultation-station__chip-remove:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.18);
}

/* Sign-in, registration and password reset: Drupal's own forms, given
   the Dental Compass card treatment. Scoped by :has() on the form
   classes, like the other page-level rules in this file, so no other
   form or page changes. */
body:has(.user-login-form, .user-register-form, .user-pass, .user-form) {
  background-color: var(--dc-color-blue-50);
}

body:has(.user-login-form, .user-register-form, .user-pass, .user-form) .layout-content {
  box-sizing: border-box;
  max-width: 30rem;
  margin: var(--dc-space-7) auto var(--dc-space-8);
  padding: var(--dc-space-6);
  background-color: var(--dc-color-white);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-md);
  font-family: var(--dc-font-family-base);
  color: var(--dc-color-ink-900);
}

body:has(.user-login-form, .user-register-form, .user-pass, .user-form) .layout-content h1 {
  margin: 0 0 var(--dc-space-4);
  font-family: var(--dc-font-family-serif);
  font-weight: var(--dc-font-weight-regular);
  font-size: var(--dc-font-size-xl);
  color: var(--dc-color-navy-900);
}

body:has(.user-login-form, .user-register-form, .user-pass, .user-form) .layout-content ul.tabs,
body:has(.user-login-form, .user-register-form, .user-pass, .user-form) #block-dc-frontend-local-tasks ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-1) var(--dc-space-5);
  margin: 0 0 var(--dc-space-5);
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--dc-color-border);
}

body:has(.user-login-form, .user-register-form, .user-pass, .user-form) #block-dc-frontend-local-tasks li {
  margin: 0;
}

body:has(.user-login-form, .user-register-form, .user-pass, .user-form) #block-dc-frontend-local-tasks a {
  display: block;
  padding: var(--dc-space-2) 0;
  margin-block-end: -1px;
  border-block-end: 2px solid transparent;
  font-size: var(--dc-font-size-sm);
  font-weight: var(--dc-font-weight-medium);
  color: var(--dc-color-ink-600);
  text-decoration: none;
}

body:has(.user-login-form, .user-register-form, .user-pass, .user-form) #block-dc-frontend-local-tasks a:hover,
body:has(.user-login-form, .user-register-form, .user-pass, .user-form) #block-dc-frontend-local-tasks a:focus-visible {
  color: var(--dc-color-teal-700);
}

body:has(.user-login-form, .user-register-form, .user-pass, .user-form) #block-dc-frontend-local-tasks a.is-active {
  color: var(--dc-color-navy-900);
  border-block-end-color: var(--dc-color-teal-600);
}

.user-login-form .form-item,
.user-register-form .form-item,
.user-pass .form-item {
  margin: 0 0 var(--dc-space-4);
}

.user-login-form label,
.user-register-form label,
.user-pass label {
  display: block;
  margin-block-end: var(--dc-space-1);
  font-size: var(--dc-font-size-sm);
  font-weight: var(--dc-font-weight-semibold);
  color: var(--dc-color-navy-700);
}

.user-login-form input.form-text,
.user-login-form input.form-email,
.user-register-form input.form-text,
.user-register-form input.form-email,
.user-register-form input.form-tel,
.user-register-form input.password-field,
.user-register-form input.password-confirm,
.user-pass input.form-text,
.user-pass input.form-email {
  box-sizing: border-box;
  width: 100%;
  padding: var(--dc-space-3);
  font-family: var(--dc-font-family-base);
  font-size: var(--dc-font-size-base);
  color: var(--dc-color-ink-900);
  background-color: var(--dc-color-white);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-md);
}

.user-login-form input:focus-visible,
.user-register-form input:focus-visible,
.user-pass input:focus-visible {
  outline: none;
  border-color: var(--dc-color-teal-600);
  box-shadow: var(--dc-focus-ring);
}

.user-login-form .form-required::after,
.user-register-form .form-required::after,
.user-pass .form-required::after {
  color: var(--dc-color-danger-600);
}

.user-login-form .form-submit,
.user-register-form .form-submit,
.user-pass .form-submit {
  width: 100%;
  padding: var(--dc-space-3) var(--dc-space-5);
  font-family: var(--dc-font-family-base);
  font-size: var(--dc-font-size-base);
  font-weight: var(--dc-font-weight-semibold);
  color: var(--dc-color-white);
  background-color: var(--dc-color-teal-600);
  border: 1px solid transparent;
  border-radius: var(--dc-radius-md);
  cursor: pointer;
  transition: background-color var(--dc-transition-fast);
}

.user-login-form .form-submit:hover,
.user-login-form .form-submit:focus-visible,
.user-register-form .form-submit:hover,
.user-register-form .form-submit:focus-visible,
.user-pass .form-submit:hover,
.user-pass .form-submit:focus-visible {
  background-color: var(--dc-color-teal-700);
}

body:has(.user-login-form, .user-register-form, .user-pass, .user-form) .layout-content a {
  color: var(--dc-color-teal-700);
}

@media (max-width: 40rem) {
body:has(.user-login-form, .user-register-form, .user-pass, .user-form) .layout-content {
    margin: var(--dc-space-4);
    padding: var(--dc-space-5);
  }

}

/* Account edit page (/user/N/edit): the sign-in card treatment above, widened
   for a longer form. Presentation only. */
body:has(.user-form) .layout-content {
  max-width: 42rem;
}

body:has(.user-form) .layout-content h1 {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-1);
}

.user-form {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-4);
}

.user-form .form-item {
  margin: 0 0 var(--dc-space-4);
}

.user-form label,
.user-form legend {
  display: block;
  margin-block-end: var(--dc-space-1);
  font-size: var(--dc-font-size-sm);
  font-weight: var(--dc-font-weight-semibold);
  color: var(--dc-color-navy-700);
}

.user-form input.form-text,
.user-form input.form-email,
.user-form input.password-field,
.user-form input.password-confirm,
.user-form select,
.user-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: var(--dc-space-3);
  font-family: var(--dc-font-family-base);
  font-size: var(--dc-font-size-base);
  color: var(--dc-color-ink-900);
  background-color: var(--dc-color-white);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-md);
}

.user-form input:focus-visible,
.user-form select:focus-visible {
  outline: none;
  border-color: var(--dc-color-teal-600);
  box-shadow: var(--dc-focus-ring);
}

.user-form details,
.user-form fieldset {
  margin: 0;
  padding: var(--dc-space-4);
  background-color: var(--dc-color-white);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-lg);
}

.user-form fieldset fieldset {
  border: 0;
  padding: 0;
  margin-block-start: var(--dc-space-3);
}

.user-form details > summary,
.user-form fieldset > legend {
  font-family: var(--dc-font-family-serif);
  font-size: var(--dc-font-size-base);
  font-weight: var(--dc-font-weight-semibold);
  color: var(--dc-color-navy-900);
  cursor: pointer;
}

.user-form details[open] > summary {
  margin-block-end: var(--dc-space-3);
}

.user-form .form-type-radio,
.user-form .form-type-checkbox {
  display: flex;
  align-items: baseline;
  gap: var(--dc-space-2);
  margin-block: var(--dc-space-2);
}

.user-form .form-type-radio label,
.user-form .form-type-checkbox label {
  display: inline;
  margin: 0;
  font-weight: var(--dc-font-weight-regular);
}

.user-form .form-actions {
  margin: 0;
}

.user-form .form-actions .form-submit {
  padding: var(--dc-space-3) var(--dc-space-5);
  font-family: var(--dc-font-family-base);
  font-size: var(--dc-font-size-base);
  font-weight: var(--dc-font-weight-semibold);
  color: var(--dc-color-white);
  background-color: var(--dc-color-teal-600);
  border: 1px solid transparent;
  border-radius: var(--dc-radius-md);
  cursor: pointer;
}

.user-form .form-actions .form-submit:hover,
.user-form .form-actions .form-submit:focus-visible {
  background-color: var(--dc-color-teal-700);
}

/* Drupal status messages, sitewide. */
[data-drupal-messages] .messages,
.layout-content .messages {
  margin: 0 0 var(--dc-space-4);
  padding: var(--dc-space-3) var(--dc-space-4);
  background-color: var(--dc-color-blue-50);
  border-inline-start: 3px solid var(--dc-color-teal-600);
  border-radius: var(--dc-radius-sm);
  font-size: var(--dc-font-size-sm);
  color: var(--dc-color-ink-900);
}

.layout-content .messages--error {
  border-inline-start-color: var(--dc-color-danger-600);
}

/* Status and error messages as Drupal renders them (wrapper carries a role and label). */
.layout-container [role="contentinfo"][aria-label],
.layout-container [role="alert"][aria-label] {
  box-sizing: border-box;
  max-width: 42rem;
  margin: var(--dc-space-4) auto 0;
  padding: var(--dc-space-3) var(--dc-space-4);
  background-color: var(--dc-color-blue-50);
  border-inline-start: 3px solid var(--dc-color-teal-600);
  border-radius: var(--dc-radius-sm);
  font-size: var(--dc-font-size-sm);
  color: var(--dc-color-ink-900);
}

.layout-container [role="alert"][aria-label] {
  border-inline-start-color: var(--dc-color-danger-600);
}

.layout-container [role="contentinfo"][aria-label] h2,
.layout-container [role="alert"][aria-label] h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Account edit form: Private Messages fieldset legends. */
.user-form fieldset > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--dc-space-3);
}

.user-form fieldset > legend + * {
  clear: both;
}

.user-form fieldset fieldset > legend {
  margin-block-end: var(--dc-space-2);
  font-family: var(--dc-font-family-base);
  font-size: var(--dc-font-size-sm);
  font-weight: var(--dc-font-weight-semibold);
  color: var(--dc-color-navy-700);
}

/* =========================================================
   Homepage vertical rhythm (final tidy). The opening sections used to
   stack section padding on top of inner padding (about 190px of blank
   space between the three steps and Get Started). The inner wrapper now
   owns the spacing for these sections; section padding is zero. Section
   separation is roughly 60-70px, heading to copy 8-16px, copy to content
   24-32px. Declared last so it settles every earlier layer above.
   ========================================================= */
.dc-homepage__hero {
  padding-block: var(--dc-space-6) var(--dc-space-6);
}

/* Clinic entry page (/for-clinics) and the homepage clinic calls to action. */
.dc-homepage__for-clinics-actions,
.dc-for-clinics__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-3);
  margin-block: var(--dc-space-4);
}

/* Generic page title (the page_title block), wherever a page does not hide it
   for its own heading: the branded serif heading in the page's content width,
   instead of an unstyled black system-sans h1. */
#block-dc-frontend-page-title {
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--dc-space-5) var(--dc-space-4) 0;
  box-sizing: border-box;
}

#block-dc-frontend-page-title h1 {
  margin: 0;
  font-family: var(--dc-font-family-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, var(--dc-font-size-2xl));
  line-height: 1.2;
  color: var(--dc-color-navy-900);
}

/* HOMEPAGE RESTRUCTURE: compact credibility strip, the two learn-and-explore
   paths inside the hero, and the demonstration comparison band. */
.dc-homepage__hero {
  padding-block: var(--dc-space-5);
}

.dc-homepage__hero-strip {
  max-width: 84rem;
  margin: 0 auto var(--dc-space-5);
  padding-inline: var(--dc-space-4);
  box-sizing: border-box;
}

.dc-homepage__hero-strip .dc-homepage__hero-trust {
  margin: 0;
  gap: var(--dc-space-2) var(--dc-space-3);
}

.dc-homepage__hero-strip .dc-homepage__hero-trust li {
  padding: var(--dc-space-1, 0.25rem) var(--dc-space-3);
  font-size: var(--dc-font-size-xs);
  box-shadow: none;
}

.dc-homepage__hero-copy {
  margin-block-end: var(--dc-space-5);
}

@media (min-width: 48rem) {
.dc-homepage__hero {
    padding-block: var(--dc-space-6);
  }

}

.dc-homepage__hero-strip .dc-homepage__hero-trust li {
  flex: 0 1 auto;
}

.dc-homepage__hero-intro {
  margin-block: 0 var(--dc-space-2);
  font-size: var(--dc-font-size-md);
  font-weight: var(--dc-font-weight-semibold);
  color: var(--dc-color-navy-900);
  max-width: 36rem;
}

.dc-homepage__hero-content h1 {
  font-size: var(--dc-font-size-2xl, 1.75rem);
}

@media (min-width: 48rem) {
.dc-homepage__hero-content h1 {
    font-size: var(--dc-font-size-3xl);
    max-width: 22ch;
  }

}

/* HOMEPAGE SPACING & COMPOSITION */
.dc-homepage__hero {
  padding-block: var(--dc-space-3) var(--dc-space-5);
}

.dc-homepage__hero-strip {
  margin-block-end: var(--dc-space-3);
}

/* The outgoing story fades out completely before the incoming one starts to
   fade in, so two faces are never visible at once. */
.dc-homepage__hero-slide {
  transition: opacity 0.5s ease;
}

.dc-homepage__hero-slide.is-active {
  transition: opacity 0.5s ease 0.5s;
}

@media (prefers-reduced-motion: reduce) {
.dc-homepage__hero-slide,
  .dc-homepage__hero-slide.is-active {
    transition: none;
  }

}

.dc-homepage__events {
  padding-block: var(--dc-space-6) var(--dc-space-4);
}

.dc-homepage__events .dc-homepage__events-feature {
  display: grid;
  gap: var(--dc-space-4);
  align-items: center;
  padding-block: 0;
}

.dc-homepage__events-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 580;
  object-fit: cover;
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-md);
}

.dc-homepage__events .dc-homepage__events-content h2 {
  justify-content: flex-start;
  text-align: left;
  margin-block: 0 var(--dc-space-2);
  font-size: var(--dc-font-size-xl);
}

.dc-homepage__events-lede,
.dc-homepage__events-empty {
  margin: 0 0 var(--dc-space-3);
  color: var(--dc-color-ink-600);
  line-height: var(--dc-line-height-base);
}

.dc-homepage__events-list {
  margin: 0 0 var(--dc-space-3);
  padding: 0;
  list-style: none;
}

.dc-homepage__events-list li {
  margin-block-end: var(--dc-space-2);
}

.dc-homepage__events-list a {
  font-weight: var(--dc-font-weight-semibold);
}

.dc-homepage__events-meta {
  display: block;
  font-size: var(--dc-font-size-sm);
  color: var(--dc-color-ink-600);
}

.dc-homepage__events--empty a.dc-btn {
  margin-block-start: 0;
}

.dc-homepage__learn {
  padding-block-start: var(--dc-space-5);
}

@media (min-width: 48rem) {
.dc-homepage__events .dc-homepage__events-feature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--dc-space-6);
    max-width: 67rem;
  }

}

.dc-homepage__comparison .dc-homepage__section-inner > h2,
.dc-homepage__learn .dc-homepage__section-inner > h2 {
  margin-block-start: 0;
}

.dc-homepage__learn {
  padding-block-start: var(--dc-space-4);
}

@media (min-width: 48rem) {
.dc-homepage__events .dc-homepage__events-feature {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    max-width: 62rem;
  }

}

.dc-homepage__learn {
  padding-block-end: var(--dc-space-5);
}

.dc-homepage__for-clinics {
  padding-block: var(--dc-space-5);
}

/* HOMEPAGE FINAL IMAGE INTEGRATION */
.dc-homepage__hero--scene {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--dc-color-white);
}

.dc-homepage__hero-bg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 78% center;
}

.dc-homepage__hero-scrim {
  display: none;
}

.dc-homepage__hero--scene .dc-homepage__hero-strip {
  margin-block: var(--dc-space-3);
}

.dc-homepage__hero--scene .dc-homepage__hero-inner {
  padding-block: 0 var(--dc-space-4);
}

.dc-homepage__illustrative {
  margin: 0;
  padding: 0 var(--dc-space-4) var(--dc-space-3);
  text-align: right;
  font-size: var(--dc-font-size-xs);
  color: var(--dc-color-ink-600);
}

.dc-homepage__paths {
  padding-block: var(--dc-space-4);
  background: var(--dc-color-white);
}

.dc-homepage__path-grid {
  display: grid;
  gap: var(--dc-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dc-homepage__path {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--dc-color-white);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-sm);
  color: var(--dc-color-navy-900);
  text-decoration: none;
  transition: transform var(--dc-transition-base), box-shadow var(--dc-transition-base);
}

.dc-homepage__path:hover,
.dc-homepage__path:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--dc-shadow-md);
}

.dc-homepage__path--primary {
  border-color: var(--dc-color-teal-600);
  border-width: 2px;
}

.dc-homepage__path-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.dc-homepage__path-body {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-1, 0.25rem);
  padding: var(--dc-space-4);
}

.dc-homepage__path-body strong {
  font-size: var(--dc-font-size-lg, 1.125rem);
  color: var(--dc-color-navy-900);
}

.dc-homepage__path--primary .dc-homepage__path-body strong {
  color: var(--dc-color-teal-700);
}

.dc-homepage__path-body span {
  font-size: var(--dc-font-size-sm);
  line-height: var(--dc-line-height-base, 1.5);
  color: var(--dc-color-ink-600);
}

.dc-homepage__path-note {
  font-size: var(--dc-font-size-xs);
  font-style: italic;
  color: var(--dc-color-ink-600);
}

.dc-homepage__events {
  background-color: var(--dc-color-blue-50);
  padding-block: var(--dc-space-5) var(--dc-space-3);
}

.dc-homepage__events .dc-homepage__events-feature {
  max-width: 84rem;
  justify-items: center;
}

.dc-homepage__events-figure {
  width: 100%;
  margin: 0;
}

.dc-homepage__events-image {
  aspect-ratio: 16 / 9;
}

.dc-homepage__events-note {
  margin-block-start: var(--dc-space-1, 0.25rem);
  font-size: var(--dc-font-size-xs);
  font-style: italic;
  color: var(--dc-color-ink-600);
}

.dc-homepage__events .dc-homepage__events-content {
  justify-self: stretch;
}

@media (min-width: 48rem) {
.dc-homepage__hero--scene {
    min-height: 24rem;
    display: flex;
    flex-direction: column;
  }

.dc-homepage__hero-bg {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: right center;
  }

.dc-homepage__hero-scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0) 64%);
  }

.dc-homepage__hero--scene .dc-homepage__hero-strip,
  .dc-homepage__hero--scene .dc-homepage__hero-inner,
  .dc-homepage__illustrative {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
  }

.dc-homepage__hero--scene .dc-homepage__hero-strip {
    margin-block: var(--dc-space-4) var(--dc-space-3);
  }

.dc-homepage__hero--scene .dc-homepage__hero-inner {
    flex: 1;
    display: flex;
    align-items: center;
    padding-block: var(--dc-space-3) var(--dc-space-5);
  }

.dc-homepage__hero--scene .dc-homepage__hero-content {
    flex: 0 1 34rem;
  }

.dc-homepage__illustrative {
    position: absolute;
    inset: auto 0 0 auto;
    width: auto;
    padding: var(--dc-space-1, 0.25rem) var(--dc-space-3);
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--dc-radius-sm, 0.25rem) 0 0 0;
  }

.dc-homepage__path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.dc-homepage__path-grid > li:nth-child(3) {
    grid-column: 1 / -1;
  }

.dc-homepage__path-grid > li:nth-child(3) .dc-homepage__path {
    flex-direction: row;
  }

.dc-homepage__path-grid > li:nth-child(3) .dc-homepage__path-image {
    flex: 0 0 50%;
    width: 50%;
  }

.dc-homepage__path-grid > li:nth-child(3) .dc-homepage__path-body {
    justify-content: center;
  }

.dc-homepage__events .dc-homepage__events-feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dc-space-5);
  }

.dc-homepage__events .dc-homepage__hero-illustration {
    grid-column: 1 / -1;
  }

}

@media (min-width: 64rem) {
.dc-homepage__path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

.dc-homepage__path-grid > li:nth-child(3) {
    grid-column: auto;
  }

.dc-homepage__path-grid > li:nth-child(3) .dc-homepage__path {
    flex-direction: column;
  }

.dc-homepage__path-grid > li:nth-child(3) .dc-homepage__path-image {
    flex: none;
    width: 100%;
  }

.dc-homepage__events .dc-homepage__events-feature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) 15.6rem;
  }

.dc-homepage__events .dc-homepage__hero-illustration {
    grid-column: auto;
  }

}

@media (min-width: 48rem) {
.dc-homepage__hero--scene .dc-homepage__hero-inner {
    flex-direction: row;
    justify-content: flex-start;
    max-width: 84rem;
    margin-inline: auto;
  }

.dc-homepage__hero--scene .dc-homepage__hero-strip {
    max-width: 84rem;
    margin-inline: auto;
  }

.dc-homepage__hero-bg {
    object-position: right 18%;
  }

}

.dc-homepage__events .dc-homepage__hero-illustration {
  width: 100%;
  max-width: 14rem;
  justify-self: center;
}

.dc-homepage__events .dc-homepage__events-content h2 {
  text-wrap: balance;
}

@media (min-width: 64rem) {
.dc-homepage__events .dc-homepage__events-feature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) 14rem;
  }

}

@media (min-width: 48rem) {
.dc-homepage__hero-scrim {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 255, 255, 0) 72%);
  }

}

/* HOMEPAGE HERO ROTATION: stationary layers, slow sequential crossfade
   (0.6s out, then 0.6s in - 1.2s in total), one image visible at a time. */
.dc-homepage__hero-slides {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.dc-homepage__hero-slides .dc-homepage__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: var(--hero-x, 78%) var(--hero-y, 18%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.dc-homepage__hero-slides .dc-homepage__hero-bg.is-active {
  opacity: 1;
  transition: opacity 0.6s ease 0.6s;
}

@media (prefers-reduced-motion: reduce) {
.dc-homepage__hero-slides .dc-homepage__hero-bg,
  .dc-homepage__hero-slides .dc-homepage__hero-bg.is-active {
    transition: none;
  }

}

@media (min-width: 48rem) {
.dc-homepage__hero-slides {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

.dc-homepage__hero-slides .dc-homepage__hero-bg {
    inset: 0;
    width: min(100%, 84rem);
    margin-inline: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 93%, transparent 100%);
  }

.dc-homepage__hero-slides .dc-homepage__hero-bg {
    width: min(92%, 76rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 90%, transparent 100%);
  }

/* HERO FROSTING CORRECTION: the photographs run full width, unmasked and
   unwashed. The only white is a narrow, fading panel behind the text on the
   left; the people, scenery and buildings are never overlaid. */
.dc-homepage__hero-slides .dc-homepage__hero-bg {
    width: 100%;
    margin-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

.dc-homepage__hero-scrim {
    inset: 0 auto 0 0;
    width: min(100%, 44rem);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.78) 55%, rgba(255, 255, 255, 0) 100%);
  }

.dc-homepage__hero--scene .dc-homepage__hero-copy {
    color: var(--dc-color-navy-700);
  }

}

.dc-homepage__hero--scene {
  background: #eaf2f8;
}

@media (max-width: 47.99rem) {
.dc-homepage__hero--scene {
    background: var(--dc-color-white);
  }

}

/* HOMEPAGE SMILE SECTION: a compact image-and-text band in the patient
   journey, between the entry cards and the events band. */
.dc-homepage__smile {
  padding-block: var(--dc-space-5);
}

.dc-homepage__smile-inner {
  display: grid;
  gap: var(--dc-space-4);
  align-items: start;
}

.dc-homepage__smile-figure {
  margin: 0;
}

.dc-homepage__smile-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-md);
}

.dc-homepage__smile .dc-homepage__smile-content h2 {
  justify-content: flex-start;
  text-align: left;
  margin-block: 0 var(--dc-space-2);
  font-size: var(--dc-font-size-xl);
  text-wrap: balance;
}

.dc-homepage__smile-content p {
  margin: 0 0 var(--dc-space-4);
  color: var(--dc-color-ink-600);
  line-height: var(--dc-line-height-base);
}

@media (min-width: 48rem) {
.dc-homepage__smile-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--dc-space-6);
  }

/* A slide whose subjects span the full frame (the Brick Lane group) sits to
   the right of the text column, fading in at its left edge only, so the
   people are never under the white text panel. */
.dc-homepage__hero-slides .dc-homepage__hero-bg[data-hero-inset] {
    width: var(--hero-w);
    margin-inline-start: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
    mask-image: linear-gradient(to right, transparent 0, #000 14%);
  }

}

@media (min-width: 48rem) and (max-width: 63.99rem) {
.dc-homepage__hero-slides .dc-homepage__hero-bg[data-hero-inset] {
    width: 58%;
  }

}

/* GLOBAL HEADER: the logo is centred in the navy header (the
   navigation keeps its own row below it; below 87rem a spacer balances the
   menu toggle so the logo stays centred). */
.layout-container > header .dc-header__brand-slot {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.layout-container > header .dc-header__inner::before {
  content: '';
  flex: 0 0 2.75rem;
  order: -1;
}

@media (min-width: 87rem) {
.layout-container > header .dc-header__inner::before {
    display: none;
  }

.layout-container > header .dc-header__brand-slot {
    flex: 0 0 100%;
  }

}

/* HOMEPAGE HERO WIDTH: the rotating hero (image, gradient and text) shares
   the homepage cards' width and alignment (84rem less the 1rem side padding
   the cards sit inside), is centred, and has softly rounded corners. */
.dc-homepage__hero--scene {
  width: calc(100% - 2rem);
  max-width: 82rem;
  margin: var(--dc-space-4) auto 0;
  border-radius: var(--dc-radius-lg);
}

/* Homepage smile band: the cost call to action beside the text. */
.dc-homepage__cost-cta {
  padding: var(--dc-space-4);
  border: 1px solid rgba(198, 161, 91, 0.45);
  border-top: 3px solid var(--dc-color-teal-600);
  border-radius: var(--dc-radius-lg);
  background:
    radial-gradient(circle at 100% 0, rgba(14, 124, 134, 0.35), transparent 55%),
    linear-gradient(160deg, var(--dc-color-navy-700), var(--dc-color-navy-900));
  box-shadow: var(--dc-shadow-md);
  color: #fff;
}

.dc-homepage__cost-cta h3 {
  margin: 0 0 var(--dc-space-2);
  color: #fff;
  font-size: var(--dc-font-size-lg);
  text-wrap: balance;
}

.dc-homepage__cost-cta .dc-homepage__cost-lead {
  margin: 0 0 var(--dc-space-2);
  color: var(--dc-color-gold-500);
  font-weight: 700;
}

.dc-homepage__cost-cta .dc-homepage__cost-text {
  margin: 0 0 var(--dc-space-3);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--dc-font-size-sm, 0.9rem);
  line-height: var(--dc-line-height-base);
}

.dc-homepage__cost-example {
  margin: 0;
  padding: var(--dc-space-2) var(--dc-space-3);
  border: 1px solid var(--dc-color-navy-border);
  border-radius: var(--dc-radius-md, 0.5rem);
  background: rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums;
}

.dc-homepage__cost-example > div {
  display: flex;
  justify-content: space-between;
  gap: var(--dc-space-3);
  padding-block: 0.2rem;
  font-size: 0.9rem;
}

.dc-homepage__cost-example dt,
.dc-homepage__cost-example dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.dc-homepage__cost-example dt {
  min-width: 0;
}

.dc-homepage__cost-example dd {
  flex: none;
  white-space: nowrap;
}

.dc-homepage__cost-example .dc-homepage__cost-total {
  margin-top: 0.25rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--dc-color-gold-500);
}

.dc-homepage__cost-example .dc-homepage__cost-total dt,
.dc-homepage__cost-example .dc-homepage__cost-total dd {
  color: var(--dc-color-gold-500);
  font-weight: 700;
}

.dc-homepage__cost-cta .dc-homepage__cost-note {
  margin: var(--dc-space-2) 0 var(--dc-space-2);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  font-style: italic;
}

.dc-homepage__cost-cta .dc-homepage__cost-button {
  display: block;
  background-color: var(--dc-color-gold-500);
  border-color: var(--dc-color-gold-500);
  color: var(--dc-color-navy);
  font-weight: 700;
  text-align: center;
}

.dc-homepage__cost-cta .dc-homepage__cost-button:hover,
.dc-homepage__cost-cta .dc-homepage__cost-button:focus-visible {
  background-color: var(--dc-color-gold-100);
  border-color: var(--dc-color-gold-100);
  color: var(--dc-color-navy);
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
.dc-homepage__cost-cta {
    grid-column: 1 / -1;
  }

}

@media (min-width: 64rem) {
.dc-homepage__smile-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4.2fr);
    align-items: center;
  }

}

/* Treatment Builder and tooth chart: a rejected submission marks the first
   invalid field clearly, with its message beside it. */
.dc-treatment-builder .form-item--error,
.dc-field-error-highlight {
  scroll-margin-top: 7rem;
  border-radius: var(--dc-radius-md);
}

.dc-field-error-highlight {
  outline: 2px solid var(--dc-color-error, #b42318);
  outline-offset: 4px;
  background: rgba(180, 35, 24, 0.06);
}

/* Printed quotation: compact A4. Only the clinic letterhead, the quotation
   and a small platform line are printed - no site header, navigation or
   buttons. Ordinary quotations fit one page; longer ones continue on the
   next, with each section kept whole where it fits. */
@page {
  size: A4;
  margin: 12mm;
}

/* Lightboxes and compact cards. */
.dc-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: var(--dc-space-4, 1rem);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-md, 0.5rem);
  background-color: var(--dc-color-white);
  color: var(--dc-color-ink-900);
  overflow-y: auto;
}

.dc-dialog::backdrop {
  background-color: rgb(10 31 53 / 55%);
}

html:not(.dc-js) .dc-dialog:not([open]) {
  display: block;
  position: static;
  width: auto;
  max-height: none;
  margin-top: var(--dc-space-3, 0.75rem);
}

html:not(.dc-js) [data-dc-dialog-open],
html:not(.dc-js) [data-dc-dialog-close] {
  display: none;
}

/* Pause / resume control for the two homepage carousels. Shown only once
   the script has started a rotation (never under reduced motion). */
.dc-homepage__motion-toggle {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: rgba(11, 30, 51, 0.72);
  color: var(--dc-color-white);
  cursor: pointer;
}

.dc-homepage__motion-toggle[hidden] {
  display: none;
}

.dc-homepage__motion-toggle:hover {
  background: var(--dc-color-navy-900);
}

.dc-homepage__motion-toggle:focus-visible {
  outline: 3px solid var(--dc-color-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--dc-color-navy-900);
}

.dc-homepage__motion-toggle::before {
  content: "";
  width: 0.25rem;
  height: 0.9rem;
  background: currentColor;
  box-shadow: 0.5rem 0 0 currentColor;
  transform: translateX(-0.25rem);
}

.dc-homepage__motion-toggle[data-state="paused"]::before {
  width: 0;
  height: 0;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
  border-left: 0.75rem solid currentColor;
  background: none;
  box-shadow: none;
  transform: translateX(0.1rem);
}

.dc-homepage__hero-illustration .dc-homepage__motion-toggle {
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
}


/* Homepage events: the text strip and the patient stories only (no event images). */
.dc-homepage__events:not(.dc-homepage__events--empty) .dc-homepage__events-feature {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {
  .dc-homepage__events:not(.dc-homepage__events--empty) .dc-homepage__events-feature {
    grid-template-columns: minmax(0, 1fr) 14rem;
  }
}
.dc-homepage__notice {
  max-width: 36rem;
  margin-block: 0 var(--dc-space-4);
  padding: var(--dc-space-2) var(--dc-space-3);
  border-inline-start: 3px solid var(--dc-color-gold-500);
  border-radius: var(--dc-radius-sm);
  background: var(--dc-color-white-muted);
  color: var(--dc-color-navy-900);
}

.dc-homepage__notice-title {
  margin: 0;
  font-size: var(--dc-font-size-sm);
  font-weight: var(--dc-font-weight-semibold);
}

.dc-homepage__notice-launch {
  font-size: var(--dc-font-size-lg);
  font-weight: 800;
  line-height: 1.25;
  color: var(--dc-color-navy-900);
}

.dc-homepage__notice-text {
  margin: var(--dc-space-1) 0 0;
  font-size: var(--dc-font-size-sm);
  line-height: 1.45;
  color: var(--dc-color-ink-600);