/* Layout concept: asymmetric editorial grid. 7/5 split hero with a photograph bleeding to the right edge,
   narrow sticky headings against wide content columns, one full-width pale-indigo band (panels) and one full-width indigo band (contact) with a red rule, echoing the logo. */
:root {
  /* Palette sampled from the clinic logo: indigo #3A3A9A and red #D9453D */
  --paper: #F7F7FC;
  --blue: #3A3A9A;
  --blue-deep: #2B2B7A;
  --red: #D9453D;
  --red-text: #B8312B;
  --ink: #1C1D3A;
  --ink-soft: #4A4C5E;
  --tint: #E6E8F6;
  --tint-line: #BFC3E3;
  --white: #FFFFFF;
  --line: #D9DBEC;
  --focus: #3A3A9A;

  --font-display: "Fraunces", "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "DM Sans", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(1rem, 4.5vw, 3.5rem);
  --max: 78rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  padding-inline: 0;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }
button, input, textarea { font: inherit; color: inherit; }

.mono { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em; font-weight: 400; }
.muted { color: var(--ink-soft); }
.small { font-size: .9375rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.contact :focus-visible, .draftbar :focus-visible { outline-color: var(--paper); }

.skip { position: absolute; left: var(--gutter); top: -4rem; background: var(--blue); color: var(--paper); padding: .6rem 1rem; z-index: 100; transition: top .2s var(--ease); }
.skip:focus { top: .75rem; }

/* placeholders */
.ph {
  font-family: var(--font-mono); font-size: .8em; letter-spacing: .02em;
  border: 1px dashed currentColor; padding: .05em .4em; display: inline-block; line-height: 1.5;
}

.eyebrow { text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 1.25rem; display: flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ""; width: .6rem; height: .6rem; background: var(--red); flex: none; }

/* draft bar */
.draftbar {
  background: var(--ink); color: var(--paper); display: flex; gap: .85rem; align-items: baseline;
  padding: .55rem var(--gutter); font-size: .875rem; line-height: 1.45;
}
.draftbar .mono { text-transform: uppercase; background: var(--red-text); border: 1px solid var(--red-text); padding: 0 .4rem; flex: none; }

/* header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { max-width: 90rem; margin: 0 auto; padding: .6rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-logo { width: clamp(56px, 8vw, 84px); height: clamp(56px, 8vw, 84px); object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.7rem); letter-spacing: .005em; font-weight: 500; line-height: 1.1; }
.brand-meta { color: var(--ink-soft); text-transform: uppercase; font-size: .6875rem; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav ul { display: flex; gap: 1.6rem; }
.nav a:not(.btn) {
  text-decoration: none; font-size: .9375rem; font-weight: 500; padding: .35rem 0; position: relative;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.nav a:not(.btn):hover::after, .nav a:not(.btn):focus-visible::after { transform: scaleX(1); }

.menu-btn { display: none; align-items: center; gap: .6rem; background: none; border: 1px solid var(--ink); padding: .5rem .8rem; cursor: pointer; border-radius: 2px; }
.menu-btn:hover { background: var(--ink); color: var(--paper); }
.menu-icon { display: grid; gap: 5px; width: 18px; }
.menu-icon i { display: block; height: 2px; background: currentColor; transition: transform .25s var(--ease); }
.menu-btn[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-weight: 600; font-size: 1rem; text-decoration: none; line-height: 1.2;
  padding: .95rem 1.5rem; border: 1.5px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .22s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-solid { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.btn-solid:hover { background: var(--paper); color: var(--blue); }
.btn-small { padding: .6rem 1.1rem; font-size: .9375rem; }
.btn-ivory { background: var(--paper); color: var(--blue); border-color: var(--paper); }
.btn-ivory:hover { background: var(--blue); color: var(--paper); border-color: var(--paper); }
.btn-outline { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn-outline:hover { background: var(--paper); color: var(--blue); }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

.textlink {
  font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat;
  padding-bottom: 3px; transition: background-size .28s var(--ease), color .2s;
}
.textlink:hover { background-size: 0 1.5px; background-position: right bottom; color: var(--red-text); }

/* hero: the clinic front is the backdrop; a flat ink wash keeps the text readable. Opening hours sit in a solid strip below. */
.hero { border-bottom: 1px solid var(--line); color: var(--paper); }
.hero-stage {
  position: relative; isolation: isolate; background: var(--ink) center top / cover no-repeat;
  padding-top: clamp(9rem, 25vw, 26rem);
}
.hero-stage::before { content: ""; position: absolute; inset: 0; background: rgba(28, 29, 58, .58); z-index: -1; }
.hero-text { padding: 0 var(--gutter) clamp(2.5rem, 5vw, 4.5rem) max(var(--gutter), calc((100vw - 90rem) / 2 + var(--gutter))); max-width: 62rem; }
.hero .eyebrow { color: var(--tint); }
.hero h1 {
  font-size: clamp(2.9rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.025em; font-weight: 400;
  font-variation-settings: "opsz" 144; margin-bottom: 1.4rem; max-width: 14ch;
}
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 34rem; color: var(--tint); margin-bottom: 2rem; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; }
.hero .btn-solid { background: var(--paper); color: var(--blue); border-color: var(--paper); }
.hero .btn-solid:hover { background: transparent; color: var(--paper); }
.hero .textlink:hover { color: var(--tint); }
.hero :focus-visible { outline-color: var(--paper); }
.hero-strip { background: var(--ink); border-top: 3px solid var(--red); }
.hero-strip-inner { max-width: 90rem; margin: 0 auto; padding: 1.4rem var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr); gap: 1rem clamp(1.5rem, 4vw, 4rem); align-items: center; }
.status { text-transform: uppercase; display: flex; align-items: center; gap: .55rem; }
.status::before { content: ""; width: .6rem; height: .6rem; background: currentColor; flex: none; }
.status[data-state="open"]::before { background: currentColor; }
.status[data-state="closed"]::before { background: transparent; border: 1.5px solid currentColor; }
.hours-mini { display: grid; gap: .25rem; }
.hours-mini > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: .25rem 0; }
.hours-mini dt { color: var(--ink-soft); }
.hero .hours-mini dt, .hero .walkin { color: var(--tint); }
.hero .hours-mini > div { border-bottom-color: rgba(246, 246, 252, .3); }
.walkin { font-size: .9375rem; color: var(--ink-soft); }

