@charset "UTF-8";
/* ============================================================
   SmileCraft — Joomla 5 dental template
   1. Tokens  2. Base  3. Type  4. Controls  5. Header
   6. Hero/arch  7. Sections  8. Footer  9. Joomla core  10. Utilities
   Override any token in Template Options → Custom CSS.
   ============================================================ */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Surgical green — scrub green is the real instrument-tray color of the
     operatory, and it sidesteps the cyan every other dental site uses. */
  --sc-pine-900: #0C2723;
  --sc-pine-800: #10312C;
  --sc-pine-700: #164039;
  --sc-jade-600: #1F6B5C;
  --sc-jade-500: #2A8873;
  --sc-mint-400: #79D6BC;
  --sc-mint-200: #C6EFE2;

  --sc-porcelain: #F6F7F4;
  --sc-porcelain-2: #EBEFE9;
  --sc-white: #FFFFFF;

  --sc-graphite: #1C2321;
  --sc-muted: #5C6663;
  --sc-line: #DDE3DC;
  --sc-line-dark: rgba(198, 239, 226, .16);

  --sc-gum: #9A6461;      /* gingiva — used only in the arch */
  --sc-alert: #C4574B;    /* emergency / urgent only */

  --sc-ink-on-dark: #E8EFEA;
  --sc-muted-on-dark: #9FB3AC;

  /* Type */
  --sc-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --sc-font-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --sc-step--1: clamp(.82rem, .80rem + .1vw, .88rem);
  --sc-step-0:  clamp(1rem, .97rem + .16vw, 1.09rem);
  --sc-step-1:  clamp(1.2rem, 1.13rem + .34vw, 1.42rem);
  --sc-step-2:  clamp(1.45rem, 1.31rem + .68vw, 1.9rem);
  --sc-step-3:  clamp(1.8rem, 1.53rem + 1.34vw, 2.6rem);
  --sc-step-4:  clamp(2.2rem, 1.62rem + 2.9vw, 3.6rem);
  --sc-step-5:  clamp(2.6rem, 1.72rem + 4.4vw, 4.5rem);

  /* Space */
  --sc-gap: 1.5rem;
  --sc-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --sc-container: 1200px;
  --sc-container-narrow: 760px;

  /* Shape — the crown radius echoes a molar: domed top, squared cervical edge */
  --sc-r-crown: 26px 26px 8px 8px;
  --sc-r: 14px;
  --sc-r-sm: 8px;
  --sc-r-pill: 999px;

  --sc-shadow-1: 0 1px 2px rgba(12, 39, 35, .05), 0 6px 20px -8px rgba(12, 39, 35, .12);
  --sc-shadow-2: 0 2px 4px rgba(12, 39, 35, .06), 0 24px 48px -20px rgba(12, 39, 35, .28);
  --sc-ease: cubic-bezier(.22, .61, .36, 1);
  --sc-header-h: 76px;
}

/* ---------- 2. BASE ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sc-header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--sc-font-body);
  font-size: var(--sc-step-0);
  line-height: 1.65;
  color: var(--sc-graphite);
  background: var(--sc-porcelain);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--sc-line); margin: 2rem 0; }

::selection { background: var(--sc-mint-200); color: var(--sc-pine-900); }

/* The hidden attribute must beat any display rule set by a component class */
[hidden] { display: none !important; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sc-jade-500);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}

.sc-skip {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  background: var(--sc-pine-800); color: var(--sc-white);
  padding: .75rem 1.25rem; border-radius: var(--sc-r-sm);
  font-weight: 600; text-decoration: none;
  transition: top .18s var(--sc-ease);
}
.sc-skip:focus { top: 1rem; }

/* ---------- 3. TYPE ------------------------------------------------------ */
h1, h2, h3, h4, h5, h6, .sc-h1, .sc-h2, .sc-h3 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.021em;
  color: var(--sc-pine-900);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1, .sc-h1 { font-size: var(--sc-step-5); line-height: 1.02; letter-spacing: -.034em; }
h2, .sc-h2 { font-size: var(--sc-step-3); }
h3, .sc-h3 { font-size: var(--sc-step-2); }
h4 { font-size: var(--sc-step-1); }
h5, h6 { font-size: var(--sc-step-0); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--sc-jade-600); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--sc-pine-800); }

strong, b { font-weight: 700; }

.sc-lead { font-size: var(--sc-step-1); line-height: 1.5; color: var(--sc-muted); }

/* Eyebrow — a clinical label, set in mono because the rest of the practice's
   paperwork is too. Carries the section's function, never decoration. */
.sc-eyebrow {
  font-family: var(--sc-font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sc-jade-600);
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
}
.sc-eyebrow::before {
  content: ""; inline-size: 26px; block-size: 2px;
  background: currentColor; flex: none; border-radius: 2px;
}
.sc-eyebrow--center { justify-content: center; }
.sc-on-dark .sc-eyebrow { color: var(--sc-mint-400); }

.sc-mono { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- 4. CONTROLS -------------------------------------------------- */
.sc-btn {
  --_bg: var(--sc-jade-600);
  --_fg: var(--sc-white);
  --_bd: var(--sc-jade-600);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sc-font-body);
  font-size: var(--sc-step-0);
  font-weight: 700;
  line-height: 1.2;
  padding: .95rem 1.7rem;
  min-block-size: 52px;              /* thumb-sized: most bookings are on a phone */
  border: 2px solid var(--_bd);
  border-radius: var(--sc-r-pill);
  background: var(--_bg);
  color: var(--_fg);
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--sc-ease), background-color .16s var(--sc-ease),
              color .16s var(--sc-ease), border-color .16s var(--sc-ease),
              box-shadow .16s var(--sc-ease);
}
.sc-btn:hover {
  --_bg: var(--sc-pine-800);
  --_bd: var(--sc-pine-800);
  color: var(--sc-white);
  transform: translateY(-2px);
  box-shadow: var(--sc-shadow-1);
}
.sc-btn:active { transform: translateY(0); }

.sc-btn--mint { --_bg: var(--sc-mint-400); --_fg: var(--sc-pine-900); --_bd: var(--sc-mint-400); }
.sc-btn--mint:hover { --_bg: var(--sc-mint-200); --_bd: var(--sc-mint-200); color: var(--sc-pine-900); }

