/* ==========================================================================
   Dr. Tanmoy Karmakar — orthopedic & joint replacement surgery, Kolkata

   Design notes
   ------------
   The audience is mostly patients aged 50–75 considering knee or hip
   replacement, plus the adult children researching on their behalf. Two
   consequences drive everything below:

   1. Legibility is a functional requirement, not a preference. Base size is
      18px, line-height is generous, contrast is kept well above WCAG AA, and
      every tap target clears 48px. Nothing important is carried by colour
      alone.

   2. The page must work on a slow connection. One stylesheet, two subset
      fonts (55KB total), no framework, no JavaScript required to read or
      navigate anything.

   The visual idea is the radiograph viewing box: a deep, backlit dark field
   for the hero where the surgeon and his credentials are lit against it,
   then calm bone-white below for reading. Most clinic sites in the city are
   also navy and white, so the separation here has to come from the treatment
   rather than the hue — the dark hero, the serif at display size, and real
   photography instead of stock.
   ========================================================================== */

/* ---------- fonts ---------- */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plex";
  src: url("/assets/fonts/plex.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  /* The palette follows the logo rather than the other way round: navy is the
     brand colour, grey its supporting mark. The one colour that is NOT in the
     logo is the warm orange, and that is deliberate — it appears only on Call
     and Book, so the two actions that matter are the only warm things on the
     page and cannot be confused with ordinary navy links. */

  --bone:        #F1F3F6;   /* cool ground, biased blue to sit under navy */
  --porcelain:   #FFFFFF;
  --sunken:      #E4E8EF;

  --ink:         #16202E;
  --slate:       #4C5A6E;
  --faint:       #6F7E92;

  /* Backlit field for the hero, navy-biased so the logo sits on it cleanly. */
  --field:       #0D1826;
  --field-2:     #16243A;
  --field-ink:   #E9EDF3;
  --field-muted: #9FADC1;

  --brand:       #1C3A66;   /* logo navy */
  --brand-deep:  #142C4E;
  --brand-lift:  #E3E9F2;   /* pale tint behind icons */
  --brand-glow:  #8CB2E2;   /* legible highlight on the dark field */
  --grey:        #8C9298;   /* logo grey */

  /* Warm signal, used only for the actions that book or call. */
  --amber:       #A8501C;
  --amber-lift:  #F6E7DC;

  --rule:        #D7DDE7;
  --rule-strong: #B6C0CE;

  --shadow-sm: 0 1px 2px rgba(22, 32, 46, .06);
  --shadow-md: 0 2px 4px rgba(22, 32, 46, .05), 0 10px 28px -14px rgba(22, 32, 46, .22);
  --shadow-lg: 0 4px 8px rgba(22, 32, 46, .06), 0 22px 50px -20px rgba(22, 32, 46, .32);

  --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Plex", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 74rem;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
}

/* ---------- reset ---------- */

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

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

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;      /* 18px — deliberate, for older readers */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

a { color: var(--brand-deep); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: .9rem 1.4rem;
  z-index: 200;
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0;
}

/* ==========================================================================
   header
   ========================================================================== */

.topbar {
  background: var(--field);
  color: var(--field-muted);
  font-size: .875rem;
}

.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  min-height: 2.6rem;
  padding-block: .4rem;
}

