/* =====================================================================
   RIGHT CARE — design system
   ---------------------------------------------------------------------
   Colour     Brand navy #213547 and brand gold #E9BA64, sampled from the
              existing site. Navy carries text and dark fields; gold is
              reserved for the one action that matters — booking.
   Type       Gabarito for display (warm geometric, distinct lowercase),
              IBM Plex Sans for body, IBM Plex Sans Arabic for RTL.
              Base size 17px: a large share of visitors are older adults.
   Layout     The hero puts a photograph in a raised card that overlaps a
              navy field, with the first step of the booking wizard docked
              at its lower edge. Booking is the site's job, so booking is
              the hero — not a stock photo with a headline over it.
   Motion     One orchestrated reveal on page load. Everything else moves
              only in response to a click. Reduced motion respected.
   Direction  Logical properties throughout, so Arabic RTL needs no
              duplicated rules.
   ===================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────── */
:root {
  --navy-900: #16232F;
  --navy-800: #1B2C3C;
  --navy:     #213547;
  --navy-600: #33506A;
  --navy-400: #6B8299;
  --navy-200: #C3D0DA;

  --gold:      #E9BA64;
  --gold-lift: #F2CE8B;
  --gold-deep: #9A6D18;   /* gold-family tone that passes contrast on white */

  --mist:  #F2F5F7;
  --sand:  #FBF7F0;
  --line:  #E2E9EE;
  --white: #FFFFFF;

  --ok:    #2E7D5B;
  --warn:  #B8791C;
  --stop:  #B4443A;
  --info:  #2F6690;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(33, 53, 71, .06), 0 2px 8px rgba(33, 53, 71, .05);
  --shadow-md: 0 4px 12px rgba(33, 53, 71, .07), 0 12px 32px rgba(33, 53, 71, .07);
  --shadow-lg: 0 8px 24px rgba(33, 53, 71, .09), 0 32px 64px rgba(33, 53, 71, .11);

  --wrap: 1180px;
  --gutter: 24px;
  --header-h: 82px;

  --ff-display: 'Gabarito', 'IBM Plex Sans', system-ui, sans-serif;
  --ff-body: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

html[dir="rtl"] {
  --ff-display: 'IBM Plex Sans Arabic', 'Gabarito', system-ui, sans-serif;
  --ff-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--navy); text-decoration-color: var(--navy-200); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gold); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; inset-inline-start: 12px; top: -60px;
  background: var(--navy); color: #fff; padding: 12px 20px;
  border-radius: var(--r-sm); z-index: 999; transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ── Typography ───────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--navy);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
h4 { font-size: 1.1rem; }

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 {
  letter-spacing: 0;
  line-height: 1.35;
}

p { max-width: 68ch; }
html[dir="rtl"] p { max-width: 62ch; }

.lead { font-size: 1.15rem; color: var(--navy-600); }
.muted { color: var(--navy-400); }
.small { font-size: .875rem; }

/* ── Layout ───────────────────────────────────────────────────────── */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(56px, 7vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--mist { background: var(--mist); }
.section--sand { background: var(--sand); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }

.section-head { max-width: 620px; margin-bottom: 44px; }
.section-head p { color: var(--navy-600); margin-top: 12px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stack > * + * { margin-block-start: 16px; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ff-display);
  font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 16px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn--gold { background: var(--gold); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-lift); }

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

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy-200); }
.btn--ghost:hover { border-color: var(--navy); background: var(--mist); }

