/* =========================================================================
   Dentora — Component styles
   -------------------------------------------------------------------------
   One section per component. These were previously scoped per component by
   the build; the class names are already namespaced (BEM-style) so no two
   sections define the same selector, and they were merged into one plain
   stylesheet rather than kept apart by generated attributes.

   Load order: after the global stylesheets, before any page stylesheet.
   ========================================================================= */

/* ----------------------------------------------------------------------
   Section — page section wrapper and surfaces
   ---------------------------------------------------------------------- */
  .section--no-pad {
    padding-block: 0;
  }

/* ----------------------------------------------------------------------
   SectionHeading — eyebrow, title, intro
   ---------------------------------------------------------------------- */
  .sh {
    display: grid;
    gap: var(--space-6);
    margin-block-end: var(--section-gap);
  }

  .sh__main {
    display: grid;
    gap: var(--space-3);
  }

  /* Eyebrow: uppercase, tracked, teal. Rendered as a pill badge by
     default — the one place --radius-pill is used. */
  .sh__eyebrow {
    margin: 0;
    color: var(--color-teal-700);
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-ui);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
  }

  .sh__eyebrow--badge {
    justify-self: start;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-teal-100);
    border-radius: var(--radius-pill);
  }

  .sh__title {
    margin: 0;
    max-width: 22ch;
  }

  .sh__intro {
    margin: 0;
    max-width: var(--measure);
    color: var(--color-text-muted);
    font-size: var(--text-body-lg);
  }

  .sh__aside {
    display: grid;
    gap: var(--space-5);
    align-content: start;
  }

  /* Split layout: heading left, intro/action right from 900px up. */
  @media (min-width: 900px) {
    .sh--split {
      grid-template-columns: 1.1fr 1fr;
      gap: var(--space-16);
      align-items: end;
    }

    .sh--split .sh__title {
      max-width: 18ch;
    }
  }

  /* Centred variant */
  .sh--center {
    justify-items: center;
    text-align: center;
  }

  .sh--center .sh__eyebrow--badge {
    justify-self: center;
  }

  .sh--center .sh__title,
  .sh--center .sh__intro {
    margin-inline: auto;
  }

  /* On navy sections the eyebrow badge needs its own treatment: the pale
     teal tint has no contrast against navy. */
  .on-dark .sh__eyebrow--badge {
    background-color: rgba(255, 255, 255, 0.1);
    color: #7fd7d1;
  }

  .on-dark .sh__intro {
    color: var(--color-text-on-dark-muted);
  }

/* ----------------------------------------------------------------------
   Prose — long-form text blocks
   ---------------------------------------------------------------------- */
  .prose {
    max-width: var(--measure);
    color: var(--color-text-body);
  }

  .prose > * + * {
    margin-block-start: var(--space-5);
  }

  .prose h2 {
    margin-block-start: var(--space-10);
    font-size: var(--text-h3);
  }

  .prose h2:first-child {
    margin-block-start: 0;
  }

  .prose h3 {
    margin-block-start: var(--space-8);
    font-size: var(--text-h4);
  }

  .prose p,
  .prose li {
    color: var(--color-text-muted);
    line-height: var(--leading-body);
  }

  .prose ul,
  .prose ol {
    display: grid;
    gap: var(--space-2);
    padding-left: 1.25rem;
  }

  .prose li::marker {
    color: var(--color-teal);
  }

  .prose strong {
    color: var(--color-navy);
  }

  .prose a {
    color: var(--color-teal-700);
  }

/* ----------------------------------------------------------------------
   Button — the one button component
   ---------------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 50px;
    /* Never below the 44px comfortable touch target. */
    min-width: var(--touch-target);
    padding: 14px 24px;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-button);
    font-family: var(--font-heading);
    font-size: var(--text-button);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    /* Long labels wrap rather than forcing the button wider than its
       container. "Start with an Appointment Request" measured 284px inside
       a 284px column at 320px — it fitted only by coincidence, and any
       longer label or larger text would have overflowed the page. */
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
    /* Never wider than the space available to it. */
    max-width: 100%;
    cursor: pointer;
    transition:
      background-color var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out),
      color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out);
  }

  /* A 1.02 lift on hover, per the motion brief. Deliberately small: the
     button should feel responsive, not spring. */
  .btn:hover:not([aria-disabled='true']):not([aria-busy='true']) {
    transform: scale(1.02);
  }

  .btn:active:not([aria-disabled='true']) {
    transform: scale(0.99);
    transition-duration: 80ms;
  }

  .btn--lg {
    min-height: 56px;
    padding: 16px 30px;
    font-size: var(--text-body);
  }

  .btn--block {
    width: 100%;
  }

  /* Trailing icon nudges 3px right on hover — the only motion here, and
     it stays within the "small icon interaction" the brief allows. */
  /* Icons keep their size while the label wraps beside them. */
  .btn__icon {
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-out);
  }

  .btn__icon-before {
    flex-shrink: 0;
  }

  .btn__label {
    min-width: 0;
  }

  .btn:hover .btn__icon {
    transform: translateX(3px);
  }

  /* ---- Primary ----
     Brand teal fill with a NAVY label. White on #28A9A1 is only 2.88:1 and
     fails WCAG AA; navy on the same fill is 4.70:1 and passes, so the brand
     colour is preserved exactly and only the label darkens.
     On hover the fill darkens to #1A736E and the label flips to white
     (5.64:1), which keeps the state change obvious as well as accessible. */
  .btn--primary {
    background-color: var(--color-teal);
    color: var(--color-navy);
  }

  .btn--primary:hover {
    background-color: var(--color-teal-700);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
  }

  /* ---- Secondary ---- */
  .btn--secondary {
    background-color: transparent;
    border-color: var(--color-navy);
    color: var(--color-navy);
  }

  .btn--secondary:hover {
    background-color: var(--color-navy);
    color: var(--color-white);
  }

  /* ---- Ghost ---- */
  .btn--ghost {
    padding-inline: var(--space-3);
    background-color: transparent;
    color: var(--color-navy);
  }

  .btn--ghost:hover {
    background-color: var(--color-teal-100);
    color: var(--color-navy);
  }

  /* ---- On dark ---- */
  .btn--on-dark {
    background-color: var(--color-white);
    color: var(--color-navy);
  }

  .btn--on-dark:hover {
    background-color: var(--color-off-white);
    color: var(--color-navy);
  }

  /* Inert state: the clinic detail behind this action is still a
     placeholder. Not focusable, clearly non-interactive. */
  .btn[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .btn:hover .btn__icon,
    .btn:hover,
    .btn:active {
      transform: none;
    }
  }

/* ----------------------------------------------------------------------
   Logo
   ---------------------------------------------------------------------- */
  .logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* Keeps the logo link a comfortable target even at small heights. */
    min-height: var(--touch-target);
    text-decoration: none;
    border-radius: var(--radius-sm);
  }

  .logo img {
    display: block;
    width: auto;
    object-fit: contain;
    background: none;
  }

  /* White plate so the navy wordmark stays legible on dark surfaces,
     without altering the logo artwork. */
  .logo--on-dark {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-white);
    border-radius: var(--radius-button);
  }

