/* ==========================================================================
   Yusra - v2 layer.

   Loaded after yusra-ds.css. The v1 sheet still carries the pieces that are
   structurally fine and simply needed the new palette - forms, buttons,
   accordions, modals, calendar, slot grid, timeline, badges, alerts. Those
   inherit the purple tokens automatically and are not duplicated here.

   This file adds the composition language of the redesign: the marquee, the
   collage hero, counters, process rail, service and doctor cards, testimonial
   carousel, the emergency floating action button, and the reshaped header,
   footer and portal shell. It also neutralises the handful of v1 editorial
   mannerisms (serif italic emphasis, terracotta-era card treatments) that
   conflict with the new direction.

    1  v1 corrections
    2  eyebrow + section headings
    3  marquee (opening hours)
    4  header + navigation
    5  emergency FAB
    6  hero
    7  counters
    8  split feature blocks
    9  service + specialty cards
   10  doctor cards
   11  process rail
   12  testimonials
   13  footer
   14  portal shell
   15  symptom check
   16  pre-treatment accordions
   17  mood tracker + gallery
   ========================================================================== */

/* ==========================================================================
   1  v1 corrections
   ========================================================================== */

/* v1 emphasised a word inside a headline with a serif italic. The new
   direction is a confident geometric sans, where italic reads as a mistake.
   The class stays (it is in a lot of markup) but now shifts colour, which is
   how the reference draws attention inside a heading. */
   body {margin: 0;}
.ds-italic {
  font-style: normal;
  font-weight: inherit;
  color: var(--teal);
}

.ds-section--inverse .ds-italic,
.ds-hero .ds-italic { color: var(--accent); }

/* v1 headings were serif and relatively light. */
:is(h1, h2, h3, h4, h5, h6),
.ds-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-variation-settings: normal;
}

.ds-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-display-heavy);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}

/* v1 painted section headings terracotta. In the reference, headings are
   near-black and the brand colour is carried by chips, buttons and numbers. */
.ds-title-primary { color: var(--text-primary); }

.ds-lead { color: var(--text-secondary); font-size: var(--fs-lead); }

/* Section bands. */
.ds-section--cream    { background: var(--teal-tint); }
.ds-section--blush    { background: var(--teal-soft); }
.ds-section--lavender { background: var(--teal-soft); }
.ds-section--ivory    { background: var(--background); }
.ds-section--white    { background: var(--surface); }
.ds-section--inverse  { background: var(--teal-900); color: var(--text-inverse); }

.ds-card--blush  { background: var(--teal-soft); }
.ds-card--cream  { background: var(--teal-tint); }
.ds-card--lavender { background: var(--teal-soft); }

/* Cards in the reference are larger, softer and more generously padded. */
.ds-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

/* ==========================================================================
   2  eyebrow + section headings

   The reference labels every section with a small pill: a mark, then a short
   uppercase word. It replaces v1's "(01)" numbering.
   ========================================================================== */

/* No fill behind the words. A pill around an eyebrow is a house rule here:
   it reads as decoration applied to text rather than as typography, and the
   dot alone already separates the eyebrow from the heading under it. Buttons
   and inputs keep their backgrounds; running text never gets one. */
.v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  background: none;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-block-end: var(--space-5);
}

.v2-eyebrow::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.ds-section--inverse .v2-eyebrow {
  background: none;
  color: var(--text-inverse-muted);
}

/* Centred section intro, as used on services and testimonials. */
.v2-intro {
  max-inline-size: 44rem;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--space-12);
}

.v2-intro .ds-lead { margin-inline: auto; }

.v2-intro--start {
  margin-inline: 0;
  text-align: start;
}

/* ==========================================================================
   3  marquee - opening hours

   Two identical tracks side by side, each exactly 50% of the strip, animated
   by -50%. At the moment the first track leaves, the second is precisely
   where the first began, so the loop has no visible jump.

   The content is duplicated in the markup and the copy is aria-hidden, so a
   screen reader hears the hours once.
   ========================================================================== */

.v2-marquee {
  background: var(--teal-900);
  color: var(--text-inverse);
  overflow: hidden;
  position: relative;
  padding-block: 0.6875rem;
}

