@charset "utf-8";

/* =========================================================================
   Agarwal Dental Care — stylesheet
   Palette: white + deep navy + teal. Gold is used for star glyphs only.
   Type:    Fraunces (display) + Inter (body/utility)
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Colour */
  --navy-900: #0d2742;
  --navy-800: #123156;
  --navy-700: #183f6b;
  --navy-500: #215791;
  --navy-100: #dbe6f2;

  --teal-600: #10697a;
  --teal-500: #15788a;
  --teal-400: #2aa9bf;
  --teal-200: #7fd4e0;
  --teal-050: #e8f7fa;

  --paper: #ffffff;
  --mist: #f2f6fa;
  --ink: #14202e;
  --ink-soft: #56656f;
  --line: #dde5ee;

  /* Gold: reserved exclusively for star glyphs */
  --star: #e8b33a;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 4.4vw, 4.5rem);

  /* Space */
  --gap: 1.5rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --wrap: 1200px;
  --header-h: 76px;

  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(13, 39, 66, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(13, 39, 66, 0.22);
  --shadow-lg: 0 30px 70px -24px rgba(13, 39, 66, 0.35);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset & base --------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

/* These components control their own spacing, so drop the default run-on
   margin. Single-class selectors already outrank the bare `p` rule above. */
.stat__value,
.rating__score,
.review__text,
.hero__lead,
.booking p,
.modal__panel > p,
.footer__blurb,
.doctor__sub,
.cline__value {
  margin-bottom: 0;
}

/* Several components set `display`, which would otherwise beat the user-agent
   `[hidden] { display: none }` and leave hidden dialogs laid out. */
[hidden] {
  display: none !important;
}

/* Focus ring. The dark teal clears 3:1 against white and mist; on the navy
   sections it would disappear, so those flip to the light teal. */
:focus-visible {
  outline: 3px solid var(--teal-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.hero :focus-visible,
.header:not(.is-scrolled):not(.header--solid) :focus-visible,
.page-head :focus-visible,
.section--navy :focus-visible,
.booking :focus-visible,
.cta-band :focus-visible,
.footer :focus-visible,
.lightbox :focus-visible {
  outline-color: var(--teal-200);
}

::selection {
  background: var(--teal-200);
  color: var(--navy-900);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--navy-700);
  color: #fff;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Layout primitives ---------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section {
  padding-block: var(--section-y);
}

.section--mist {
  background: var(--mist);
}

.section--navy {
  background: var(--navy-800);
  color: #fff;
}

/* Editorial two-column grid: sticky heading left, content right. */
.layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.layout__head {
  position: sticky;
  top: calc(var(--header-h) + 2.5rem);
}

.eyebrow {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--teal-600);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section--navy .eyebrow {
  color: var(--teal-200);
}

.layout__title {
  font-size: var(--fs-h2);
}

.layout__note {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.section--navy .layout__note {
  border-top-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.72);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content's intrinsic width and pushes the page wider than the
   viewport on narrow phones. Letting them shrink is what keeps the layout
   inside the screen. */
.layout > *,
.about__grid > *,
.book__grid > *,
.contact__grid > *,
.services__grid > *,
.cases > *,
.steps > *,
.form__row > *,
.reviews__summary > *,
.teaser > *,
.cta-band > *,
.intl-band > * {
  min-width: 0;
}

/* Fixed layout stops the slot table demanding its widest content width. */
.slots table {
  table-layout: fixed;
}

/* A run of body copy. Every paragraph the same size and colour, so the block
   reads as one voice rather than a lead followed by smaller footnotes. */
.prose p {
  margin-bottom: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-soft);
}

.prose p + p {
  margin-top: 1.15rem;
}

/* ---------- 4. Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.btn svg {
  flex: none;
}

.btn--primary {
  background: var(--teal-500);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(21, 120, 138, 0.75);
}

.btn--primary:hover {
  background: var(--teal-600);
  transform: translateY(-2px);
}

.btn--navy {
  background: var(--navy-700);
  color: #fff;
}

.btn--navy:hover {
  background: var(--navy-500);
  transform: translateY(-2px);
}

.btn--ghost {
  border: 1.5px solid var(--line);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--navy-700);
  background: var(--navy-700);
  color: #fff;
  transform: translateY(-2px);
}



/* ---------- 5. Header & navigation --------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.header.is-scrolled::after {
  opacity: 1;
}

.header.is-scrolled {
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(13, 39, 66, 0.5);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

/* Wordmark: the arc echoes a dental arch without redrawing the printed logo. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
}

.brand__mark {
  flex: none;
  width: 44px;
  height: 44px;
}

/* Tooth and orbit are themed from CSS so the mark can sit on dark or light. */
.mark-tooth {
  fill: #fff;
  transition: fill 0.35s var(--ease);
}

.mark-orbit {
  fill: none;
  stroke: var(--teal-400);
  stroke-width: 3.2;
  stroke-linecap: round;
  transition: stroke 0.35s var(--ease);
}

.header.is-scrolled .mark-tooth,
.header--solid .mark-tooth {
  fill: var(--navy-800);
}

.header.is-scrolled .mark-orbit,
.header--solid .mark-orbit {
  stroke: var(--teal-500);
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__name {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  transition: color 0.35s var(--ease);
}

.brand__since {
  margin-top: 0.34rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-200);
  transition: color 0.35s var(--ease);
}

.header.is-scrolled .brand__name,
.header--solid .brand__name {
  color: var(--navy-800);
}

.header.is-scrolled .brand__since,
.header--solid .brand__since {
  color: var(--teal-600);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__link {
  position: relative;
  white-space: nowrap;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--teal-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav__link:hover,
.nav__link.is-active {
  color: #fff;
}

.nav__link.is-active::after {
  transform: scaleX(1);
}

.header.is-scrolled .nav__link,
.header--solid .nav__link {
  color: var(--ink-soft);
}

.header.is-scrolled .nav__link:hover,
.header.is-scrolled .nav__link.is-active,
.header--solid .nav__link:hover {
  color: var(--navy-800);
}

.header__cta {
  white-space: nowrap;
  padding: 0.7rem 1.3rem;
  font-size: 0.875rem;
}

.nav-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease),
    background-color 0.35s var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before {
  transform: translateY(-7px);
}

.nav-toggle__bars::after {
  transform: translateY(7px);
}

.header.is-scrolled .nav-toggle__bars,
.header.is-scrolled .nav-toggle__bars::before,
.header.is-scrolled .nav-toggle__bars::after,
.header--solid .nav-toggle__bars,
.header--solid .nav-toggle__bars::before,
.header--solid .nav-toggle__bars::after {
  background: var(--navy-800);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: rotate(-45deg);
}

/* Pages without a dark hero need the solid treatment immediately. */
.header--solid::after {
  opacity: 1;
}

.header--solid {
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- 6. Hero ------------------------------------------------------ */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(92vh, 860px);
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(4rem, 10vw, 7rem);
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
}

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

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 38%;
  transform: scale(1.08);
  animation: hero-settle 2.4s var(--ease) forwards;
}

@keyframes hero-settle {
  to {
    transform: scale(1);
  }
}

/* Two overlays: a horizontal wash for text contrast, a vertical one for depth. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(13, 39, 66, 0.9) 0%,
      rgba(13, 39, 66, 0.78) 32%,
      rgba(13, 39, 66, 0.36) 64%,
      rgba(18, 49, 86, 0.14) 100%
    ),
    linear-gradient(to top, rgba(13, 39, 66, 0.55) 0%, rgba(13, 39, 66, 0) 42%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__eyebrow {
  color: var(--teal-200);
}

.hero__title {
  max-width: 22ch;
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: -0.035em;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}

.hero__lead {
  max-width: 54ch;
  margin-top: 1.5rem;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.82);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}




/* ---------- 7. Stat strip ------------------------------------------------ */

.stats {
  position: relative;
  z-index: 2;
  margin-top: -3.5rem;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 0;
  border-radius: var(--radius-lg);
  background: var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.stat {
  padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem;
  background: var(--paper);
  text-align: center;
}

.stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.85rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy-700);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-soft);
}