/* ----------------------------------------------------------------------
   Breadcrumb
   ---------------------------------------------------------------------- */
  .crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-small);
  }

  .crumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .crumbs__link {
    display: inline-flex;
    align-items: center;
    /* Full 44px tap target without disturbing the inline text layout. */
    min-height: var(--touch-target);
    color: var(--color-text-muted);
    text-decoration: none;
  }

  .crumbs__link:hover {
    color: var(--color-teal-700);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .crumbs__current {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    color: var(--color-navy);
    font-weight: var(--weight-medium);
  }

  .crumbs__sep {
    color: var(--color-border-strong);
    flex-shrink: 0;
  }

  .crumbs--on-dark .crumbs__link {
    color: var(--color-text-on-dark-muted);
  }

  .crumbs--on-dark .crumbs__link:hover {
    color: var(--color-white);
  }

  .crumbs--on-dark .crumbs__current {
    color: var(--color-white);
  }

  .crumbs--on-dark .crumbs__sep {
    color: rgba(255, 255, 255, 0.4);
  }

/* ----------------------------------------------------------------------
   Field — form control, label, hint and error
   ---------------------------------------------------------------------- */
  .field {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    /* Prevents a long value from widening the grid column. */
    min-width: 0;
  }

  .field--full {
    grid-column: 1 / -1;
  }

  .field__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--color-navy);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
  }

  /* Requirement is stated in words, never by colour or a bare asterisk. */
  .field__req,
  .field__opt {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: var(--weight-regular);
  }

  .field__hint {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    line-height: var(--leading-ui);
  }

  .field__control {
    width: 100%;
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-input);
    color: var(--color-text-body);
    font-size: var(--text-body);
    transition:
      border-color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }

  textarea.field__control {
    min-height: 8rem;
    resize: vertical;
  }

  select.field__control {
    /* Native arrow varies wildly; a consistent chevron keeps the set tidy. */
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2355666F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-inline-end: var(--space-10);
  }

  .field__control:focus-visible {
    outline: none;
    border-color: var(--color-teal);
    box-shadow: var(--shadow-focus);
  }

  /* Invalid state is signalled by border, icon-free text AND the message
     below — never by colour alone. */
  .field__control[aria-invalid='true'] {
    border-color: var(--color-error);
  }

  .field__control[aria-invalid='true']:focus-visible {
    box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.18);
  }

  .field__error {
    margin: 0;
    color: var(--color-error);
    font-size: 0.8125rem;
    font-weight: var(--weight-medium);
    line-height: var(--leading-ui);
  }

  .field__error:empty {
    display: none;
  }

/* ----------------------------------------------------------------------
   Accordion
   ---------------------------------------------------------------------- */
  .acc {
    display: grid;
    gap: var(--space-3);
  }

  .acc__item {
    background-color: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition:
      border-color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }

  .acc--plain .acc__item {
    background-color: var(--color-off-white);
  }

  .acc__item:hover {
    border-color: var(--color-border-strong);
  }

  .acc__item[data-open] {
    border-color: var(--color-teal-100);
    box-shadow: var(--shadow-sm);
  }

  .acc__heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
  }

  .acc__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    /* Comfortably above the 44px target. */
    min-height: 60px;
    padding: var(--space-4) var(--space-5);
    text-align: left;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-ui);
    transition: color var(--duration-base) var(--ease-out);
  }

  .acc__trigger:hover {
    color: var(--color-teal-700);
  }

  .acc__question {
    flex: 1;
  }

  .acc__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--color-teal-700);
    background-color: var(--color-teal-100);
    border-radius: var(--radius-pill);
    transition:
      background-color var(--duration-base) var(--ease-out),
      color var(--duration-base) var(--ease-out);
  }

  .acc__item[data-open] .acc__marker {
    background-color: var(--color-teal);
    color: var(--color-white);
  }

  /* The plus rotates 45° into a cross when open. Rotation is the only
     state signal that is not colour, so it also satisfies 1.4.1. */
  .acc__plus {
    transition: transform var(--duration-dropdown) var(--ease-out);
  }

  .acc__item[data-open] .acc__plus {
    transform: rotate(45deg);
  }

  /* Height is animated via a grid-rows trick so it works without
     measuring the panel in JS. */
  .acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-dropdown) var(--ease-out);
  }

  .acc__panel[hidden] {
    display: none;
  }

  .acc__item[data-open] .acc__panel {
    grid-template-rows: 1fr;
  }

  .acc__inner {
    overflow: hidden;
  }

  .acc__answer {
    margin: 0;
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
    max-width: 68ch;
  }

/* ----------------------------------------------------------------------
   FeatureCard
   ---------------------------------------------------------------------- */
  .fcard {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
    padding: var(--space-7);
    background-color: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-card);
    transition:
      border-color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }

  .fcard:hover {
    border-color: var(--color-teal-100);
    box-shadow: var(--shadow-sm);
  }

  .fcard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-block-end: var(--space-2);
    color: var(--color-teal-700);
    background-color: var(--color-teal-100);
    border-radius: var(--radius-button);
  }

  .fcard__title {
    margin: 0;
    font-size: var(--text-body-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-navy);
    letter-spacing: -0.01em;
  }

  .fcard__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

/* ----------------------------------------------------------------------
   ServiceCard
   ---------------------------------------------------------------------- */
  .scard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    padding: var(--space-7);
    background-color: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
    transition:
      transform var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out);
  }

  .scard:hover {
    transform: translateY(-4px);
    border-color: var(--color-teal-100);
    box-shadow: var(--shadow-md);
  }

  .scard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .scard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: var(--color-teal-700);
    background-color: var(--color-teal-100);
    border-radius: var(--radius-button);
    transition:
      background-color var(--duration-base) var(--ease-out),
      color var(--duration-base) var(--ease-out);
  }

  .scard:hover .scard__icon {
    background-color: var(--color-teal);
    color: var(--color-white);
  }

  /* Kept visually quiet by size and weight rather than by a pale colour:
     #D5E0E4 measured 1.35:1 and failed WCAG AA as visible text. */
  .scard__num {
    font-family: var(--font-heading);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
  }

  .scard__title {
    margin: 0;
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
  }

  .scard__link {
    color: var(--color-navy);
    text-decoration: none;
  }

  /* Stretches the link across the whole card without nesting elements
     inside the anchor. */
  .scard__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
  }

  .scard__link:hover {
    color: var(--color-teal-700);
  }

  /* Focus ring follows the stretched link, so it outlines the whole card. */
  .scard:has(.scard__link:focus-visible) {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }

  .scard__link:focus-visible {
    outline: none;
  }

  .scard__text {
    margin: 0;
    /* Pushes the CTA to the bottom so cards in a row align. */
    flex: 1;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .scard__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-teal-700);
    font-family: var(--font-heading);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
  }

  .scard__arrow {
    transition: transform var(--duration-base) var(--ease-out);
  }

  .scard:hover .scard__arrow {
    transform: translateX(3px);
  }

  @media (prefers-reduced-motion: reduce) {
    .scard:hover {
      transform: none;
    }
    .scard:hover .scard__arrow {
      transform: none;
    }
  }