.sc-btn--ghost { --_bg: transparent; --_fg: var(--sc-pine-800); --_bd: var(--sc-line); }
.sc-btn--ghost:hover { --_bg: var(--sc-pine-800); --_bd: var(--sc-pine-800); }

.sc-btn--ghost-dark { --_bg: transparent; --_fg: var(--sc-ink-on-dark); --_bd: var(--sc-line-dark); }
.sc-btn--ghost-dark:hover { --_bg: rgba(198,239,226,.10); --_bd: var(--sc-mint-400); color: var(--sc-white); }

.sc-btn--sm { padding: .6rem 1.15rem; min-block-size: 42px; font-size: var(--sc-step--1); }
.sc-btn--block { inline-size: 100%; }

.sc-btn__icon { inline-size: 18px; block-size: 18px; flex: none; }

/* Text link with a moving rule underneath */
.sc-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; text-decoration: none;
  color: var(--sc-jade-600);
  padding-block-end: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .28s var(--sc-ease), color .18s var(--sc-ease);
}
.sc-link:hover { background-size: 100% 2px; }
.sc-link svg { inline-size: 15px; block-size: 15px; transition: translate .18s var(--sc-ease); }
.sc-link:hover svg { translate: 3px 0; }
.sc-on-dark .sc-link { color: var(--sc-mint-400); }

/* ---------- 5. LAYOUT + HEADER ------------------------------------------- */
.sc-container {
  inline-size: min(100% - 2.5rem, var(--sc-container));
  margin-inline: auto;
}
@media (max-width: 575px) { .sc-container { inline-size: min(100% - 2rem, var(--sc-container)); } }

.sc-narrow { inline-size: min(100%, var(--sc-container-narrow)); margin-inline: auto; }

.sc-section { padding-block: var(--sc-section-y); }
.sc-section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.sc-section--flush-top { padding-block-start: 0; }

.sc-on-dark { background: var(--sc-pine-800); color: var(--sc-ink-on-dark); }
.sc-on-dark h1, .sc-on-dark h2, .sc-on-dark h3, .sc-on-dark h4 { color: var(--sc-white); }
.sc-on-dark .sc-lead { color: var(--sc-muted-on-dark); }
.sc-alt { background: var(--sc-porcelain-2); }

.sc-section__head { max-inline-size: 62ch; margin-block-end: clamp(2rem, 1rem + 3vw, 3.5rem); }
.sc-section__head--center { margin-inline: auto; text-align: center; }

/* Top bar — hours and phone above the fold on every page. Dental practices
   lose bookings to a hidden phone number more than to anything else. */
.sc-topbar {
  background: var(--sc-pine-900);
  color: var(--sc-muted-on-dark);
  font-family: var(--sc-font-mono);
  font-size: .78rem;
  letter-spacing: .01em;
  padding-block: .55rem;
}
.sc-topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.6rem; }
.sc-topbar a { color: var(--sc-mint-200); text-decoration: none; }
.sc-topbar a:hover { color: var(--sc-white); text-decoration: underline; }
.sc-topbar__item { display: inline-flex; align-items: center; gap: .45rem; }
.sc-topbar__item svg { inline-size: 14px; block-size: 14px; opacity: .8; flex: none; }
.sc-topbar__spacer { margin-inline-start: auto; }
.sc-topbar__urgent { color: #F0A79D; }
/* On phones the top bar collapses to the office switcher alone. Hiding it
   entirely would leave mobile visitors, who are most of the calls, unable to
   pick an office, so the Call button would guess. */
@media (max-width: 767px) {
  .sc-topbar { padding-block: .45rem; }
  .sc-topbar__inner { justify-content: center; }
  .sc-topbar__inner > *:not(.sc-topbar__loc) { display: none; }
  .sc-topbar:not(:has(.sc-locswitch)) { display: none; }
}

/* Header */
.sc-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(246, 247, 244, .88);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-block-end: 1px solid transparent;
  transition: border-color .2s var(--sc-ease), box-shadow .2s var(--sc-ease);
}
.sc-header.is-stuck { border-block-end-color: var(--sc-line); box-shadow: var(--sc-shadow-1); }
.sc-header__inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-block-size: var(--sc-header-h);
}

.sc-brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.sc-brand__mark { inline-size: 38px; block-size: 38px; flex: none; }
.sc-brand__text { display: grid; line-height: 1.05; }
.sc-brand__name {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: 1.24rem; letter-spacing: -.025em; color: var(--sc-pine-900);
}
.sc-brand__tag {
  font-family: var(--sc-font-mono); font-size: .62rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--sc-muted);
}

.sc-header__nav { margin-inline-start: auto; }
.sc-header__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Primary navigation — styles Joomla's mod_menu output directly, so no
   template override is needed and core updates cannot break it. */
.sc-nav ul, .sc-nav ul.mod-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: .15rem;
}
.sc-nav li { position: relative; }
.sc-nav a, .sc-nav ul.mod-menu > li > a, .sc-nav ul.mod-menu > li > span.mod-menu__heading {
  display: block; padding: .6rem .7rem;
  font-weight: 600; font-size: .95rem;
  color: var(--sc-graphite); text-decoration: none;
  border-radius: var(--sc-r-sm);
  white-space: nowrap;
  transition: color .16s var(--sc-ease), background-color .16s var(--sc-ease);
  cursor: pointer;
}
.sc-nav a:hover, .sc-nav ul.mod-menu > li > a:hover { color: var(--sc-jade-600); background: rgba(42,136,115,.08); }
.sc-nav .current > a, .sc-nav .active > a,
.sc-nav ul.mod-menu > li.current > a, .sc-nav ul.mod-menu > li.active > a { color: var(--sc-jade-600); }
.sc-nav .current > a::after, .sc-nav ul.mod-menu > li.current > a::after {
  content: ""; display: block; block-size: 2px; inline-size: 18px;
  background: var(--sc-jade-500); border-radius: 2px; margin: 3px auto 0;
}