.topbar a { color: var(--field-ink); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

.topbar .creds { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }

/* Solid rather than translucent-and-blurred. A backdrop-filter on a sticky
   element forces the whole page into a composited layer that repaints on
   every scroll frame, which is exactly the wrong trade on the low-end
   Android phones most of this audience browses from. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--porcelain);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(20, 34, 42, .04);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

/* Only the monogram goes in the header. The full lockup already contains the
   name, and setting it in type beside the mark keeps the name selectable,
   translatable and legible at small sizes, which flattened artwork is not. */
.brand-mark {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: contain;
  flex: none;
}

/* If the logo file has not been added yet, don't show a broken-image icon. */
.brand-mark:not([src]),
.brand-mark[src=""] { display: none; }

.brand-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

/* The header runs brand + six nav items + two buttons across one line, which
   at 1280px came to more than the wrap could hold and pushed the page into
   horizontal scroll. Dropping the redundant "Orthopedics" tag beside the
   name bought back the space. Nothing here shrinks: a nav that shrinks just
   clips its last item instead, which is worse than the overflow it avoids.
   Below 62rem the nav is replaced by the mobile bar anyway. */
.nav {
  display: flex;
  align-items: center;
  gap: .2rem;
  flex: none;
}

.brand, .head-actions { flex: none; }

.nav a {
  display: block;
  padding: .55rem .7rem;
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;      /* two-word items must not stack */
}
.nav a:hover { background: var(--sunken); }
.nav a[aria-current="page"] { color: var(--brand-deep); box-shadow: inset 0 -2px 0 var(--brand); }

.head-actions { display: flex; align-items: center; gap: .6rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;                 /* comfortable tap target */
  padding: .7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-book { background: var(--amber); color: #fff; }
.btn-book:hover { background: #8E4216; }

.btn-call { background: var(--brand); color: #fff; }
.btn-call:hover { background: var(--brand-deep); }

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-quiet:hover { background: var(--sunken); }

.btn-ghost-light {
  background: transparent;
  color: var(--field-ink);
  border-color: rgba(234, 240, 239, .32);
}
.btn-ghost-light:hover { background: rgba(234, 240, 239, .1); }

.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* ==========================================================================
   hero — the backlit field
   ========================================================================== */

.hero {
  position: relative;
  background:
    radial-gradient(80% 120% at 78% 18%, var(--field-2) 0%, var(--field) 62%);
  color: var(--field-ink);
  overflow: hidden;
}

/* A faint grid, like the reference grid on a viewing box. Decorative only. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(157, 179, 183, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 179, 183, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(72% 90% at 70% 25%, #000 0%, transparent 78%);
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-glow);
  margin-bottom: 1.15rem;
}
.hero-eyebrow::before {
  content: "";
  width: 1.8rem;
  height: 2px;
  background: var(--brand-glow);
}

.hero h1 {
  font-size: clamp(2.35rem, 5.6vw, 4rem);
  line-height: 1.06;
  color: #fff;
  margin-bottom: 1.15rem;
}
.hero h1 em {
  font-style: italic;
  color: var(--brand-glow);
}

.hero-lead {
  font-size: clamp(1.08rem, 1.7vw, 1.25rem);
  color: var(--field-muted);
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 2.25rem;
}

.hero-affil {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(157, 179, 183, .22);
  font-size: .92rem;
  color: var(--field-muted);
}
.hero-affil strong { color: var(--field-ink); font-weight: 600; }

/* portrait */

.hero-portrait { position: relative; justify-self: center; }

.hero-portrait img {
  position: relative;
  width: min(100%, 27rem);
  border-radius: 3px;
}

.hero-portrait::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, var(--field), transparent);
  pointer-events: none;
}

/* ---------- credential band ---------- */

.creds-band {
  background: var(--field-2);
  border-top: 1px solid rgba(157, 179, 183, .16);
  color: var(--field-ink);
}

.creds-band .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  padding-block: 0;
}

.cred {
  padding: 2rem 1.5rem;
  position: relative;
}
.cred + .cred::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.6rem;
  bottom: 1.6rem;
  width: 1px;
  background: rgba(157, 179, 183, .2);
}

.cred .n {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.5vw, 3.1rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cred .n sup {
  font-size: .42em;
  vertical-align: super;
  color: var(--brand-glow);
  margin-left: .1em;
}
.cred .l {
  display: block;
  margin-top: .6rem;
  font-size: .93rem;
  color: var(--field-muted);
  line-height: 1.45;
}

/* ==========================================================================
   sections
   ========================================================================== */

section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.section-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); }

.section-head p {
  font-size: 1.08rem;
  color: var(--slate);
}

.on-porcelain { background: var(--porcelain); }

/* ---------- services ---------- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.service {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.6rem 1.5rem 1.7rem;
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-radius: 5px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.service:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.service .ico {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-lift);
  color: var(--brand-deep);
  margin-bottom: .3rem;
}
.service .ico svg { width: 1.6rem; height: 1.6rem; }

.service h3 { font-size: 1.3rem; }

.service p {
  font-size: .98rem;
  color: var(--slate);
  line-height: 1.55;
}

.service .more {
  margin-top: auto;
  padding-top: .55rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--brand-deep);
}
.service:hover .more { text-decoration: underline; }

.service.is-flagship {
  border-color: var(--brand);
  border-width: 2px;
  background: linear-gradient(180deg, var(--brand-lift) 0%, var(--porcelain) 42%);
}

.flag {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--amber);
  padding: .28rem .6rem;
  border-radius: 3px;
}

/* ---------- robotic feature ---------- */