/* ----------------------------------------------------------------------
   CtaBand
   ---------------------------------------------------------------------- */
  .ctab {
    background-color: var(--color-surface-page);
    padding-block: var(--section-y);
  }

  .ctab__card {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    text-align: center;
    padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) var(--container-pad);
    background-color: var(--color-navy);
    background-image: radial-gradient(
      90% 120% at 50% 0%,
      rgba(40, 169, 161, 0.22) 0%,
      rgba(40, 169, 161, 0) 62%
    );
    border-radius: var(--radius-lg);
  }

  .ctab__eyebrow {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    color: #7fd7d1;
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    line-height: var(--leading-ui);
  }

  .ctab__title {
    margin: 0;
    max-width: 18ch;
    color: var(--color-white);
  }

  .ctab__body {
    margin: 0;
    max-width: 50ch;
    color: var(--color-text-on-dark-muted);
    font-size: var(--text-body-lg);
  }

  .ctab__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
  }

  .ctab__hours {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--color-border-on-dark);
    width: 100%;
    max-width: 34rem;
    color: var(--color-text-on-dark-muted);
    font-size: var(--text-small);
  }

/* ----------------------------------------------------------------------
   IllustrativeNote — the "illustrative image" badge
   ---------------------------------------------------------------------- */
  .illus {
    margin: 0;
    font-size: 0.75rem;
    line-height: var(--leading-ui);
  }

  .illus--caption {
    margin-block-start: var(--space-2);
    color: var(--color-text-muted);
  }

  .illus--badge {
    position: absolute;
    top: var(--space-3);
    z-index: 2;
    padding: var(--space-1) var(--space-3);
    background-color: rgba(12, 33, 52, 0.82);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.03em;
    backdrop-filter: blur(4px);
  }

  .illus--badge-start {
    left: var(--space-3);
    right: auto;
  }

  .illus--badge-end {
    right: var(--space-3);
    left: auto;
  }

  .illus--on-dark.illus--caption {
    color: var(--color-text-on-dark-muted);
  }

/* ----------------------------------------------------------------------
   PageHero — the photographic page headers
   ---------------------------------------------------------------------- */
  .phero {
    position: relative;
    background-color: var(--color-white);
    /* Same soft teal wash as the homepage hero, so inner pages feel part
       of the same system without repeating the photo treatment. */
    background-image: radial-gradient(
      110% 100% at 100% 0%,
      rgba(40, 169, 161, 0.08) 0%,
      rgba(40, 169, 161, 0) 62%
    );
    border-bottom: var(--border);
    padding-block: var(--space-4) clamp(2.5rem, 1.6rem + 4vw, 5rem);
  }

  .phero__crumbs {
    margin-block-end: clamp(1.5rem, 1rem + 2vw, 3rem);
  }

  .phero__body {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
  }

  .phero__eyebrow {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-teal-100);
    border-radius: var(--radius-pill);
    color: var(--color-teal-700);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    line-height: var(--leading-ui);
  }

  .phero__title {
    margin: 0;
    max-width: 20ch;
  }

  .phero__intro {
    margin: 0;
    max-width: var(--measure);
    color: var(--color-text-muted);
    font-size: var(--text-body-lg);
  }

  /* ---- Centred variant ---- */

  .phero--center .phero__body {
    justify-items: center;
    text-align: center;
  }

  .phero--center .phero__title,
  .phero--center .phero__intro {
    margin-inline: auto;
  }

  .phero--center .crumbs__list {
    justify-content: center;
  }

  /* ---- Photographic variant ---- */

  .phero--image {
    isolation: isolate;
    background-color: var(--color-navy-900);
    background-image: none;
    border-bottom: 0;
    overflow: hidden;
    /* Landscape band: wide and shallow, deep enough for the heading and
       intro to breathe without pushing page content off-screen. */
    min-height: clamp(20rem, 15rem + 16vw, 30rem);
    display: grid;
    align-content: center;
    padding-block: clamp(2.5rem, 1.8rem + 4vw, 5rem);
  }

  .phero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .phero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
  }

  /* Heavy, even scrim. Content is centred here, so unlike the homepage
     hero there is no single "reading side" to weight the gradient toward —
     the text can sit anywhere across the width. */
  .phero__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        180deg,
        rgba(9, 26, 41, 0.86) 0%,
        rgba(9, 26, 41, 0.78) 50%,
        rgba(9, 26, 41, 0.88) 100%
      ),
      rgba(9, 26, 41, 0.34);
  }

  .phero--image .phero__eyebrow {
    background-color: rgba(255, 255, 255, 0.14);
    border: var(--border-width) solid rgba(255, 255, 255, 0.22);
    color: var(--color-white);
    backdrop-filter: blur(6px);
  }

  .phero--image .phero__title {
    color: var(--color-white);
    text-shadow: 0 2px 24px rgba(9, 26, 41, 0.45);
  }

  .phero--image .phero__intro {
    color: #d6e4ee;
  }

  .phero__flag {
    z-index: 2;
  }

/* ----------------------------------------------------------------------
   Lightbox — gallery dialog
   ---------------------------------------------------------------------- */
  /* Fill the viewport and centre the panel. Overriding the UA defaults
     explicitly avoids the browser's own centring rules fighting us. */
  .lb {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    overflow: hidden;
  }

  .lb[open] {
    display: grid;
    place-items: center;
  }

  .lb::backdrop {
    background-color: rgba(12, 33, 52, 0.88);
    backdrop-filter: blur(3px);
  }

  .lb__panel {
    display: grid;
    /* toolbar / image / caption */
    grid-template-rows: auto 1fr auto;
    gap: var(--space-3);
    width: min(96vw, 1100px);
    max-height: 94vh;
    /* Clears the iOS home indicator and browser chrome. */
    padding: max(var(--space-3), env(safe-area-inset-top, 0px))
      var(--space-3)
      max(var(--space-3), env(safe-area-inset-bottom, 0px));
  }

  /* ---- Toolbar ---- */
  .lb__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .lb__count {
    margin: 0;
    color: var(--color-text-on-dark-muted);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
  }

  .lb__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-button);
    transition: background-color var(--duration-base) var(--ease-out);
  }

  .lb__close:hover {
    background-color: rgba(255, 255, 255, 0.28);
  }

  /* ---- Stage ---- */
  .lb__stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    min-height: 0;
  }

  .lb__figure {
    margin: 0;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
  }

  .lb__img {
    display: block;
    max-width: 100%;
    /* Bounded by the stage row so the panel never exceeds 94vh. */
    max-height: min(72vh, 100%);
    width: auto;
    height: auto;
    /* contain, never cover — a lightbox must not crop. */
    object-fit: contain;
    border-radius: var(--radius-media);
  }

  .lb__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    transition: background-color var(--duration-base) var(--ease-out);
  }

  .lb__nav:hover {
    background-color: rgba(255, 255, 255, 0.28);
  }

  .lb__nav--prev {
    transform: rotate(180deg);
  }

  .lb__close:focus-visible,
  .lb__nav:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
  }

  /* ---- Caption ---- */
  .lb__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0;
    color: var(--color-white);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  /* Marks stand-in photography, so a viewer is never left assuming an
     image was taken at the clinic. */
  .lb__note {
    padding: 2px var(--space-3);
    background-color: rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
  }

  .lb__note[hidden] {
    display: none;
  }

  /* Narrow screens: arrows move under the image so they never squeeze it. */
  @media (max-width: 600px) {
    .lb__stage {
      grid-template-columns: 1fr;
      grid-template-areas:
        'figure'
        'nav';
      gap: var(--space-3);
    }

    .lb__figure {
      grid-area: figure;
    }

    .lb__nav--prev,
    .lb__nav--next {
      grid-area: nav;
    }

    .lb__nav--prev {
      justify-self: start;
    }

    .lb__nav--next {
      justify-self: end;
    }

    .lb__img {
      max-height: 56vh;
    }
  }