/* Dropdowns */
.sc-nav li > ul, .sc-nav ul.mod-menu ul {
  position: absolute; inset-inline-start: 0; top: calc(100% + 8px);
  min-inline-size: 232px; display: block; flex-direction: column; gap: 0;
  background: var(--sc-white);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-r);
  box-shadow: var(--sc-shadow-2);
  padding: .45rem;
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity .18s var(--sc-ease), translate .18s var(--sc-ease), visibility .18s;
  z-index: 20;
}
.sc-nav li:hover > ul, .sc-nav li:focus-within > ul,
.sc-nav ul.mod-menu li:hover > ul, .sc-nav ul.mod-menu li:focus-within > ul {
  opacity: 1; visibility: visible; translate: 0 0;
}
.sc-nav li > ul a { padding: .55rem .7rem; font-weight: 500; font-size: .93rem; }
.sc-nav li > ul li { inline-size: 100%; }

.sc-nav__toggle {
  display: none; align-items: center; justify-content: center;
  inline-size: 46px; block-size: 46px; flex: none;
  border: 1px solid var(--sc-line); border-radius: var(--sc-r-sm);
  background: var(--sc-white); color: var(--sc-pine-900); cursor: pointer;
}
.sc-nav__toggle svg { inline-size: 22px; block-size: 22px; }

/* Off-canvas drawer */
.sc-drawer {
  position: fixed; inset: 0; z-index: 1200;
  visibility: hidden; pointer-events: none;
}
.sc-drawer.is-open { visibility: visible; pointer-events: auto; }
.sc-drawer__scrim {
  position: absolute; inset: 0; background: rgba(12,39,35,.5);
  opacity: 0; transition: opacity .25s var(--sc-ease);
}
.sc-drawer.is-open .sc-drawer__scrim { opacity: 1; }
.sc-drawer__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  inline-size: min(88vw, 380px);
  background: var(--sc-white);
  padding: 1.25rem 1.35rem 6rem;
  overflow-y: auto;
  translate: 100% 0;
  transition: translate .3s var(--sc-ease);
  box-shadow: var(--sc-shadow-2);
}
.sc-drawer.is-open .sc-drawer__panel { translate: 0 0; }
.sc-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 1.25rem; }
.sc-drawer__close {
  inline-size: 44px; block-size: 44px; border-radius: var(--sc-r-sm);
  border: 1px solid var(--sc-line); background: var(--sc-porcelain);
  display: grid; place-items: center; cursor: pointer; color: var(--sc-pine-900);
}
.sc-drawer ul, .sc-drawer ul.mod-menu { list-style: none; margin: 0 0 1.5rem; padding: 0; display: block; }
.sc-drawer li + li { border-block-start: 1px solid var(--sc-line); }
.sc-drawer a, .sc-drawer ul.mod-menu > li > a {
  display: block; padding: .95rem .25rem;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.12rem;
  color: var(--sc-pine-900); text-decoration: none;
}
.sc-drawer a:hover { color: var(--sc-jade-600); }
.sc-drawer ul ul { margin: 0 0 .5rem; padding-inline-start: .9rem; }
.sc-drawer ul ul a, .sc-drawer ul.mod-menu ul a { font-family: var(--sc-font-body); font-size: .98rem; font-weight: 500; padding: .6rem .25rem; }

@media (max-width: 991px) {
  .sc-header__nav { display: none; }
  .sc-nav__toggle { display: inline-flex; }
  .sc-header__actions .sc-btn--book { display: none; }
}

/* ---------- 6. HERO + THE ARCH ------------------------------------------ */
.sc-hero {
  position: relative;
  background: var(--sc-pine-800);
  color: var(--sc-ink-on-dark);
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(3rem, 1.5rem + 5vw, 5.5rem);
  overflow: hidden;
}
/* Ambient light, as if from an overhead operatory lamp */
.sc-hero::before {
  content: ""; position: absolute; inset-block-start: -34%; inset-inline-end: -8%;
  inline-size: min(760px, 78vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(121,214,188,.19), transparent 62%);
  pointer-events: none;
}
.sc-hero__inner {
  position: relative;
  display: grid; align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}
.sc-hero h1 { color: var(--sc-white); }
.sc-hero h1 em {
  font-style: normal;
  color: var(--sc-mint-400);
}
.sc-hero__sub {
  font-size: var(--sc-step-1); line-height: 1.55;
  color: var(--sc-muted-on-dark);
  max-inline-size: 46ch; margin-block: 0 2rem;
}
.sc-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.sc-hero__note {
  margin-block-start: 1.5rem;
  font-family: var(--sc-font-mono); font-size: .78rem;
  color: var(--sc-muted-on-dark);
  display: flex; align-items: center; gap: .5rem;
}
.sc-hero__note svg { inline-size: 15px; block-size: 15px; color: var(--sc-mint-400); flex: none; }

@media (max-width: 991px) {
  .sc-hero__inner { grid-template-columns: 1fr; }
  .sc-hero__sub { max-inline-size: none; }
}

/* The arch. This is the template's one bold move: instead of a stock photo of
   a model smiling, the hero is the thing a dentist actually looks at. Patients
   point at what hurts and land on the right treatment page. */
.sc-archwrap { position: relative; }
.sc-arch { inline-size: 100%; block-size: auto; overflow: visible; }

.sc-arch__gum { opacity: .62; }