.feature {
  background: var(--field);
  color: var(--field-ink);
}

.feature .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.feature h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.feature .eyebrow { color: var(--brand-glow); }

.feature p { color: var(--field-muted); }

.feature-points {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .95rem;
}

.feature-points li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .8rem;
  align-items: start;
  font-size: 1rem;
  color: var(--field-ink);
}

.feature-points svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brand-glow);
  margin-top: .1rem;
}

.feature-card {
  background: var(--field-2);
  border: 1px solid rgba(157, 179, 183, .22);
  border-radius: 5px;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.feature-card .kicker {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brand-glow);
}

.feature-card h3 {
  font-size: 1.5rem;
  color: #fff;
}

.feature-card .where {
  font-size: .93rem;
  color: var(--field-muted);
  padding-top: 1.1rem;
  border-top: 1px solid rgba(157, 179, 183, .2);
}

/* ---------- stories ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.35rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card-media {
  aspect-ratio: 16 / 10;
  background: var(--sunken);
  overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }

.card-body {
  padding: 1.3rem 1.35rem 1.45rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}

.card-date {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
}

.card h3 { font-size: 1.22rem; line-height: 1.25; }

.card p {
  font-size: .96rem;
  color: var(--slate);
  line-height: 1.55;
}

.card .more {
  margin-top: auto;
  padding-top: .5rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--brand-deep);
}

/* quote variant */
.card.is-quote { background: var(--brand-lift); border-color: #C3D2E6; }
.card.is-quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.45;
  color: var(--ink);
}
.card.is-quote cite {
  font-style: normal;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand-deep);
}

/* ==========================================================================
   inner pages
   ========================================================================== */

/* The banner every page except the homepage opens with. Deliberately quiet:
   the homepage earns a dark hero, an article about elbow pain does not. */
.page-hero {
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.page-hero .wrap {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  max-width: 52rem;
  margin-inline: auto;
}

/* .hero-eyebrow is tuned for the dark field; on a light ground it needs the
   darker end of the brand ramp to stay readable. */
.page-hero .hero-eyebrow {
  color: var(--brand-deep);
  margin-bottom: 0;
}
.page-hero .hero-eyebrow::before { background: var(--brand); }
.page-hero .hero-eyebrow a { color: inherit; text-decoration: none; }
.page-hero .hero-eyebrow a:hover { text-decoration: underline; }

.page-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.08;
}

.page-hero-lead {
  font-size: 1.1rem;
  color: var(--slate);
  max-width: 40rem;
}

.page-hero-lead time { font-variant-numeric: tabular-nums; }

/* A shortened dark hero, for the robotic surgery page. */
.hero-compact .wrap {
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.hero-compact .hero-text { max-width: 44rem; }

/* ---------- long-form reading ---------- */

/* 66 characters. Longer lines make the eye lose its place returning to the
   left margin, which matters more than usual for this audience. */
.prose {
  max-width: 40rem;
  font-size: 1.09rem;
  line-height: 1.75;
}

.prose-narrow { margin-inline: auto; }

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

.prose h2 {
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  margin-top: 2.5rem;
}

.prose h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin-top: 2rem;
}

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

.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .5rem; }

.prose a { color: var(--brand-deep); text-underline-offset: 3px; }

.prose img {
  border-radius: 4px;
  margin-block: 1.75rem;
}

.prose blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.35rem;
  border-left: 3px solid var(--brand);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
}

.prose table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--rule); }

/* Article beside a sticky call-to-action. */
.prose-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.aside-card {
  position: sticky;
  top: 6rem;
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brand);
  border-radius: 5px;
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  box-shadow: var(--shadow-sm);
}

.aside-card h3 { font-size: 1.22rem; }
.aside-card p { font-size: .96rem; color: var(--slate); }
.aside-card .btn { width: 100%; }
.aside-note { font-size: .87rem; color: var(--faint); padding-top: .3rem; }

/* The note under a patient story or article. */
.story-note {
  max-width: 40rem;
  margin: 2.5rem auto 0;
  padding: 1rem 1.2rem;
  background: var(--sunken);
  border-left: 3px solid var(--rule-strong);
  border-radius: 3px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--slate);
}