.btn--onnavy { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn--onnavy:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

.btn--sm { padding: 10px 16px; font-size: .9rem; border-radius: var(--r-sm); }
.btn--block { width: 100%; }
.btn--danger { background: var(--stop); color: #fff; }
.btn--danger:hover { background: #9C3931; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Arrows must flip in RTL rather than point the wrong way. */
html[dir="rtl"] .btn .fa-arrow-right, html[dir="rtl"] .flip-x { transform: scaleX(-1); }

/* ── Header ───────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: var(--header-h);
}
.header__logo { flex-shrink: 0; }
.header__logo img { height: 46px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav a {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: .97rem; font-weight: 500;
  text-decoration: none; color: var(--navy-600);
  white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.nav a:hover { color: var(--navy); background: var(--mist); }
.nav a[aria-current="page"] {
  color: var(--navy); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--gold);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.lang-switch { display: flex; border: 1.5px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.lang-switch a {
  padding: 7px 13px; font-size: .82rem; font-weight: 600;
  text-decoration: none; color: var(--navy-400);
}
.lang-switch a[aria-current="true"] { background: var(--gold); color: var(--navy-900); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: transparent; cursor: pointer; color: var(--navy);
}
.icon-btn:hover { border-color: var(--navy); }
.nav-toggle { display: none; }

/* Mobile navigation */
@media (max-width: 1080px) {
  .nav, .header__actions .desktop-only { display: none; }
  .nav-toggle { display: inline-grid; }

  .nav--open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: #fff; padding: 16px var(--gutter) 28px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav--open a { padding: 15px 12px; font-size: 1.05rem; border-radius: var(--r-md); }
  .nav--open a[aria-current="page"] { background: var(--mist); box-shadow: none; }
  .nav--open .nav__mobile-cta { margin-top: 14px; }
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.hero::after {
  /* Soft warm light from the upper corner — a single gradient, not a wash. */
  content: ""; position: absolute; inset-inline-end: -12%; top: -30%;
  width: 62vw; height: 62vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 186, 100, .17), transparent 62%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  padding-block: clamp(48px, 6vw, 88px) clamp(120px, 12vw, 150px);
}
.hero h1 { color: #fff; }
.hero__text { color: #C9D8E4; font-size: 1.15rem; margin-block: 20px 32px; max-width: 46ch; }
.hero .btn-row { margin-bottom: 34px; }

.hero__proof { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
.hero__proof span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .93rem; color: #B7CADA;
}
.hero__proof i { color: var(--gold); font-size: .9rem; }

.hero__media { position: relative; }
.hero__photo {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background: var(--navy-800);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Docked booking strip: the first step of the wizard, in the hero. */
.quick-book {
  position: relative; z-index: 3;
  margin-top: -74px; margin-bottom: -56px;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px; align-items: end;
}
.quick-book__label {
  font-family: var(--ff-display); font-weight: 600;
  grid-column: 1 / -1; margin-bottom: -4px;
}
.quick-book .field { margin: 0; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; padding-block-end: clamp(96px, 20vw, 130px); }
  .hero__media { order: -1; }
  .hero__photo { aspect-ratio: 16 / 11; }
  .quick-book { grid-template-columns: 1fr; margin-top: -60px; }
}

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--pad-lg { padding: clamp(28px, 4vw, 44px); }

/* Service card: image, then a body that grows so buttons stay aligned. */
.service-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--navy-200); }
.service-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--mist); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-lg) var(--r-lg) 0 0; }
.service-card__icon {
  position: absolute; inset-block-end: -22px; inset-inline-start: 24px;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--gold); color: var(--navy-900);
  border-radius: var(--r-md); font-size: 1.15rem;
  box-shadow: var(--shadow-sm);
}
.service-card__body { padding: 34px 24px 24px; display: flex; flex-direction: column; flex: 1; }

.service-card__body h3 { margin-bottom: 10px; }
.service-card__body p { color: var(--navy-600); font-size: .97rem; flex: 1; }
.service-card__actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.service-card__actions .btn { flex: 1; min-width: 120px; }

/* Trust strip below the hero */
.trust-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.trust-item { display: flex; gap: 16px; align-items: flex-start; }
.trust-item i {
  flex-shrink: 0; width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--sand); color: var(--gold-deep);
  border-radius: var(--r-md); font-size: 1.1rem;
}
.trust-item h3 { font-size: 1.02rem; margin-bottom: 4px; }
.trust-item p { font-size: .92rem; color: var(--navy-600); margin: 0; }