.sc-tooth {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
}
.sc-tooth__crown {
  fill: url(#scEnamel);
  stroke: rgba(12,39,35,.35);
  stroke-width: 1;
  transition: fill .2s var(--sc-ease), filter .2s var(--sc-ease);
}
.sc-tooth__fissure {
  fill: none; stroke: rgba(28,35,33,.22); stroke-width: 1.1; stroke-linecap: round;
  transition: stroke .2s var(--sc-ease);
}
.sc-tooth:hover .sc-tooth__crown,
.sc-tooth:focus-visible .sc-tooth__crown,
.sc-tooth.is-active .sc-tooth__crown {
  fill: var(--sc-mint-400);
  filter: drop-shadow(0 0 14px rgba(121,214,188,.65));
}
.sc-tooth:hover .sc-tooth__fissure,
.sc-tooth.is-active .sc-tooth__fissure { stroke: rgba(12,39,35,.5); }
/* Sibling teeth in the same zone light up together — the zone is the unit of
   treatment, not the individual tooth. */
.sc-tooth.is-zone .sc-tooth__crown { fill: var(--sc-mint-200); }
.sc-tooth:focus { outline: none; }
.sc-tooth:focus-visible .sc-tooth__crown { stroke: var(--sc-white); stroke-width: 2.5; }

.sc-arch__chart text {
  font-family: var(--sc-font-mono);
  font-size: 10px;
  fill: var(--sc-muted-on-dark);
  opacity: .45;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  transition: opacity .2s var(--sc-ease);
}
.sc-archwrap:hover .sc-arch__chart text { opacity: .7; }

/* Readout panel that answers the arch */
.sc-arch__readout {
  margin-block-start: -.5rem;
  background: rgba(12,39,35,.55);
  border: 1px solid var(--sc-line-dark);
  border-radius: var(--sc-r);
  padding: 1.1rem 1.3rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  min-block-size: 84px;
}
.sc-arch__readout-label {
  font-family: var(--sc-font-mono); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--sc-mint-400);
  display: block; margin-block-end: .25rem;
}
.sc-arch__readout-text {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: 1.12rem; color: var(--sc-white); line-height: 1.25;
}
.sc-arch__readout .sc-btn { margin-inline-start: auto; }
@media (max-width: 575px) { .sc-arch__readout .sc-btn { margin-inline-start: 0; inline-size: 100%; } }

/* Trust strip */
.sc-trust {
  border-block-start: 1px solid var(--sc-line-dark);
  margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-block-start: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.sc-trust__n {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-step-2); color: var(--sc-mint-400);
  line-height: 1; letter-spacing: -.03em;
}
.sc-trust__l {
  font-family: var(--sc-font-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sc-muted-on-dark); margin-block-start: .5rem; display: block;
}
@media (max-width: 767px) { .sc-trust { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; } }

/* ---------- 7. SECTIONS -------------------------------------------------- */

/* Treatments — crown-shaped cards, priced. Published prices are the single
   biggest trust lever on a dental site; hiding them costs enquiries. */
/* Fluid to the container, not to the viewport.
   The track size asks for an even Nth of the available width, but never less
   than --sc-col-min. Grid drops a column whenever that minimum stops fitting,
   so the same markup works full width, inside a 700px article column, and on a
   phone, with no breakpoints to keep in sync. Wrapping the whole thing in
   min(100%, ...) stops a single card overflowing a very narrow container. */
.sc-grid {
  display: grid;
  gap: var(--sc-gap);
  --sc-cols: 3;
  --sc-col-min: 240px;
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      min(100%, max(var(--sc-col-min), calc((100% - (var(--sc-cols) - 1) * var(--sc-gap)) / var(--sc-cols)))),
      1fr
    )
  );
}
.sc-grid--2 { --sc-cols: 2; --sc-col-min: 280px; }
.sc-grid--3 { --sc-cols: 3; --sc-col-min: 240px; }
.sc-grid--4 { --sc-cols: 4; --sc-col-min: 210px; }

@media (max-width: 480px) {
  .sc-grid { --sc-col-min: 100%; }
}