/* ---------- tick lists ---------- */

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.ticks li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 1rem;
  line-height: 1.55;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: .95rem;
  height: .5rem;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

.prose .ticks { margin-block: 1.25rem; }

/* ---------- about ---------- */

.about-hero {
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.about-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); margin-bottom: .5rem; }

.about-qual {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--brand-deep);
}

.about-title { color: var(--slate); margin-bottom: 1.15rem; }

.about-lead {
  font-size: 1.1rem;
  color: var(--ink);
  max-width: 34rem;
  margin-bottom: 1.75rem;
}

.about-portrait img { border-radius: 4px; box-shadow: var(--shadow-md); }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 2rem;
}

.spec {
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-radius: 5px;
}
.spec h3 { font-size: 1.18rem; margin-bottom: .85rem; }
.spec .ticks li { font-size: .96rem; }

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.contact-grid h2 {
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
  margin-bottom: .8rem;
}

.contact-lead { color: var(--slate); margin-bottom: 1.35rem; }

.contact-line {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.15rem;
  margin-bottom: .7rem;
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-radius: 5px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-line:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }

.contact-line svg { width: 1.5rem; height: 1.5rem; color: var(--brand); flex: none; }
.contact-line span { display: flex; flex-direction: column; }
.contact-line strong { font-size: 1.02rem; font-weight: 600; }
.contact-line small { font-size: .85rem; color: var(--faint); }

.contact-note {
  margin-top: 1.75rem;
  padding: 1.35rem 1.4rem;
  background: var(--brand-lift);
  border-radius: 5px;
}
.contact-note h3 { font-size: 1.15rem; margin-bottom: .85rem; }
.contact-note .small { margin-top: .9rem; font-size: .88rem; color: var(--slate); }

.contact-locations .loc { margin-bottom: 1.15rem; }

/* ==========================================================================
   booking

   Controls here are larger than the rest of the site on purpose. Someone
   booking a knee replacement may be in pain, on a phone, and not a
   confident typist. Tap targets are 3rem or more, the phone field is
   numeric-only, and every step is reversible.
   ========================================================================== */

.booking-wrap { max-width: 46rem; margin-inline: auto; }

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0 0 1.2rem;
  border-bottom: 1px solid var(--rule);
  font-size: .92rem;
  color: var(--faint);
}

.steps li { display: flex; align-items: center; gap: .5rem; }

.steps-n {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--sunken);
  color: var(--faint);
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.steps .now { color: var(--ink); font-weight: 600; }
.steps .now .steps-n { background: var(--brand); color: #fff; }
.steps .done { color: var(--brand-deep); }
.steps .done .steps-n { background: var(--brand-lift); color: var(--brand-deep); }

.step-title {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  margin-bottom: 1.5rem;
}

.step-back { margin-bottom: 1rem; font-size: .95rem; }
.step-back a { color: var(--slate); text-decoration: none; }
.step-back a:hover { color: var(--brand-deep); text-decoration: underline; }

/* ---------- choosing ---------- */

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.choice {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.5rem 1.4rem;
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 5px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .16s ease, transform .16s ease;
}
.choice:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.choice-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.choice-note { font-size: .94rem; color: var(--slate); }
.choice-go { margin-top: .5rem; font-size: .92rem; font-weight: 600; color: var(--brand-deep); }

.date-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: .6rem;
}