/* Statistics band */
.stats { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat__num {
  font-family: var(--ff-display); font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3.2rem);
  font-weight: 600; color: var(--gold); line-height: 1;
}
.stat p { font-size: .94rem; color: #B7CADA; margin-top: 10px; max-width: 22ch; }

/* Reason list — icon, heading, text */
.reason { display: flex; gap: 16px; }
.reason i {
  flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--mist); color: var(--navy);
}
.reason h3 { font-size: 1.05rem; margin-bottom: 6px; }
.reason p { font-size: .94rem; color: var(--navy-600); margin: 0; }

/* How it works — genuinely a sequence, so numbering earns its place. */
.steps { counter-reset: step; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step-item { position: relative; padding-top: 58px; }
.step-item::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; inset-inline-start: 0;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--navy); color: var(--gold);
  font-family: var(--ff-display); font-weight: 600; font-size: 1.05rem;
}
.step-item::after {
  content: ""; position: absolute; top: 22px;
  inset-inline-start: 56px; inset-inline-end: -14px;
  height: 1px; background: var(--line);
}
.step-item:last-child::after { display: none; }
.step-item h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step-item p { font-size: .94rem; color: var(--navy-600); margin: 0; }
@media (max-width: 720px) { .step-item::after { display: none; } }

/* Testimonials */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px; display: flex; flex-direction: column; gap: 18px;
}
.quote__stars { color: var(--gold); font-size: .9rem; letter-spacing: 2px; }
.quote blockquote { font-size: 1.02rem; line-height: 1.7; color: var(--navy-600); flex: 1; }
.quote__by { display: flex; align-items: center; gap: 12px; }
.quote__avatar {
  width: 42px; height: 42px; border-radius: var(--r-pill);
  background: var(--navy); color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--ff-display); font-weight: 600;
}
.quote__by strong { display: block; font-size: .96rem; }
.quote__by span { font-size: .85rem; color: var(--navy-400); }

/* ── Accordion (FAQ) ──────────────────────────────────────────────── */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%; text-align: start;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--ff-display); font-weight: 600; font-size: 1.06rem;
  color: var(--navy);
}
.accordion__trigger i { flex-shrink: 0; color: var(--gold-deep); transition: transform .22s ease; }
.accordion__trigger[aria-expanded="true"] i { transform: rotate(45deg); }
.accordion__panel { display: none; padding: 0 4px 24px; }
.accordion__panel[data-open] { display: block; }
.accordion__panel p { color: var(--navy-600); }

/* ── Forms ────────────────────────────────────────────────────────── */
.field { margin-bottom: 20px; }
.field > label, .label {
  display: block; margin-bottom: 8px;
  font-weight: 600; font-size: .93rem; color: var(--navy);
}
.field .hint { display: block; font-weight: 400; color: var(--navy-400); font-size: .85rem; margin-top: 3px; }

.input, .select, .textarea {
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .15s, box-shadow .15s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--navy-200); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(33, 53, 71, .09);
}
.textarea { min-height: 120px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236B8299' stroke-width='1.8'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-inline-end: 42px;
}
html[dir="rtl"] .select { background-position: left 16px center; padding-inline-end: 16px; padding-inline-start: 42px; }

.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--stop); }
.error-text { display: block; color: var(--stop); font-size: .87rem; margin-top: 6px; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--navy); }

.form-grid { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }

.auth-card { max-width: 500px; margin-inline: auto; }
.auth-card .btn { margin-top: 4px; }
.auth-alt { text-align: center; margin-top: 24px; font-size: .95rem; color: var(--navy-600); }