.photo-frame { position: relative; flex: 1; overflow: hidden; background: var(--tint); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform .9s var(--ease); }
.photo-frame:hover img { transform: scale(1.04); }
.photo-frame.is-placeholder { display: flex; flex-direction: column; justify-content: space-between; padding: 1.4rem; border-left: 1px solid var(--tint-line); }
.photo-frame.is-placeholder::after { content: ""; position: absolute; inset: 1.1rem; border: 1px dashed var(--blue); pointer-events: none; opacity: .5; }
.ph-tag { align-self: flex-start; background: var(--red-text); color: var(--white); padding: .15rem .55rem; text-transform: uppercase; position: relative; z-index: 1; }
.ph-caption { color: var(--blue); position: relative; z-index: 1; max-width: 20rem; }
.ph-caption strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; margin-bottom: .4rem; }
.ph-caption span { font-size: .875rem; color: var(--ink-soft); }

/* sections */
.section { padding: clamp(3.5rem, 8vw, 7rem) var(--gutter); max-width: 90rem; margin: 0 auto; }
.section + .section { border-top: 1px solid var(--line); }
h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.04; letter-spacing: -.015em; }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.split-head { position: sticky; top: 8rem; display: grid; gap: 1rem; }
.split-head .eyebrow { margin-bottom: .25rem; }

