/* ==========================================================================
   The Physio Pod, shared stylesheet
   Layout pattern follows releafphysio.com; typography follows welllife.co.uk
   (Inter Tight for headings, Inter for body, DM Serif Display for display lines).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --font-head: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;

  --green: #56603A;
  --green-dark: #3C4429;
  --green-soft: #EEF0E4;
  --ink: #081219;
  --ink-2: #33443D;
  --body: #4B5750;
  --cream: #F5F5F0;
  --line: #E2E4DC;
  --white: #FFFFFF;

  --wrap: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(8, 18, 25, .04), 0 8px 28px rgba(8, 18, 25, .07);
  --shadow-lg: 0 2px 4px rgba(8, 18, 25, .05), 0 18px 48px rgba(8, 18, 25, .10);
  --header-h: 78px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 .55em;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
section { padding: 92px 0; }
.section-tight { padding: 64px 0; }
.bg-cream { background: var(--cream); }
.bg-ink { background: var(--ink); }

.eyebrow {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0 0 .9em;
}
.bg-ink .eyebrow { color: #C7D39E; }

.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.centred { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: 1.08rem; }

.lead { font-size: 1.15rem; line-height: 1.55; color: var(--ink-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 15px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-dark); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.bg-ink .btn-outline { border-color: rgba(255,255,255,.55); color: var(--white); }
.bg-ink .btn-outline:hover { background: var(--white); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
.brand-logo { display: block; width: auto; height: 56px; }
.brand-plate {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  border-radius: 10px;
  padding: 9px 14px;
}
.brand-plate .brand-logo { height: 30px; }

.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  font-family: var(--font-head);
  font-size: .96rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.main-nav a:hover { color: var(--green-dark); }
.main-nav a.active { color: var(--ink); border-bottom-color: var(--green); }
.header-cta { display: flex; align-items: center; gap: 16px; }
.header-cta .btn { padding: 12px 24px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 19px; height: 2px;
  margin: 4px auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(168deg, var(--cream) 0%, #EFF0E7 58%, var(--white) 100%);
  padding: 96px 0 88px;
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 64px;
  align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.hero h1 em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  color: var(--green-dark);
}
.hero .lead { max-width: 52ch; margin-bottom: 32px; }

/* Hero intro: a plain paragraph on tablet/desktop, but a collapsed fold on
   a phone (opened on tap) so the hero reads shorter on first paint. The
   mobile-only collapse itself lives in the 640px block further down;
   home-mobile.js forces the fold open again at wider widths. */
.lead-fold summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  color: var(--green-dark);
}
.lead-fold summary::-webkit-details-marker { display: none; }
.lead-fold summary::after { content: " \2193"; }
.lead-fold[open] summary::after { content: " \2191"; }
.lead-fold .lead { margin-top: 12px; }
@media (min-width: 641px) {
  .lead-fold summary { display: none; }
  .lead-fold .lead { margin-top: 0; }
}
.hero-points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hero-points li {
  position: relative;
  padding-left: 30px;
  font-size: .99rem;
  color: var(--ink-2);
}
.hero-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: inset 0 0 0 3px var(--white), 0 0 0 3px var(--green-soft);
}

/* Hero right column: photo with the at-a-glance card tucked under it. */
.hero-media { position: relative; }
.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.hero-media .hero-card {
  position: relative;
  margin: -56px 24px 0;
  z-index: 1;
}

.hero-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px;
}
.hero-card h3 { margin-bottom: .2em; }
.hero-card .muted { font-size: .93rem; margin-bottom: 24px; }
.hero-card dl { margin: 0; display: grid; gap: 0; }
.hero-card .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}
.hero-card .row:last-of-type { border-bottom: 0; }
.hero-card dt { font-family: var(--font-head); font-weight: 500; color: var(--ink); }
.hero-card dd {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--green-dark);
  white-space: nowrap;
}