/* ----------------------------------------------------------------------
   LegalPage — shell for the four legal pages
   ---------------------------------------------------------------------- */
  .legal-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .legal-notice {
    display: flex;
    gap: var(--space-3);
    margin-block-end: var(--space-8);
    padding: var(--space-5);
    background-color: var(--color-off-white);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-card);
  }

  .legal-notice svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-teal);
  }

  .legal-notice__title {
    margin: 0 0 var(--space-1);
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-small);
  }

  .legal-notice__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .legal-toc {
    margin-block-end: var(--space-10);
    padding: var(--space-5) var(--space-6);
    background-color: var(--color-off-white);
    border: var(--border);
    border-radius: var(--radius-card);
  }

  .legal-toc__title {
    margin: 0 0 var(--space-3);
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
  }

  .legal-toc__list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding-left: 1.15rem;
  }

  .legal-toc__list li::marker {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .legal-toc__link {
    display: inline-block;
    padding-block: var(--space-1);
    color: var(--color-teal-700);
    font-size: var(--text-small);
    text-decoration: none;
  }

  .legal-toc__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .legal {
    display: grid;
    gap: var(--space-10);
  }

  .legal__block {
    /* Clears the sticky header when jumped to from the contents. */
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
  }

  .legal__heading {
    margin: 0 0 var(--space-4);
    font-size: var(--text-h3);
  }

  .legal__para {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    line-height: var(--leading-body);
  }

  .legal__para:last-child {
    margin-bottom: 0;
  }

  .legal__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .legal__item {
    display: flex;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  .legal__mark {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 2px;
    color: var(--color-teal);
  }

  .legal-contact {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    margin-block-start: var(--space-12);
    padding-top: var(--space-8);
    border-top: var(--border);
  }

  .legal-contact__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

/* ----------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */
  .header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-white);
    border-bottom: var(--border-width) solid transparent;
    transition:
      border-color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }

  /* Set by JS once the page is scrolled past ~8px. */
  .header[data-scrolled] {
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-sm);
  }

  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: var(--header-height);
    transition: height var(--duration-base) var(--ease-out);
  }

  .header[data-scrolled] .header__inner {
    height: var(--header-height-compact);
  }

  .header__logo {
    /* Shrinks slightly with the compact header. */
    transition: transform var(--duration-base) var(--ease-out);
    transform-origin: left center;
  }

  .header[data-scrolled] .header__logo {
    transform: scale(0.92);
  }

  /* ---- Desktop navigation ----
     The .nav / .nav__item / .nav__link rules live in components.css, not
     here, because the navigation is assembled from two places: most links
     sit in the header markup and the services menu contributes another. */

  .header__nav {
    display: none;
  }

  .header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .header__cta {
    display: none;
  }

  .header__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    color: var(--color-navy);
    border: var(--border);
    border-radius: var(--radius-button);
    transition: var(--transition-color);
  }

  .header__menu:hover {
    background-color: var(--color-surface-alt);
  }

  /* ---- Breakpoint: full navigation from 1024px ---- */

  @media (min-width: 1024px) {
    .header__nav {
      display: block;
    }

    .header__cta {
      display: inline-flex;
    }

    .header__menu {
      display: none;
    }
  }

/* ----------------------------------------------------------------------
   ServicesDropdown — desktop services menu
   ---------------------------------------------------------------------- */
  .nav__item--has-menu {
    position: relative;
  }

  .nav__pair {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }

  .nav__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Small visual footprint, but a full-height hit area. */
    width: 32px;
    min-height: var(--touch-target);
    color: var(--color-navy);
    border-radius: var(--radius-sm);
  }

  .nav__chevron {
    transition: transform var(--duration-dropdown) var(--ease-out);
  }

  .nav__item--has-menu[data-open] .nav__chevron {
    transform: rotate(180deg);
  }

  /* ---- Panel ---- */

  .dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: var(--z-dropdown);
    min-width: 260px;
    padding: var(--space-3);
    background-color: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);

    /* Closed state. `hidden` is removed by JS before the transition runs,
       so the panel is fully inert for assistive tech when closed. */
    opacity: 0;
    transform: translate(-50%, -6px);
    transition:
      opacity var(--duration-dropdown) var(--ease-out),
      transform var(--duration-dropdown) var(--ease-out);
  }

  .dropdown[hidden] {
    display: none;
  }

  .nav__item--has-menu[data-open] .dropdown {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .dropdown__list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dropdown__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--touch-target);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--color-navy);
    font-size: var(--text-nav);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: var(--transition-color);
  }

  .dropdown__link:hover {
    background-color: var(--color-teal-100);
    color: var(--color-teal-700);
  }

  .dropdown__divider {
    height: var(--border-width);
    margin: var(--space-2) var(--space-4);
    background-color: var(--color-border);
  }

  .dropdown__link--all {
    color: var(--color-teal-700);
    font-weight: var(--weight-semibold);
  }

  /* The dropdown is desktop-only; below 1024px the mobile menu handles it. */
  @media (max-width: 1023px) {
    .nav__item--has-menu {
      display: none;
    }
  }