.services .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.svc-groups { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.svc-group .label { margin-bottom: .75rem; display: flex; align-items: center; gap: .6rem; color: var(--blue); }
.svc-group .label::before { content: ""; width: .55rem; height: .55rem; background: var(--red); flex: none; }
.rows { border-top: 1.5px solid var(--ink); }
.rows li { display: grid; grid-template-columns: 4.5rem minmax(0, 6fr) minmax(0, 5fr); gap: .5rem 1.5rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.svc-art { width: 4.5rem; height: 4.5rem; background: var(--tint); border: 1px solid var(--tint-line); display: block; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.svc-art img { width: 100%; height: 100%; padding: .4rem; }
.rows li:hover .svc-art { background: var(--white); border-color: var(--blue); }
.svc-name { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.15; margin: 0; text-wrap: balance; }
.svc-detail { color: var(--ink-soft); font-size: .9375rem; }
.svc-detail:empty { display: none; }
.rows li.is-ph { grid-template-columns: 1fr; }
.rows p { color: var(--ink-soft); }
.ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 3px solid var(--red); }
.ask-text { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; max-width: 30rem; }
.ask-panels { max-width: 90rem; margin: 0 auto; padding: 1.5rem var(--gutter) clamp(3rem, 7vw, 5.5rem); border-top: 0; position: relative; }
.ask-panels::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; border-top: 3px solid var(--red); }
.facilities { margin-top: 3rem; }
.facilities h3 { margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { border: 1px solid var(--ink); padding: .35rem .8rem; font-size: .9375rem; border-radius: 2px; }

.label { text-transform: uppercase; color: var(--ink-soft); font-weight: 500; font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .08em; }

/* about: second photograph as a backdrop, same treatment as the opening section */
.about { color: var(--paper); }
.about-stage {
  position: relative; isolation: isolate; background: var(--ink) center top / cover no-repeat;
  padding: clamp(10rem, 47vw, 44rem) var(--gutter) clamp(3rem, 7vw, 6rem);
}
.about-stage::before { content: ""; position: absolute; inset: 0; background: rgba(28, 29, 58, .62); z-index: -1; }
.about-inner { max-width: 90rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.about-head { display: grid; gap: 1.2rem; }
.about .eyebrow { color: var(--tint); margin-bottom: 0; }
.about h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.02em; max-width: 12ch; }
.about-closing { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; max-width: 22rem; padding-top: 1rem; border-top: 3px solid var(--red); margin-top: .8rem; }
.about-body { display: grid; gap: 2rem; }
#aboutCopy { display: grid; gap: 1.1rem; }
#aboutCopy p { max-width: 38rem; color: var(--tint); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; }
.about :focus-visible { outline-color: var(--paper); }
.facts { border-top: 1.5px solid var(--ink); margin-top: auto; display: grid; }
.facts > div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--tint); text-transform: uppercase; }
.about .facts { border-top-color: var(--red); }
.about .facts > div { border-bottom-color: rgba(246, 246, 252, .3); }