.stat__star {
  color: var(--star);
  font-size: 0.6em;
}

/* ---------- 8. About ----------------------------------------------------- */

.about__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about__figure {
  position: relative;
  margin: 0;
}

.about__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.about__badge {
  position: absolute;
  left: -1.25rem;
  bottom: -1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--navy-700);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.about__badge b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.about__badge span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-200);
}

.about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* ---------- 9. Services -------------------------------------------------- */

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  /* Categories hold 2 to 9 treatments. Let each card end where its list ends
     rather than stretching short ones into tall empty boxes. */
  align-items: start;
}

.svc {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.svc:hover {
  border-color: var(--teal-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.svc__top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.svc__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--teal-050);
  color: var(--teal-600);
}

.svc__title {
  flex: 1;
  font-size: var(--fs-h3);
  color: var(--navy-800);
}


.svc__list li {
  position: relative;
  padding: 0.42rem 0 0.42rem 1.35rem;
  font-size: 0.9688rem;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.svc__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal-400);
  transition: width 0.2s var(--ease);
}

.svc__list li:hover {
  color: var(--navy-800);
  transform: translateX(3px);
}

.svc__list li:hover::before {
  width: 12px;
}




/* ---------- 10. Pillars -------------------------------------------------- */




.pillar {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--navy-800);
}