.sc-card {
  position: relative;
  background: var(--sc-white);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-r-crown);
  padding: 1.9rem 1.6rem 1.6rem;
  display: flex; flex-direction: column;
  transition: transform .22s var(--sc-ease), box-shadow .22s var(--sc-ease),
              border-color .22s var(--sc-ease);
}
.sc-card:hover, .sc-card:focus-within {
  transform: translateY(-5px);
  border-color: var(--sc-mint-400);
  box-shadow: var(--sc-shadow-2);
}
.sc-card.is-highlight {
  border-color: var(--sc-mint-400);
  box-shadow: 0 0 0 4px rgba(121,214,188,.22);
}
.sc-card__icon {
  inline-size: 46px; block-size: 46px; margin-block-end: 1.1rem;
  display: grid; place-items: center;
  border-radius: 14px 14px 5px 5px;
  background: var(--sc-mint-200); color: var(--sc-pine-800);
}
.sc-card__icon svg { inline-size: 24px; block-size: 24px; }
.sc-card h3 { font-size: var(--sc-step-1); margin-block-end: .5rem; }
.sc-card p { color: var(--sc-muted); font-size: .97rem; margin-block-end: 1.25rem; }
.sc-card__foot {
  margin-block-start: auto; padding-block-start: 1rem;
  border-block-start: 1px solid var(--sc-line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sc-card__price {
  font-family: var(--sc-font-mono); font-size: .84rem;
  color: var(--sc-pine-900); font-variant-numeric: tabular-nums;
}
.sc-card__price span { color: var(--sc-muted); display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
/* Whole card clickable, link still the accessible target */
.sc-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* Before / after — a drag comparison. Nothing sells dentistry like the result. */
.sc-ba {
  position: relative; overflow: hidden;
  border-radius: var(--sc-r);
  aspect-ratio: 4 / 3;
  background: var(--sc-porcelain-2);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}
.sc-ba img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sc-ba__after { clip-path: inset(0 0 0 var(--sc-ba-pos, 50%)); }
.sc-ba__handle {
  position: absolute; inset-block: 0; inset-inline-start: var(--sc-ba-pos, 50%);
  inline-size: 3px; background: var(--sc-white);
  box-shadow: 0 0 0 1px rgba(12,39,35,.18);
  pointer-events: none;
}
.sc-ba__grip {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  inline-size: 46px; block-size: 46px; border-radius: 50%;
  background: var(--sc-white); color: var(--sc-pine-800);
  display: grid; place-items: center; box-shadow: var(--sc-shadow-2);
}
.sc-ba__tag {
  position: absolute; bottom: 12px;
  font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sc-white);
  background: rgba(12,39,35,.72); padding: .3rem .6rem; border-radius: var(--sc-r-sm);
}
.sc-ba__tag--b { left: 12px; }
.sc-ba__tag--a { right: 12px; }
.sc-ba__range {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}

/* Team — registration numbers in mono, because a real patient checks them */
.sc-person { text-align: left; }
.sc-person__photo {
  border-radius: var(--sc-r-crown);
  overflow: hidden; aspect-ratio: 4 / 5; background: var(--sc-porcelain-2);
  margin-block-end: 1.1rem;
}
.sc-person__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .5s var(--sc-ease); }
.sc-person:hover .sc-person__photo img { scale: 1.04; }
.sc-person h3 { font-size: var(--sc-step-1); margin-block-end: .15rem; }
.sc-person__role { color: var(--sc-jade-600); font-weight: 700; font-size: .94rem; }
.sc-person__reg {
  font-family: var(--sc-font-mono); font-size: .74rem; color: var(--sc-muted);
  margin-block-start: .5rem; display: block; letter-spacing: .04em;
}
.sc-person__bio { font-size: .95rem; color: var(--sc-muted); margin-block-start: .7rem; }

/* Reassurance band — anxiety is the number one reason people avoid a dentist,
   so it gets a full band rather than a bullet. */
.sc-band { background: var(--sc-pine-800); color: var(--sc-ink-on-dark); }
.sc-band__inner {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center;
}
@media (max-width: 861px) { .sc-band__inner { grid-template-columns: 1fr; } }
.sc-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sc-check li { display: flex; gap: .85rem; align-items: flex-start; }
.sc-check svg { inline-size: 22px; block-size: 22px; color: var(--sc-mint-400); flex: none; margin-block-start: 2px; }
.sc-check strong { display: block; color: var(--sc-white); font-family: var(--sc-font-display); font-size: 1.05rem; }
.sc-check span { color: var(--sc-muted-on-dark); font-size: .95rem; }

/* Fees table */
.sc-fees { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sc-fees caption { text-align: left; color: var(--sc-muted); font-size: .9rem; padding-block-end: 1rem; }
.sc-fees th, .sc-fees td { padding: 1rem .75rem; text-align: left; border-block-end: 1px solid var(--sc-line); }
.sc-fees thead th {
  font-family: var(--sc-font-mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sc-muted); font-weight: 500;
  border-block-end-width: 2px; border-block-end-color: var(--sc-pine-800);
}
.sc-fees tbody th { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.02rem; color: var(--sc-pine-900); }
.sc-fees td:last-child, .sc-fees th:last-child { text-align: right; }
.sc-fees .sc-fees__amt { font-family: var(--sc-font-mono); font-weight: 500; }
.sc-fees tbody tr:hover { background: var(--sc-white); }
.sc-fees__wrap { overflow-x: auto; }

/* Reviews */
.sc-quote {
  background: var(--sc-white); border: 1px solid var(--sc-line);
  border-radius: var(--sc-r); padding: 1.75rem 1.6rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.sc-quote blockquote { margin: 0; font-size: 1.04rem; line-height: 1.6; color: var(--sc-graphite); }
.sc-quote figcaption { margin-block-start: auto; display: flex; align-items: center; gap: .75rem; }
.sc-quote__who { font-weight: 700; font-size: .95rem; }
.sc-quote__meta { font-family: var(--sc-font-mono); font-size: .72rem; color: var(--sc-muted); }
.sc-stars { display: inline-flex; gap: 2px; color: #E0A32E; }
.sc-stars svg { inline-size: 16px; block-size: 16px; }

/* FAQ */
.sc-faq { border-block-start: 1px solid var(--sc-line); }
.sc-faq details { border-block-end: 1px solid var(--sc-line); }
.sc-faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem .25rem; cursor: pointer; list-style: none;
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-step-1); color: var(--sc-pine-900);
}
.sc-faq summary::-webkit-details-marker { display: none; }
.sc-faq summary::after {
  content: ""; flex: none; inline-size: 22px; block-size: 22px; margin-block-start: 4px;
  background: currentColor; opacity: .55;
  transition: rotate .25s var(--sc-ease);
  -webkit-mask: no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask: no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.sc-faq details[open] summary::after { rotate: 135deg; }
.sc-faq details > div { padding: 0 3rem 1.5rem .25rem; color: var(--sc-muted); }

/* Opening hours */
.sc-hours { list-style: none; margin: 0; padding: 0; font-family: var(--sc-font-mono); font-size: .9rem; }
.sc-hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .6rem; border-block-end: 1px dashed var(--sc-line);
}
.sc-hours li:last-child { border-block-end: 0; }
.sc-hours .is-today { color: var(--sc-jade-600); font-weight: 600; }
.sc-hours .is-closed { color: var(--sc-muted); }
.sc-on-dark .sc-hours li { border-block-end-color: var(--sc-line-dark); }
.sc-on-dark .sc-hours .is-today { color: var(--sc-mint-400); }

/* Booking panel */
.sc-book {
  background: var(--sc-white); border: 1px solid var(--sc-line);
  border-radius: var(--sc-r); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--sc-shadow-1);
}
.sc-book__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (max-width: 861px) { .sc-book__grid { grid-template-columns: 1fr; } }

/* ---------- 8. FOOTER + STICKY ACTION BAR -------------------------------- */
.sc-footer { background: var(--sc-pine-900); color: var(--sc-muted-on-dark); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0; }
.sc-footer h4 {
  font-family: var(--sc-font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--sc-mint-400); margin-block-end: 1.1rem;
}
.sc-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.5rem; }
@media (max-width: 991px) { .sc-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.25rem; } }
@media (max-width: 575px) { .sc-footer__grid { grid-template-columns: 1fr; } }
.sc-footer ul, .sc-footer ul.mod-menu { list-style: none; margin: 0; padding: 0; display: block; }
.sc-footer ul.mod-menu > li > a { display: inline; padding: 0; font-weight: 400; }
.sc-footer li { margin-block-end: .55rem; }
.sc-footer a { color: var(--sc-muted-on-dark); text-decoration: none; }
.sc-footer a:hover { color: var(--sc-mint-200); text-decoration: underline; }
.sc-footer .sc-brand__name { color: var(--sc-white); }
.sc-footer .sc-brand__tag { color: var(--sc-muted-on-dark); }
.sc-footer__legal {
  margin-block-start: 3rem; padding-block: 1.5rem;
  border-block-start: 1px solid var(--sc-line-dark);
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; align-items: center;
  font-family: var(--sc-font-mono); font-size: .74rem;
}
.sc-footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-inline-start: auto; }
.sc-footer__legal li { margin: 0; }