/* ---------- Page header (inner pages) ---------- */
.page-head {
  background: var(--cream);
  padding: 74px 0 66px;
  border-bottom: 1px solid var(--line);
}
.page-head .lead { max-width: 62ch; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: .45em; }
.card p { font-size: .98rem; }
.card-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green-dark);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.card-icon svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Full-bleed image at the top of a card, cancelling the card's own padding. */
.card-media {
  width: calc(100% + 56px);
  max-width: none;
  margin: -32px -28px 24px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-media + .card-icon { margin-top: -4px; }

.card-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.card-list li {
  position: relative;
  padding-left: 22px;
  font-size: .95rem;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: .58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* ---------- Process steps ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step .num {
  counter-increment: step;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--green);
  display: block;
  margin-bottom: 16px;
}
.step .num::before { content: "0" counter(step); }
.step h3 { margin-bottom: .4em; }
.step p { font-size: .97rem; }

/* ---------- Split (about / practitioner) ---------- */
.split {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 60px;
  align-items: start;
}
/* Without this, a grid item's automatic min-width is its content's
   min-content size. The mobile "about" carousel below scrolls its own
   overflow internally, but its min-content width is still huge (four
   cards laid out edge to edge), so without min-width:0 that size leaks
   up into .about-copy and blows out the whole grid track, the section,
   and the page past the viewport edge. */
.split > * { min-width: 0; }
.portrait {
  background: var(--green-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.portrait:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* Tap hint, shown only inside the mobile portrait/credentials switch below. */
.portrait-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  font-family: var(--font-head);
  font-size: .84rem;
  font-weight: 600;
  color: var(--green-dark);
}
.portrait-hint .hint-arrow {
  width: 15px; height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s ease;
}
.portrait-hint .hint-on { display: none; }
#about.about-active .portrait-hint .hint-off { display: none; }
#about.about-active .portrait-hint .hint-on { display: inline; }
#about.about-active .portrait-hint .hint-arrow { transform: rotate(90deg); }
.portrait .avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto 22px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--white);
  border: 1px solid var(--line);
  -webkit-user-drag: none;
}

/* Wide image strip used between sections. */
.media-band {
  width: 100%;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.media-inline {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 26px;
}
.portrait h3 { margin-bottom: .15em; }
.portrait .role {
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0;
}

/* The "About the practitioner" heading crossfades between its intro and
   credentials wording in step with .about-panels below, on tap, click or
   drag, at every width. */
.about-copy h2 { display: grid; }
.about-heading {
  grid-area: 1 / 1;
  transition: opacity .35s ease, transform .35s ease;
}
.about-heading-creds { opacity: 0; transform: translateX(12px); pointer-events: none; }
#about.about-active .about-heading-intro { opacity: 0; transform: translateX(-12px); pointer-events: none; }
#about.about-active .about-heading-creds { opacity: 1; transform: translateX(0); pointer-events: auto; }

.about-swipe-hint { display: none; }
.about-panel-title { display: none; }

.cred-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.cred-list li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: .97rem;
}
.cred-list strong {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

/* The three credentials also exist as separate .about-panel-split cards,
   used only by the mobile swipe carousel below 640px so each credential
   gets its own card instead of one shared list; hidden everywhere else. */
.about-panel-split { display: none; }

.note {
  background: #FFF8E6;
  border: 1px dashed #E3C86A;
  border-radius: 12px;
  padding: 18px 22px;
  font-size: .94rem;
  color: #6B5514;
  margin-top: 26px;
}
.note strong { font-family: var(--font-head); color: #4E3E0A; }

/* ---------- Quote ---------- */
.quote {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.quote blockquote {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.9vw, 2.05rem);
  line-height: 1.36;
  color: var(--ink);
}
.quote cite {
  font-family: var(--font-head);
  font-style: normal;
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--green-dark);
}

/* ---------- Price tables ---------- */
.price-table {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.price-table h3 {
  margin: 0;
  padding: 24px 30px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  font-size: 1.15rem;
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 30px;
  border-bottom: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 0; }
.price-row .what { flex: 1 1 auto; }
.price-row .what strong {
  font-family: var(--font-head);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
}
.price-row .what span { font-size: .93rem; display: block; margin-top: 3px; }
.price-row .amount {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--green-dark);
  white-space: nowrap;
  flex: none;
}
.price-row .amount small {
  display: block;
  font-size: .76rem;
  font-weight: 500;
  color: var(--body);
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ---------- CTA band ---------- */
.cta-band { padding: 84px 0; color: var(--white); }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.82); font-size: 1.1rem; }
.cta-inner { max-width: 740px; margin: 0 auto; text-align: center; }
.cta-inner .btn-row { justify-content: center; margin-top: 30px; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 54px;
  align-items: start;
}
/* Grid items default to min-width:auto, so without this a wide child (the
   swipeable carousel below, an unbroken line of text) can refuse to shrink
   and push past the track and out of .contact-grid's own bounds instead of
   wrapping or scrolling internally. */
.contact-grid > .form-card,
.contact-grid > aside { min-width: 0; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--white);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.field .hint { font-size: .86rem; margin-top: 6px; }

/* Client-side validation state and Netlify Forms submit feedback, set by
   assets/contact-form.js. */
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: #E3C86A;
  box-shadow: 0 0 0 3px rgba(227, 200, 106, .25);
}
.form-status { margin-top: 18px; font-size: .89rem; }
.form-status.is-warning {
  color: #6B5514;
  background: #FFF8E6;
  border: 1px dashed #E3C86A;
  border-radius: 12px;
  padding: 12px 16px;
}
.form-status.is-success {
  color: var(--green-dark);
  background: var(--green-soft);
  border-radius: 12px;
  padding: 12px 16px;
}
/* Netlify Forms honeypot: the `hidden` attribute already hides it; this
   rule stops a later display rule on <p> from bringing the trap back. */