.v2-marquee__viewport {
  display: flex;
  inline-size: max-content;
  animation: v2-marquee var(--dur-marquee) linear infinite;
}

.v2-marquee:hover .v2-marquee__viewport,
.v2-marquee:focus-within .v2-marquee__viewport { animation-play-state: paused; }

.v2-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-inline-end: var(--space-6);
  white-space: nowrap;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.v2-marquee__item::after {
  content: "";
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

@keyframes v2-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* RTL: the strip must travel the other way, or it reads as reversing. */
:root[dir="rtl"] .v2-marquee__viewport { animation-name: v2-marquee-rtl; }

@keyframes v2-marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-marquee__viewport { animation: none; }
  .v2-marquee { overflow-x: auto; }
}

/* ==========================================================================
   4  header + navigation
   ========================================================================== */

.ds-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--background) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

.ds-header[data-scrolled="true"] {
  border-block-end-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.ds-header__inner { min-block-size: var(--header-h); gap: var(--space-6); }

.ds-logo {
  font-family: var(--font-display);
  font-weight: var(--fw-display-heavy);
  font-size: 1.4375rem;
  letter-spacing: -0.03em;
  color: var(--primary);
  gap: var(--space-2);
}

.ds-logo__mark { inline-size: 2rem; block-size: 2rem; }
.ds-logo em { font-style: normal; font-weight: var(--fw-medium); color: var(--text-primary); }

.ds-nav { gap: var(--space-1); }

.ds-nav__link {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.ds-nav__link:hover { background: var(--teal-soft); color: var(--primary); }
.ds-nav__link[aria-current="page"] { background: var(--teal-soft); color: var(--primary); }

/* --- header actions: Book Now, Sign In, user icon ---------------------- */

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

.v2-signin {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-pill);
}

.v2-signin:hover { color: var(--primary); }

@media (min-width: 62rem) { .v2-signin { display: inline-flex; } }

/* The user icon sits immediately beside Sign In, and becomes the avatar +
   first name once the patient is signed in. */
.v2-avatar {
  inline-size: 2.375rem;
  block-size: 2.375rem;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--border);
  text-decoration: none;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

.v2-avatar:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.v2-account-chip {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  text-decoration: none;
}

.v2-account-chip:hover { border-color: var(--primary); }
@media (min-width: 62rem) { .v2-account-chip { display: inline-flex; } }

.ds-menu-btn {
  border-radius: var(--radius-md);
  border-color: var(--border-strong);
}

@media (min-width: 62rem) { .ds-menu-btn { display: none; } }
@media (max-width: 61.99rem) { .ds-nav { display: none; } }

/* ==========================================================================
   5  emergency FAB

   Icon only, but never nameless: the accessible name comes from aria-label
   and the tooltip is decorative.
   ========================================================================== */

.v2-fab {
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  z-index: 60;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  border: none;
  background: var(--emergency);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-fab);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

@media (min-width: 48rem) {
  .v2-fab { inline-size: 3.75rem; block-size: 3.75rem; }
}

.v2-fab:hover { background: var(--emergency-hover); transform: scale(1.06); }
.v2-fab svg { inline-size: 1.375rem; block-size: 1.375rem; }

/* A single slow ring rather than a pulsing button - the button itself never
   moves, so it does not pull the eye off the content. */
.v2-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--emergency);
  animation: v2-ring 2.8s var(--ease-out) infinite;
  pointer-events: none;
}

@keyframes v2-ring {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.v2-fab__tip {
  position: absolute;
  inset-inline-end: calc(100% + 0.75rem);
  inset-block-start: 50%;
  transform: translateY(-50%);
  background: var(--teal-900);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  padding: 0.4375rem 0.75rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  pointer-events: none;
}

.v2-fab:hover .v2-fab__tip,
.v2-fab:focus-visible .v2-fab__tip { opacity: 1; visibility: visible; }

/* Touch devices get no hover tooltip, and the ring is wasted battery. */
@media (hover: none) {
  .v2-fab__tip { display: none; }
  .v2-fab::before { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-fab::before { animation: none; }
}

/* ==========================================================================
   6  hero

   Deep purple ground, headline and CTAs on the inline-start side, an
   asymmetric collage of rounded photographs opposite.
   ========================================================================== */

.v2-hero {
  background: var(--teal-900);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(3.5rem, 2.4rem + 4.4vw, 6rem);
}

/* Soft purple bloom, so the flat ground is not completely inert. */
.v2-hero::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: -10%;
  inline-size: 55rem;
  block-size: 55rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 68, 154, 0.42) 0%, transparent 62%);
  pointer-events: none;
}