/* ----------------------------------------------------------------------
   MobileNav — the mobile panel
   ---------------------------------------------------------------------- */
  .mnav {
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile-nav);
  }

  .mnav[hidden] {
    display: none;
  }

  .mnav__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(12, 33, 52, 0.5);
    opacity: 0;
    transition: opacity var(--duration-menu) var(--ease-out);
  }

  .mnav__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    /* Never wider than the viewport on a 320px screen. */
    width: min(400px, 92vw);
    background-color: var(--color-white);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--duration-menu) var(--ease-out);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* data-open is set one frame after `hidden` is removed, so the panel
     animates in rather than appearing already-open. */
  .mnav[data-open] .mnav__backdrop {
    opacity: 1;
  }

  .mnav[data-open] .mnav__panel {
    transform: translateX(0);
  }

  .mnav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border);
  }

  .mnav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    color: var(--color-navy);
    border-radius: var(--radius-button);
    transition: var(--transition-color);
  }

  .mnav__close:hover {
    background-color: var(--color-surface-alt);
  }

  .mnav__nav {
    flex: 1;
    padding: var(--space-4) var(--space-5);
  }

  .mnav__list,
  .mnav__sub {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mnav__item + .mnav__item {
    border-top: var(--border);
  }

  .mnav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .mnav__link {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 52px;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: var(--transition-color);
  }

  .mnav__link:hover,
  .mnav__link[aria-current='page'] {
    color: var(--color-teal-700);
  }

  .mnav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    color: var(--color-navy);
    border-radius: var(--radius-sm);
  }

  .mnav__chevron {
    transition: transform var(--duration-dropdown) var(--ease-out);
  }

  .mnav__toggle[aria-expanded='true'] .mnav__chevron {
    transform: rotate(180deg);
  }

  .mnav__sub {
    display: grid;
    padding-block-end: var(--space-3);
    padding-inline-start: var(--space-3);
    border-left: 2px solid var(--color-teal-100);
    margin-inline-start: var(--space-1);
  }

  .mnav__sub[hidden] {
    display: none;
  }

  .mnav__sublink {
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
    padding-block: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-body);
    text-decoration: none;
    transition: var(--transition-color);
  }

  .mnav__sublink:hover {
    color: var(--color-teal-700);
  }

  .mnav__sublink--all {
    color: var(--color-teal-700);
    font-weight: var(--weight-semibold);
  }

  .mnav__foot {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5);
    border-top: var(--border);
    background-color: var(--color-off-white);
  }

  .mnav__contact {
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-small);
  }

  .mnav__hours,
  .mnav__phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-muted);
  }

  .mnav__hours--muted {
    padding-inline-start: calc(16px + var(--space-2));
  }

  .mnav__phone {
    min-height: var(--touch-target);
    color: var(--color-navy);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }

  .mnav__phone--placeholder {
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
  }

  /* The panel is never shown at desktop widths. */
  @media (min-width: 1024px) {
    .mnav {
      display: none;
    }
  }

/* ----------------------------------------------------------------------
   MobileStickyBar — call / WhatsApp / book
   ---------------------------------------------------------------------- */
  .mbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-sticky-bar);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--color-white);
    border-top: var(--border);
    box-shadow: 0 -2px 12px rgba(18, 48, 74, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mbar__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* Whole cell is the tap target, comfortably above 44px. */
    min-height: var(--mobile-bar-height);
    padding: var(--space-2);
    color: var(--color-navy);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: var(--transition-color);
  }

  .mbar__action + .mbar__action {
    border-left: var(--border);
  }

  .mbar__action:hover {
    background-color: var(--color-teal-100);
    color: var(--color-teal-700);
  }

  /* Navy label on the teal fill — same AA reasoning as the primary
     button (white on #28A9A1 is only 2.88:1). */
  .mbar__action--primary {
    background-color: var(--color-teal);
    color: var(--color-navy);
  }

  .mbar__action--primary:hover {
    background-color: var(--color-teal-700);
    color: var(--color-white);
  }

  /* Contact detail not yet supplied. */
  .mbar__action--inert {
    color: var(--color-text-muted);
    opacity: 0.55;
    cursor: not-allowed;
  }

  .mbar__label {
    display: block;
  }

  /* Bar is mobile-only; from 768px the header CTA and footer take over. */
  @media (min-width: 768px) {
    .mbar {
      display: none;
    }
  }