/* doctors */
.doctor { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.doctor + .doctor { padding-top: 2.5rem; }
.doctor .photo-frame { aspect-ratio: 3 / 4; flex: none; width: 100%; }
.doctor-info { display: grid; align-content: end; gap: 1.2rem; }
.doctor-info h3 { font-size: 2rem; line-height: 1.1; }
.doctor-info dl > div { padding: .7rem 0; border-top: 1px solid var(--line); display: grid; gap: .15rem; }
.doctor-info dt { color: var(--ink-soft); text-transform: uppercase; }

/* panels */
.panels { background: var(--tint); border-block: 1px solid var(--tint-line); }
.panels-inner { max-width: 90rem; margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(1.75rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.panels-head { display: grid; gap: 1.2rem; align-content: start; }
.panels-head .eyebrow { margin-bottom: 0; color: var(--blue); }
.panels-note { font-size: .9375rem; max-width: 28rem; border-left: 3px solid var(--red); padding-left: 1rem; }
.belt { overflow: hidden; padding: .5rem 0 clamp(2rem, 4vw, 3rem); }
.panel-list { display: flex; width: max-content; padding-left: 0; }
.belt.is-static .panel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; width: auto; max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); }
.belt.is-static .panel-list li { width: auto; margin-right: 0; }
.panel-list li { font-weight: 500; flex: none; width: 12rem; margin-right: 1rem; }
.is-moving .panel-list { animation: belt var(--belt-time, 40s) linear infinite; will-change: transform; }
/* Pauses only while the pointer is over a logo card, and resumes as soon as it leaves */
.is-moving:not(.is-fast) .panel-list:has(.panel-card:hover) { animation-play-state: paused; }
.is-moving.is-fast .panel-card:hover { transform: none; }
@keyframes belt { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.panel-card { background: var(--white); border: 1px solid var(--tint-line); display: grid; grid-template-rows: auto auto; transition: border-color .2s var(--ease), transform .22s var(--ease); }
.panel-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.panel-logo { display: block; aspect-ratio: 2 / 1; }
.panel-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.panel-name { height: 3.4rem; display: flex; align-items: center; padding: 0 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); text-transform: uppercase; font-size: .75rem; line-height: 1.3; }

/* visit */
.visit { display: block; }
.visually-large { font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -.02em; line-height: 1; margin-bottom: clamp(2rem, 5vw, 4rem); max-width: 14ch; }
.visit-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); }
.big-address { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -.01em; margin-bottom: 1.8rem; }
.meta-list { margin-top: 2.2rem; border-top: 1.5px solid var(--ink); }
.meta-list > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.meta-list dt { color: var(--ink-soft); text-transform: uppercase; }
.meta-list a { text-decoration: none; font-weight: 600; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition: background-size .25s var(--ease); }
.meta-list a:hover { background-size: 100% 1.5px; }
.visit-hours { background: var(--white); border: 1px solid var(--ink); padding: clamp(1.25rem, 3vw, 2rem); align-self: start; display: grid; gap: 1rem; }
.hours-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.hours-table th, .hours-table td { text-align: left; padding: .8rem 0; border-bottom: 1px solid var(--line); font-weight: 400; font-size: .9375rem; }
.hours-table td { text-align: right; }
.hours-table tr.is-today th, .hours-table tr.is-today td { font-weight: 500; color: var(--blue); }
.hours-table tr.is-today th::after { content: " · today"; color: var(--blue); }