.v2-hero > * { position: relative; }

.v2-hero__grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 62rem) {
  .v2-hero__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}

.v2-hero h1 {
  color: var(--text-inverse);
  font-size: var(--fs-display);
  font-weight: var(--fw-display-heavy);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin-block-end: var(--space-5);
  text-wrap: balance;
}

.v2-hero__lead {
  color: var(--text-inverse-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  max-inline-size: 34rem;
  margin-block-end: var(--space-8);
}

/* --- collage ------------------------------------------------------------
   Three columns of rounded photographs at staggered vertical offsets. Each
   tile keeps its aspect ratio, so nothing distorts as the column narrows. */

.v2-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.v2-collage__col { display: grid; gap: var(--space-3); }
.v2-collage__col:nth-child(1) { margin-block-start: var(--space-8); }
.v2-collage__col:nth-child(3) { margin-block-start: var(--space-12); }

.v2-collage figure {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-inverse-2);
}

.v2-collage img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.v2-collage .tall  { aspect-ratio: 3 / 4; }
.v2-collage .short { aspect-ratio: 1 / 1; }

@media (max-width: 30rem) {
  .v2-collage__col:nth-child(3) { display: none; }
  .v2-collage { grid-template-columns: repeat(2, 1fr); }
}

/* --- trust strip under the hero copy ------------------------------------ */

.v2-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-8);
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}

.v2-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-inverse);
}

.v2-trust-item svg {
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent);
}

/* ==========================================================================
   7  counters
   ========================================================================== */

.v2-stats {
  display: grid;
  gap: var(--space-10) var(--space-8);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 56rem) {
  .v2-stats { grid-template-columns: repeat(4, 1fr); }
}

.v2-stat__index {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent-strong);
  margin-block-end: var(--space-3);
}

.v2-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-display-heavy);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--primary);
  font-variant-numeric: tabular-nums lining-nums;
}

.v2-stat__label {
  display: block;
  margin-block-start: var(--space-3);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  max-inline-size: 12rem;
}

/* A hairline between columns, as in the reference. */
@media (min-width: 56rem) {
  .v2-stats > * + * {
    border-inline-start: 1px solid var(--border);
    padding-inline-start: var(--space-8);
  }
}

/* ==========================================================================
   8  split feature blocks
   ========================================================================== */

.v2-split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 62rem) {
  .v2-split { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .v2-split--wide-media { grid-template-columns: 1.1fr 1fr; }
  .v2-split--wide-text  { grid-template-columns: 1fr 1.1fr; }
  .v2-split--flip > :first-child { order: 2; }
}

.v2-media {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--teal-soft);
}

.v2-media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.v2-media--tall  { aspect-ratio: 4 / 5; }
.v2-media--wide  { aspect-ratio: 16 / 11; }
.v2-media--square{ aspect-ratio: 1 / 1; }

/* Floating stat pill over an image, straight from the reference. */
.v2-media__pill {
  position: absolute;
  inset-block-end: var(--space-5);
  inset-inline-start: var(--space-5);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
}

.v2-media__pill b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-display-heavy);
  color: var(--primary);
  line-height: 1;
}

.v2-media__pill span {
  display: block;
  margin-block-start: 0.25rem;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}

/* Checklist used beside feature imagery. */
.v2-checklist {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 34rem) { .v2-checklist { grid-template-columns: 1fr 1fr; } }

.v2-checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.v2-checklist svg {
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--primary);
}

.ds-section--inverse .v2-checklist li { color: var(--text-inverse); }
.ds-section--inverse .v2-checklist svg { background: rgba(255,255,255,.14); color: var(--accent); }

/* ==========================================================================
   9  service + specialty cards
   ========================================================================== */

.v2-cards {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 16rem)), 1fr));
}

.v2-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  block-size: 100%;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