.date-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .75rem .4rem .8rem;
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-radius: 5px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .14s ease, background-color .14s ease;
}
.date-pill:hover { border-color: var(--brand); background: var(--brand-lift); }
.date-dow { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.date-day { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.date-mon { font-size: .78rem; color: var(--slate); }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: .6rem;
}

.slot {
  display: grid;
  place-items: center;
  min-height: 3rem;
  padding: .6rem .5rem;
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-radius: 5px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color .14s ease, background-color .14s ease;
}
.slot:hover { border-color: var(--brand); background: var(--brand-lift); }

/* Taken slots stay visible, so the day does not look emptier than it is,
   but are plainly not clickable — greyed and struck, not colour alone. */
.slot.is-taken {
  color: var(--faint);
  background: var(--sunken);
  border-style: dashed;
  text-decoration: line-through;
  cursor: not-allowed;
}
.slot.is-taken small {
  display: block;
  font-size: .68rem;
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chosen {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1rem;
  align-items: baseline;
  padding: 1rem 1.2rem;
  margin-bottom: 1.75rem;
  background: var(--brand-lift);
  border-radius: 5px;
}
.chosen strong { font-size: 1.05rem; }
.chosen span { color: var(--slate); }

/* ---------- the form ---------- */

.booking-form { display: flex; flex-direction: column; gap: 1.4rem; }

.field { display: flex; flex-direction: column; gap: .45rem; }

.field label {
  font-size: .98rem;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

.req, .opt {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .15rem .4rem;
  border-radius: 3px;
}
.req { color: var(--amber); background: var(--amber-lift); }
.opt { color: var(--faint); background: var(--sunken); }

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1.05rem;
  padding: .8rem .9rem;
  min-height: 3.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  background: var(--porcelain);
  color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

.phone-input { display: flex; align-items: stretch; }
.phone-input span {
  display: grid;
  place-items: center;
  padding-inline: .9rem;
  background: var(--sunken);
  border: 1px solid var(--rule-strong);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  font-weight: 600;
  color: var(--slate);
}
.phone-input input { border-radius: 0 4px 4px 0; }

.field-help { font-size: .88rem; color: var(--slate); line-height: 1.55; }

.btn-wide { width: 100%; min-height: 3.4rem; font-size: 1.05rem; }

/* The honeypot: present for bots, gone for people and screen readers. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-errors {
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.75rem;
  background: var(--amber-lift);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
  font-size: .97rem;
}
.form-errors strong { display: block; margin-bottom: .4rem; color: var(--amber); }
.form-errors ul { margin: 0; padding-left: 1.2rem; }
.form-errors li + li { margin-top: .3rem; }

/* ---------- confirmation ---------- */

.confirm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.confirm-card {
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brand);
  border-radius: 5px;
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.confirm-ref {
  font-size: .95rem;
  color: var(--slate);
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.confirm-ref strong {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: .04em;
}

.confirm-list { margin: 0; display: flex; flex-direction: column; gap: .9rem; }
.confirm-list > div { display: flex; flex-direction: column; gap: .1rem; }
.confirm-list dt {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
.confirm-list dd { margin: 0; font-size: 1.05rem; }

.confirm-note {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: .94rem;
  color: var(--slate);
}

.confirm-next { display: flex; flex-direction: column; gap: .9rem; }
.confirm-next h2 { font-size: 1.5rem; }
.confirm-next h3 { font-size: 1.15rem; margin-top: 1rem; }
.confirm-next p { color: var(--slate); }

/* ---------- video ----------

   Each tile is a facade: a locally hosted thumbnail that only swaps in the
   YouTube player once someone actually clicks. That keeps roughly 700KB of
   player code off the page, and means no visitor is reported to Google
   before they choose to watch. Without JavaScript the tile stays a plain
   link to YouTube, so nothing is lost.                                     */

.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.video {
  display: flex;
  flex-direction: column;
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.video:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--field);
  overflow: hidden;
}
.video-frame img { width: 100%; height: 100%; object-fit: cover; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.video-play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 26, 33, .55), rgba(14, 26, 33, .06) 55%);
  transition: background .18s ease;
}

.video-play span {
  position: relative;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(14, 26, 33, .35);
  transition: transform .18s ease, background-color .18s ease;
}
.video-play span svg { width: 1.5rem; height: 1.5rem; margin-left: .18rem; }

.video:hover .video-play span,
.video-play:hover span { transform: scale(1.08); background: #fff; }
.video-play:hover::before { background: linear-gradient(to top, rgba(14, 26, 33, .62), rgba(14, 26, 33, .12) 55%); }

.video-body {
  padding: 1.05rem 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
}

.video-body h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

.video-tag {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Operative footage is not something to autoplay at a nervous patient. */
.video-warn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  margin-top: auto;
  padding-top: .5rem;
  font-size: .82rem;
  color: var(--amber);
  font-weight: 600;
}
.video-warn svg { width: .95rem; height: .95rem; }

.video-note {
  margin-top: 1.5rem;
  padding: .9rem 1.15rem;
  background: var(--sunken);
  border-left: 3px solid var(--rule-strong);
  font-size: .93rem;
  color: var(--slate);
  border-radius: 3px;
}

/* ---------- events ---------- */

.event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.event-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--rule);
}
/* 4:3 matches the photographs once their baked-in caption bar is cropped
   away, so faces are not sliced off by object-fit. */
.event-gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.event-text {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.35rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.event-text h3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  font-size: .9rem;
  color: var(--faint);
}
.event-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.event-meta svg { width: 1rem; height: 1rem; }

.event-text p { color: var(--slate); font-size: 1rem; }

.partners {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding-top: .4rem;
}
.partners span {
  font-size: .8rem;
  padding: .3rem .65rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--slate);
  background: var(--bone);
}