.sc-social { display: flex; gap: .5rem; }
.sc-social a {
  inline-size: 40px; block-size: 40px; display: grid; place-items: center;
  border: 1px solid var(--sc-line-dark); border-radius: 50%;
  transition: background-color .18s var(--sc-ease), border-color .18s var(--sc-ease);
}
.sc-social a:hover { background: var(--sc-jade-600); border-color: var(--sc-jade-600); color: var(--sc-white); }
.sc-social svg { inline-size: 18px; block-size: 18px; }

/* Mobile action bar — call and book, always reachable by thumb. */
.sc-actionbar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 950;
  display: none; gap: .6rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(246,247,244,.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--sc-line);
}
.sc-actionbar .sc-btn { flex: 1; }
@media (max-width: 767px) {
  .sc-actionbar { display: flex; }
  body { padding-block-end: 82px; }
}

/* ---------- 9. JOOMLA CORE COMPONENTS ------------------------------------ */
.sc-page { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.sc-page__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3rem); }
.sc-page--sidebar-right .sc-page__inner { grid-template-columns: minmax(0, 1fr) 320px; }
.sc-page--sidebar-left .sc-page__inner { grid-template-columns: 320px minmax(0, 1fr); }
.sc-page--both .sc-page__inner { grid-template-columns: 280px minmax(0, 1fr) 280px; }
@media (max-width: 991px) {
  .sc-page--sidebar-right .sc-page__inner,
  .sc-page--sidebar-left .sc-page__inner,
  .sc-page--both .sc-page__inner { grid-template-columns: minmax(0, 1fr); }
  .sc-sidebar { order: 2; }
}

/* Page heading band */
.sc-pagehead { background: var(--sc-pine-800); color: var(--sc-ink-on-dark); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.sc-pagehead h1 { color: var(--sc-white); font-size: var(--sc-step-4); margin-block-end: 0; }

/* Breadcrumbs */
.mod-breadcrumbs, .breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  font-family: var(--sc-font-mono); font-size: .76rem; color: var(--sc-muted);
}
.breadcrumb-item + .breadcrumb-item::before { content: "/"; margin-inline-end: .5rem; opacity: .55; }
.breadcrumb a { color: var(--sc-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--sc-jade-600); }
.sc-pagehead .breadcrumb, .sc-pagehead .breadcrumb a { color: var(--sc-muted-on-dark); }

/* Articles */
/* 72ch is the right measure for body copy, but it was also capping any
   SmileCraft block placed inside an article, which is why a three-card grid
   stopped halfway across the page. Articles that contain a block go full
   width, and the reading measure moves onto the prose itself. */
.com-content-article, .item-page { max-inline-size: 72ch; }

.com-content-article:has(.sc-section),
.item-page:has(.sc-section) { max-inline-size: none; }

.com-content-article:has(.sc-section) > p,
.com-content-article:has(.sc-section) > ul,
.com-content-article:has(.sc-section) > ol,
.com-content-article:has(.sc-section) > h2,
.com-content-article:has(.sc-section) > h3,
.item-page:has(.sc-section) > p,
.item-page:has(.sc-section) > ul,
.item-page:has(.sc-section) > ol,
.item-page:has(.sc-section) > h2,
.item-page:has(.sc-section) > h3 { max-inline-size: 72ch; }

/* Escape hatch for any container that still constrains a block. */
.sc-section--bleed {
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}
.com-content-article__body img, .item-page img { border-radius: var(--sc-r); margin-block: 1.5rem; }
.article-info {
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
  font-family: var(--sc-font-mono); font-size: .76rem; color: var(--sc-muted);
  margin-block-end: 1.75rem; padding: 0; list-style: none;
}
.article-info dd { margin: 0; }
.sc-content blockquote, .item-page blockquote {
  margin: 2rem 0; padding: .25rem 0 .25rem 1.5rem;
  border-inline-start: 3px solid var(--sc-mint-400);
  font-size: var(--sc-step-1); line-height: 1.5; color: var(--sc-pine-800);
}
.readmore { margin-block-start: 1.25rem; }
.blog .items-row { display: grid; gap: var(--sc-gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-block-end: var(--sc-gap); }
.blog .item { background: var(--sc-white); border: 1px solid var(--sc-line); border-radius: var(--sc-r); padding: 1.5rem; }
.page-header h2 { font-size: var(--sc-step-2); }
.page-header h2 a { color: inherit; text-decoration: none; }
.page-header h2 a:hover { color: var(--sc-jade-600); }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 2.5rem 0 0; }
.pagination a, .pagination span {
  display: grid; place-items: center; min-inline-size: 44px; min-block-size: 44px;
  padding-inline: .6rem; border: 1px solid var(--sc-line); border-radius: var(--sc-r-sm);
  background: var(--sc-white); color: var(--sc-graphite); text-decoration: none;
  font-family: var(--sc-font-mono); font-size: .85rem;
}
.pagination a:hover { border-color: var(--sc-jade-500); color: var(--sc-jade-600); }
.pagination .active span { background: var(--sc-pine-800); border-color: var(--sc-pine-800); color: var(--sc-white); }