/* ---------- 11. Case-study teaser ---------------------------------------- */

.teaser {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.teaser h2 {
  font-size: var(--fs-h2);
  color: var(--navy-800);
}

.teaser p {
  max-width: 56ch;
  margin-top: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- 12. Reviews -------------------------------------------------- */

.reviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.rating {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: clamp(1rem, 3vw, 2rem);
  border-right: 1px solid var(--line);
}

.rating__score {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--navy-700);
  font-variant-numeric: tabular-nums;
}

.rating__meta {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.stars {
  display: inline-block;
  color: var(--star);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  line-height: 1;
}

.reviews__link {
  margin-left: auto;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--teal-600);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.25s var(--ease);
}

.reviews__link:hover {
  border-bottom-color: var(--teal-600);
}

/* Masonry via multi-column: reviews are naturally uneven, so let them be. */
.reviews__grid {
  column-count: 3;
  column-gap: var(--gap);
}

.review {
  break-inside: avoid;
  margin-bottom: var(--gap);
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.review:hover {
  border-color: var(--teal-200);
  box-shadow: var(--shadow-md);
}

.review__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.review__date {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.review__text {
  font-size: 0.9688rem;
  line-height: 1.62;
  color: var(--ink);
}

.review__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.review__name {
  font-weight: 600;
  font-size: 0.9063rem;
  color: var(--navy-800);
}

.review__badge {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--teal-050);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--teal-600);
}

.review__reply {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-left: 2px solid var(--navy-100);
  border-radius: 0 8px 8px 0;
  background: var(--mist);
}

.review__reply b {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--navy-700);
}

.review__reply p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.reviews__more {
  margin-top: 0.5rem;
  text-align: center;
}

/* ---------- 12b. Appointment form ---------------------------------------- */

.book__grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.form {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.field {
  margin-bottom: 1rem;
}

.field label,
.slots__legend {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy-800);
}

.field .req {
  color: var(--teal-600);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-family: inherit;
  font-size: 0.9688rem;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2356656f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px;
  padding-right: 2.2rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(21, 120, 138, 0.14);
  outline: none;
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #b3261e;
}

/* Preferred day / time grid. Columns are the clinic's real sessions. */
.slots {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.slots__hint {
  margin: 0.2rem 0 1rem;
  font-size: 0.8438rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.slots table {
  width: 100%;
  border-collapse: collapse;
}

.slots th,
.slots td {
  padding: 0;
  text-align: center;
}

.slots thead th {
  padding-bottom: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy-700);
  white-space: nowrap;
}

.slots tbody th {
  width: 34%;
  padding: 0.55rem 0.9rem;
  text-align: left;
  font-size: 0.9063rem;
  font-weight: 500;
  color: var(--ink);
}

.slots tbody tr:nth-child(odd) th,
.slots tbody tr:nth-child(odd) td {
  background: var(--mist);
}

.slots tbody tr:first-child th {
  border-radius: 9px 0 0 9px;
}

.slots tbody tr:first-child td:last-child {
  border-radius: 0 9px 9px 0;
}

.slots tbody td {
  padding: 0.55rem 0.4rem;
}

/* Large hit area: the whole cell is clickable, not just the box. */
.slot {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.slot:hover {
  background: var(--teal-050);
}

.slot input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--teal-500);
  cursor: pointer;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.form__note {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.form__status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-size: 0.9063rem;
  line-height: 1.55;
}

.form__status--ok {
  background: #e6f6ec;
  color: #14683a;
}

.form__status--err {
  background: #fdecec;
  color: #96201a;
}

/* Urgent-care route, sitting under the enquiry form so someone in pain is
   pointed at the phone rather than a form that waits on a reply. */
.urgent-note {
  max-width: 46rem;
  margin-top: 1.25rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--teal-200);
  border-left: 3px solid var(--teal-500);
  border-radius: 10px;
  background: var(--teal-050);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
}