/* ── Alerts ───────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 18px;
  border-radius: var(--r-md);
  border-inline-start: 4px solid;
  margin-bottom: 22px;
  font-size: .95rem;
}
.alert i { margin-top: 3px; flex-shrink: 0; }
.alert p { margin: 0; }
.alert--success { background: #EDF7F1; border-color: var(--ok); color: #1E5A40; }
.alert--error   { background: #FCEFEE; border-color: var(--stop); color: #8C332B; }
.alert--info    { background: #EDF4F9; border-color: var(--info); color: #21506F; }
.alert--warning { background: #FDF5E7; border-color: var(--warn); color: #7C5310; }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--pending     { background: #FDF3E3; color: #8A5D12; }
.badge--confirmed   { background: #E8F1F8; color: #235D86; }
.badge--assigned    { background: #EDEBFA; color: #4A3E93; }
.badge--in_progress { background: #E5F3EE; color: #1D6B4E; }
.badge--completed   { background: #E7F4EC; color: #1E5A3B; }
.badge--cancelled   { background: #F1F3F5; color: #5A6874; }
.badge--rejected    { background: #FBEDEC; color: #93372F; }
.badge--rescheduled { background: #FDF1E6; color: #8A4E12; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--sand); color: var(--gold-deep);
  font-size: .85rem; font-weight: 600;
}

/* ── Booking wizard ───────────────────────────────────────────────── */
.wizard { max-width: 820px; margin-inline: auto; }

.wizard__steps {
  display: flex; gap: 6px; margin-bottom: 36px;
  list-style: none; padding: 0; flex-wrap: wrap;
}
.wizard__steps li {
  flex: 1; min-width: 92px;
  font-size: .8rem; font-weight: 600; color: var(--navy-400);
  padding-top: 12px;
  border-top: 3px solid var(--line);
}
.wizard__steps li[data-state="done"] { color: var(--navy); border-top-color: var(--navy); }
.wizard__steps li[data-state="current"] { color: var(--navy); border-top-color: var(--gold); }

.choice-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.choice {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: border-color .16s, box-shadow .16s;
}
.choice:hover { border-color: var(--navy-200); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__icon {
  flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--mist); color: var(--navy);
  transition: background-color .16s, color .16s;
}
.choice strong { display: block; font-family: var(--ff-display); font-size: 1rem; }
.choice span { font-size: .87rem; color: var(--navy-400); }
.choice:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(33, 53, 71, .08); }
.choice:has(input:checked) .choice__icon { background: var(--gold); color: var(--navy-900); }
.choice:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Calendar */
.calendar { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.calendar__head strong { font-family: var(--ff-display); font-size: 1.15rem; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar__dow {
  text-align: center; font-size: .74rem; font-weight: 600;
  color: var(--navy-400); padding-bottom: 8px;
}
.calendar__day {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 1.5px solid transparent; border-radius: var(--r-sm);
  background: var(--mist); color: var(--navy);
  font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none;
  transition: background-color .14s, border-color .14s;
}
.calendar__day:hover { background: var(--sand); border-color: var(--gold); }
.calendar__day[data-disabled] {
  background: transparent; color: var(--navy-200);
  cursor: not-allowed; pointer-events: none;
}
.calendar__day[aria-current="date"] { border-color: var(--navy-200); }
.calendar__day[data-selected] { background: var(--navy); color: #fff; }
.calendar__empty { aspect-ratio: 1; }

/* Time slots */
.slot-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.slot {
  padding: 14px 8px; text-align: center;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: #fff; cursor: pointer; font-weight: 600; font-size: .95rem;
  transition: border-color .14s, background-color .14s;
}
.slot:hover { border-color: var(--navy); }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Review + confirmation */
.review-list { list-style: none; padding: 0; }
.review-list li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.review-list li:last-child { border-bottom: 0; }
.review-list dt, .review-list .k { flex: 0 0 150px; color: var(--navy-400); font-size: .9rem; }
.review-list .v { flex: 1; font-weight: 600; }
.review-list .v small { display: block; font-weight: 400; color: var(--navy-400); }

.reference-box {
  background: var(--navy); color: #fff;
  border-radius: var(--r-lg); padding: 32px; text-align: center;
}
.reference-box .ref {
  font-family: var(--ff-display); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  font-weight: 600; color: var(--gold); letter-spacing: .04em; margin-top: 8px;
}
.reference-box p { color: #B7CADA; margin-inline: auto; }

/* ── Tables ───────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.table th {
  text-align: start; font-weight: 600; font-size: .82rem;
  color: var(--navy-400); padding: 14px 16px;
  background: var(--mist); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: 15px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #FBFCFD; }
.table .ref-cell { font-weight: 600; white-space: nowrap; }

.empty-state { text-align: center; padding: 60px 24px; }
.empty-state i { font-size: 2.2rem; color: var(--navy-200); margin-bottom: 16px; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { color: var(--navy-400); margin-inline: auto; margin-bottom: 22px; }

.pagination { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 9px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); text-decoration: none; font-size: .9rem;
}
.pagination a:hover { border-color: var(--navy); }
.pagination [aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Timeline (appointment activity) ──────────────────────────────── */
.timeline { list-style: none; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; top: 8px; bottom: 8px;
  inset-inline-start: 7px; width: 2px; background: var(--line);
}
.timeline li { position: relative; padding-inline-start: 30px; padding-block: 10px; }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 18px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--navy-200);
}
.timeline li:first-child::before { border-color: var(--gold); background: var(--gold); }
.timeline strong { font-size: .95rem; }
.timeline time { display: block; font-size: .84rem; color: var(--navy-400); }
.timeline p { font-size: .9rem; color: var(--navy-600); margin-top: 3px; }

/* ── Page hero (inner pages) ──────────────────────────────────────── */
.page-hero { background: var(--navy); color: #fff; padding-block: clamp(44px, 6vw, 76px); position: relative; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; inset-inline-end: -8%; top: -60%;
  width: 46vw; height: 46vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 186, 100, .13), transparent 65%);
}
.page-hero > * { position: relative; z-index: 1; }