/* faq */
.accordion { border-top: 1.5px solid var(--ink); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; text-align: left;
  background: none; border: 0; padding: 1.35rem 0; cursor: pointer; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.25;
  transition: color .2s, padding-left .25s var(--ease);
}
.acc-trigger:hover { color: var(--blue); padding-left: .5rem; }
.acc-icon { width: 1.1rem; height: 1.1rem; position: relative; flex: none; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; background: currentColor; left: 0; right: 0; top: calc(50% - 1px); height: 2px; transition: transform .3s var(--ease); }
.acc-icon::after { transform: rotate(90deg); }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform: rotate(0deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.acc-panel[data-open="true"] { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; min-height: 0; }
.acc-panel p { padding: 0 0 1.5rem; max-width: 38rem; color: var(--ink-soft); }
.acc-panel a { color: var(--blue); font-weight: 600; }

/* contact */
.contact { background: var(--blue); color: var(--paper); border-top: 8px solid var(--red); }
.contact-inner { max-width: 90rem; margin: 0 auto; padding: clamp(3.5rem, 8vw, 7rem) var(--gutter); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.contact-copy { display: grid; gap: 1.6rem; }
.contact .eyebrow { color: var(--tint); margin-bottom: 0; }
.contact .eyebrow::before { background: var(--paper); }
.contact h2 { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1; max-width: 13ch; }
.contact-sub { color: var(--tint); max-width: 30rem; font-size: 1.15rem; }
.contact-note { color: var(--tint); font-size: .75rem; }

.enquiry { background: var(--paper); color: var(--ink); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: 1.15rem; }
.enquiry h3 { font-size: 1.7rem; }
.form-note { font-size: .9375rem; color: var(--ink-soft); border-left: 3px solid var(--red); padding-left: .8rem; }
.field { display: grid; gap: .4rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: .9375rem; padding: 0; }
.optional { color: var(--ink-soft); text-transform: uppercase; margin-left: .4rem; font-weight: 400; }
.field input[type="text"], .field input[type="tel"], .field textarea {
  width: 100%; background: var(--white); border: 1px solid var(--ink); border-radius: 2px; padding: .75rem .85rem; transition: border-color .2s;
}
.field input:hover, .field textarea:hover { border-color: var(--blue); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.field textarea { resize: vertical; min-height: 6.5rem; }
.field [aria-invalid="true"] { border-color: var(--red-text); border-width: 2px; }
.hint { font-size: .8125rem; color: var(--ink-soft); }
.err { color: var(--red-text); font-size: .875rem; font-weight: 600; min-height: 0; }
.err:empty { display: none; }
.choice { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; }
.choice legend { width: 100%; margin-bottom: .2rem; }
.radio, .check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500 !important; cursor: pointer; }
.radio input, .check input { margin-top: .3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--blue); flex: none; }
.check span { font-size: .9375rem; font-weight: 400; }
.check a { color: var(--blue); font-weight: 600; }
.enquiry .btn { justify-self: start; }
.enquiry .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.form-status { font-size: .9375rem; }
.form-status:empty { display: none; }
.form-status.ok { border: 1px solid var(--blue); background: var(--tint); padding: 1rem; display: grid; gap: .8rem; }
.form-status.fail { border: 1px solid var(--red-text); padding: 1rem; color: var(--red-text); font-weight: 600; }
.form-status pre { margin: 0; white-space: pre-wrap; font-family: var(--font-mono); font-size: .8125rem; background: var(--white); padding: .7rem; border: 1px solid var(--line); color: var(--ink); font-weight: 400; }
.form-status .btn { justify-self: start; }

/* footer */
.site-footer { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 1.5rem; max-width: 90rem; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 2rem 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.f-block { display: grid; gap: .45rem; align-content: start; min-width: 0; }
.f-block .label { margin-bottom: .3rem; }
.f-name { font-family: var(--font-display); font-size: 1.6rem; }
.f-block address, .f-block p { font-size: .9375rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.f-block a { text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .25s var(--ease); }
.f-block a:hover { background-size: 100% 1px; }
.f-block .hours-mini { font-size: .875rem; }
.f-nav { display: grid; gap: .3rem; font-size: .9375rem; }
.privacy { padding: 1.5rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .6rem; }
.privacy p { max-width: 52rem; font-size: .875rem; color: var(--ink-soft); }
.legal { display: flex; flex-wrap: wrap; gap: .4rem 2rem; justify-content: space-between; padding-top: 1.2rem; color: var(--ink-soft); font-size: .75rem; }

/* responsive */
@media (max-width: 62rem) {
  .js .menu-btn { display: inline-flex; }
  .js .nav {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--ink);
    flex-direction: column; align-items: stretch; gap: 1rem; padding: 0 var(--gutter);
    max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .35s var(--ease), padding .35s var(--ease), visibility 0s .35s;
  }
  .js .nav.is-open { max-height: 30rem; padding: 1rem var(--gutter) 1.5rem; visibility: visible; transition: max-height .35s var(--ease), padding .35s var(--ease), visibility 0s; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: block; padding: .85rem 0 !important; border-bottom: 1px solid var(--line); font-size: 1.125rem !important; }
  .nav ul a::after { display: none; }
  .nav .btn { justify-self: stretch; padding: .9rem 1rem; }
  html:not(.js) .nav { flex-wrap: wrap; }
  html:not(.js) .nav ul { flex-wrap: wrap; gap: .5rem 1.2rem; }

  .hero-stage { background-size: 100% auto; padding-top: 54vw; }
  .hero-text { padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 1.5rem; }
  .hero-strip-inner { grid-template-columns: 1fr; }
  .split, .services .split { grid-template-columns: 1fr; }
  .split-head { position: static; }
  .about-inner { grid-template-columns: 1fr; }
  .about-stage { background-size: 100% auto; padding-top: 62vw; }
  .about-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 56vw; bottom: 0; background: var(--ink); z-index: -1; }
  .visit-grid, .contact-inner { grid-template-columns: 1fr; }
  .panels-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .brand-meta { display: none; }
  .rows li { grid-template-columns: 4rem minmax(0, 1fr); gap: .15rem 1rem; padding: .9rem 0; }
  .svc-art { width: 4rem; height: 4rem; grid-row: 1 / span 2; }
  .svc-detail { grid-column: 2; }
  .rows li:not(:has(.svc-art)) { grid-template-columns: 1fr; }
  .doctor { grid-template-columns: 1fr; }
  .doctor .photo-frame { max-width: 18rem; }
  .facts > div, .meta-list > div { grid-template-columns: 1fr; gap: .15rem; }
  .acc-trigger { font-size: 1.2rem; }
  .btn-row .btn, .hero-actions .btn, .ask .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .enquiry .btn { justify-self: stretch; }
  .draftbar { flex-direction: column; gap: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .btn:hover, .btn:hover .arrow, .photo-frame:hover img, .panel-card:hover { transform: none; }
  /* No motion: show the logos as a static, wrapping row and drop the duplicate copy */
  .is-moving .panel-list { animation: none; width: auto; flex-wrap: wrap; row-gap: 1rem; padding-inline: var(--gutter); }
  .panel-clone { display: none; }
}

/* ---------- Language switch ---------- */
.lang { display: inline-flex; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; order: 3; flex: none; }
.lang-btn { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: .8rem; letter-spacing: .06em; padding: .45rem .7rem; background: none; border: 0; color: var(--ink); cursor: pointer; min-width: 2.6rem; }
.lang-btn + .lang-btn { border-left: 1px solid var(--ink); }
.lang-btn:hover { background: var(--tint); }
.lang-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.nav { order: 2; }
.header-inner .brand { margin-right: auto; }
@media (max-width: 62rem) {
  .lang { order: 2; }
  .menu-btn { order: 3; }
}
@media (max-width: 40rem) {
  .belt.is-static .panel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .belt.is-static .panel-name { font-size: .7rem; }
}

.doc { display: block; margin-top: .3rem; font-size: .8em; font-weight: 400; letter-spacing: 0; opacity: .8; }
.hours-mini > div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: baseline; }
.hours-mini dt { white-space: nowrap; }
.hours-mini dd { text-align: left; }
.hero-strip-inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr) minmax(0, 1.2fr); }
@media (max-width: 62rem) { .hero-strip-inner { grid-template-columns: 1fr; } }