.urgent-note a {
  font-weight: 600;
  color: var(--teal-600);
  border-bottom: 1px solid currentColor;
}

/* ---------- 12b-ii. International patients -------------------------------- */

.intl-band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.intl-band h2 {
  font-size: var(--fs-h2);
}

.intl-band p {
  max-width: 58ch;
  margin-top: 0.85rem;
  color: rgba(255, 255, 255, 0.74);
}


/* Numbered process. The order is real information here — each step depends on
   the one before it — so the numerals earn their place. */
/* Exactly four steps, so a 2x2 block rather than a ragged auto-fit row. */
.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 2.75rem;
  border-top: 2px solid var(--line);
  counter-increment: step;
}

.step::before {
  content: "0" counter(step);
  position: absolute;
  top: 0.9rem;
  left: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--teal-600);
  font-variant-numeric: tabular-nums;
}

.step h3 {
  font-size: 1.0625rem;
  color: var(--navy-800);
}

.step p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Send-us-this checklist */
.checklist {
  display: grid;
  gap: 0.85rem;
}

.checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.checklist svg {
  flex: none;
  margin-top: 3px;
  color: var(--teal-600);
}

.checklist b {
  color: var(--navy-800);
  font-weight: 600;
}








/* The international form is the page's main event, so it gets full width. */
.form--wide {
  max-width: 46rem;
}

/* ---------- 12c. Google reviews button ------------------------------------ */

.btn--google {
  gap: 0.7rem;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--navy-800);
}

.btn--google:hover {
  border-color: var(--navy-500);
  background: var(--navy-800);
  color: #fff;
  transform: translateY(-2px);
}

.gmark {
  flex: none;
  width: 18px;
  height: 18px;
}

.reviews__cta {
  margin-top: 2rem;
  text-align: center;
}

/* ---------- 13. Contact -------------------------------------------------- */

.contact__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.contact__list {
  display: grid;
  gap: 1.4rem;
}

.cline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}

.cline__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--teal-050);
  color: var(--teal-600);
}

.cline__label {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cline__value {
  font-size: 1.0313rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy-800);
}

.cline__value a {
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.cline__value a:hover {
  color: var(--teal-600);
  border-bottom-color: var(--teal-600);
}

.hours {
  font-variant-numeric: tabular-nums;
}

.hours span {
  display: block;
}

.hours .is-closed {
  color: var(--ink-soft);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status--open {
  background: #e6f6ec;
  color: #1a7f45;
}

.status--closed {
  background: #fdecec;
  color: #b3261e;
}

/* Booking panel */
.booking {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--navy-800);
  color: #fff;
}

.booking h3 {
  font-size: var(--fs-h3);
  color: #fff;
}

.booking p {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
}

.booking__options {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.bopt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.bopt:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--teal-400);
  transform: translateX(4px);
}

.bopt__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(127, 212, 224, 0.16);
  color: var(--teal-200);
}

/* The email address is a single 26-character token; without these it sets the
   row's minimum width and pushes the page sideways on small phones. */
.bopt > * {
  min-width: 0;
}

.bopt__label,
.bopt__meta,
.cline__value {
  overflow-wrap: anywhere;
}

.bopt__label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

.bopt__meta {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.62);
}

.bopt__arrow {
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.bopt:hover .bopt__arrow {
  color: var(--teal-200);
  transform: translateX(3px);
}

/* Map */
.map {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mist);
}

.map iframe {
  width: 100%;
  height: clamp(320px, 38vw, 480px);
  border: 0;
  filter: grayscale(0.25) contrast(1.02);
}

.map__directions {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  background: var(--paper);
  color: var(--navy-800);
  box-shadow: var(--shadow-md);
}

.map__directions:hover {
  background: var(--navy-700);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- 14. Footer --------------------------------------------------- */

.footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9063rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer .brand__name {
  color: #fff;
}

.footer .mark-tooth {
  fill: #fff;
}

.footer__blurb {
  max-width: 38ch;
  margin-top: 1.1rem;
  line-height: 1.65;
}

.footer h4 {
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-200);
}