a.v2-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.v2-card__icon {
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}

a.v2-card:hover .v2-card__icon { background: var(--teal); }

.v2-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  margin: 0;
  color: var(--text-primary);
}

.v2-card__text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}

.v2-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--primary);
}

.v2-card__more svg { transition: transform var(--dur-fast) var(--ease-out); }
a.v2-card:hover .v2-card__more svg { transform: translateX(4px); }
:root[dir="rtl"] .v2-card__more svg { transform: scaleX(-1); }
:root[dir="rtl"] a.v2-card:hover .v2-card__more svg { transform: scaleX(-1) translateX(4px); }

/* Media variant - the card leads with a photograph. */
.v2-card--media { padding: 0; overflow: hidden; }
.v2-card--media .v2-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.v2-card__media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--teal-soft); }
.v2-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
a.v2-card:hover .v2-card__media img { transform: scale(1.05); }

/* ==========================================================================
   10  doctor cards
   ========================================================================== */

.v2-doctor {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  block-size: 100%;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.v2-doctor:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.v2-doctor__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--teal-soft);
  position: relative;
}

.v2-doctor__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.v2-doctor:hover .v2-doctor__photo img { transform: scale(1.04); }

.v2-doctor__years {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
}

.v2-doctor__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.v2-doctor__name { font-size: var(--fs-h4); font-weight: var(--fw-bold); margin: 0; }
.v2-doctor__role { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--primary); }
.v2-doctor__text { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; flex: 1; }
.v2-doctor__meta { font-size: var(--fs-caption); color: var(--text-tertiary); }
.v2-doctor__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }

/* ==========================================================================
   11  process rail
   ========================================================================== */

.v2-process {
  display: grid;
  gap: var(--space-8);
  counter-reset: v2step;
}

@media (min-width: 48rem) { .v2-process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .v2-process { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

.v2-step { position: relative; padding-block-start: var(--space-4); }

.v2-step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: var(--fw-display-heavy);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--teal-soft);
  margin-block-end: var(--space-3);
}

.v2-step__dot {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  margin-block-end: var(--space-4);
  position: relative;
  z-index: 1;
}

.v2-step__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); margin: 0 0 var(--space-2); }
.v2-step__text  { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* Dashed connector between steps, only where the row actually continues. */
@media (min-width: 68rem) {
  .v2-step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--space-4) + 1.375rem);
    inset-inline-start: 3.25rem;
    inline-size: calc(100% - 2rem);
    border-block-start: 2px dashed var(--border-strong);
  }
}

/* ==========================================================================
   12  testimonials
   ========================================================================== */

.v2-quotes {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) { .v2-quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .v2-quotes { grid-template-columns: repeat(3, 1fr); } }

.v2-quote {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  block-size: 100%;
  margin: 0;
}

.v2-quote__mark { inline-size: 2.25rem; block-size: 2.25rem; color: var(--teal-soft); }
.v2-quote__text { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-primary); margin: 0; flex: 1; }
.v2-quote__foot { display: flex; align-items: center; gap: var(--space-3); }
.v2-quote__avatar { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; object-fit: cover; flex: none; }
.v2-quote__name { font-weight: var(--fw-bold); font-size: var(--fs-ui); }
.v2-quote__treat { font-size: var(--fs-caption); color: var(--text-tertiary); }
.v2-rating { display: inline-flex; gap: 0.125rem; color: var(--accent); }
.v2-rating svg { inline-size: 1rem; block-size: 1rem; }

/* On a phone the three become one swipeable rail with snap points. */
@media (max-width: 47.99rem) {
  .v2-quotes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block-end: var(--space-4);
    scrollbar-width: none;
  }
  .v2-quotes::-webkit-scrollbar { display: none; }
  .v2-quote { flex: 0 0 min(86%, 22rem); scroll-snap-align: start; }
}

/* ==========================================================================
   13  footer
   ========================================================================== */

.ds-footer {
  background: var(--teal-900);
  color: var(--text-inverse-muted);
  padding-block: var(--section-y) var(--space-8);
}

.ds-footer__title {
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-inverse);
  margin-block-end: var(--space-5);
}