/* Banner photograph, set from Admin → Site images. The scrim sits between
   the photo and the text so the white heading stays legible whatever the
   image looks like; three strengths cover light and busy photographs. */
.page-hero--image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.page-hero--image::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, rgba(33, 53, 71, .94) 0%, rgba(33, 53, 71, .87) 55%, rgba(33, 53, 71, .80) 100%);
}
/* The lightest stop of every tier stays at or above the opacity needed for
   white text to clear WCAG AA against a pure white photograph, so even a
   very bright banner keeps the heading readable. */
.page-hero--soft::before {
  background: linear-gradient(100deg, rgba(33, 53, 71, .88) 0%, rgba(33, 53, 71, .80) 55%, rgba(33, 53, 71, .73) 100%);
}
.page-hero--strong::before {
  background: linear-gradient(100deg, rgba(33, 53, 71, .98) 0%, rgba(33, 53, 71, .94) 55%, rgba(33, 53, 71, .90) 100%);
}
.page-hero--image::after { z-index: 0; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #C9D8E4; margin-top: 14px; font-size: 1.1rem; }
.breadcrumb { display: flex; gap: 10px; font-size: .87rem; color: #8FA8BC; margin-bottom: 16px; flex-wrap: wrap; }
.breadcrumb a { color: #B7CADA; text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }

/* Service detail split hero */
.svc-hero { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1.05fr .95fr; align-items: center; }
@media (max-width: 900px) { .svc-hero { grid-template-columns: 1fr; } }
.svc-hero__photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.svc-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.prose { max-width: 68ch; }
.prose h3 { margin-block: 32px 12px; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { margin-block: 12px; padding-inline-start: 24px; }
.prose li { margin-bottom: 8px; color: var(--navy-600); }
.prose p { color: var(--navy-600); }

/* ── Footer ───────────────────────────────────────────────────────── */
.footer { background: var(--navy-900); color: #A9BDCC; padding-block: clamp(48px, 6vw, 72px) 0; }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: 18px; }
.footer a { color: #A9BDCC; text-decoration: none; font-size: .94rem; }
.footer a:hover { color: var(--gold); }
.footer__grid { display: grid; gap: 36px; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand img { height: 44px; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: .95; }
.footer__brand p { font-size: .94rem; max-width: 38ch; }
.footer__list { list-style: none; padding: 0; }
.footer__list li { margin-bottom: 11px; }
.footer__contact li { display: flex; gap: 11px; margin-bottom: 13px; font-size: .94rem; align-items: flex-start; }
.footer__contact i { color: var(--gold); margin-top: 5px; width: 15px; flex-shrink: 0; }
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-sm);
}
.social a:hover { border-color: var(--gold); background: rgba(233, 186, 100, .1); }
.footer__bottom {
  margin-top: 48px; padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  justify-content: space-between; align-items: center;
  font-size: .88rem;
}
.footer__note { color: #7C93A6; font-size: .84rem; width: 100%; }

/* ── Floating WhatsApp ────────────────────────────────────────────── */
.wa-float {
  position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 90;
  display: inline-flex; align-items: center; gap: 11px;
  background: #25D366; color: #fff;
  padding: 15px 20px; border-radius: var(--r-pill);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  box-shadow: 0 6px 22px rgba(37, 211, 102, .38);
  transition: transform .18s ease;
}
.wa-float:hover { transform: translateY(-2px); color: #fff; }
.wa-float i { font-size: 1.3rem; }
.wa-float span { display: none; }
@media (min-width: 760px) { .wa-float span { display: inline; } }

/* ── Utilities ────────────────────────────────────────────────────── */
.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;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 44px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.flex { display: flex; } .items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 16px; } .gap-3 { gap: 24px; } .wrap-flex { flex-wrap: wrap; }

/* ── Motion ───────────────────────────────────────────────────────── */
/* One orchestrated reveal, on the hero only. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__inner > * > .reveal, .hero .reveal { animation: rise .6s cubic-bezier(.22, .8, .3, 1) backwards; }
.hero .reveal:nth-child(1) { animation-delay: .04s; }
.hero .reveal:nth-child(2) { animation-delay: .12s; }
.hero .reveal:nth-child(3) { animation-delay: .2s; }
.hero .reveal:nth-child(4) { animation-delay: .28s; }

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

/* ── Print (appointment confirmations) ────────────────────────────── */
@media print {
  .header, .footer, .wa-float, .btn, .wizard__steps, .no-print { display: none !important; }
  body { font-size: 12pt; }
  .section { padding-block: 0; }
  .card, .table-wrap { box-shadow: none; border: 1px solid #ccc; }
  .reference-box { background: #fff; color: #000; border: 2px solid #000; }
  .reference-box .ref, .reference-box p { color: #000; }
}

/* ── Image display modes ──────────────────────────────────────────────
   Controlled from Admin → Site images.

   fill     Crop to a uniform frame. Tidiest grid, but edges are lost —
            faces near the border can be cut off.
   fit      Cards keep a uniform frame and the whole photo is scaled to sit
            inside it, so headings stay aligned and nothing is cropped.
   natural  Every image keeps its own proportions. Nothing is cropped and
            there are no margins, but cards only line up when the
            photographs share an aspect ratio.

   Standalone images — the homepage hero and the service page banner —
   have nothing to align against, so outside "fill" they always run at
   their natural proportions rather than being letterboxed.
   ------------------------------------------------------------------- */
.img-fill img { object-fit: cover; }

.img-fit  { background: var(--mist); }
.img-fit  img { object-fit: contain; }

.img-natural { aspect-ratio: auto !important; background: transparent; }
.img-natural img { height: auto !important; object-fit: contain; display: block; }

/* Standalone images never letterbox. */
.hero__photo.img-fit,
.svc-hero__photo.img-fit { aspect-ratio: auto !important; background: transparent; }
.hero__photo.img-fit img,
.svc-hero__photo.img-fit img { height: auto !important; object-fit: contain; display: block; }

/* The gold service icon overhangs the image, so a natural-height image
   still needs the overflow released for it. */
.service-card__media.img-natural { overflow: visible; }
.service-card__media.img-natural img { border-radius: var(--r-lg) var(--r-lg) 0 0; }