.footer__links li + li {
  margin-top: 0.55rem;
}

.footer__links a {
  transition: color 0.2s var(--ease);
}

.footer__links a:hover {
  color: #fff;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.58);
}

.footer__socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.footer__socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.8);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease), transform 0.25s var(--ease);
}

.footer__socials a:hover {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- 15. Back to top ---------------------------------------------- */

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s var(--ease), background-color 0.25s var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--teal-500);
  transform: translateY(-3px);
}

/* ---------- 16. Modal & lightbox ----------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(13, 39, 66, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal__panel {
  position: relative;
  width: min(430px, 100%);
  padding: clamp(1.75rem, 4vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.35s var(--ease);
}

.modal.is-open .modal__panel {
  transform: none;
}

.modal__panel h2 {
  font-size: 1.5rem;
  color: var(--navy-800);
}

.modal__panel > p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--ink-soft);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.modal__close:hover {
  background: var(--mist);
  color: var(--navy-800);
}

.modal .booking__options {
  margin-top: 1.5rem;
}

/* Light variant of the booking rows, for use on the white modal. */
.modal .bopt {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
}

.modal .bopt:hover {
  background: var(--teal-050);
  border-color: var(--teal-400);
}

.modal .bopt__icon {
  background: var(--teal-050);
  color: var(--teal-600);
}

.modal .bopt__label {
  color: var(--navy-800);
}

.modal .bopt__meta {
  color: var(--ink-soft);
}

.modal .bopt__arrow {
  color: var(--line);
}

/* ---------- 16b. Subpages: page header ----------------------------------- */

.page-head {
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: var(--navy-800);
  color: #fff;
}

.page-head__crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s var(--ease);
}

.page-head__crumb:hover {
  color: #fff;
}

/* WCAG 2.2 asks for a 24px minimum target. These standalone links sat at
   16-21px, which is a fiddly tap on a phone. */
.page-head__crumb {
  padding-block: 0.35rem;
}

.footer__links a,
.footer__bottom a {
  display: inline-block;
  padding-block: 0.2rem;
}

.page-head h1 {
  max-width: 20ch;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 20, "WONK" 1;
}

.page-head__lead {
  max-width: 58ch;
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.76);
}

/* Consent / provenance notice above clinical imagery. */
.notice {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 62ch;
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
}

.notice svg {
  flex: none;
  margin-top: 2px;
  color: var(--teal-200);
}

/* ---------- 16c. Case studies -------------------------------------------- */

.cases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.case {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.case:hover {
  border-color: var(--teal-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.case__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--navy-900);
  cursor: zoom-in;
  overflow: hidden;
}

.case__media img {
  width: 100%;
  transition: transform 0.5s var(--ease);
}

.case:hover .case__media img {
  transform: scale(1.03);
}

/* Before/after source files are one vertically stacked pair per image, so the
   chips are positioned over each half rather than splitting the file. */
.chip {
  position: absolute;
  left: 0.75rem;
  z-index: 1;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(13, 39, 66, 0.82);
  backdrop-filter: blur(3px);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.chip--before {
  top: 0.75rem;
}

.chip--after {
  top: calc(50% + 0.75rem);
  background: rgba(21, 120, 138, 0.94);
}

.case__body {
  padding: 1.25rem 1.4rem 1.5rem;
}

.case__kicker {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-600);
}

.case__body h3 {
  font-size: 1.125rem;
  color: var(--navy-800);
}

.case__body p {
  margin-top: 0.5rem;
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- 16d. Lightbox ------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(13, 39, 66, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-width: min(100%, 900px);
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: #000;
}

.lightbox__caption {
  margin-top: 1.25rem;
  padding-bottom: 0.5rem;
  font-size: 0.9375rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

.lightbox__close {
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
}

.lightbox__nav--prev {
  left: clamp(0.5rem, 3vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--next {
  right: clamp(0.5rem, 3vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- 16e. About page: doctors & timeline --------------------------- */

.doctor {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.doctor + .doctor {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--line);
}

.doctor__figure {
  position: sticky;
  top: calc(var(--header-h) + 2.5rem);
  margin: 0;
}

.doctor__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Portrait slot before a photograph is supplied. */
.portrait-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: 1.5rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--mist);
  text-align: center;
}

.portrait-slot span {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.doctor__role {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-600);
}

.doctor h2 {
  font-size: var(--fs-h2);
  color: var(--navy-800);
}

.doctor__sub {
  margin-top: 0.5rem;
  font-size: var(--fs-lead);
  color: var(--ink-soft);
}

.doctor__block {
  margin-top: 2rem;
}

.doctor__block h3 {
  margin-bottom: 0.6rem;
  font-size: 1.0625rem;
  color: var(--navy-700);
}

.doctor__block p {
  color: var(--ink-soft);
}

/* Awaiting-content placeholder — visible on purpose, never silent filler. */
.todo {
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--teal-400);
  border-radius: var(--radius);
  background: var(--teal-050);
  font-size: 0.9063rem;
  line-height: 1.6;
  color: var(--teal-600);
}

.todo b {
  color: var(--navy-800);
}

.timeline {
  position: relative;
  margin-top: 2.5rem;
  padding-left: 2rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--teal-400), var(--navy-100));
}

.tl {
  position: relative;
  padding-bottom: 2rem;
}

.tl:last-child {
  padding-bottom: 0;
}

.tl::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 6px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 2px var(--teal-200);
}

.tl__year {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy-700);
  font-variant-numeric: tabular-nums;
}