/* ----------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */
  .footer {
    background-color: var(--color-navy);
    color: var(--color-text-on-dark-muted);
    padding-block: var(--section-y-tight) var(--space-8);
    font-size: var(--text-small);
  }

  /* Four columns on desktop, two on tablet, one on mobile — driven by
     available width rather than device breakpoints. */
  .footer__grid {
    display: grid;
    gap: var(--space-10) var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }

  @media (min-width: 1024px) {
    .footer__grid {
      /* Brand column is wider than the three link columns. */
      grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
      gap: var(--space-12);
    }
  }

  .footer__brand {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
  }

  .footer__blurb {
    margin: 0;
    max-width: 40ch;
    color: var(--color-text-on-dark-muted);
    line-height: var(--leading-body);
  }

  .footer__dentist {
    display: grid;
    gap: 2px;
    margin: 0;
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-border-on-dark);
    width: 100%;
    max-width: 40ch;
  }

  .footer__dentist-name {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-body);
  }

  .footer__dentist-cred {
    color: var(--color-text-on-dark-muted);
  }

  .footer__col {
    display: grid;
    gap: var(--space-4);
    align-content: start;
  }

  .footer__heading {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: 0;
  }

  .footer__list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer__list--contact {
    gap: var(--space-4);
  }

  .footer__link {
    display: inline-flex;
    align-items: center;
    /* Comfortable tap target in a dense link list. */
    min-height: var(--touch-target);
    color: var(--color-text-on-dark-muted);
    text-decoration: none;
    transition: var(--transition-color);
  }

  .footer__link:hover {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .footer__link[aria-current='page'] {
    color: var(--color-white);
    font-weight: var(--weight-semibold);
  }

  .footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    line-height: var(--leading-body);
  }

  /* Contact links sit inside a multi-line block, so they do not need the
     full 44px of the link lists above — but they must still clear the
     WCAG 2.2 minimum target size of 24px. They were plain text until the
     clinic's real phone and email were configured, at which point they
     became links and started failing that check at 23px. */
  .footer__contact-item .footer__link {
    min-height: 24px;
  }

  .footer__icon {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--color-teal);
  }

  .footer__muted {
    color: #9fb3c2;
  }

  /* ---- Bottom row ---- */

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
    margin-top: var(--section-gap);
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--color-border-on-dark);
  }

  .footer__legal-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer__legal-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    color: var(--color-text-on-dark-muted);
    text-decoration: none;
    transition: var(--transition-color);
  }

  .footer__legal-link:hover {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .footer__copy {
    margin: 0;
    color: #9fb3c2;
  }

/* ----------------------------------------------------------------------
   Home — hero
   ---------------------------------------------------------------------- */
  .hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    /* Tall enough to read as a photographic hero without pushing the
       trust bar off-screen on a laptop. */
    min-height: clamp(30rem, 24rem + 24vw, 44rem);
    padding-block: clamp(3rem, 2rem + 6vw, 7rem);
    background-color: var(--color-navy-900);
    overflow: hidden;
  }

  /* ---- Background ---- */

  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keeps faces/subject in frame as the band gets shorter on mobile. */
    object-position: 50% 32%;
  }

  /* Two-layer scrim: an overall wash to knock the photo back, plus a
     stronger gradient on the reading side so text contrast never depends
     on what the photograph happens to show there. */
  .hero__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        100deg,
        rgba(9, 26, 41, 0.92) 0%,
        rgba(9, 26, 41, 0.82) 34%,
        rgba(9, 26, 41, 0.55) 62%,
        rgba(9, 26, 41, 0.45) 100%
      ),
      rgba(9, 26, 41, 0.28);
  }


  /* ---- Layout ---- */

  .hero__inner {
    display: grid;
    gap: clamp(2rem, 1.4rem + 3vw, 3.5rem);
    align-items: center;
    width: 100%;
  }

  @media (min-width: 1000px) {
    .hero__inner {
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
      gap: var(--space-12);
    }
  }

  /* ---- Content ---- */

  .hero__content {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
    max-width: 46rem;
  }

  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background-color: rgba(255, 255, 255, 0.14);
    border: var(--border-width) solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-ui);
    backdrop-filter: blur(6px);
  }

  .hero__title {
    margin: 0;
    max-width: 15ch;
    color: var(--color-white);
    /* Lifts the heading off busier areas of the photograph. */
    text-shadow: 0 2px 24px rgba(9, 26, 41, 0.45);
  }

  .hero__body {
    margin: 0;
    max-width: 54ch;
    color: #e4edf3;
    font-size: var(--text-body-lg);
  }

  .hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hero__point {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
  }

  .hero__point svg {
    color: #7fd7d1;
    flex-shrink: 0;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
  }

  /* ---- Floating card ---- */

  .hero__card {
    display: grid;
    gap: var(--space-4);
    width: 100%;
    max-width: 24rem;
    padding: var(--space-6);
    /* Dark and mostly opaque, NOT a light translucent panel: a light
       card lets the photograph through, so its text contrast depends on
       whichever part of the image happens to sit behind it. Measured at
       3.56:1 over a bright patch before this change. A dark base keeps
       the card readable over any background photo. */
    background-color: rgba(9, 26, 41, 0.82);
    border: var(--border-width) solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-card);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lg);
  }

  @media (min-width: 1000px) {
    .hero__card {
      justify-self: end;
    }
  }

  .hero__card-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .hero__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    color: var(--color-navy);
    background-color: #7fd7d1;
    border-radius: var(--radius-button);
  }

  .hero__card-label {
    margin: 0 0 2px;
    color: #d6e4ee;
    font-size: var(--text-small);
  }

  .hero__card-value {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-ui);
  }

  .hero__card-sub {
    margin: 2px 0 0;
    color: #d6e4ee;
    font-size: var(--text-small);
  }

  .hero__card-phone {
    display: inline-block;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-ui);
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  a.hero__card-phone:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .hero__card-phone--placeholder {
    margin: 0;
    color: #d6e4ee;
    font-weight: var(--weight-medium);
  }

  .hero__card-rule {
    height: var(--border-width);
    margin: 0;
    border: 0;
    background-color: rgba(255, 255, 255, 0.2);
  }

  /* The card is supporting information; on small screens the CTAs matter
     more, so it drops below the content rather than competing with it. */
  @media (max-width: 999px) {
    .hero__card {
      max-width: none;
    }
  }

/* ----------------------------------------------------------------------
   Home — trust strip
   ---------------------------------------------------------------------- */
  .trust {
    position: relative;
    z-index: 1;
    background-color: var(--color-white);
    padding-block: 0 var(--section-y-tight);
  }

  .trust__list {
    display: grid;
    /* 4 → 2 → 1 by available width rather than device breakpoints. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 1100px) {
    .trust__list {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .trust__item {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding: var(--space-6);
    background-color: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    transition:
      transform var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out);
  }

  .trust__item:hover {
    transform: translateY(-4px);
    border-color: var(--color-teal-100);
    box-shadow: var(--shadow-md);
  }

  .trust__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: var(--color-teal-700);
    background-color: var(--color-teal-100);
    border-radius: var(--radius-pill);
    transition:
      background-color var(--duration-base) var(--ease-out),
      color var(--duration-base) var(--ease-out);
  }

  .trust__item:hover .trust__icon {
    background-color: var(--color-teal);
    color: var(--color-white);
  }

  .trust__num {
    font-family: var(--font-heading);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-bold);
    /* Muted, but still above the AA threshold as visible text. */
    color: var(--color-text-muted);
  }

  .trust__label {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
    line-height: var(--leading-ui);
  }

  .trust__detail {
    margin: 0;
    padding-top: var(--space-3);
    border-top: var(--border);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  /* From tablet up the row lifts into the hero's lower edge, as in the
     reference. Below that it sits in normal flow so it never covers the
     hero's buttons on a phone. */
  @media (min-width: 768px) {
    .trust {
      margin-top: calc(var(--space-16) * -1);
      background-color: transparent;
      padding-block: 0 var(--section-y-tight);
    }

    .trust::after {
      content: '';
      position: absolute;
      inset: var(--space-16) 0 0;
      background-color: var(--color-white);
      z-index: -1;
    }
  }

  @media (max-width: 767px) {
    .trust {
      padding-block: var(--section-y-tight);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .trust__item:hover {
      transform: none;
    }
  }

/* ----------------------------------------------------------------------
   Home — why Dentora
   ---------------------------------------------------------------------- */
  .why {
    position: relative;
    isolation: isolate;
    padding-block: var(--section-y);
    background-color: var(--color-navy);
    overflow: hidden;
  }

  .why__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .why__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
  }

  /* Strong scrim: white cards sit on top, so the photograph has to drop
     well back for their edges and shadows to still read. */
  .why__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        180deg,
        rgba(9, 26, 41, 0.9) 0%,
        rgba(9, 26, 41, 0.84) 45%,
        rgba(9, 26, 41, 0.9) 100%
      ),
      rgba(9, 26, 41, 0.35);
  }

  .why__flag {
    z-index: 2;
  }

  .why__inner {
    position: relative;
  }

  .why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .why-grid__item {
    display: flex;
  }

  .why-grid__item > * {
    width: 100%;
  }

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