.ds-footer__list a:hover { color: var(--accent); }
.ds-footer__bottom { border-block-start-color: var(--border-inverse); }

.v2-social { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); }

.v2-social a {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.v2-social a:hover { background: var(--accent); }
.v2-social svg { inline-size: 1.125rem; block-size: 1.125rem; }

/* ==========================================================================
   14  portal shell
   ========================================================================== */

.ds-portal__body { gap: var(--space-10); }

@media (min-width: 64rem) {
  .ds-portal__body { grid-template-columns: 16.5rem 1fr; gap: var(--space-12); }
}

.ds-rail__list { gap: var(--space-1); }

.ds-rail__link {
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
}

.ds-rail__link:hover { background: var(--teal-soft); color: var(--primary); }

.ds-rail__link[aria-current="page"] {
  background: var(--primary);
  color: #fff;
}

.ds-tabbar__link[aria-current="page"] { color: var(--primary); }

.ds-portal__greeting {
  font-family: var(--font-display);
  font-weight: var(--fw-display-heavy);
  letter-spacing: var(--ls-heading);
}

.ds-portal__section-title {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* --- treatment progress ------------------------------------------------- */

.v2-progress-card {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.v2-progress-card h2 { color: #fff; font-size: var(--fs-h3); margin: 0 0 var(--space-5); }

.v2-progress-bar {
  block-size: 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.v2-progress-bar__fill {
  block-size: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: inline-size var(--dur-slow) var(--ease-out);
}

.v2-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.86);
}

.v2-progress-meta b { font-size: var(--fs-h3); font-family: var(--font-display); color: #fff; }

/* --- patient stat cards -------------------------------------------------- */

.v2-statcards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }

.v2-statcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.v2-statcard__icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--teal-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin-block-end: var(--space-2);
}

.v2-statcard__value { font-family: var(--font-display); font-size: 1.875rem; font-weight: var(--fw-display-heavy); line-height: 1; color: var(--text-primary); }
.v2-statcard__label { font-size: var(--fs-caption); color: var(--text-secondary); font-weight: var(--fw-semibold); }

/* ==========================================================================
   15  symptom check
   ========================================================================== */

.v2-choice-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

.v2-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  min-block-size: 7.5rem;
  padding: var(--space-5) var(--space-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.v2-choice input {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.v2-choice:hover { border-color: var(--primary); }
.v2-choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.v2-choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--teal-soft);
}

.v2-choice__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--teal-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.v2-choice:has(input:checked) .v2-choice__icon { background: var(--primary); color: #fff; }

/* A tick appears on selection, so state is never carried by colour alone. */
.v2-choice:has(input:checked)::after {
  content: "";
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 50%;
  background: var(--primary);
  mask: none;
  box-shadow: inset 0 0 0 2px var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size: 0.75rem;
  background-position: center;
  background-repeat: no-repeat;
}

/* Result card. */
.v2-result {
  background: var(--surface);
  border-radius: var(--radius-2xl);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  border: 1px solid var(--border);
}

.v2-result__maybe {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display-heavy);
  letter-spacing: var(--ls-heading);
  color: var(--primary);
  margin: 0 0 var(--space-4);
}

/* ==========================================================================
   16  pre-treatment accordions
   ========================================================================== */

.v2-acc { display: flex; flex-direction: column; gap: var(--space-3); }

.v2-acc__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.v2-acc__item[data-state="done"] { border-color: var(--success); }
.v2-acc__item[data-state="attention"] { border-color: var(--warning); }

.v2-acc__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: transparent;
  border: 0;
  text-align: start;
  cursor: pointer;
  font-family: var(--font-body);
  min-block-size: var(--touch-min);
}

.v2-acc__btn:hover { background: var(--teal-tint); }

.v2-acc__state {
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.v2-acc__item[data-state="done"] .v2-acc__state { background: var(--success); border-color: var(--success); color: #fff; }
.v2-acc__item[data-state="progress"] .v2-acc__state { background: var(--teal-soft); border-color: var(--primary); color: var(--primary); }
.v2-acc__item[data-state="attention"] .v2-acc__state { background: var(--warning-tint); border-color: var(--warning); color: var(--warning); }

.v2-acc__label { flex: 1; min-inline-size: 0; }

.v2-acc__index {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  letter-spacing: var(--ls-eyebrow);
}

.v2-acc__title {
  display: block;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

/* The asterisk is red AND accompanied by a "Required" badge, so the
   requirement is never signalled by colour alone. */
.v2-req { color: var(--error); font-weight: var(--fw-bold); margin-inline-start: 0.15em; }

.v2-acc__chev {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--text-tertiary);
  transition: transform var(--dur-base) var(--ease-out);
}

.v2-acc__btn[aria-expanded="true"] .v2-acc__chev { transform: rotate(180deg); }

.v2-acc__panel { padding: 0 var(--space-6) var(--space-6); }

.v2-why {
  background: var(--teal-tint);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-block-end: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.v2-why b { color: var(--text-primary); display: block; margin-block-end: 0.25rem; }

/* ==========================================================================
   17  mood tracker + image gallery
   ========================================================================== */

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

.v2-mood__opt {
  position: relative;
  flex: 1 1 6rem;
  min-inline-size: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.v2-mood__opt input {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.v2-mood__opt:hover { border-color: var(--primary); }
.v2-mood__opt:has(input:checked) { border-color: var(--primary); background: var(--teal-soft); }
.v2-mood__opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.v2-mood__emoji { font-size: 1.75rem; line-height: 1; }

/* --- gallery ------------------------------------------------------------- */

.v2-gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }

.v2-shot {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  padding: 0;
  text-align: start;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
}

.v2-shot img { aspect-ratio: 4 / 3; object-fit: cover; inline-size: 100%; display: block; background: var(--teal-soft); }
.v2-shot__meta { padding: var(--space-3) var(--space-4); }
.v2-shot__type { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); }
.v2-shot__date { font-size: var(--fs-caption); color: var(--text-tertiary); }

/* Lightbox reuses the dialog element so Esc, the top layer and the backdrop
   all come from the platform. */
.v2-lightbox { border: 0; padding: 0; background: transparent; max-inline-size: min(60rem, 94vw); }
.v2-lightbox::backdrop { background: rgba(36, 29, 41, 0.82); }
.v2-lightbox img { inline-size: 100%; block-size: auto; border-radius: var(--radius-lg); }
.v2-lightbox figcaption { color: #fff; padding-block-start: var(--space-3); font-size: var(--fs-sm); }

/* ==========================================================================
   18  round-two corrections
   ========================================================================== */

/* The booking and symptom-check flows move focus to the step heading so the
   change is announced. Chrome treats that programmatic focus as
   :focus-visible and drew the design system's focus ring around the
   question, which read as a stray border. A heading is a scroll target, not
   an interactive control, so it gets no ring - keyboard users still get one
   on the controls themselves. */
:is(h1, h2, h3)[tabindex="-1"]:focus,
:is(h1, h2, h3)[tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Section labels lost their "(01)" counters - the chip alone carries them. */
.ds-eyebrow__num { display: none; }

.ds-eyebrow {
  color: var(--primary);
  font-weight: var(--fw-bold);
}

/* --- hero --------------------------------------------------------------
   One photograph rather than a collage, and a calmer gap between the rule
   and the three reassurance points beneath it. */

.v2-hero__figure {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--surface-inverse-2);
  aspect-ratio: 4 / 3.4;
  margin: 0;
}

@media (min-width: 62rem) { .v2-hero__figure { aspect-ratio: 1 / 1; } }

.v2-hero__figure img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.v2-hero__trust {
  gap: var(--space-5) var(--space-8);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
}

/* --- statistics band ----------------------------------------------------
   No index labels, smaller numerals, a shallower band. */

.v2-stat__index { display: none; }

.v2-stats { gap: var(--space-6) var(--space-8); }

.v2-stat__value {
  font-size: clamp(2rem, 1.35rem + 2.75vw, 3.25rem);
  letter-spacing: -0.03em;
}

.v2-stat__label {
  margin-block-start: var(--space-2);
  font-size: var(--fs-sm);
}

.ds-section--stats { padding-block: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); }

/* --- process ------------------------------------------------------------
   Centred, with the connector running behind the markers rather than
   off to one side. */

.v2-process--center { text-align: center; }
.v2-process--center .v2-step { display: flex; flex-direction: column; align-items: center; }
.v2-process--center .v2-step__dot { margin-inline: auto; }
.v2-process--center .v2-step__text { max-inline-size: 22rem; margin-inline: auto; }

@media (min-width: 68rem) {
  .v2-process--center .v2-step:not(:last-child)::after {
    inset-block-start: calc(var(--space-4) + 1.375rem);
    inset-inline-start: calc(50% + 2.25rem);
    inline-size: calc(100% - 4.5rem);
  }
}

/* --- emergency: "go to hospital" panel ---------------------------------
   Was a red alert strip that sat narrower than the section below it. Now a
   full section in the page's own language, in orange rather than red,
   because it is guidance rather than an error. */

.v2-urgent-panel {
  background: var(--accent-soft);
  border: 2px solid var(--emergency);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
}

.v2-urgent-panel h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-h3);
  color: var(--emergency-text);
  margin-block: 0 var(--space-4);
}

.v2-urgent-panel h2 svg { flex: none; inline-size: 1.75rem; block-size: 1.75rem; }

.v2-urgent-panel ul {
  margin: 0;
  padding-inline-start: var(--space-6);
  color: var(--text-secondary);
  line-height: 1.9;
}

/* --- booking confirmation ----------------------------------------------
   The secondary row now matches the width of the primary button above it,
   splitting the same measure evenly instead of hugging its own content. */

.v2-done-actions {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .v2-done-actions { grid-template-columns: repeat(3, 1fr); }
}

.v2-done-actions > * { inline-size: 100%; }

/* --- contact map -------------------------------------------------------
   The embed stretches to whatever height the column beside it takes, so the
   two sides finish level on desktop. */

.v2-map {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--teal-soft);
  min-block-size: 22rem;
  block-size: 100%;
}

.v2-map iframe { inline-size: 100%; block-size: 100%; min-block-size: 22rem; border: 0; display: block; }

@media (min-width: 62rem) {
  .v2-split--map { align-items: stretch; }
  .v2-split--map > * { min-inline-size: 0; }
}

/* --- portal ------------------------------------------------------------- */

/* The pre-visit call to action belongs inside the card it refers to, pinned
   to the corner where the eye finishes reading. */
.v2-previsit-card { position: relative; }

.v2-previsit-card__cta {
  display: flex;
  justify-content: flex-end;
  margin-block-start: var(--space-5);
}

/* A completed treatment stage opens its own detail page, so it has to look
   and behave like a link. */
.ds-timeline__item--link { cursor: pointer; }

.ds-timeline__link {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.ds-timeline__link:hover { background: var(--teal-soft); }

.ds-timeline__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--primary);
}