/* Forms — Joomla core classes plus our own */
.sc-field { margin-block-end: 1.1rem; }
label, .control-label label { display: block; font-weight: 700; font-size: .9rem; margin-block-end: .4rem; color: var(--sc-pine-900); }
label .star, .required .star { color: var(--sc-alert); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="date"], input[type="time"],
input[type="number"], select, textarea, .form-control, .inputbox {
  inline-size: 100%;
  font-family: inherit; font-size: 1rem; color: var(--sc-graphite);
  padding: .85rem 1rem; min-block-size: 50px;
  background: var(--sc-white);
  border: 1.5px solid var(--sc-line); border-radius: var(--sc-r-sm);
  transition: border-color .16s var(--sc-ease), box-shadow .16s var(--sc-ease);
}
textarea, textarea.form-control { min-block-size: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--sc-jade-500);
  box-shadow: 0 0 0 4px rgba(42,136,115,.14);
  outline: none;
}
input::placeholder, textarea::placeholder { color: #9AA5A1; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6663' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 17px; padding-inline-end: 2.75rem; }
.sc-check-inline { display: flex; align-items: flex-start; gap: .65rem; }
.sc-check-inline input { inline-size: 20px; block-size: 20px; min-block-size: 0; flex: none; margin-block-start: 3px; accent-color: var(--sc-jade-600); }
.sc-check-inline label { font-weight: 500; font-size: .88rem; color: var(--sc-muted); margin: 0; }
.btn, button.btn, .btn-primary {
  font-family: var(--sc-font-body); font-weight: 700;
  padding: .9rem 1.6rem; min-block-size: 50px;
  border-radius: var(--sc-r-pill); border: 2px solid var(--sc-jade-600);
  background: var(--sc-jade-600); color: var(--sc-white); cursor: pointer;
}
.btn:hover, .btn-primary:hover { background: var(--sc-pine-800); border-color: var(--sc-pine-800); color: var(--sc-white); }
.btn-secondary { background: transparent; color: var(--sc-pine-800); border-color: var(--sc-line); }

/* System messages */
#system-message-container { margin-block-end: 1.5rem; }
.alert {
  border: 1px solid var(--sc-line); border-inline-start-width: 4px;
  border-radius: var(--sc-r-sm); padding: 1rem 1.25rem; background: var(--sc-white);
  margin-block-end: 1rem;
}
.alert-success { border-inline-start-color: var(--sc-jade-500); }
.alert-info { border-inline-start-color: var(--sc-pine-700); }
.alert-warning { border-inline-start-color: #D89B2C; }
.alert-danger, .alert-error { border-inline-start-color: var(--sc-alert); }
.alert-heading { font-family: var(--sc-font-display); font-size: 1.05rem; margin-block-end: .25rem; }
.joomla-alert--close, .alert .btn-close { background: none; border: 0; float: inline-end; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--sc-muted); }

/* Modules in sidebars and footers */
.sc-module { margin-block-end: 2rem; }
.sc-sidebar .sc-module {
  background: var(--sc-white); border: 1px solid var(--sc-line);
  border-radius: var(--sc-r); padding: 1.5rem;
}
.sc-module__title { font-size: var(--sc-step-1); margin-block-end: 1rem; }
.sc-sidebar ul { list-style: none; margin: 0; padding: 0; }
.sc-sidebar li { padding-block: .5rem; border-block-end: 1px solid var(--sc-line); }
.sc-sidebar li:last-child { border-block-end: 0; }
.sc-sidebar a { text-decoration: none; color: var(--sc-graphite); font-weight: 500; }
.sc-sidebar a:hover { color: var(--sc-jade-600); }

/* Search */
.mod-finder input, .search input { border-radius: var(--sc-r-pill); padding-inline-start: 1.25rem; }

/* Offline + error pages */
.sc-shell {
  min-block-size: 100dvh; display: grid; place-items: center;
  background: var(--sc-pine-800); color: var(--sc-ink-on-dark);
  padding: 2rem; text-align: center;
}
.sc-shell__box { max-inline-size: 520px; }
.sc-shell h1 { color: var(--sc-white); }
.sc-shell__code {
  font-family: var(--sc-font-mono); font-size: .8rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sc-mint-400); margin-block-end: 1rem; display: block;
}