/* ----------------------------------------------------------------------
   Home — featured services
   ---------------------------------------------------------------------- */
  .svc-grid {
    display: grid;
    /* 3 → 2 → 1 by available width. min() keeps a single column from
       overflowing at 320px. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .svc-grid__item {
    display: flex;
  }

  .svc-grid__item > * {
    width: 100%;
  }

  /* Caps the grid at three columns so cards never become thin strips
     on very wide screens. */
  @media (min-width: 1100px) {
    .svc-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* The heading already carries a View All action on desktop; this
     duplicate is for narrow screens where that action is far above. */
  .svc-more {
    display: flex;
    justify-content: center;
    margin: var(--space-10) 0 0;
  }

  @media (min-width: 900px) {
    .svc-more {
      display: none;
    }
  }

/* ----------------------------------------------------------------------
   Home — personal care
   ---------------------------------------------------------------------- */
  .pcare {
    background-color: var(--color-navy);
    color: var(--color-text-on-dark-muted);
  }

  .pcare__inner {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    align-items: center;
  }

  .pcare__content {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
  }

  .pcare__eyebrow {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    color: #7fd7d1;
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    line-height: var(--leading-ui);
  }

  .pcare__title {
    margin: 0;
    max-width: 18ch;
    color: var(--color-white);
  }

  .pcare__body {
    margin: 0;
    max-width: 58ch;
    color: var(--color-text-on-dark-muted);
  }

  .pcare__points {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    margin: var(--space-3) 0 0;
    padding: var(--space-5) 0 0;
    border-top: var(--border-width) solid var(--color-border-on-dark);
    list-style: none;
  }

  .pcare__point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-white);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body);
  }

  .pcare__check {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 1px;
    color: #7fd7d1;
  }

  .pcare__actions {
    margin-block-start: var(--space-4);
  }

  /* ---- Media ---- */

  .pcare__media {
    margin: 0;
    display: grid;
    gap: var(--space-4);
  }

  .pcare__frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-navy-500);
    box-shadow: var(--shadow-lg);
  }

  .pcare__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3.6;
    object-fit: cover;
    object-position: 50% 20%;
  }

  .pcare__caption {
    display: grid;
    gap: 2px;
    padding-inline-start: var(--space-1);
  }

  .pcare__caption-name {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
  }

  .pcare__caption-role {
    color: var(--color-text-on-dark-muted);
    font-size: var(--text-small);
  }

  @media (min-width: 900px) {
    .pcare__inner {
      grid-template-columns: 1.1fr 0.9fr;
    }

    .pcare__img {
      aspect-ratio: 4 / 4.4;
    }
  }

/* ----------------------------------------------------------------------
   Home — patient journey
   ---------------------------------------------------------------------- */
  .journey {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
  }

  .journey__item {
    position: relative;
    display: flex;
  }

  .journey__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-6);
    background-color: var(--color-off-white);
    border: var(--border);
    border-radius: var(--radius-card);
    transition:
      background-color var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out),
      box-shadow var(--duration-base) var(--ease-out);
  }

  .journey__item:hover .journey__card {
    background-color: var(--color-white);
    border-color: var(--color-teal-100);
    box-shadow: var(--shadow-sm);
  }

  .journey__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .journey__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--color-white);
    background-color: var(--color-navy);
    border-radius: var(--radius-button);
    transition: background-color var(--duration-base) var(--ease-out);
  }

  .journey__item:hover .journey__icon {
    background-color: var(--color-teal-700);
  }

  /* Brand teal rather than a pale grey: the step number is meaningful
     content, and #D5E0E4 measured 1.28:1 against the card. */
  .journey__step {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-teal-700);
    letter-spacing: -0.02em;
  }

  .journey__title {
    margin: 0;
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    color: var(--color-navy);
    letter-spacing: -0.01em;
  }

  .journey__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: var(--leading-body);
  }

  /* ---- Connector ----
     Only drawn when all five cards sit on one row (>=1180px). Below that
     the cards wrap, and a horizontal line would connect the wrong pair. */
  @media (min-width: 1180px) {
    .journey {
      grid-template-columns: repeat(5, 1fr);
    }

    .journey__item + .journey__item::before {
      content: '';
      position: absolute;
      top: calc(var(--space-6) + 24px);
      right: calc(100% + 1px);
      width: var(--space-5);
      height: 2px;
      background-color: var(--color-border-strong);
      /* Decorative only. */
      pointer-events: none;

      /* Draws left-to-right as its card reveals. The pseudo-element
         cannot hold a data-attribute, so it keys off the host's
         .is-revealed class instead. Collapsed by default only under
         .js-motion, so a no-JS page still shows the full line. */
      transform-origin: left center;
      transition: transform 620ms var(--ease-out) 160ms;
    }

    .js-motion .journey__item + .journey__item::before {
      transform: scaleX(0);
    }

    .js-motion .journey__item.is-revealed + .journey__item::before {
      transform: scaleX(1);
    }
  }

  .journey__cta {
    display: flex;
    justify-content: center;
    margin-block-start: var(--section-gap);
  }

/* ----------------------------------------------------------------------
   Home — about Dr. Anshul
   ---------------------------------------------------------------------- */
  .dentist {
    background-color: var(--color-surface-page);
  }

  .dentist__inner {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    align-items: center;
  }

  /* ---- Media ---- */

  .dentist__frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-surface-alt);
    box-shadow: var(--shadow-md);
  }

  .dentist__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 4.2;
    object-fit: cover;
    object-position: 50% 18%;
  }

  /* ---- Content ---- */

  .dentist__content {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
  }

  .dentist__eyebrow {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-teal-100);
    border-radius: var(--radius-pill);
    color: var(--color-teal-700);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    line-height: var(--leading-ui);
  }

  .dentist__title {
    margin: 0;
  }

  .dentist__cred {
    margin: 0;
    color: var(--color-teal-700);
    font-family: var(--font-heading);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-semibold);
  }

  .dentist__body {
    margin: 0;
    max-width: 56ch;
    color: var(--color-text-muted);
  }

  /* ---- Credential list ---- */

  .dentist__facts {
    display: grid;
    gap: var(--space-4);
    width: 100%;
    margin: var(--space-3) 0 0;
    padding: var(--space-5);
    background-color: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-card);
  }

  @media (min-width: 560px) {
    .dentist__facts {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-5);
    }
  }

  .dentist__fact {
    display: grid;
    gap: var(--space-1);
  }

  .dentist__fact-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .dentist__fact-icon {
    display: inline-flex;
    color: var(--color-teal);
  }

  .dentist__fact-value {
    margin: 0;
    padding-inline-start: calc(17px + var(--space-2));
    color: var(--color-navy);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-ui);
  }

  .dentist__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
  }

  /* ---- Two columns from 900px ---- */

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