.tl p {
  margin-top: 0.35rem;
  font-size: 0.9688rem;
  color: var(--ink-soft);
}

/* ---------- 16f. CTA band -------------------------------------------------- */

.cta-band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.25rem);
  border-radius: var(--radius-lg);
  background: var(--navy-800);
  color: #fff;
}

.cta-band h2 {
  font-size: var(--fs-h2);
}

.cta-band p {
  max-width: 52ch;
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- 17. Scroll reveal -------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Multi-column children misbehave under transform, so fade only. */
[data-reveal="fade"] {
  transform: none;
}

/* ---------- 18. Responsive ----------------------------------------------- */

@media (max-width: 1080px) {
  .reviews__grid {
    column-count: 2;
  }
}

/* Navigation collapses earlier than the rest of the layout: six links plus a
   CTA button stop fitting on one line at about 1200px. */
@media (max-width: 1180px) {
  .nav-toggle {
    display: inline-flex;
    position: relative;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 1.75rem;
    background: var(--paper);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
      visibility 0.3s var(--ease);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__link {
    padding: 0.85rem 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
    color: var(--navy-800);
  }

  .header .nav__link,
  .header.is-scrolled .nav__link {
    color: var(--navy-800);
  }

  .nav__link::after {
    display: none;
  }

  .header__cta {
    display: none;
  }
}

@media (max-width: 960px) {
  :root {
    --header-h: 68px;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .layout__head {
    position: static;
  }

  .layout__note {
    max-width: 60ch;
  }

  .about__grid,
  .contact__grid,
  .book__grid {
    grid-template-columns: 1fr;
  }

  .about__figure {
    order: -1;
  }

  .about__badge {
    left: 1rem;
  }

  .teaser,
  .cta-band,
  .intl-band {
    grid-template-columns: 1fr;
  }


  .doctor {
    grid-template-columns: 1fr;
  }

  .doctor__figure {
    position: static;
    max-width: 340px;
  }
}

@media (max-width: 760px) {
  /* One column on phones makes nine open reviews a long scroll, so five of
     them fold in behind the same "Show more reviews" button. Desktop is
     unaffected — this rule simply does not apply there. */
  .reviews__grid:not(.is-expanded) .review[data-mobile-extra] {
    display: none;
  }

  .stats {
    margin-top: -2rem;
  }

  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services__grid {
    grid-template-columns: 1fr;
  }

  .reviews__grid {
    column-count: 1;
  }

  .rating {
    padding-right: 0;
    border-right: 0;
  }

  .reviews__link {
    margin-left: 0;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
  }

  .form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .slots tbody th {
    width: 38%;
    padding: 0.5rem 0.5rem;
    font-size: 0.8438rem;
  }

  .slots thead th {
    font-size: 0.75rem;
    white-space: normal;
  }

  .form__actions .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 420px) {
  .stats__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- 19. Reduced motion ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero__media img {
    transform: none;
    animation: none;
  }
}

/* ---------- 20. Print ---------------------------------------------------- */

@media print {
  .header,
  .to-top,
  .modal,
  .map,
  .hero__media {
    display: none !important;
  }

  body {
    color: #000;
  }

  .hero {
    min-height: auto;
    background: none;
    color: #000;
  }
}