/* Panels without a supplied logo: plain name bars, so no invented logo is implied */
.belt.is-static .panel-names { margin-top: 1rem; }
.panel-text .panel-name { border-top: 0; height: 3.2rem; }

/* Panel grid: columns chosen so each block fills its rows (21 logos = 7 x 3, 8 names = 4 x 2) */
.belt.is-static .panel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.belt.is-static .panel-names { margin-top: .75rem; }
.belt.is-static .panel-name { padding: 0 .75rem; }
.belt.is-static .panel-list:not(.panel-names) li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .belt.is-static .panel-list { gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .belt.is-static .panel-names { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
  .belt.is-static .panel-list:not(.panel-names) li:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 62rem) {
  .belt.is-static .panel-list { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .belt.is-static .panel-names { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Panel grid v2: rows are centred, so an incomplete last row stays balanced instead of leaving a gap */
.belt.is-static .panel-list { --cols: 2; --gap: .75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.belt.is-static .panel-list li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.belt.is-static .panel-list:not(.panel-names) li:last-child:nth-child(odd) { grid-column: auto; }
@media (min-width: 40rem) {
  .belt.is-static .panel-list { --cols: 4; --gap: 1rem; }
  .belt.is-static .panel-names { --cols: 2; }
}
@media (min-width: 62rem) {
  .belt.is-static .panel-list { --cols: 6; }
  .belt.is-static .panel-names { --cols: 4; }
}