.hp { display: none !important; }

/* Mobile-only short form: name/email/phone start hidden and the form
   opens to its full length once the visitor interacts with the reason
   select, the message box or the submit button (see contact-mobile.js).
   Tablet/desktop always show every field. */
@media (max-width: 640px) {
  .field-collapsible { display: none; }
  #enquiry.expanded .field-collapsible { display: block; }
}
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 36px;
}
.info-block {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.info-block:first-of-type { border-top: 0; padding-top: 0; }
.info-block h4 { margin-bottom: .3em; }
.info-block p { font-size: .98rem; }
.opening { list-style: none; margin: 0; padding: 0; }
.opening li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: .97rem;
}
.opening li:last-child { border-bottom: 0; }
.opening span:first-child { color: var(--ink); font-family: var(--font-head); font-weight: 500; }

/* Mobile-only carousel version of the clinic-details column (see the
   swipeable-cards block near the bottom of this file); hidden on
   tablet/desktop where .info-stack (the plain stacked list) is shown instead. */
.info-card-split { display: none; }

/* ---------- FAQ ---------- */
.faq { max-width: 840px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.03rem;
  color: var(--ink);
  position: relative;
  padding-right: 54px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 24px; top: 50%;
  width: 10px; height: 10px;
  margin-top: -6px;
  border-right: 2px solid var(--green-dark);
  border-bottom: 2px solid var(--green-dark);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .answer { padding: 0 24px 22px; font-size: .99rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.74);
  padding: 72px 0 30px;
  font-size: .96rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
.site-footer h4 {
  color: var(--white);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 1.2em;
}
.site-footer .brand { color: var(--white); margin-bottom: 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: inherit; text-decoration: none; transition: color .16s ease; }
.site-footer a:hover { color: var(--white); }
.footer-bottom {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .88rem;
  color: rgba(255,255,255,.55);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  section { padding: 68px 0; }
  .hero { padding: 64px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .split { grid-template-columns: 1fr; gap: 38px; }
  .portrait { position: static; }

  /* About: tap-to-swap is desktop-only (min-width:981 block below). Tablet
     and phone both show the intro and the credentials list stacked in
     full, each carrying its own heading instead of the shared,
     crossfading h2. The portrait stays full width here, matching
     .about-copy below it, rather than shrinking to a smaller centred
     card; the avatar switches to a wider aspect ratio so a full-width
     photo still reads as a sensible height instead of a huge square. */
  .about-copy h2 { display: none; }
  .about-panel-title { display: block; margin-bottom: .6em; }
  .about-panel-creds { margin-top: 30px; }
  .portrait .avatar { aspect-ratio: 16 / 9; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  .nav-toggle { display: block; order: 3; }
  .header-cta { order: 2; }
  .header-cta .btn { display: none; }
  .main-nav {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 18px;
    border-top: 1px solid var(--line);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 2px; border-bottom: 1px solid var(--line); }
  .main-nav a.active { border-bottom-color: var(--line); color: var(--green-dark); }
  .header-inner { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
}

/* About/credentials desktop swap: dragging (or clicking) the portrait slides
   it and swaps the intro quote for the Experience & Credentials list. This
   is desktop-only; tablet and phone both show the intro and credentials
   stacked in full instead (see the max-width:980 block above), so the
   swap function never appears below 981px. The portrait always springs
   back to its resting spot once the drag is released; only the copy
   underneath changes. */
@media (min-width: 981px) {
  .portrait {
    cursor: grab;
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
  }
  .portrait:hover { box-shadow: var(--shadow-lg); }
  .portrait.dragging { transition: none; cursor: grabbing; user-select: none; }
  #about.about-active .portrait { box-shadow: var(--shadow-lg); border-color: var(--green); }

  .about-panels { display: grid; }
  .about-panel {
    grid-area: 1 / 1;
    transition: opacity .4s ease, transform .4s ease;
  }
  .about-panel-creds { opacity: 0; transform: translateX(24px); pointer-events: none; }
  #about.about-active .about-panel-intro { opacity: 0; transform: translateX(-24px); pointer-events: none; }
  #about.about-active .about-panel-creds { opacity: 1; transform: translateX(0); pointer-events: auto; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 18px; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-card, .form-card { padding: 26px 22px; }
  .hero-media .hero-card { margin: -36px 12px 0; }
  .card { padding: 28px 22px; }
  .card-media { width: calc(100% + 44px); margin: -28px -22px 22px; }
  .media-band { aspect-ratio: 16 / 9; }
  .price-row { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px; }
  .price-table h3 { padding: 20px 22px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
}

/* ---------- Mobile only: swipeable cards ----------
   Below 640px, card grids (and on the price list, the session rows)
   scroll one card at a time via a horizontal snap carousel instead of
   stacking full width. On the home page (body.home) this also covers
   the About panels and the hero intro, which collapses behind a tap.
   Nothing here touches tablet/desktop. */
.mobile-peek-btn { display: none; }
.carousel-hint { display: none; }

dialog.modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 420px;
  width: calc(100% - 40px);
  box-shadow: var(--shadow-lg);
}
dialog.modal::backdrop { background: rgba(8, 18, 25, .55); }
.modal-inner { position: relative; padding: 30px 26px 26px; }
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.modal-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 20px;
}
dialog.modal .hero-card { border: 0; box-shadow: none; padding: 0; }

.read-more summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-size: .93rem;
  font-weight: 600;
  color: var(--green-dark);
}
.read-more summary::-webkit-details-marker { display: none; }
.read-more summary::after { content: " \2193"; }
.read-more[open] summary::after { content: " \2191"; }
.read-more p, .read-more blockquote { margin-top: 12px; }

@media (max-width: 640px) {
  /* Tighter section rhythm on a phone, matching physiohub.pro's mobile
     spacing. Sections and the hero simply flow one after another, full
     width, in normal document order. */
  section { padding: 56px 0; }
  .hero { padding: 48px 0 44px; }

  /* Card grids scroll horizontally, one card at a time, instead of
     stacking full width: "why choose us" and "what we treat" both swipe. */
  .carousel-hint {
    display: block;
    margin: 0 0 14px;
    text-align: center;
    font-family: var(--font-head);
    font-size: .86rem;
    font-weight: 600;
    color: var(--green-dark);
  }
  .mobile-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 16px;
    margin: 0 -18px;
    padding: 4px 18px 12px;
  }
  .mobile-carousel::-webkit-scrollbar { display: none; }
  .mobile-carousel > .card { flex: 0 0 82%; scroll-snap-align: center; }

  /* Contact page, mobile only: the "what happens next" steps swipe as
     cards instead of sitting in a plain 3-column grid, and the clinic
     details swap from one long stacked list for a 3-card carousel
     (contact / hours / access). */
  .mobile-carousel > .step {
    flex: 0 0 82%;
    scroll-snap-align: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 22px 22px;
    box-shadow: var(--shadow);
  }
  .info-stack { display: none; }
  .info-card-split { display: block; }

  /* Contact page, mobile only: the clinic-details column (photo, hours,
     note) becomes its own bordered card, so it reads as a section
     distinct from the enquiry form above it rather than one long stack.
     The photo and carousel bleed only to this card's own edge, not the
     viewport edge, so nothing overshoots the new border. */
  .contact-grid > aside {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 26px 22px;
    overflow: hidden;
  }
  .contact-grid > aside .media-inline {
    width: calc(100% + 44px);
    margin: -26px -22px 22px;
    border: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .contact-grid > aside .mobile-carousel {
    margin: 0 -22px;
    padding: 4px 22px 12px;
  }

  /* Price list, mobile only: each session becomes its own swipeable card
     instead of a stacked row inside one shared box (prices.html). */
  .price-table { background: none; border: 0; box-shadow: none; overflow: visible; }
  .price-table h3 { padding: 0; margin: 0 0 14px; background: none; border-bottom: 0; text-align: center; }
  .price-rows.mobile-carousel > .price-row {
    flex: 0 0 82%;
    scroll-snap-align: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  /* About: image on top; the intro and credentials list are swipeable
     cards below it (one card in view at a time) instead of the stacked
     block tablet gets, or the tap-to-swap panel desktop gets. The shared
     h2 is hidden here since each card carries its own title
     (.about-panel-title), so the wording never appears twice. */
  .about-copy h2 { display: none; }
  .about-swipe-hint {
    display: block;
    margin: 0 0 14px;
    text-align: center;
    font-family: var(--font-head);
    font-size: .86rem;
    font-weight: 600;
    color: var(--green-dark);
  }
  .about-panels {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 16px;
    margin: 0 -18px;
    padding: 4px 18px 12px;
  }
  .about-panels::-webkit-scrollbar { display: none; }
  .about-panel {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 22px;
    box-shadow: var(--shadow);
  }
  .about-panel-title { display: block; margin-bottom: .6em; }
  /* Tap-to-swap is desktop-only (nav.js), so the portrait never shrinks via
     .about-active here. It stays full width like tablet above (the wider
     avatar aspect-ratio set there already covers phone too), just with
     tighter padding to suit the smaller card. */
  .portrait { cursor: default; padding: 20px; }
  .portrait-hint { display: none; }
  #about .cred-list { max-height: none; overflow: visible; }

  /* Swap the one combined credentials card for the three individual ones,
     so the carousel reads: intro, then one credential per swipe. */
  .about-panel-creds { display: none; }
  .about-panel-split { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}