:root[dir="rtl"] .ds-timeline__more svg { transform: scaleX(-1); }

/* --- wizard "not yet complete" state ------------------------------------
   The booking and symptom-check Continue buttons used aria-disabled to look
   inactive until the step was answered. But the design system gives
   [aria-disabled] pointer-events:none, so the click handler never ran and
   the button could not explain what was missing - it just looked broken.

   These buttons are always clickable. They dim only as a hint, and pressing
   one surfaces the validation message. aria-disabled is not used, because
   the control genuinely does something when pressed. */
.ds-btn[data-incomplete="true"] {
  opacity: 0.62;
}

.ds-btn[data-incomplete="true"]:hover {
  opacity: 1;
}

/* The rule above the three reassurance points needed breathing room, not
   less of it - the earlier tightening went too far. */
.v2-hero__trust {
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-8);
  gap: var(--space-5) var(--space-8);
}

/* "Why choose us" cards lead with a photograph. The image sits above the
   icon chip, which overlaps the join so the card still reads as one object. */
.v2-card--photo { padding: 0; overflow: hidden; }
.v2-card--photo .v2-card__shot { aspect-ratio: 16 / 10; overflow: hidden; background: var(--teal-soft); }
.v2-card--photo .v2-card__shot img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.v2-card--photo .v2-card__body {
  padding: 0 var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.v2-card--photo .v2-card__icon {
  margin-block-start: calc(var(--space-6) * -1);
  margin-block-end: var(--space-3);
  box-shadow: 0 0 0 4px var(--surface);
}