/* ----------------------------------------------------------------------
   Home — clinic preview mosaic
   ---------------------------------------------------------------------- */
  .mosaic {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    /* Mobile: one column, every tile equal. */
    grid-template-columns: 1fr;
  }

  .mosaic__item {
    display: flex;
    min-width: 0;
  }

  .mosaic__fig {
    position: relative;
    margin: 0;
    width: 100%;
    border-radius: var(--radius-media);
    overflow: hidden;
    background-color: var(--color-surface-alt);
    box-shadow: var(--shadow-xs);
  }

  .mosaic__img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 400ms var(--ease-out);
  }

  /* Gentle zoom, capped at 1.04 per the motion brief. */
  .mosaic__fig:hover .mosaic__img {
    transform: scale(1.04);
  }

  /* Every photograph on this page is stand-in imagery, so each tile is
     labelled. Remove the badge for a tile once a verified clinic photo
     replaces its source. */
  .mosaic__flag {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-1) var(--space-3);
    background-color: rgba(12, 33, 52, 0.82);
    border-radius: var(--radius-pill);
    color: var(--color-white);
    font-size: 0.6875rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.03em;
    backdrop-filter: blur(4px);
  }

  .mosaic__label {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background-color: rgba(255, 255, 255, 0.94);
    border-radius: var(--radius-pill);
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    /* Keeps the pill readable over any photograph. */
    backdrop-filter: blur(4px);
  }

  /* Tablet: two columns. The tall tile also spans both here — leaving it
     at one column would strand an empty cell beside it, because the next
     tile needs the full width. */
  @media (min-width: 640px) {
    .mosaic {
      grid-template-columns: repeat(2, 1fr);
    }

    .mosaic__item--wide,
    .mosaic__item--tall {
      grid-column: span 2;
    }

    .mosaic__item--wide .mosaic__img {
      aspect-ratio: 16 / 7;
    }
  }

  /* Desktop: a 4-column mosaic with a tall feature tile. */
  @media (min-width: 1000px) {
    .mosaic {
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 200px;
      gap: var(--space-5);
    }

    .mosaic__item .mosaic__img {
      aspect-ratio: auto;
    }

    .mosaic__item--tall {
      grid-column: span 2;
      grid-row: span 2;
    }

    .mosaic__item--wide {
      grid-column: span 2;
      grid-row: span 1;
    }

    .mosaic__item--small {
      grid-column: span 1;
      grid-row: span 1;
    }

  }

  .mosaic__cta {
    display: flex;
    justify-content: center;
    margin: var(--space-10) 0 0;
  }

  @media (min-width: 900px) {
    .mosaic__cta {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mosaic__fig:hover .mosaic__img {
      transform: none;
    }
  }

/* ----------------------------------------------------------------------
   Home — FAQ preview
   ---------------------------------------------------------------------- */
  .faq {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
    align-items: start;
  }

  .faq__intro {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
  }

  .faq__eyebrow {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-teal-100);
    border-radius: var(--radius-pill);
    color: var(--color-teal-700);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    line-height: var(--leading-ui);
  }

  .faq__title {
    margin: 0;
    max-width: 16ch;
  }

  .faq__body {
    margin: 0;
    max-width: 46ch;
    color: var(--color-text-muted);
  }

  .faq__aside {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    margin-block-start: var(--space-2);
    padding: var(--space-5);
    background-color: var(--color-off-white);
    border: var(--border);
    border-radius: var(--radius-card);
  }

  .faq__aside-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-teal-700);
    background-color: var(--color-teal-100);
    border-radius: var(--radius-button);
  }

  .faq__aside-title {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-semibold);
  }

  .faq__aside-sub {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .faq__aside-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }

  .faq__all {
    margin: var(--space-2) 0 0;
  }

  @media (min-width: 900px) {
    .faq {
      grid-template-columns: 0.85fr 1.15fr;
      gap: var(--space-16);
    }
  }

/* ----------------------------------------------------------------------
   Home — location preview
   ---------------------------------------------------------------------- */
  .loc {
    display: grid;
    gap: var(--space-6);
    align-items: stretch;
  }

  /* ---- Details panel ---- */

  .loc__panel {
    display: grid;
    gap: var(--space-6);
    align-content: start;
    padding: var(--space-7);
    background-color: var(--color-off-white);
    border: var(--border);
    border-radius: var(--radius-card);
  }

  .loc__rows {
    display: grid;
    gap: var(--space-5);
    margin: 0;
  }

  .loc__row {
    display: grid;
    gap: var(--space-1);
  }

  .loc__row-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .loc__row-icon {
    display: inline-flex;
    color: var(--color-teal);
  }

  .loc__row-value {
    display: grid;
    gap: 2px;
    margin: 0;
    padding-inline-start: calc(18px + var(--space-2));
  }

  .loc__line {
    color: var(--color-navy);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body);
  }

  .loc__line:not(:first-child) {
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
  }

  .loc__contacts {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-5);
    border-block: var(--border);
  }

  @media (min-width: 480px) {
    .loc__contacts {
      grid-template-columns: 1fr 1fr;
    }
  }

  .loc__contact {
    display: grid;
    gap: 2px;
  }

  .loc__contact-label {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .loc__contact-value {
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    /* Long numbers must not push the panel wide on a 320px screen. */
    overflow-wrap: anywhere;
  }

  .loc__contact-value--link {
    color: var(--color-teal-700);
    text-decoration: none;
  }

  .loc__contact-value--link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .loc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  /* ---- Map ---- */

  .loc__map {
    min-height: 320px;
    border-radius: var(--radius-media);
    overflow: hidden;
    border: var(--border);
    background-color: var(--color-surface-alt);
  }

  .loc__frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
  }

  .loc__placeholder {
    display: grid;
    gap: var(--space-3);
    place-content: center;
    justify-items: center;
    height: 100%;
    min-height: 320px;
    padding: var(--space-8);
    text-align: center;
    /* Subtle grid so the panel reads as a map stand-in, not a broken embed. */
    background-color: var(--color-surface-alt);
    background-image:
      linear-gradient(rgba(18, 48, 74, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18, 48, 74, 0.045) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  .loc__placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    color: var(--color-teal-700);
    background-color: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-pill);
  }

  .loc__placeholder-title {
    margin: 0;
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
  }

  .loc__placeholder-text {
    margin: 0;
    max-width: 34ch;
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .loc__placeholder-tag {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-white);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-button);
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .loc__placeholder-note {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-white);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-button);
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  @media (min-width: 900px) {
    .loc {
      grid-template-columns: 1fr 1.15fr;
      gap: var(--space-8);
    }
  }

/* ----------------------------------------------------------------------
   Home — final call to action
   ---------------------------------------------------------------------- */
  .fcta {
    background-color: var(--color-surface-page);
    padding-block: var(--section-y);
  }

  .fcta__card {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    text-align: center;
    padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) var(--container-pad);
    background-color: var(--color-navy);
    /* Soft teal glow, well inside the 10% teal budget. */
    background-image: radial-gradient(
      90% 120% at 50% 0%,
      rgba(40, 169, 161, 0.22) 0%,
      rgba(40, 169, 161, 0) 62%
    );
    border-radius: var(--radius-lg);
  }

  .fcta__eyebrow {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    color: #7fd7d1;
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    line-height: var(--leading-ui);
  }

  .fcta__title {
    margin: 0;
    max-width: 18ch;
    color: var(--color-white);
  }

  .fcta__body {
    margin: 0;
    max-width: 50ch;
    color: var(--color-text-on-dark-muted);
    font-size: var(--text-body-lg);
  }

  .fcta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
  }

  .fcta__hours {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--color-border-on-dark);
    width: 100%;
    max-width: 34rem;
    color: var(--color-text-on-dark-muted);
    font-size: var(--text-small);
  }