/* ---------- 10. UTILITIES ------------------------------------------------ */
.sc-vh {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sc-center { text-align: center; }
.sc-stack-sm > * + * { margin-block-start: .75rem; }
.sc-stack > * + * { margin-block-start: 1.5rem; }
.sc-stack-lg > * + * { margin-block-start: 2.5rem; }
.sc-mt-0 { margin-block-start: 0; }
.sc-flex { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Reveal on scroll */
.sc-reveal { opacity: 0; translate: 0 18px; transition: opacity .6s var(--sc-ease), translate .6s var(--sc-ease); }
.sc-reveal.is-in { opacity: 1; translate: 0 0; }

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

@media (prefers-contrast: more) {
  :root { --sc-line: #98A5A0; --sc-muted: #3C4644; }
}

@media print {
  .sc-topbar, .sc-header, .sc-actionbar, .sc-footer, .sc-drawer, .sc-archwrap { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ---------- 11. TWO OFFICES ---------------------------------------------- *
 * The practice runs Eastchester and Throgs Neck on different numbers and
 * different hours. A patient who calls the wrong office is a lost booking, so
 * the choice is explicit, sticky, and repeated wherever a number appears.    */
.sc-locswitch {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(198,239,226,.10);
  border: 1px solid var(--sc-line-dark);
  border-radius: var(--sc-r-pill);
  padding: 2px;
}
.sc-locswitch button {
  font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .06em;
  padding: .3rem .8rem; border: 0; border-radius: var(--sc-r-pill);
  background: transparent; color: var(--sc-muted-on-dark); cursor: pointer;
  white-space: nowrap; transition: background-color .16s var(--sc-ease), color .16s var(--sc-ease);
}
.sc-locswitch button:hover { color: var(--sc-white); }
.sc-locswitch button[aria-pressed="true"] { background: var(--sc-mint-400); color: var(--sc-pine-900); font-weight: 500; }

/* Light-background variant for the locations section */
.sc-locswitch--light { background: var(--sc-white); border-color: var(--sc-line); }
.sc-locswitch--light button { color: var(--sc-muted); font-size: .78rem; padding: .45rem 1rem; }
.sc-locswitch--light button:hover { color: var(--sc-pine-900); }
.sc-locswitch--light button[aria-pressed="true"] { background: var(--sc-pine-800); color: var(--sc-white); }

/* Office cards */
.sc-office {
  background: var(--sc-white); border: 1px solid var(--sc-line);
  border-radius: var(--sc-r-crown); padding: 1.75rem 1.6rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color .2s var(--sc-ease), box-shadow .2s var(--sc-ease);
}
.sc-office.is-active { border-color: var(--sc-mint-400); box-shadow: 0 0 0 4px rgba(121,214,188,.2); }
.sc-office__name { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-step-1); color: var(--sc-pine-900); }
.sc-office__where { font-family: var(--sc-font-mono); font-size: .82rem; color: var(--sc-muted); line-height: 1.6; }
.sc-office__tel {
  font-family: var(--sc-font-mono); font-size: 1.18rem; font-weight: 500;
  color: var(--sc-pine-900); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
}
.sc-office__tel:hover { color: var(--sc-jade-600); }
.sc-office__tag {
  font-family: var(--sc-font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sc-jade-600); background: var(--sc-mint-200);
  padding: .25rem .6rem; border-radius: var(--sc-r-pill); align-self: flex-start;
}

/* A capability panel — used for the in-house lab and sedation claims */
.sc-spec {
  display: grid; gap: 1.25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.sc-spec__item { border-block-start: 2px solid var(--sc-line-dark); padding-block-start: 1rem; }
.sc-spec__k {
  font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sc-mint-400); display: block; margin-block-end: .4rem;
}
.sc-spec__v { color: var(--sc-ink-on-dark); font-size: .96rem; line-height: 1.55; }
.sc-spec__v strong { color: var(--sc-white); }

/* Placeholder frame so a missing photo still reads as a deliberate slot */
.sc-photo { border-radius: var(--sc-r); overflow: hidden; background: var(--sc-porcelain-2); }
.sc-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sc-photo--wide { aspect-ratio: 3 / 2; }
.sc-photo--square { aspect-ratio: 1; }

/* ---------- 12. HEADER FITTING ------------------------------------------- *
 * The Boiano header carries a long practice name, a two-office tagline, a
 * live phone number and two buttons. Nothing here may be flex:none or the
 * row overflows the container before the nav breakpoint is reached.         */
.sc-header__inner { min-inline-size: 0; }

.sc-brand {
  flex: 0 1 auto;
  min-inline-size: 0;
}
.sc-brand__text { min-inline-size: 0; }
.sc-brand__name, .sc-brand__tag {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sc-header__nav { min-inline-size: 0; }
.sc-header__actions { min-inline-size: 0; flex: 0 0 auto; }

/* The nav needs more room once the treatments list grows, so hand over to the
   drawer earlier than the usual tablet breakpoint. */
@media (max-width: 1200px) {
  .sc-header__nav { display: none; }
  .sc-nav__toggle { display: inline-flex; }
}
/* Between the nav breakpoint and mobile, keep Request but drop the number:
   the top bar still carries it, and the action bar takes over on phones. */
@media (max-width: 1200px) {
}
@media (max-width: 767px) {
  .sc-brand__tag { display: none; }
  .sc-header__actions .sc-btn--book { display: none; }
}
@media (max-width: 380px) {
  .sc-brand__name { font-size: 1.05rem; }
}

/* A drawer parked off-screen must never contribute to page width */
.sc-drawer { overflow: hidden; }

/* Office cards stack their own hours, so let the grid breathe on tablets */
@media (max-width: 700px) { .sc-office { padding: 1.5rem 1.25rem; } }


/* ---------- 13. IMAGE SLOTS ---------------------------------------------- *
 * Every photograph is a CSS custom property set from Template Options, with a
 * placeholder as the fallback value. That means the practice picks images in
 * the Joomla media picker rather than editing markup, and an unfilled slot
 * still looks deliberate instead of broken.
 * Background images carry no alt text, so each slot in the markup uses
 * role="img" with an aria-label, which is the correct accessible equivalent. */
:root {
  --sc-img-placeholder: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNjAwIiB3aWR0aD0iNjAwIiBoZWlnaHQ9IjYwMCI+PHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSI2MDAiIGZpbGw9IiNERkU2REYiLz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiMxMDMxMkMiIHN0cm9rZS1vcGFjaXR5PSIuMzQiIHN0cm9rZS13aWR0aD0iMi41Ij48Y2lyY2xlIGN4PSIzMDAiIGN5PSIyNjIiIHI9IjI2Ii8+PHBhdGggZD0iTTI4OSAyNjJoMjJNMzAwIDI1MXYyMiIvPjwvZz48dGV4dCB4PSIzMDAiIHk9IjMzMCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyMCIgZmlsbD0iIzEwMzEyQyIgZmlsbC1vcGFjaXR5PSIuNjgiPkFkZCBhbiBpbWFnZTwvdGV4dD48dGV4dCB4PSIzMDAiIHk9IjM1NiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIxNSIgZmlsbD0iIzEwMzEyQyIgZmlsbC1vcGFjaXR5PSIuNDIiPlRlbXBsYXRlIE9wdGlvbnMgJiM4NTk0OyBJbWFnZXM8L3RleHQ+PC9zdmc+");
}

.sc-photo,
.sc-person__photo,
.sc-ba__layer {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--sc-porcelain-2);
}

.sc-photo--lab { background-image: var(--sc-img-lab, var(--sc-img-placeholder)); }

.sc-person--dr1 .sc-person__photo  { background-image: var(--sc-img-dr1, var(--sc-img-placeholder)); }
.sc-person--dr2 .sc-person__photo  { background-image: var(--sc-img-dr2, var(--sc-img-placeholder)); }
.sc-person--team .sc-person__photo { background-image: var(--sc-img-team, var(--sc-img-placeholder)); }

/* Before / after layers replace the two <img> elements */
.sc-ba__layer { position: absolute; inset: 0; }
.sc-ba__layer--before { background-image: var(--sc-img-before, var(--sc-img-placeholder)); }
.sc-ba__layer--after {
  background-image: var(--sc-img-after, var(--sc-img-placeholder));
  clip-path: inset(0 0 0 var(--sc-ba-pos, 50%));
}

/* Logo picked in Template Options, sized to the header rather than the file */
.sc-brand__logo {
  max-block-size: 48px;
  inline-size: auto;
  display: block;
}
@media (max-width: 767px) { .sc-brand__logo { max-block-size: 40px; } }

/* ---------- 14. MODULE CARD MEDIA ---------------------------------------- *
 * Card and office photos are real <img> elements rather than CSS backgrounds,
 * because a background image carries no alt text and is not indexed by image
 * search. Width and height attributes are set in the markup so the browser
 * reserves the space before the file arrives, which keeps layout shift at zero. */
.sc-card__media {
  inline-size: calc(100% + 3.2rem);
  margin: -1.9rem -1.6rem 1.2rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 24px 24px 0 0;
  background: var(--sc-porcelain-2);
}
.sc-office .sc-card__media {
  inline-size: calc(100% + 3.2rem);
  margin: -1.75rem -1.6rem 0.25rem;
}
@media (max-width: 700px) {
  .sc-office .sc-card__media { inline-size: calc(100% + 2.5rem); margin: -1.5rem -1.25rem .25rem; }
}