/* ---------- locations ---------- */

.locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.loc {
  background: var(--porcelain);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 5px;
  padding: 1.5rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.loc h3 { font-size: 1.22rem; }

.loc address {
  font-style: normal;
  font-size: .97rem;
  color: var(--slate);
  line-height: 1.55;
}

.loc .loc-links {
  margin-top: auto;
  padding-top: .8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  font-size: .93rem;
  font-weight: 600;
}

.loc-tag {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-deep);
  background: var(--brand-lift);
  padding: .25rem .55rem;
  border-radius: 3px;
}

/* ---------- booking band ---------- */

.book-band {
  background: linear-gradient(135deg, var(--brand-deep) 0%, #27508A 100%);
  color: #fff;
}

.book-band .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.book-band h2 { color: #fff; font-size: clamp(1.85rem, 3.4vw, 2.5rem); }
.book-band p { color: rgba(255, 255, 255, .88); margin-top: .9rem; }

.book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.book-band .btn-book { background: #fff; color: var(--brand-deep); }
.book-band .btn-book:hover { background: #EDF2F9; }

.book-note {
  margin-top: 1.1rem;
  font-size: .92rem;
  color: rgba(255, 255, 255, .8);
}

/* ---------- footer ---------- */

.foot {
  background: var(--field);
  color: var(--field-muted);
  padding-block: clamp(2.5rem, 5vw, 3.75rem) 2rem;
  font-size: .95rem;
}

.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(157, 179, 183, .2);
}

.foot h4 {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--field-ink);
  margin-bottom: .9rem;
}

.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.foot a { color: var(--field-muted); text-decoration: none; }
.foot a:hover { color: var(--field-ink); text-decoration: underline; }

.foot-brand {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: .5rem;
}

/* The reversed lockup, sized by width so the aspect ratio of whatever
   artwork is supplied is respected rather than forced. */
.foot-logo {
  width: min(13rem, 100%);
  height: auto;
  margin-bottom: 1rem;
}

.foot-bottom {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .87rem;
}

.foot-disclaimer {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(157, 179, 183, .16);
  font-size: .84rem;
  line-height: 1.6;
  color: #7C9096;
  max-width: 62rem;
}

/* ---------- sticky mobile action bar ---------- */

.mobile-bar { display: none; }

/* ==========================================================================
   responsive
   ========================================================================== */

@media (max-width: 62rem) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-portrait { order: -1; }
  .hero-portrait img { width: min(100%, 20rem); }
  .event { grid-template-columns: 1fr; }
  .nav { display: none; }

  /* The sticky sidebar becomes a plain block below the article: sticky
     positioning in a single column just pins a card over the text. */
  .prose-wrap { grid-template-columns: 1fr; }
  .aside-card { position: static; top: auto; }
  .prose { max-width: none; }

  .about-hero .wrap { grid-template-columns: 1fr; }
  .about-portrait { order: -1; max-width: 18rem; }

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

@media (max-width: 46rem) {
  body { font-size: 1.0625rem; }

  .topbar .creds { display: none; }

  .masthead .wrap { min-height: 3.9rem; }
  .brand { font-size: 1.12rem; }
  .brand .qual { display: none; }

  /* The fixed bar at the bottom of the screen already carries Call and Book
     within thumb reach, so the header repeats them for nothing and squeezes
     the name down to an abbreviation. Drop them here. */
  .head-actions { display: none; }

  .cred { padding: 1.5rem 1.15rem; }
  .cred + .cred::before { display: none; }
  .creds-band .wrap { gap: 1px; background: rgba(157, 179, 183, .18); }
  .creds-band .cred { background: var(--field-2); }

  /* Keep booking one thumb away at all times. */
  .mobile-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 120;
    background: var(--rule-strong);
    box-shadow: 0 -4px 16px rgba(20, 34, 42, .16);
  }
  .mobile-bar .btn { border-radius: 0; min-height: 3.4rem; }

  body { padding-bottom: 3.5rem; }
}