/* ==========================================================================
   Cosmos Aesthetics — Components
   Header, hero, buttons, cards, chips, gallery grid, case modal, media band,
   team, location, footer, compliance slots. One component system, tokens only.
   ========================================================================== */

/* --- Button system (semantic, action-coded) ------------------------------
   Sharp (not rounded). Choose the variant by the ACTION, not the look:
     .btn--primary    MAIN action only (book / enquire): vibrant pink + auto arrow
     .btn--secondary  supporting action: filled black  (inverts white on dark)
     .btn--tertiary   low-emphasis: black stroke @50% line, 100% label (inverts on dark)
     .btn--text       inline text+arrow (no box)
   Bare `.btn` == secondary. Wrap groups on dark photos/footers in `.on-dark`.
   Sizes: .btn--xs · .btn--sm · (default M) · .btn--lg · layout: .btn--block */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font-label); font-weight: 700;
  font-size: var(--step--1); line-height: 1; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  padding: 14px 28px; border-radius: 0;            /* not rounded */
  border: 1px solid transparent; cursor: pointer; text-align: center;
  background: var(--btn-secondary); color: var(--on-secondary);   /* bare .btn = secondary */
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(0) scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Primary — vibrant pink, charcoal label (white fails AA on this pink), trailing arrow */
.btn--primary { background: var(--btn-primary); color: var(--on-primary); border-color: transparent; font-weight: 700; }
.btn--primary:hover { background: var(--btn-primary-hover); transform: translateY(-1px); }
.btn--primary::after {
  content: ""; width: 1.05em; height: 1.05em; flex: none;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease);
}
.btn--primary:hover::after { transform: translateX(3px); }

/* Secondary — filled black (explicit alias of bare .btn) */
.btn--secondary { background: var(--btn-secondary); color: var(--on-secondary); border-color: transparent; }
.btn:not(.btn--primary):hover, .btn--secondary:hover { background: var(--btn-secondary-hover); color: var(--on-secondary); transform: translateY(-1px); }

/* Tertiary — black stroke @50% line, full-strength label */
.btn--tertiary { background: transparent; color: var(--on-tertiary); border-color: var(--btn-tertiary-line); }
.btn--tertiary:hover { background: transparent; border-color: var(--on-tertiary); transform: translateY(-1px); }

/* Inline text button */
.btn--text { background: transparent; color: var(--heading); padding: 8px 0; border: 0; gap: 0.5em; }
.btn--text:hover { background: transparent; color: var(--link-pink); transform: none; }

/* Dark-surface inversion (wrap container in .on-dark) */
.on-dark .btn,
.on-dark .btn--secondary { background: var(--color-white); color: var(--color-ink-900); border-color: transparent; }
.on-dark .btn:hover,
.on-dark .btn--secondary:hover { background: var(--color-greige-100); color: var(--color-ink-900); }   /* light hover bg keeps dark text */
.on-dark .btn--primary { background: var(--btn-primary); color: var(--on-primary); }
.on-dark .btn--primary:hover { background: var(--btn-primary-hover); }
.on-dark .btn--tertiary { background: transparent; color: var(--color-white); border-color: color-mix(in srgb, var(--color-white) 50%, transparent); }
.on-dark .btn--tertiary:hover { border-color: var(--color-white); }
.on-dark .btn--text { color: var(--color-white); }

/* Sizes */
.btn--xs { padding: 7px 13px; font-size: 0.66rem; gap: 0.4em; }
.btn--sm { padding: 9px 18px; font-size: 0.72rem; }
.btn--lg { padding: 17px 36px; font-size: 0.9rem; }
.btn--block { display: flex; width: 100%; }

/* --- Links ---------------------------------------------------------------
   .link        default: charcoal, underlined (HelloHazel style)
   .link--pink  important: readable rose, no underline until hover
   .link--icon  trailing arrow ›  */
.link { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--border-strong); transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.link:hover { text-decoration-color: var(--accent); }
.link--pink { color: var(--link-pink); text-decoration: none; font-weight: var(--weight-medium); }
.link--pink:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.link--icon { display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none; }
.link--icon::after { content: "\2192"; transition: transform var(--dur-fast) var(--ease); }
.link--icon:hover::after { transform: translateX(3px); }

/* --- Mega header (centered broadcast) ------------------------------------
   Row 1 = socials · centered logo · phone + CTA.  Row 2 = centered megamenu.
   On scroll the header gains .is-condensed: row 1 hides, row 2 shows a mini
   logo (left) + Book CTA (right) with the nav centered. (.mega panels stay
   absolute to .site-header so they remain full-bleed in both states.) */
/* Top compliance "hello" bar — dark, distinct from the cream/pink site; scrolls away. */
.hello-bar { background: var(--color-ink-900); color: var(--color-greige-200); }
.hello-bar__inner { display: flex; align-items: center; justify-content: center; gap: 0.55em;
  max-width: var(--container); margin-inline: auto; padding: 7px var(--gutter);
  font-family: var(--font-label); font-size: var(--step--1); line-height: 1.4; text-align: center; }
.hello-bar__ico { flex: none; color: var(--accent); }
.hello-bar strong { color: var(--color-white); font-weight: 700; }
.hello-bar a { color: var(--color-white); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, var(--color-white) 45%, transparent);
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); }
.hello-bar a:hover { color: var(--accent); text-decoration-color: var(--accent); }
@media (max-width: 600px) { .hello-bar__inner { align-items: flex-start; font-size: var(--step--2); padding: 6px var(--gutter); text-align: left; } }

.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--surface); border-bottom: 1px solid var(--border); }
.header-row__inner { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Row 1 — brand broadcast */
.header-row--brand { border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.header-row--brand .header-row__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md); min-height: 6rem; padding-block: var(--space-xs); }
.header-aux { display: flex; align-items: center; gap: 14px; font-size: var(--step--1); color: var(--text-muted); }
.header-aux--contact { justify-self: end; }
.header-aux__tag { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--heading); font-weight: 500; }
/* uniform circular social chips: one shape, brand glyph centred inside */
.header-social { display: inline-flex; align-items: center; gap: 9px; }
.header-social a {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--border-strong); border-radius: 0;   /* square */
  color: var(--text-muted); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.header-social a svg { width: 15px; height: 15px; }
.header-social a:hover { background: var(--heading); border-color: var(--heading); color: var(--color-white); }
.header-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--heading); }
.header-phone__num { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; letter-spacing: 0.01em; font-size: 0.84rem; }
.header-phone__num svg { color: var(--accent); }
.header-phone:hover .header-phone__num { color: var(--accent-deep); }

/* Brand / logo */
.brand { display: inline-flex; align-items: center; justify-self: center; font-family: var(--font-display); color: var(--heading); }
/* Inline SVG wordmark: fill="currentColor", so the logo colour follows the
   `color` of its container — recolour anywhere from CSS, one source file. */
.brand__logo { display: block; width: auto; height: 46px; color: var(--heading); transition: height var(--dur-fast) var(--ease); }
.brand__logo--invert { color: var(--color-white); height: 44px; }

/* Row 2 — nav, centered */
.header-row--nav .header-row__inner--nav { position: static; display: flex; justify-content: center; align-items: center; min-height: 3.5rem; }
.nav { margin: 0; }
/* mini logo + mini CTA live in the nav row, hidden until condensed; positioned
   to .site-header (not the nav inner) so they don't trap the .mega panels */
.brand--mini, .header-cta--mini { position: absolute; top: 0; height: 3.5rem; display: none; align-items: center; }
.brand--mini { left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.brand--mini .brand__logo { height: 34px; }
.header-cta--mini { right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }

/* Condensed state (scrolled): the SAME two-row header, just compressed —
   smaller logo, tighter row 1, and a shorter nav row. Both rows stay visible. */
.header-row--brand .header-row__inner,
.header-row--nav .header-row__inner--nav { transition: min-height var(--dur) var(--ease), padding-block var(--dur) var(--ease); }
.site-header.is-condensed .header-row--brand .header-row__inner { min-height: 3.2rem; padding-block: 0; gap: var(--space-sm); }
.site-header.is-condensed .brand__logo { height: 28px; }
.site-header.is-condensed .header-social a { width: 28px; height: 28px; }
.site-header.is-condensed .header-social a svg { width: 13px; height: 13px; }
.site-header.is-condensed .header-row--nav .header-row__inner--nav { min-height: 3rem; }
.site-header.is-condensed .nav__item > .nav__link, .site-header.is-condensed .nav__top { min-height: 3rem; }
/* mini logo/CTA are no longer used (row 1 stays), keep them out of the layout */
.brand--mini, .header-cta--mini { display: none !important; }

@media (max-width: 860px) {
  .header-row--brand .header-row__inner { min-height: 4.25rem; gap: var(--space-sm); }
  .header-aux__tag { display: none; }
  .brand__logo { height: 42px; }
}
@media (max-width: 560px) {
  .header-aux--social { display: none; }          /* socials live in the footer on mobile */
  .header-phone__num { display: none; }            /* keep flag-only tap target compact */
  .header-cta { padding: 9px 14px; }
}
/* equal-width tabs that expand to fill the row; horizontal-scroll when they
   no longer fit (before the burger takes over on mobile) */
.nav { width: 100%; min-width: 0; }
.nav__list { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nav__list::-webkit-scrollbar { display: none; }
.nav__item { min-width: max-content; }
.nav__item { flex: 1 1 0; }                       /* every tab expands equally to fill the row (justified) */
.nav__item > .nav__link, .nav__top {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-height: 3.5rem; padding: 0 10px; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
/* no-dropdown tabs: wider horizontal padding (10px felt cramped) */
.nav__item:not(.has-mega) > .nav__link { padding-inline: 18px; }
.nav__item:hover > .nav__link, .has-mega:hover .nav__top, .has-mega:focus-within .nav__top { background: var(--nav-hover); }
.nav__link { font-size: var(--step--1); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-family: var(--font-label); color: #5d5d5d; transition: color var(--dur-fast) var(--ease); }
.nav__link:hover { color: var(--heading); text-shadow: 0 0 .4px currentColor; }   /* darken + faux-bold (no reflow) */
.nav__caret { display: inline-flex; align-items: center; padding: 4px 0; margin: 0; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; }
.nav__caret-ico { transition: transform var(--dur-fast) var(--ease); }
.has-mega:hover .nav__link, .has-mega:focus-within .nav__link { color: var(--heading); text-shadow: 0 0 .4px currentColor; }
/* condensed: nav shrinks to content so the mini logo + Book CTA have room */
.is-condensed .nav, .is-condensed .nav__list { width: 100%; overflow: visible; }   /* stay full-width when condensed (fill, don't centre) */
.is-condensed .nav__list { justify-content: space-between; }   /* distribute items edge-to-edge when sticky */
.is-condensed .nav__item { flex: 0 0 auto; }
.has-mega:hover .nav__caret-ico,
.has-mega:focus-within .nav__caret-ico,
.has-mega.is-open .nav__caret-ico { transform: rotate(180deg); }

/* --- Megamenu panel (full-bleed under the sticky header) ------------------ */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index: var(--z-header);
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.has-mega.is-open > .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__inner {
  width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr minmax(220px, 280px); gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
}
.mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
/* Locations mega: four clinic cards, full width (no link columns / blog promo) */
.mega__inner--cards { display: block; padding-block: clamp(1rem, 2vw, 1.25rem); }   /* ~16–20px, not 40 */
.mega__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.5rem); }
@media (max-width: 1024px) { .mega__cards { grid-template-columns: repeat(2, 1fr); } }

/* Location card — reuses the team-card shell (.card + .card__foot). Content stacks
   vertically (robust in narrow cards); the team-card padding is inherited from .card__body. */
.location-card .card__body { gap: 7px; padding: 1.4rem; }
/* full card with a map: map column on the left, content (body + foot) on the right */
.location-card--map { display: grid; grid-template-columns: minmax(180px, 230px) 1fr; grid-template-rows: 1fr auto; }
.location-card__map { grid-column: 1; grid-row: 1 / -1; overflow: hidden; border-right: 1px solid var(--border); background: var(--surface-sunken); min-height: 230px; }
.location-card__map iframe { display: block; width: 100%; height: 100%; min-height: 230px; border: 0; }
.location-card--map > .card__body { grid-column: 2; }
.location-card--map > .card__foot { grid-column: 2; }
@media (max-width: 560px) {
  .location-card--map { grid-template-columns: 1fr; }
  .location-card__map { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 9; min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .location-card--map > .card__body, .location-card--map > .card__foot { grid-column: 1; }
}
.location-card--compact .card__body { padding: 0.85rem; }
.location-card__dir { display: inline-flex; align-items: center; gap: 0.3em; margin-left: 0.7em; white-space: nowrap; font-family: var(--font-body); font-size: inherit; font-weight: 500; color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 28%, transparent); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-fast) var(--ease); }
.location-card__dir svg { flex: none; }
.location-card__dir:hover { text-decoration-color: var(--accent); }
.location-card__name { font-family: var(--font-body); font-size: var(--step-3); font-weight: 500; line-height: 1.25; margin: 0; }
.location-card__addr { color: var(--text-muted); font-size: var(--step-0); line-height: 1.5; margin: 0 0 4px; }
.location-card__line { display: flex; flex-direction: column; gap: 1px; margin: 0; font-size: var(--step-0); line-height: 1.5; color: var(--text); }
/* menu (compact) variant: 14px info text; page (full) stays 16px */
.location-card--compact .location-card__addr, .location-card--compact .location-card__line { font-size: 0.875rem; }
.location-card__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm) clamp(1.1rem, 3vw, 1.9rem); margin: 6px 0 0; }   /* three equal columns filling the whole width */
@media (max-width: 520px) { .location-card__specs { grid-template-columns: 1fr; } }
.location-card__line .location-card__mail { overflow-wrap: anywhere; }
.location-card__k { font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
/* details: under the address, smaller + softer gray */
.location-card__details { margin: -2px 0 2px; font-size: var(--step--1); line-height: 1.45; color: var(--text-muted); }
/* email/phone as proper links: soft gray underline, pink on hover, text colour unchanged */
.location-card__line a, .location-card__mail { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 28%, transparent); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-fast) var(--ease); }
.location-card__line a:hover, .location-card__mail:hover { text-decoration-color: var(--accent); }
/* compact (menu): name + address + text "Book here" link only */
.location-card--compact .location-card__name { font-size: var(--step-0); }
.location-card__book { align-self: flex-start; margin-top: 2px; font-family: var(--font-label); font-size: var(--step--1); font-weight: 600; color: var(--text); }
.mega__head {
  display: block; font-family: var(--font-label); text-transform: uppercase;
  font-size: var(--step--1); letter-spacing: 0.08em; font-weight: 500; color: var(--heading);
  padding-bottom: 0.6em; margin-bottom: 0.6em; border-bottom: 1px solid var(--border);
}
.mega__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55em; }
.mega__links a { font-size: var(--step-0); color: var(--text); line-height: 1.3; }
/* dropdown links: a faint 25%-opacity underline by default, full pink on hover — the text
   colour never changes. Exception: subheadings have NO underline until hover. */
.mega__links a, .mega__all, .location-card__book {
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 28%, transparent); text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.mega__head { text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-fast) var(--ease); }
.mega__links a:hover, .mega__all:hover, .location-card__book:hover { text-decoration-color: var(--accent); }
.mega__head:hover { text-decoration: underline; text-decoration-color: var(--accent); }
/* nav-item icon (e.g. Photos) */
.nav__item--icon > .nav__link { gap: 0.45em; }
.nav__link-ico { flex: none; color: var(--accent); }
/* megamenu blog feature — UNBOXED editorial teaser (image + meta, no card border/bg) */
.mega__feature { display: flex; flex-direction: column; gap: 0.7rem; align-self: start; }
.mega__feature-label { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--text-muted); }
.mega__post { display: block; text-decoration: none; color: inherit; }
.mega__post-media { display: block; aspect-ratio: var(--ratio-card, 4 / 3); overflow: hidden; margin-bottom: 0.7rem; background: var(--surface-sunken); }
.mega__post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.mega__post:hover .mega__post-media img { transform: scale(1.04); }
.mega__post-cat { display: block; font-family: var(--font-label); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: var(--accent-deep); margin-bottom: 5px; }
.mega__post-title { display: block; font-size: var(--step-0); color: var(--heading); line-height: 1.3; transition: color var(--dur-fast) var(--ease); }
.mega__post:hover .mega__post-title { color: var(--accent-deep); }
.mega__post-date { display: none; margin-top: 6px; font-size: var(--step--2); color: var(--text-muted); }   /* date hidden (consistency with post cards) */
.mega__post-date svg { flex: none; }
/* extra blog posts (after the featured card) shown as title links in the same column */
.mega__feature-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.mega__feature-links a { color: var(--heading); font-size: var(--step--1); line-height: 1.35; text-decoration: none; }
.mega__feature-links a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.mega__all { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-label); font-size: var(--step--1); font-weight: 600; color: var(--accent-deep); }
.mega__all svg { flex: none; transition: transform var(--dur-fast) var(--ease); }
.mega__all:hover svg { transform: translateX(3px); }
/* compact megamenu for sparse tabs (Breasts, Locations) — narrower, centred panel */
.mega--compact { left: 50%; right: auto; width: min(640px, 92vw); border: 1px solid var(--border); border-top: 0;
  transform: translateX(-50%) translateY(-6px); }
.has-mega.is-open > .mega--compact, .has-mega:hover > .mega--compact, .has-mega:focus-within > .mega--compact { transform: translateX(-50%) translateY(0); }
.mega--compact .mega__inner { width: 100%; grid-template-columns: 1fr minmax(190px, 220px); gap: clamp(1.5rem, 3vw, 2.5rem); padding-inline: clamp(1.5rem, 3vw, 2.25rem); }
.mega--compact .mega__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* promo card = our base card artifact (sharp, 1px border, image-top + foot) */
.mega__promo { display: flex; flex-direction: column; border: 1px solid var(--border-50); background: var(--surface); transition: border-color var(--dur-fast) var(--ease); }
.mega__promo:hover { border-color: var(--border); }
.mega__promo-media { display: block; aspect-ratio: var(--ratio-card); overflow: hidden; }
.mega__promo-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.mega__promo:hover .mega__promo-media img { transform: scale(1.045); }
.mega__promo-kicker { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: var(--accent-deep); padding: 14px 16px 0; }
.mega__promo-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); font-family: var(--font-display); font-size: var(--step-0); color: var(--heading); padding: 4px 16px 16px; }

.nav-toggle { display: none; }
.nav-close { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 6px; color: var(--heading); cursor: pointer; }
  .nav-toggle svg { display: block; }
  .nav-toggle .nav-toggle__ico--close { display: none; }  .is-nav-open .nav-toggle .nav-toggle__ico--open { display: none; }  .is-nav-open .nav-toggle .nav-toggle__ico--close { display: block; }

  /* --- Off-canvas drawer --- */
  .nav {
    position: fixed; top: var(--nav-top, 0px); left: 0; bottom: 0;
    width: min(86vw, 360px);
    background: var(--surface);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* reaching the end never chains to the page */
    z-index: calc(var(--z-header) + 2);
    padding: var(--space-2xl) 0 var(--space-xl);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.16);
  }
  .is-nav-open .nav { transform: translateX(0); }
  /* No overflow:hidden on <body> here. It makes overflow-y compute to auto, which
     turns body into a scroll container, un-sticks the header mid-open and leaves
     the drawer misaligned against a --nav-top measured a frame earlier. The page
     is held still from nav.js instead (touchmove on the backdrop). */
  /* `clip`, not `hidden`: hidden makes overflow-y compute to auto, which turns
     <body> into the scroll container and silently kills every position:sticky
     below it (header + proc-nav). `clip` contains the off-canvas panel the same
     way without creating a scrollport. Paired with html{overflow-x:clip} below. */
  body { overflow-x: clip; }

  .nav-backdrop { position: fixed; inset: var(--nav-top, 0px) 0 0 0; background: rgba(0, 0, 0, 0.45); z-index: calc(var(--z-header) + 1); animation: cosmos-fade var(--dur) var(--ease); }
  .nav-backdrop[hidden] { display: none; }
  @keyframes cosmos-fade { from { opacity: 0; } to { opacity: 1; } }

  .nav-close { display: none; position: absolute; top: 0.6rem; left: 0.8rem; width: 2.5rem; height: 2.5rem; font-size: 1.8rem; line-height: 1; background: transparent; border: 0; color: var(--heading); cursor: pointer; }

  /* vertical list */
  .nav__list { flex-direction: column; width: 100%; align-items: stretch; overflow: visible; }
  .nav__item, .nav__item.has-mega, .nav__item:not(.has-mega) { width: 100%; flex: none; border-bottom: 1px solid var(--border-50); }
  .nav__item > .nav__link, .nav__top { width: 100%; min-height: 3.4rem; padding: 0 var(--space-lg); justify-content: space-between; gap: var(--space-sm); }
  .nav__item:not(.has-mega) > .nav__link { padding-inline: var(--space-lg); }
  .nav__top { display: flex; }
  .nav__caret { padding: 0.9rem 0.4rem; margin: 0; }         /* big tap target */

  /* megamenu becomes a vertical accordion */
  .mega { position: static; opacity: 1; visibility: visible; transform: none; border: 0; background: var(--bg-alt); max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); z-index: auto; }
  .has-mega.is-open > .mega, .has-mega.is-open .mega { max-height: 75vh; overflow-y: auto; }
  /* The desktop mega is a two-column grid: links + a 220-280px promo card.
     The promo is display:none in the drawer but its GRID TRACK is not, so every
     nav row was sized ~180px wider than the 335px panel. With the row wider than
     the panel, `justify-content: space-between` pushed each caret past the panel
     edge: off-screen right while open (no submenu could be opened on a phone),
     and back INTO the page while closed, because translateX(-100%) only moves
     the panel by its own width. One column on mobile fixes both. */
  .mega__inner { display: block; padding: 0; }
  .mega__cols { display: block; }
  .mega__col { padding: var(--space-sm) var(--space-lg); }
  .mega__head { display: block; padding: var(--space-2xs) 0; }
  .mega__links { display: block; }
  .mega__promo, .mega__feature { display: none; }            /* drop the promo / blog tile in the drawer */
  .mega--compact { left: 0; right: 0; width: 100%; transform: none; border: 0; }   /* full-width drawer on mobile */
}

/* --- Hero (split, used on inner pages) ------------------------------------ */
.hero { position: relative; }
.hero__grid {
  display: grid; gap: var(--space-xl); align-items: center;
  grid-template-columns: 1.05fr 0.95fr;
}
@media (max-width: 860px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }
.hero__title { font-size: var(--step-5); }
.hero__lede { font-size: var(--step-1); color: var(--text-muted); max-width: 66ch; }
.hero__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }

/* Hub hero list — the 2023 category pages listed their treatment areas under the
   lede as chevron bullets. Rendered from the Hero box (hero_links). */
.hero__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: 0.55rem; }
.hero__list li { position: relative; padding-left: 1.35rem; font-size: var(--step-0); color: var(--heading); }
.hero__list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.42rem; height: 0.42rem;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.75; }
.hero__list a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.hero__list a:hover { border-bottom-color: currentColor; }

/* --- Procedure hero: intro + enquiry-form column (the live layout) -------- */
/* The body uses the default site background (var(--bg)); only the hero gets the mesh. */
.hero--procedure { padding-block: clamp(var(--space-lg), 3.5vw, var(--space-2xl)); }   /* hub hero — reduced, then up one step */
.hero__grid--form { grid-template-columns: minmax(0, 1fr) 440px; align-items: start; }
.hero__grid--form .stack { padding-top: var(--space-sm); }
@media (max-width: 860px) { .hero__grid--form { grid-template-columns: minmax(0, 1fr); } }

/* Enquiry sidebar — the card + secondary CTA + phone line stick together (desktop).
   It simply starts at the top of its grid column — no offset. */
.enquiry-stack {
  position: sticky; top: calc(var(--header-h, 5.5rem) + var(--space-sm));
  display: flex; flex-direction: column; gap: var(--space-xs);
  min-width: 0;   /* let it shrink to the column on mobile instead of overflowing */
}
.enquiry-card {
  background: var(--color-white);
  border: 1px solid rgba(69, 69, 76, .15);    /* constant faint border (15%), same in every state */
  border-radius: var(--radius-lg);
  padding: 16px 24px;                         /* trimmed top/bottom */
  box-shadow: none;
}
/* stroke (outline) buttons — border defaults to 40% opacity, goes solid on hover.
   Inset 24px to align with the card content. */
.enquiry-alt-cta, .enquiry-call-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  margin-inline: 24px; padding: 0.95rem 1.5rem; box-sizing: border-box; cursor: pointer;
  background: transparent; color: var(--heading); text-decoration: none;
  border: 1.5px solid color-mix(in srgb, var(--btn-secondary) 40%, transparent); border-radius: 0;
  font-family: var(--font-label); font-weight: 700; font-size: var(--step--1); line-height: 1.2;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.enquiry-alt-cta:hover, .enquiry-call-btn:hover { border-color: var(--btn-secondary); transform: translateY(-1px); }
.enquiry-call-btn svg { flex: none; }
/* "Prefer to talk?" heading above the call button */
.enquiry-talk { text-align: center; font-size: var(--step--1); color: var(--text-muted); margin: 0 24px; line-height: 1.3; }
.enquiry-card__head { margin-bottom: var(--space-lg); }
.enquiry-card__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; color: var(--heading); margin: 0; }
.enquiry-card__call { font-size: var(--step--1); color: var(--text-muted); margin-top: 0.5rem; }
.enquiry-card__call a { color: var(--form-plum, var(--heading-soft)); font-weight: 600; }
.enquiry-card .gform_wrapper { margin: 0; }
@media (max-width: 860px) { .enquiry-stack { position: static; margin-top: 0; } }

/* Mobile guard: kill stray horizontal overflow (a pre-existing wide element + the 100vw
   full-bleed sections). `clip` doesn't create a scroll container, so sticky still works. */
@media (max-width: 860px) { html { overflow-x: clip; } }

/* Mobile (<=720, where the sticky CALL/Enquire bar shows): the same single Gravity Form
   is presented as a bottom-sheet MODAL opened by the Enquire button — no inline form, no
   duplicate field IDs. (Input font stays >=16px to avoid iOS focus-zoom.) */
.enquiry-close, .enquiry-backdrop { display: none; }
/* Global enquiry popup (Book here / Enquire) — centred modal on desktop; on mobile it
   falls through to the bottom-sheet rules below. Hidden until body.enquiry-open. */
@media (min-width: 721px) {
  /* Shared shell — the gallery modal layout at the NARROW (form) width: a white
     sheet with a full-width header bar, a padded scrolling body, a pinned footer. */
  .enquiry-stack--modal,
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: var(--modal-w-narrow); max-height: 90vh; margin: 0; min-width: 0;   /* narrow modal width (forms) */
    display: flex; flex-direction: column; overflow: hidden;
    z-index: calc(var(--z-header) + 6); background: var(--surface); box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    transition: none;   /* kill the inherited .reveal transform/opacity transition — no slide/grow */
  }
  .enquiry-stack--modal {
    opacity: 0; visibility: hidden; pointer-events: none;   /* plain dissolve — no grow */
    transition: opacity .28s var(--ease), visibility .28s;
  }
  body.enquiry-open .enquiry-stack--modal { opacity: 1; visibility: visible; pointer-events: auto; }
  /* an INLINE form (procedure page) pops to the SAME centred modal so the locations
     Enquire never scrolls to the top form. */
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) { animation: enquiry-fade .22s var(--ease); }
  @keyframes enquiry-fade { from { opacity: 0; } to { opacity: 1; } }

  /* the card fills the sheet as a flex column: fixed head bar, scrolling body */
  .enquiry-stack--modal .enquiry-card,
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) .enquiry-card {
    background: transparent; border: 0; border-radius: 0; padding: 0; min-width: 0;
    display: flex; flex-direction: column; flex: 1; min-height: 0;
  }
  .enquiry-stack--modal .enquiry-card__head,
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) .enquiry-card__head {
    flex: none; margin: 0; border-bottom: 1px solid var(--border-50);
    padding: clamp(1rem, 2.4vw, 1.4rem) clamp(3.2rem, 7vw, 3.6rem) clamp(1rem, 2.4vw, 1.4rem) clamp(1.25rem, 3vw, 1.75rem);
  }
  .enquiry-stack--modal .enquiry-card__body,
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) .enquiry-card__body {
    flex: 1; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--space-md);
    padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 3vw, 1.75rem);
  }
  /* roomier gap between form fields in the popup (~2x) */
  .enquiry-stack--modal .gform_fields,
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) .gform_fields { row-gap: 1.6rem !important; }
  /* "Private & confidential" sits tight under the submit button (cancel the body gap) */
  .enquiry-stack--modal .enquiry-card__body > .enquiry-foot,
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) .enquiry-card__body > .enquiry-foot { margin-top: calc(0.4rem - var(--space-md)); }
  /* textarea + file upload stay joined as ONE block (cancel the 1.6rem row-gap) */
  .enquiry-stack--modal .gform_wrapper .gfield--type-fileupload,
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) .gform_wrapper .gfield--type-fileupload { margin-top: calc(-1.6rem - 1px); }
  /* footer band under the body: full-width divider, content inset + centred */
  .enquiry-stack--modal > .enquiry-talk,
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) > .enquiry-talk {
    flex: none; margin: 0; text-align: center;
    padding: var(--space-sm) clamp(1.25rem, 3vw, 1.75rem) 0;
    border-top: 1px solid var(--border-50);
  }
  .enquiry-stack--modal > .enquiry-call-btn,
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) > .enquiry-call-btn {
    flex: none; margin: 0.5rem clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 2.4vw, 1.4rem);
  }
  .enquiry-stack--modal .enquiry-alt-cta { margin-inline: clamp(1.25rem, 3vw, 1.75rem); }
  /* close button floats in the header bar's right gutter */
  .enquiry-stack--modal .enquiry-close,
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) .enquiry-close {
    display: inline-flex; position: absolute; top: 0.85rem; right: 0.9rem; z-index: 3;
    align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; background: transparent;
    border: 0; cursor: pointer; font-size: 1.7rem; line-height: 1; color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
  .enquiry-stack--modal .enquiry-close:hover,
  body.enquiry-open .enquiry-stack:not(.enquiry-stack--modal) .enquiry-close:hover { color: var(--heading); }
  body.enquiry-open .enquiry-backdrop { display: block; position: fixed; inset: 0; z-index: calc(var(--z-header) + 5);
    background: rgba(20, 16, 22, .5); opacity: 1; visibility: visible; }
  body.enquiry-open { overflow: hidden; }
}
@media (max-width: 720px) {
  /* the form sits under the hero text with a gap matching the card's own top padding */
  .hero__grid--form, .proc-layout { row-gap: var(--space-md) !important; }
  /* the stack = the sheet: fixed to the bottom, slides up when body.enquiry-open.
     !important beats the higher-specificity `.proc-layout__rail .enquiry-stack { static }`. */
  /* Pages with NO inline form (blog, hubs) keep the bottom sheet. */
  .enquiry-stack--modal {
    position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; margin: 0; min-width: 0;
    width: 100%; max-width: 100%; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
    z-index: calc(var(--z-header) + 6); background: var(--surface);
    border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(20, 16, 22, .28);
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(101%); visibility: hidden;
    opacity: 1;   /* override .reveal{opacity:0} — the off-screen sheet never gets .is-in */
    transition: transform .32s var(--ease), visibility .32s var(--ease);
  }
  body.enquiry-open .enquiry-stack--modal { transform: translateY(0); visibility: visible; }
  /* Procedure pages: the form stays where it belongs, visible without a tap. The
     sticky bar scrolls to it instead of opening a sheet. 82% of visitors are mobile. */
  .enquiry-stack:not(.enquiry-stack--modal) {
    position: static !important; transform: none; visibility: visible; opacity: 1;
    margin-top: 0;
    /* full-bleed: .band__inner is 100% - 2*gutter, so one gutter each side reaches
       the screen edge. The "prefer to talk" siblings keep their own gutter below. */
    margin-inline: calc(var(--gutter) * -1);
    scroll-margin-top: calc(var(--header-h, 5.5rem) + var(--space-sm));
  }
  /* dimmed backdrop + scroll lock */
  .enquiry-backdrop {
    display: block; position: fixed; inset: 0; z-index: calc(var(--z-header) + 5);
    background: rgba(20, 16, 22, .5); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  body.enquiry-open .enquiry-backdrop { opacity: 1; visibility: visible; }
  body.enquiry-open { overflow: hidden; }
  /* close (×) sticks to the top of the scrolling sheet */
  .enquiry-close {
    display: inline-flex; position: sticky; top: 0; margin-left: auto; z-index: 3;
    align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
    background: var(--surface); border: 0; cursor: pointer; font-size: 1.7rem; line-height: 1; color: var(--heading);
  }
  .enquiry-stack--modal .enquiry-card { border-inline: 0; border-top: 0; border-radius: 0; padding: 6px var(--gutter) 16px; }
  .enquiry-card { min-width: 0; }
  /* inline form: keep it reading as a card, and drop the sheet's close button */
  .enquiry-stack:not(.enquiry-stack--modal) .enquiry-card {
    border: 0; border-radius: 0; background: transparent;
    padding: var(--space-md) var(--gutter) var(--space-sm);
  }
  /* --- mobile rhythm -------------------------------------------------------
     hero / form band / tabs need to read as three blocks. The band is told
     apart by its own ground (white on the ivory page), not by a border. */
  .proc-layout__hero { padding-block: var(--space-xl) 0; }
  /* the blush hub hero ends where the form band starts — no pink tail beneath it */
  .hero--procedure { padding-bottom: 0; }
  /* the desktop rule nudges the text column down to align with the form column;
     stacked on mobile there is nothing to align to. */
  .hero__grid--form .stack { padding-top: 0; }
  .enquiry-stack:not(.enquiry-stack--modal) {
    background: var(--surface);
    padding-block: 0 var(--space-md);
  }
  /* "prefer to talk" closes the band, so it needs room before the page resumes */
  .enquiry-stack:not(.enquiry-stack--modal) .enquiry-talk { margin-top: var(--space-md); }
  /* tabs: hairline at low opacity rather than the full-strength rule */
  .proc-nav { border-bottom-color: color-mix(in srgb, var(--color-line) 32%, transparent); }
  .proc-nav--inline { margin-top: var(--space-sm); }
  .proc-nav__inner { padding-block: var(--space-2xs, 0.35rem); }
  .enquiry-stack:not(.enquiry-stack--modal) .enquiry-close { display: none; }
  .enquiry-talk, .enquiry-call-btn, .enquiry-alt-cta { margin-inline: var(--gutter); }
  /* GF field grid: single shrinkable column + wrap so nothing overflows the sheet */
  .gform_wrapper, .gform_wrapper .gform_fields,
  .gform_wrapper .gfield, .gform_wrapper .ginput_container { min-width: 0; }
  .gform_wrapper .gform_fields { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0.8rem; }
  .gform_wrapper .gform_fields > .gfield { grid-column: 1 / -1 !important; }
  .gform_wrapper .gform_drop_area { flex-wrap: wrap; }
  .gform_wrapper .gform_drop_instructions { white-space: normal; }
  .gform_wrapper .gform_fileupload_rules { overflow-wrap: anywhere; }
  .gform_wrapper .gfield--type-text, .gform_wrapper .gfield--type-email,
  .gform_wrapper .gfield--type-phone, .gform_wrapper .gfield--type-select,
  .gform_wrapper .gfield--type-textarea { padding: 0.3rem 0.7rem; }
}

/* --- Hero (full-bleed photo, centered, restrained scale) ------------------ */
.hero-cover {
  position: relative; padding: clamp(104px, 13vw, 168px) 0;
  display: grid; place-items: center; text-align: center;
  color: var(--color-white); overflow: hidden;
  background: #6f635d center / cover no-repeat;
}
.hero-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-cover::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 85% 65% at 50% 46%, rgba(29,24,28,.52), rgba(29,24,28,.24)); }
.hero-cover__inner { position: relative; z-index: 1; width: min(780px, 100% - 2 * var(--gutter)); margin: 0 auto; }
.hero-cover__title {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem); line-height: 1.04;
  color: var(--color-white); margin-bottom: var(--space-sm); letter-spacing: var(--tracking-tight);
}
.hero-cover__lede { font-size: var(--step-1); line-height: 1.5; color: rgba(255,255,255,1); max-width: 38ch; margin: 0 auto var(--space-md); }
/* proper hero subheading: normal case, centered, readable measure */
.hero-cover__sub {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(var(--step-1), 0.95rem + 0.5vw, 1.35rem); line-height: 1.55;
  color: rgba(255,255,255,.92); max-width: 46ch; margin: 0 auto var(--space-lg);
}
.hero-cover__actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }
/* secondary CTA on the photo hero: solid light fill + charcoal text (readable) */
.btn--on-photo { background: var(--surface); color: var(--heading); }
.btn--on-photo:hover { background: #fff; box-shadow: var(--shadow-md); }

/* --- Reveal-on-scroll (subtle; disabled under reduced motion) ------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Card grid ------------------------------------------------------------ */
/* Grids: real featured-procedures = 3 cols, gap 15px; team/blog/gallery = 4 cols */
.grid { display: grid; gap: clamp(16px, 2vw, 22px); }
.grid--cards { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* gallery = uniform grid. Pairs come in two ratios (2:1 side-by-side, 1:1
   stacked); we frame each in a consistent 4:3 white card (contain, never crop a
   half). Before/After labels live in the detail view where the image is large. */
.grid--gallery { grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.1vw, 13px); }
@media (max-width: 900px) { .grid--cards, .grid--4, .grid--gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .grid--4, .grid--gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .grid--cards { grid-template-columns: 1fr; gap: 12px; }   /* Featured procedures: 1-up */
}
/* Album showcase (homepage): the SAME result-album cards as the hub, 4-up, but laid
   out with flex so 1–3 galleries sit CENTRED (not left-aligned with an empty column). */
.grid--albums { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 2vw, 22px); }
.grid--albums > .result-album { flex: 0 1 calc((100% - 3 * clamp(16px, 2vw, 22px)) / 4); min-width: 0; max-width: 420px; margin: 0; }
@media (max-width: 900px) { .grid--albums > .result-album { flex-basis: calc((100% - clamp(16px, 2vw, 22px)) / 2); } }
@media (max-width: 560px) { .grid--albums { gap: 14px; } .grid--albums > .result-album { flex-basis: calc((100% - 14px) / 2); } }

/* ---- Card system: sharp, white, 1px neutral border (no shadow). Hover = darker neutral edge -- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-50);
  border-radius: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--dur-fast) var(--ease);
}
.card:hover { border-color: var(--border); }   /* 50% -> 100% alpha */
.card__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 26px 26px 22px; }
/* card title = h3 (body, sentence case) at a clear, readable size */
.card__title { font-size: var(--step-1); font-weight: 500; line-height: 1.3; }
.card__meta { font-weight: 400; font-size: var(--step-0); line-height: 1.55; color: var(--text-muted); }
/* divided CTA block at card foot (the old Cosmos pattern, our pink) */
/* compact edge-to-edge action row: text left, icon hard right, neutral grey
   uppercase label; on hover the label darkens and the icon turns pink */
.card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: 10px 20px; border-top: 1px solid var(--border-50);   /* subtle divider, no hover change */
  font-family: var(--font-label); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.card__foot svg { flex: none; transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.card:hover .card__foot { color: var(--heading); background: color-mix(in srgb, var(--heading) 4%, transparent); }   /* minimal darken */
.card:hover .card__foot svg { transform: translateX(3px); color: var(--accent); }
.card__link::after { content: ""; position: absolute; inset: 0; }   /* full-card target */
.card__link:focus-visible { outline: none; }
.card:focus-within { border-color: var(--border); }
/* media (image-top) cards: image flush, subtle zoom on hover (concentric radius) */
.card--media .media { border-radius: 0; }
.card--media .media > img { transition: transform var(--dur-slow) var(--ease); }
.card--media:hover .media > img { transform: scale(1.045); }

/* standalone section CTA link: readable rose + animated arrow */
.link-more { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--step-0); color: var(--link-pink); font-weight: var(--weight-medium); text-decoration: none; }
.link-more svg { transition: transform var(--dur-fast) var(--ease); }
.link-more:hover svg { transform: translateX(3px); }

/* --- Filter chips (Library) ----------------------------------------------- */
.filters { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.chip-row__label { font-size: var(--step--1); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-right: var(--space-2xs); }
.chip {
  font-size: var(--step--1); font-weight: var(--weight-medium);
  padding: 0.5em 1em; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--border-strong); color: var(--accent-deep); }
.chip[aria-pressed="true"] { background: var(--accent-cta); border-color: var(--accent-cta); color: var(--on-accent); }

/* --- Gallery case card ---------------------------------------------------- */
.case-card { padding: 0; border: 1px solid transparent; border-radius: 0; background: var(--surface); overflow: hidden; position: relative; transition: border-color var(--dur-fast) var(--ease); } .case-card:hover { border-color: var(--color-ink-900); }   /* sharp black border on hover (1px is transparent by default → no shift) */
.case-card .media { border-radius: 0; }
/* combined before/after pre-composited image: render full, never crop out a half */
/* uniform 4:3 frame; the pair sits as a plate on a soft warm greige mat (the inset
   padding is the mat — it reframes the cold studio gray as an intentional border). */
.case-card .media--pair { position: relative; aspect-ratio: 1 / 1; background: var(--media-mat); padding: clamp(5px, 3%, 28px); overflow: hidden; box-shadow: none; }   /* drop the .media inset 1px ring (base.css) — no fake border */
/* --- Album / gallery card: INSIDE the cream area the photo sits smaller, with a couple of
   "other photo" rectangles peeking from behind it; they fan out a touch on hover. Entirely
   clipped inside the card. The card links to the procedure's before/after page. ------- */
.case-card--album .media--pair { --album-pad: clamp(26px, 12%, 56px); padding: var(--album-pad); }
.case-card--album .media--pair > img,
.case-card--album .media--pair > picture { position: relative; z-index: 2; box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .18); }
.case-card__stack { position: absolute; inset: var(--album-pad); z-index: 1; pointer-events: none; }
/* back "photos" peek out the TOP-LEFT corner (more visible than a bottom peek), no rotation.
   The SMALLEST/furthest is offset most: ::before is painted first (behind), ::after on top. */
.case-card__stack::before, .case-card__stack::after { content: ""; position: absolute; inset: 0;
  background: #fff; border: 1px solid var(--border); box-shadow: -4px -4px 14px -6px rgba(0, 0, 0, .28);
  transition: transform var(--dur) var(--ease); }
.case-card__stack::before { transform: translate(-15px, -15px); }   /* furthest — back, top-left */
.case-card__stack::after  { transform: translate(-8px, -8px); }     /* nearer — just behind the photo */
.case-card--album:hover .case-card__stack::before { transform: translate(-21px, -21px); }
.case-card--album:hover .case-card__stack::after  { transform: translate(-11px, -11px); }
@media (prefers-reduced-motion: reduce) { .case-card__stack::before, .case-card__stack::after { transition: none; } }
/* photo-count badge — a perfect 1:1 circle floating at the photo's top-right corner.
   Hidden until hover on pointer devices (then inverts to black); always shown on touch. */
.case-card__count { position: absolute; z-index: 3; top: calc(var(--album-pad) - 0.7rem); right: calc(var(--album-pad) - 0.7rem);
  display: grid; place-items: center; width: 2rem; height: 2rem; aspect-ratio: 1 / 1; padding: 0; border-radius: 50%;
  background: #fff; color: var(--heading); font-family: var(--font-label); font-size: 11px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.case-card--album:hover .case-card__count { opacity: 1; background: var(--color-ink-900); color: #fff; }
@media (hover: none) { .case-card__count { opacity: 1; } }   /* touch: always visible (white) */
/* contain = the WHOLE pre-composited pair is always visible, scaled to whichever of
   width/height is the limiting side; the mat fills the rest. Never crop a half off
   (esp. square vertical pairs in this wider frame). The double-class selector outranks
   the generic `.media > img { cover }` in base.css so a card image can never fall back
   to a crop, and max-* keeps it inside the mat. */
/* Match the image whether it's a direct child OR wrapped in <picture> (the WebP
   plugin wraps it). A `> img` selector silently misses the wrapped case, so the
   image falls back to its intrinsic ratio and overflows the 4:3 box = a crop. */
.case-card .media--pair picture { display: block; width: 100%; height: 100%; }
.case-card .media--pair img {
  display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain; object-position: center;
}
/* before/after labels follow the split axis (used in the detail view, where the
   image fills its frame): side-by-side = left/right, stacked = top/bottom */
.case-card__pair-labels { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 10px; pointer-events: none; }   /* equal inset on all edges */
.media--pair--v .case-card__pair-labels { flex-direction: column; }
.case-card__pair-labels span {
  font-size: var(--step--1); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-white);
  background: color-mix(in srgb, var(--color-ink-900) 62%, transparent);
  padding: 0.25em 0.7em; border-radius: var(--radius-pill); backdrop-filter: blur(2px);
}
/* footer: two single-line rows (sex·area, then procedure) — each truncates */
/* desktop: info is an overlay pinned to the card foot, revealed on hover/focus —
   it floats over the (unchanged) 1:1 image, so the card never resizes. */
.case-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 8px 11px; display: flex; flex-direction: column; gap: 1px;
  background: var(--surface); border-top: 1px solid var(--border-50);
  opacity: 0; transform: translateY(100%);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.case-card:hover .case-card__body, .case-card:focus-within .case-card__body { opacity: 1; transform: none; }
/* touch / mobile: no hover to reveal info, so it sits in normal flow, always
   visible — and wraps to its full text (sex · area · procedure), not truncated. */
@media (hover: none), (max-width: 700px) {
  .case-card__body { position: static; opacity: 1; transform: none; pointer-events: auto; border-top: 1px solid var(--border-50); padding: 9px 11px; }
  .case-card__line--meta { white-space: normal; }
}
.case-card__line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.case-card__line--meta { font-size: var(--step--1); color: var(--text-muted); }
/* procedure name reads like the sex/area meta (quiet, one truncated line) so the
   thumbnail leads the card */
.case-card__line--proc { font-size: var(--step--1); color: var(--text-muted); font-weight: 400; }
.case-card__tags { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: var(--space-2xs); }
.tag { font-size: var(--step--1); padding: 0.25em 0.7em; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); }
.tag--modality { background: var(--surface-sunken); color: var(--accent-deep); font-weight: 500; }   /* rose TEXT, neutral fill (pink = text/icon only) */

/* --- Compliance slots ----------------------------------------------------- */
.disclaimer {
  font-size: var(--step--1); color: var(--text-muted); font-style: italic;
  background: var(--color-pink-50); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm); margin-top: var(--space-md);
}
/* results-vary note — plain centered text with an info icon (no box, no italic, no width cap) */
.disclaimer--note { display: flex; align-items: center; justify-content: center; gap: 0.5em; flex-wrap: wrap;
  text-align: center; max-width: none; background: none; padding: 0; border-radius: 0; font-style: normal;
  color: var(--text-muted); margin-top: var(--space-lg); }
.disclaimer--note svg { flex: none; }
.compliance-band { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-md); }
.age-gate-badge { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--step--1); font-weight: var(--weight-bold); color: var(--accent-deep); }

/* --- 18+ age-gate wall — mirrors the gallery modal (dark backdrop + grow-in dialog) --- */
html.age-locked { overflow: hidden; }
.age-gate { position: fixed; inset: 0; z-index: var(--z-modal, 9999); display: grid; place-items: center; padding: var(--gutter);
  opacity: 0; transition: opacity .4s var(--ease); }
.age-gate[hidden] { display: none; }
.age-gate.is-visible { opacity: 1; }
/* same dark overlay as .modal::before, with a soft blur */
.age-gate__backdrop { position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-ink-900) 70%, transparent);
  backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); }
/* shared modal anatomy: header · body (cream) · footer, in a white rounded card */
.age-gate__dialog { position: relative; width: var(--modal-w-xnarrow); background: var(--surface); border-radius: var(--radius-lg);   /* super-narrow modal width */
  box-shadow: var(--shadow-lg, 0 40px 90px -24px rgba(0, 0, 0, .55));
  transform: scale(.94); opacity: 0;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .4s var(--ease); }
.age-gate.is-visible .age-gate__dialog { transform: none; opacity: 1; }
/* a thin white frame floating ~24px outside the card (concentric radius), 25% opacity */
.age-gate__dialog::after { content: ""; position: absolute; inset: calc(-1 * clamp(14px, 3vw, 24px));
  border: 1px solid rgba(255, 255, 255, .25); border-radius: calc(var(--radius-lg) + clamp(14px, 3vw, 24px)); pointer-events: none; }
/* header — small label bar (rounds the dialog top so no overflow:hidden is needed) */
.age-gate__head { padding: 0.85rem var(--space-lg); border-bottom: 1px solid var(--border); text-align: center; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.age-gate__eyebrow { font-family: var(--font-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); }
/* body — cream (page background), holds the logo, question + actions */
.age-gate__body { background: var(--bg); padding: clamp(var(--space-xl), 5vw, var(--space-2xl)) clamp(var(--space-lg), 5vw, var(--space-2xl)); text-align: center; }
.age-gate__logo { display: block; height: clamp(42px, 7vw, 58px); width: auto; margin: 0 auto clamp(var(--space-lg), 4vw, var(--space-xl)); color: var(--heading); }
.age-gate__title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); color: var(--heading); line-height: 1.2; margin: 0 0 var(--space-lg); }
.age-gate__actions { display: flex; gap: var(--space-sm); justify-content: center; }
.age-gate__btn { flex: 1 1 0; max-width: 190px; }
/* footer — Remember me on its own row */
.age-gate__foot { display: flex; justify-content: center; padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
/* remember-me — custom check styled to the system */
.age-gate__remember { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; }
.age-gate__remember-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.age-gate__remember-box { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; flex: none;
  border: 1.5px solid var(--border-strong); border-radius: 6px; color: transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.age-gate__remember-box svg { width: 13px; height: 13px; }
.age-gate__remember-input:checked + .age-gate__remember-box { background: var(--btn-secondary); border-color: var(--btn-secondary); color: var(--on-secondary); }
.age-gate__remember:hover .age-gate__remember-box { border-color: var(--heading); }
.age-gate__remember-input:focus-visible + .age-gate__remember-box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.age-gate__remember-text { font-size: var(--step--1); color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .age-gate, .age-gate__dialog { transition-duration: .01ms; } }

/* --- Modal / lightbox ----------------------------------------------------- */
.modal {
  --dlg: min(92vw, calc(94vh - 96px), 820px);   /* dialog (and 1:1 stage) width */
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--gutter);
  background: transparent; opacity: 1; visibility: hidden;
  transition: visibility 680ms;
}
/* dark backdrop on its own layer, so the dialog can GROW (solid) on top of it while
   the backdrop fades in independently — in sync with the container transform. */
.modal::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background: color-mix(in srgb, var(--color-ink-900) 70%, transparent);
  opacity: 0; transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);   /* same length + curve as the image grow */
}
.modal.is-open { visibility: visible; }
.modal.is-open::before { opacity: 1; }
/* during the close view-transition the VT owns the animation — kill these so they
   don't double up. */
.modal.is-vt, .modal.is-vt .modal__dialog, .modal.is-vt::before { transition: none !important; }
.modal__dialog {
  background: transparent; border-radius: var(--radius-lg);   /* each section carries its own bg */
  width: var(--dlg); max-height: 96vh; overflow: hidden;   /* the × now lives inside the bar */
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); position: relative; z-index: 1; transition: opacity 180ms var(--ease);
}
/* The chrome is hidden while the image grows, then animates in once it lands. The
   image sits above the bar/foot (z-index), so they slide OUT from under it: the bar
   up, the disclaimer down. transition:none on the is-growing state hides everything
   INSTANTLY (no fade-out blink); removing it lets the default transitions play. */
.modal .case-detail__main { position: relative; z-index: 2; }
.modal .case-detail__bar, .modal .case-detail__foot { position: relative; z-index: 1; }
.modal .case-detail__bar { transition: transform 240ms var(--ease); }
.modal .case-detail__foot { transition: transform 240ms var(--ease); }
.modal__nav, .modal__counter { transition: color var(--dur-fast) var(--ease), opacity 180ms var(--ease); }
.modal.is-growing .modal__dialog,
.modal.is-growing .modal__nav,
.modal.is-growing .modal__counter { opacity: 0; transition: none; }
.modal.is-growing .case-detail__bar { transform: translateY(100%); transition: none; }    /* tucked under the image's top */
.modal.is-growing .case-detail__foot { transform: translateY(-100%); transition: none; }   /* tucked under the image's bottom */
/* is-closing = the same hidden state but ANIMATED — the reverse of the open reveal. */
.modal.is-closing .modal__dialog,
.modal.is-closing .modal__nav,
.modal.is-closing .modal__counter { opacity: 0; }
.modal.is-closing .case-detail__bar { transform: translateY(100%); }
.modal.is-closing .case-detail__foot { transform: translateY(-100%); }
.modal.is-open .modal__dialog { transform: none; }
.modal__media { background: var(--surface-sunken); }
.modal__media img { width: 100%; height: auto; object-fit: contain; max-height: 64vh; margin-inline: auto; }

/* ── Gallery mode: a procedure's whole before/after grid inside the modal ─────── */
.modal.is-gallery { --dlg: var(--modal-w); }   /* normal modal width */
.modal-gallery { display: flex; flex-direction: column; max-height: 92vh; overflow: hidden;
  background: var(--bg); border-radius: var(--radius-lg); }
.modal-gallery__head { flex: none; padding: clamp(0.9rem, 2.4vw, 1.4rem) clamp(1rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--border-50); }
.modal-gallery__title { margin: 0; text-align: center; font-family: var(--font-body); font-weight: 600;
  font-size: clamp(var(--step-1), 2.4vw, var(--step-2)); }
.modal-gallery__grid { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: clamp(8px, 1.1vw, 13px); overflow-y: auto; padding: clamp(0.9rem, 2.4vw, 1.4rem); -webkit-overflow-scrolling: touch; }
.modal-gallery__grid > .cm-skel-card { border-radius: 0; aspect-ratio: 1 / 1; }   /* loading placeholders, square + sharp like the real cards */
.modal-gallery__foot { flex: none; margin: 0; text-align: center; padding: 0 1rem clamp(0.9rem, 2.4vw, 1.4rem); }
/* the thumbnails are real before/after cards — a pointer cue that they open the single view */
.modal-gallery .case-card { cursor: pointer; }
/* Thumbnails use FLEX, not grid: each cell's WIDTH is a fixed fraction of the row, and its
   HEIGHT comes from a width-based padding square (.case-card__open: padding-bottom:100%).
   So no cell height is ever tied to a grid row / the viewport — which is what squashed the
   before/after pairs on short screens. Rows simply wrap and the whole grid scrolls. */
.modal-gallery__grid > .case-card { flex: 0 0 calc((100% - 3 * clamp(8px, 1.1vw, 13px)) / 4); max-width: calc((100% - 3 * clamp(8px, 1.1vw, 13px)) / 4); }
@media (max-width: 900px) { .modal-gallery__grid > .case-card { flex-basis: calc((100% - clamp(8px, 1.1vw, 13px)) / 2); max-width: calc((100% - clamp(8px, 1.1vw, 13px)) / 2); } }
@media (max-width: 560px) { .modal-gallery__grid { gap: 8px; } .modal-gallery__grid > .case-card { flex-basis: calc((100% - 8px) / 2); max-width: calc((100% - 8px) / 2); } }
.modal-gallery .case-card > .case-card__open { display: block; position: relative; width: 100%; height: 0; padding-bottom: 100%; }
.modal-gallery .case-card .media--pair { position: absolute; inset: 0; height: auto; }
/* never shimmer the modal thumbnails — they're in-view/cached, the mat shows through */
.modal-gallery .cm-imgskel::after { display: none; }
.modal-gallery .case-card__body { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(100%); pointer-events: none; border-top: 0; }
.modal-gallery .case-card:hover .case-card__body { opacity: 1; transform: none; pointer-events: auto; }
.modal__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
/* floats just outside the dialog's top-right corner */
.modal__close { position: absolute; top: 0.25rem; right: 0.5rem; z-index: 7; background: var(--surface-sunken); border: 0; border-radius: 50%; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font-size: 1.9rem; line-height: 1; color: var(--heading); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.modal__close svg { width: 1.15rem; height: 1.15rem; display: block; }
.modal__close:hover { background: var(--heading); color: var(--color-white); }
/* album prev/next — OUTSIDE the dialog, in the side gutters on the backdrop.
   No button chrome: just the arrow; hover changes the icon colour only. */
/* fixed (not absolute): the arrows now live inside the dialog's cream block but on
   desktop must still sit in the side gutters — fixed escapes the dialog's overflow
   clip and anchors to the viewport (the dialog is viewport-centred). Mobile re-homes
   them as absolute inside the cream block. */
.modal__nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 6; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: #fff; border: 0; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.22); color: var(--color-ink-900); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.modal--static .modal__nav { display: none; }   /* standalone page has no album */
.modal__nav:hover { background: #fff; color: var(--color-ink-900); }
.modal__nav--prev { left: calc(50% - var(--dlg) / 2 - 3.25rem); }
.modal__nav--prev svg { transform: rotate(180deg); }
.modal__nav--next { right: calc(50% - var(--dlg) / 2 - 3.25rem); }
.modal__nav[hidden] { display: none; }
.modal__nav:disabled { display: none; }   /* desktop: at an end → hidden (mobile overrides to grey-out) */
@media (max-width: 900px) { .modal__nav--prev { left: 2px; } .modal__nav--next { right: 2px; } }

/* position counter, centred in the top bar */
.modal__counter { position: absolute; top: 0; left: 0; right: 0; height: 3rem; display: flex; align-items: center; justify-content: center; z-index: 6; pointer-events: none; font-family: var(--font-label); font-size: var(--step--1); letter-spacing: 0.04em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.modal__pair-labels { display: flex; gap: var(--space-sm); }
.modal__pair-labels span { flex: 1; text-align: center; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--step--1); color: var(--accent-deep); }
.modal__dialog { position: relative; }
.modal__content { padding: 0; flex: 1; min-height: 0; overflow-y: auto; }   /* image flush; scroll lives here so the close can overflow the dialog */
.modal__loading { padding: var(--space-2xl); text-align: center; color: var(--text-muted); }

/* case card link wrapper (was a button) */
.case-card__open { display: block; color: inherit; text-decoration: none; }
/* hover: dark overlay + centered expand icon over the image */
.case-card__zoom { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--color-ink-900) 48%, transparent); color: #fff; opacity: 0; transition: opacity var(--dur-fast) var(--ease); pointer-events: none; }
.case-card__zoom svg { transform: scale(0.85); transition: transform var(--dur-fast) var(--ease); }
.case-card:hover .case-card__zoom, .case-card__open:focus-visible .case-card__zoom { opacity: 1; }
.case-card:hover .case-card__zoom svg { transform: scale(1); }

/* case detail — big flush image (gray matte) + padded right sidebar; Similar below */
/* breadcrumb on the standalone case page (back to gallery / procedure album).
   Sits in a thin bar just under the header, not inside the band's top padding. */
.case-crumbs-bar { padding-top: var(--space-md); }
.band--flush-top { padding-top: var(--space-md); }
.case-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin-bottom: 0; font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1); color: var(--text-muted); }
.case-crumbs a { color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em; transition: color var(--dur-fast) var(--ease); }
.case-crumbs a:hover { color: var(--heading); }
.case-crumbs__sep { color: var(--border-strong); }
.case-crumbs__current { color: var(--heading); }

/* image area always fills the row (gray matte all around the centered photo);
   the right sidebar is a fixed strip. On the no-modal page the whole thing is a
   white card with a 50% hairline; the modal drops the card chrome. */
.case-detail__main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24%, 360px); gap: 0; align-items: stretch; background: var(--surface); border: 1px solid var(--border-50); overflow: hidden; }
.modal .case-detail__main { background: transparent; border: 0; }
.case-detail__info { border-left: 1px solid var(--border-50); }   /* divider before the sidebar (page) */
.modal .case-detail__info { border-left: 0; }
@media (max-width: 760px) {
  .case-detail__main { grid-template-columns: 1fr; }
  .case-detail { --case-img-h: 52vh; }            /* shorter image when stacked above the sidebar */
  .case-detail__info { border-left: 0; }          /* no side divider when stacked */
  .modal__dialog { width: 100%; max-height: 92vh; }
}
/* ── Phone lightbox: a true full-screen sheet ───────────────────────────────────
   Fills the screen (dvh, so the URL bar can't clip it): header pinned top, image
   stretches to fill the middle, disclaimer pinned bottom. Patient details slide in
   as a compact horizontal ROW under the image (not a float — screens are small).
   prev/next move to the bottom corners; a disabled end greys out but stays visible.
   Lightbox only — the standalone page (.modal--static) keeps its own layout. */
@media (max-width: 560px) {
  /* Full-screen sheet as a flex column: header top, the cream block fills the middle,
     disclaimer bottom. The details strip is a SIBLING below the cream block, so when
     it opens it shrinks the cream block. The controls live INSIDE the cream block
     (position:absolute → relative to it), so they auto-align and ride up as it shrinks
     — no magic numbers. */
  .modal:not(.modal--static) { padding: 0; }
  .modal:not(.modal--static) .modal__dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; box-shadow: none; }
  .modal:not(.modal--static) .case-detail { height: 100%; }
  .modal:not(.modal--static) .case-detail__main { height: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .modal:not(.modal--static) .case-detail__media { position: relative; flex: 1 1 auto; min-height: 0; }

  /* header: title truncates; counter moves up to the top-right by the ×  →  [4/12] [×] */
  .modal:not(.modal--static) .case-detail__bar { padding-right: 6.75rem; }
  .modal:not(.modal--static) .case-detail__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modal:not(.modal--static) .modal__counter { left: auto; right: 3.95rem; width: auto; justify-content: flex-end; }
  /* close: solid black with a white icon, a touch bigger, on mobile */
  .modal__close { width: 2.85rem; height: 2.85rem; background: var(--color-ink-900); color: #fff; }
  .modal__close svg { width: 1.3rem; height: 1.3rem; }
  .modal__close:hover { background: var(--color-ink-900); color: #fff; }

  /* details = a single compact horizontal line below the cream block; collapsed until toggled */
  .modal:not(.modal--static) .case-detail__info {
    position: static; inset: auto; width: auto; max-width: none; height: 2.9rem;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    transform: none; opacity: 1; pointer-events: auto; z-index: auto;
    flex-flow: row nowrap; align-items: center; gap: 0 16px;
    border: 0; border-top: 1px solid var(--border); border-radius: 0;
    padding: 0 var(--space-md); background: var(--surface); display: none;
  }
  .modal:not(.modal--static) .case-detail--info-open .case-detail__info { display: flex; }
  .modal:not(.modal--static) .case-detail__info .btn { display: none; }       /* keep the line compact */
  .modal:not(.modal--static) .case-specs { flex-flow: row nowrap; gap: 0 16px; }
  .modal:not(.modal--static) .case-specs__row { display: inline-flex; gap: 5px; padding: 0; border: 0; align-items: baseline; white-space: nowrap; }
  .modal:not(.modal--static) .case-specs__row dt { font-size: 0.62rem; }
  .modal:not(.modal--static) .case-specs__row dd { text-align: left; }

  /* controls inside the cream block: arrows centred at its bottom, Details bottom-right */
  .modal:not(.modal--static) .modal__nav { position: absolute; top: auto; bottom: 12px; transform: none; width: 2.5rem; height: 2.5rem; }
  .modal:not(.modal--static) .modal__nav--prev { left: auto; right: calc(50% + 5px); }
  .modal:not(.modal--static) .modal__nav--next { left: calc(50% + 5px); right: auto; }
  .modal__nav:disabled { display: grid; opacity: .38; pointer-events: none; }   /* greyed, still shown */
  .modal:not(.modal--static) .case-detail__info-toggle { position: absolute; top: auto; bottom: 12px; right: 12px; }

  /* disclaimer spans the full width now (arrows no longer flank it) */
  .modal:not(.modal--static) .case-detail__foot { padding-left: var(--space-md); padding-right: var(--space-md); }
}
/* FIXED-size gray image block so the modal is the same height for every case
   (wide + square both sit in the same block; gray fills around the photo).
   Height = viewport minus the Similar-results strip + chrome. */
.case-detail { --case-img-h: min(80vh, 860px); }            /* standalone page: max 860px */
.modal .case-detail { --case-img-h: min(80vh, 1100px); }    /* modal: max 1100px */
.case-detail__media { position: relative; background: var(--matte); display: grid; place-items: center; overflow: hidden; height: var(--case-img-h, min(80vh, 1100px)); max-height: var(--case-img-h, min(80vh, 1100px)); }
.case-detail__media img { display: block; max-width: 100%; max-height: var(--case-img-h, min(80vh, 1100px)); width: auto; height: auto; }
/* sidebar: padded; info to the top, Book pinned to the bottom */
.case-detail__info { display: flex; flex-direction: column; gap: var(--space-md); text-align: left; padding: clamp(var(--space-md), 2vw, var(--space-lg)); }
.case-detail__top { display: flex; flex-direction: column; gap: var(--space-sm); }
.case-detail__head { display: flex; flex-direction: column; gap: var(--space-2xs); }
.case-detail__title { font-size: var(--step-2); line-height: 1.2; }
.case-detail__alt { font-size: var(--step-0); }
a.tag { text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
a.tag:hover { background: var(--accent-deep); color: var(--color-white); }
/* spec list: label left, value right, compact rows with hairlines */
.case-specs { margin: 0; display: flex; flex-direction: column; }
.case-specs__row { display: grid; grid-template-columns: minmax(72px, auto) 1fr; gap: var(--space-sm); align-items: baseline; padding: 5px 0; border-top: 1px solid var(--border-50); }
.case-specs__row:last-child { border-bottom: 1px solid var(--border-50); }
.case-specs__row dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.case-specs__row dd { margin: 0; font-size: var(--step--1); color: var(--text); text-align: right; }
.case-specs__row dd a { color: var(--text); text-decoration: none; }
.case-specs__row dd a:hover { color: var(--accent-deep); text-decoration: underline; }
/* highlight the human-identifying rows (Patient, Body area) */
.case-specs__row--key dd, .case-specs__row--key dd a { font-weight: 600; font-size: var(--step-0); color: var(--heading); }
/* compliance notes: small, not italic, tight */
.case-detail__notes { display: flex; flex-direction: column; gap: 0.35em; }
.case-detail__notes .disclaimer, .case-detail__notes p { background: transparent; padding: 0; margin: 0; border-radius: 0; font-style: normal; font-size: 0.72rem; line-height: 1.35; color: var(--text-muted); }
/* Book pinned bottom; View more = button-label typography, centered, underlined, no box */
.case-detail__actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-sm); align-items: stretch; padding-top: var(--space-md); }
.case-detail__more { text-align: center; font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: 600; font-size: var(--step--1); color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease); }
.case-detail__more:hover { color: var(--heading); }
/* Similar results — small uppercase label + tighter grid, full width, padded */
/* shown on the standalone page (users can scroll); hidden in the modal for launch */
.case-detail__related { margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--border-50); padding: clamp(1.25rem, 3vw, 2rem) 0 0; }
.modal .case-detail__related { display: none; }
.case-detail__related .eyebrow { display: block; margin-bottom: var(--space-xs); }
/* 6-up compact strip */
.case-detail__related .grid--gallery { grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (max-width: 900px) { .case-detail__related .grid--gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .case-detail__related .grid--gallery { grid-template-columns: repeat(2, 1fr); } }

/* ── Modal as a gallery-block ──────────────────────────────────────────────────
   Mirrors the gallery container: white panel, a top bar (headline + × close), the
   1:1 image (same greige mat as the card, so the click→modal morph is shape-to-
   shape), and the disclaimer band at the foot. Patient details float bottom-right
   over the image, shown/hidden by the toggle. Scoped to .modal; the standalone case
   page keeps its own layout. */
.modal__dialog { width: var(--dlg); }
.modal .case-detail { display: flex; flex-direction: column; }

/* top bar: headline left, × (modal__close) on the right */
.modal .case-detail__bar { display: flex; align-items: center; min-height: 3rem; padding: var(--space-2xs) var(--space-md); padding-right: 3.4rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.modal .case-detail__title { margin: 0; font-family: var(--font-body); font-weight: var(--weight-strong); font-size: var(--step-1); line-height: 1.2; color: var(--heading); }

/* 1:1 image stage */
/* explicit square (height = dialog width) instead of aspect-ratio-in-flex, so the
   stage has exact geometry the instant it's created — the open view-transition
   snapshots it correctly (aspect-ratio on a fresh flex item resolves unreliably). */
.modal .case-detail__main { position: relative; display: block; width: 100%; height: var(--dlg); }
.modal .case-detail__media {
  position: absolute; inset: 0; height: auto; max-height: none;
  background: var(--media-mat); padding: clamp(5px, 3%, 28px);   /* same ratio as the card → image aligns through the morph */
}
.modal .case-detail__media img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; transform-origin: center center; }
/* zoom + pan: the script owns touch gestures on the lightbox image (not the page) */
.modal:not(.modal--static) .case-detail__media { touch-action: none; }
.modal:not(.modal--static) .case-detail__media.is-zoomed { cursor: grab; }
.modal:not(.modal--static) .case-detail__media.is-zoomed img { will-change: transform; cursor: grab; }
.modal .case-card__pair-labels { display: none; }   /* the composited image already carries Before/After */

/* floating details panel: sits just above the toggle at bottom-right, over the image */
.modal .case-detail__info {
  position: absolute; right: clamp(10px, 2.4%, 22px); bottom: calc(clamp(10px, 2.4%, 22px) + 2.7rem); z-index: 4;
  width: min(300px, 74%); max-height: 66%; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-sm);
  background: var(--surface); border: 1px solid var(--border-strong);
  padding: var(--space-sm) var(--space-md);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.modal .case-detail--info-open .case-detail__info { opacity: 1; transform: none; pointer-events: auto; }

/* "Details" toggle — bottom-right; turns solid when the panel is open */
.case-detail__info-toggle { display: none; }
.modal .case-detail__info-toggle {
  position: absolute; right: clamp(10px, 2.4%, 22px); bottom: clamp(10px, 2.4%, 22px); z-index: 5;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0;
  color: var(--heading); cursor: pointer;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--step--1); font-weight: 600;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal .case-detail__info-toggle:hover,
.modal .case-detail--info-open .case-detail__info-toggle { background: var(--heading); color: var(--color-white); border-color: var(--heading); }

/* disclaimer foot band (mirrors the gallery block's) */
.modal .case-detail__foot { padding: var(--space-2xs) var(--space-md); border-top: 1px solid var(--border); text-align: center; background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.modal .case-detail__foot .disclaimer, .modal .case-detail__foot p { background: none; padding: 0; margin: 0; border-radius: 0; max-width: none; width: 100%; font-style: normal; font-size: var(--step--1); line-height: var(--leading-snug); color: var(--text-muted); }

/* Standalone case page = the lightbox, made static. Keeping the `.modal` class
   means every `.modal .case-detail__*` rule above styles the page identically;
   this just strips the overlay behaviours (fixed position, backdrop, animation). */
.modal--static { position: static; inset: auto; z-index: auto; display: block; padding: 0; visibility: visible; transition: none; }
.modal--static::before { content: none; }                       /* no dark backdrop */
/* a framed block (border, no big shadow) — reads as a page section, not a float */
.modal--static .modal__dialog { margin-inline: auto; max-height: none; opacity: 1; transition: none; border: 1px solid var(--border); box-shadow: none; }
.modal--static .case-detail__main { height: var(--dlg); }       /* square stage, same as the modal */
.case-page__inner { display: flex; justify-content: center; }

/* page bar = the gallery-block header: Back to procedure · title · 18+ (no ×). */
.modal:not(.modal--static) .case-detail__back,
.modal:not(.modal--static) .case-detail__badge { display: none; }   /* lightbox keeps just the title */
.modal--static .case-detail__bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
.modal--static .case-detail__back { justify-self: start; }
.modal--static .case-detail__title { justify-self: center; }
.modal--static .case-detail__badge { justify-self: end; display: inline-flex; }
@media (max-width: 560px) {
  /* one tidy row: [back icon] · [name, expanded] · [18+] */
  .modal--static .case-detail__bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .modal--static .case-detail__back span { display: none; }                    /* icon only */
  .modal--static .gallery-block__back-icon { width: 22px; height: 22px; }       /* bigger */
  .modal--static .case-detail__title { justify-self: stretch; text-align: center; font-size: var(--step-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modal--static .case-detail__badge .age-gate-badge__rest { display: none; }   /* 18+ only */
  /* page image goes full-bleed too: band__inner to full width, dialog edge-to-edge */
  .case-page__inner { width: 100%; }
  .modal--static .modal__dialog { width: 100%; max-width: 100%; border-left: 0; border-right: 0; }
  .modal--static .case-detail__main { height: 100vw; }   /* square at full-bleed width */
}

/* --- Media-credibility band ----------------------------------------------- */
.logo-strip { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl); align-items: center; justify-content: center; }
.logo-strip span { font-family: var(--font-display); font-size: var(--step-1); color: var(--text-muted); opacity: 0.8; }

/* --- Team ----------------------------------------------------------------- */
/* centre only the body content; the foot must stay edge-to-edge (align-items
   on the card would shrink the foot, so centre on the body instead) */
/* Team roster — category sections, each a clean sans heading + a card grid */
.team-cat + .team-cat { margin-top: clamp(var(--space-xl), 5vw, var(--space-2xl)); }
.team-cat__name { font-family: var(--font-body); font-size: var(--step-2); font-weight: 600; color: var(--heading); letter-spacing: -0.01em; margin: 0 0 var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border); }
.team-card { text-align: center; }
.team-card .card__body { align-items: center; }
.team-card .media { border-radius: var(--radius-lg); margin-bottom: var(--space-sm); }
.team-card__name { font-size: var(--step-1); font-weight: 500; line-height: 1.3; }
.team-card__role { font-size: var(--step--1); color: var(--accent-deep); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.team-card__reg { font-size: var(--step--1); color: var(--text-muted); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* Roster cards (Our team page): left-aligned with credentials list */
.grid--cards .team-card { text-align: left; }
.grid--cards .team-card .card__body { align-items: stretch; }
.grid--cards .team-card__role,
.grid--cards .team-card__reg { display: block; margin-top: 4px; }
.grid--cards .team-card .team-meta { display: flex; margin-top: 6px; }
.team-card__quals { list-style: none; margin: var(--space-sm) 0 0; padding: var(--space-sm) 0 0; border-top: 1px solid var(--border-50); display: grid; gap: 5px; }
.team-card__quals li { position: relative; padding-left: 1.6em; font-size: var(--step--1); line-height: 1.4; color: var(--text-muted); }
.team-card__quals li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.66em; height: 2px; border-radius: 1px; background: var(--accent-deep); }

/* Full practitioner profiles (Our team page) */
.team-profile__grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 820px) { .team-profile__grid { grid-template-columns: 1fr; } }
.team-profile__aside { position: sticky; top: 8rem; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
@media (max-width: 820px) { .team-profile__aside { position: static; } }
/* full-width name heading above the two-column layout */
.team-profile__head { margin-bottom: var(--space-md); }
.team-profile__rule { border: 0; border-top: 1px solid var(--border-50); margin: 0 0 clamp(var(--space-lg), 4vw, var(--space-xl)); }
.team-profile__photo { border: 1px solid var(--border-50); margin-bottom: var(--space-sm); aspect-ratio: 1 / 1; overflow: hidden; }   /* square */
.team-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-profile__name { font-size: var(--step-4); line-height: 1.15; margin: 0; }
.team-profile__role { display: block; color: var(--accent-deep); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--step--1); margin-top: 6px; }
.team-profile__loc { text-align: left; margin-top: 2px; }   /* location under the photo, left-aligned */
.team-profile__reg { display: block; font-size: var(--step--1); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: 6px; }
/* socials in a row — sharp icon buttons */
.team-profile__socials { display: flex; gap: 8px; margin-top: 12px; }
.team-profile__ig { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border-strong); color: var(--heading); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.team-profile__ig:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.team-profile__quals { margin-top: var(--space-md); }
.team-profile__lede { font-size: var(--step-2); line-height: 1.5; color: var(--heading); margin: 0 0 var(--space-md); }
.team-profile__quote { margin: var(--space-lg) 0 0; padding: var(--space-md) 0 var(--space-md) var(--space-md); border-left: 2px solid var(--accent); font-family: var(--font-display); font-size: clamp(1.5rem, 1.3rem + 1vw, 1.75rem); line-height: 1.4; font-style: normal; color: var(--heading); }
.team-profile__expertise { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border-50); }
.team-profile__expertise h3 { font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 0.74rem; color: var(--text-muted); margin: 0 0 var(--space-sm); }
.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pill-list a { display: inline-block; padding: 9px 17px; border: 1px solid var(--border-strong); font-size: var(--step-0); color: var(--heading); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.pill-list a:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* circular avatar (homepage "Meet the team") */
/* profile photos are the one circular shape on an otherwise sharp site */
.avatar, .avatar--round { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; margin: 0 auto var(--space-sm); background: var(--surface-sunken); border: 1px solid var(--border); }
.avatar > img { width: 100%; height: 100%; object-fit: cover; }
/* subtle photo zoom on team-card hover */
.team-card .avatar > img { transition: transform var(--dur) var(--ease); }
.team-card:hover .avatar > img { transform: scale(1.05); }
.team-meta { display: block; text-align: center; font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; }
.team-meta svg { display: inline-block; vertical-align: -0.16em; margin-right: 0.35em; color: var(--accent); }   /* pin flows inline with the (wrapping) text */

/* Auto page-hero: a band whose only content is a centered heading becomes a proper
   hero — neutral background + its own padding — for a consistent header across every
   single-heading page (Blog, Team, Videos, Pricing, 404…). Mirrors the About hero
   structure but with a neutral band instead of blush. Bands with an explicit
   `band--` variant (e.g. About's band--blush) are left as-is. */
.band:not([class*="band--"]):has(> .band__inner > .section-head--center:only-child) {
  background: var(--color-greige-100);
  padding-block: clamp(var(--space-xl), 6vw, var(--space-3xl));
}
/* page-hero title uses the same heading colour as the blog cards / h2 headings */
.band:not([class*="band--"]):has(> .band__inner > .section-head--center:only-child) .section-head h1 {
  color: var(--heading-soft);
}

/* --- Newsletter band ------------------------------------------------------ */
.band--blush { background: var(--bg-blush); }   /* real __newsletter-ss #FBE8E6 */
.newsletter { background: var(--surface); border: 1px solid var(--border-50); border-radius: var(--radius-md);
  padding: clamp(var(--space-xl), 5vw, var(--space-3xl)); display: grid; gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  grid-template-columns: 1.1fr 0.9fr; align-items: center; }
.newsletter h2 { font-size: var(--step-4); }   /* editorial serif display */
.newsletter .muted { font-size: var(--step-1); line-height: 1.6; max-width: 40ch; }
@media (max-width: 720px) { .newsletter { grid-template-columns: 1fr; padding: clamp(var(--space-lg), 6vw, var(--space-xl)); } }
.newsletter__form { display: flex; flex-direction: column; gap: var(--space-sm); }
/* boxed email field — same language as the site's contact forms (label inside, plum focus) */
.newsletter__field { display: flex; flex-direction: column; gap: 4px; background: #fff;
  border: 1px solid var(--border-strong); border-radius: 0; padding: 0.7rem 0.95rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.newsletter__field:hover { border-color: var(--heading); }
.newsletter__field:focus-within { border-color: var(--form-plum, var(--accent-deep)); box-shadow: inset 0 0 0 1px var(--form-plum, var(--accent-deep)); }
.newsletter__field label { font-family: var(--font-label); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.15; color: var(--heading); margin: 0; }
.newsletter__field input { width: 100%; border: 0; background: transparent; padding: 0; font: inherit; font-size: 16px;
  font-weight: 400; color: var(--color-ink-900); line-height: 1.3; outline: none; }
.newsletter__field input::placeholder { color: color-mix(in srgb, var(--text-muted) 45%, #fff); }
.newsletter__submit { width: 100%; justify-content: center; gap: 0.5em; }
/* legacy inline field (styleguide demo) */
.field { display: flex; gap: var(--space-2xs); }
.field input { flex: 1; padding: 0.9em 1em; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--step-0); background: var(--surface); }
.field input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.newsletter__msg { font-size: var(--step--1); min-height: 1.2em; margin: 0; }
.newsletter__msg[data-state="ok"] { color: var(--accent-deep); font-weight: var(--weight-medium); }
.newsletter__msg[data-state="error"] { color: var(--color-wine); }

/* --- Locations (consultation block) — accordion of clinics ---------------- */
.loc-acc { background: transparent; display: flex; flex-direction: column; gap: 1px; }   /* white items, 1px cream gap between them */
.loc-item { background: var(--surface); transition: opacity var(--dur) var(--ease); }
/* when an item is open, dim the others to 75% to focus the active one */
.loc-acc:has(.loc-item.is-open) .loc-item:not(.is-open) { opacity: 0.75; }
/* the open item detaches from the list — margin top/bottom (none at the edges),
   a surface background and a soft, barely-there shadow so it stands out */
.loc-item.is-open { margin-block: 10px; background: var(--surface);
  box-shadow: 0 10px 30px -14px rgba(28, 30, 50, .13); position: relative; z-index: 1; }
.loc-item.is-open:first-child { margin-top: 0; }
.loc-item.is-open:last-child { margin-bottom: 0; }
/* header row: a toggle button (city + locality · chevron) with an Enquire link beside it */
.loc-item__head { position: relative; }
.loc-item__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: 100%;
  padding: var(--space-md) var(--space-lg); background: 0; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.loc-item.is-open .loc-item__head { border-bottom: 1px solid var(--border-50); }
/* Enquire — surfaced in the COLLAPSED header (desktop only) for quick access; once the
   row is open the panel's own Enquire takes over, so this one hides. Sits left of the chevron. */
.loc-item__enquire { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  right: calc(var(--space-lg) + 20px + var(--space-md)); }
.loc-item.is-open .loc-item__enquire { display: none; }
@media (max-width: 720px) { .loc-item__enquire { display: none; } }
.loc-item__heading { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.loc-item__name { font-family: var(--font-body); font-weight: 600; font-size: var(--step-1); color: var(--heading); line-height: 1.2; }
.loc-item__addr-line { font-size: var(--step-0); color: var(--text-muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.loc-item__note { color: var(--text-muted); }
.loc-item__chev { flex: none; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.loc-item.is-open .loc-item__chev { transform: rotate(180deg); }
/* collapsible panel — smooth grid-rows reveal */
.loc-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.loc-item__panel-inner { overflow: hidden; min-height: 0; }   /* collapsing element: NO padding (or it leaks a strip) */
.loc-item__panel-pad { padding: var(--space-sm) var(--space-lg) var(--space-md); background: var(--bg); }   /* #fdfcfb interior, compact */
.loc-item.is-open .loc-item__panel { grid-template-rows: 1fr; }
/* two columns — Address (+ get-directions text link) | Opening Hours, no boxes */
/* one-column label → value list. Single-side borders (border-bottom only, removed on the
   last row) so any two adjacent rows share ONE hairline — never a doubled / stronger line.
   CSS has no Figma "stroke align: center"; a single-side border per element is the fix. */
.loc-rows { margin: 0; }
.loc-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-md); align-items: start;
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-50); }
.loc-row:first-child { padding-top: 0; }
.loc-row:last-child { border-bottom: 1px solid var(--border-50); padding-bottom: var(--space-md); }   /* keep the hairline + relaxed space after opening hours */
.loc-row__label { font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; }
.loc-row__val { display: flex; flex-direction: column; gap: 5px; margin: 0; color: var(--heading); font-size: var(--step--1); line-height: 1.5; }
.loc-row__val a { align-self: flex-start; }
.loc-row__val a:not(.loc-dir) { color: inherit; text-decoration: none; }
.loc-row__val a:not(.loc-dir):hover { text-decoration: underline; text-underline-offset: 0.2em; }
.loc-row__val .loc-item__note { display: block; font-size: var(--step--1); color: var(--text-muted); margin-top: 2px; }
@media (max-width: 480px) { .loc-row { grid-template-columns: 1fr; gap: 4px; } }
/* Get Directions — plain text button (no stroke, no padding) + pin icon */
.loc-dir { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-2xs); color: var(--accent-deep);
  font-family: var(--font-label); font-size: var(--step--1); font-weight: 600; text-decoration: none; }
.loc-dir:hover { color: var(--accent-cta-hover); text-decoration: underline; text-underline-offset: 0.2em; }
.loc-dir svg { flex: none; }
/* hours as single left-aligned lines: "Mon – Sat · 8:30am – 5:30pm" */
.loc-hours__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.loc-hours__row { font-size: var(--step--1); line-height: 1.45; color: var(--text); font-variant-numeric: tabular-nums; }
.loc-hours__row.is-closed { color: var(--text-muted); }
/* actions — Email · Call (stroke) · Enquire (pink) */
.loc-actions { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--space-xs); margin-top: var(--space-md); }
.loc-actions .btn { width: 100%; min-width: 0; padding-inline: 0.6rem; gap: 0.4em; white-space: nowrap; }
/* mobile: tighter lateral padding, compact panel, Email·Call on one row + Enquire full width */
@media (max-width: 560px) {
  .loc-item__toggle { padding: var(--space-sm) var(--space-md); }
  .loc-item__panel-pad { padding: var(--space-sm) var(--space-md) var(--space-md); }
  .loc-actions { grid-template-columns: 1fr 1fr; }
  .loc-actions__enquire { grid-column: 1 / -1; }
}

/* --- Two-column split (About / Locations intro) --------------------------- */
/* two-column section: top-aligned so the short text column lines up with the
   media/list column at the same baseline (no mid-height float). Add .split--center
   only when both columns are short and centering genuinely reads better. */
.split { display: grid; gap: clamp(var(--space-lg), 5vw, var(--space-2xl)); align-items: start; grid-template-columns: 1fr 1fr; }
.split--center { align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--space-lg); } }
.embed { position: relative; aspect-ratio: 16 / 9; background: var(--color-ink-900); overflow: hidden; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* social-proof strip under the about video (real IG/FB/YT counts) */
.social-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.social-proof__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px; text-align: center; background: var(--color-pink-50); border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease); }
.social-proof__ico { color: var(--accent); display: inline-flex; }
.social-proof__num { font-family: var(--font-body); font-weight: 600; font-size: var(--step-1); color: var(--heading); line-height: 1; font-variant-numeric: tabular-nums; }
.social-proof__label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
/* team card foot centered (vs procedure left-aligned) */

/* blog card kicker + byline */
.card__kicker { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 8px; }
.card__byline { display: inline-flex; align-items: center; gap: 0.4em; font-size: 13px; color: var(--text-muted); margin-top: auto; padding-top: 12px; }
.card__byline svg { flex: none; }

/* staggered on-scroll reveal: each grid item delayed by its --i */
.reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* --- Location ------------------------------------------------------------- */
.location-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* locations page: a single narrow centred column, cards stacked (wider to fit the map) */
.location-grid--stack { display: flex; flex-direction: column; gap: var(--space-md); max-width: 760px; margin-inline: auto; }
.location-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 0; }
.location-card h3 { margin-bottom: var(--space-xs); }
.location-card dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-sm); font-size: var(--step-0); margin-top: var(--space-sm); }
.location-card dt { color: var(--text-muted); }

/* --- FAQ / costs accordion ------------------------------------------------ */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) 0; font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; color: var(--heading); background: none; border: 0; }
.faq__q[aria-expanded="true"] + .faq__a { display: block; }
.faq__a { display: none; padding-bottom: var(--space-sm); color: var(--text-muted); }
/* 2026-08-13 (Jesus): answers carry no paragraph spacing of their own, so once
   they are broken up the parts stack flush and still read as one block. */
.faq__a p { margin: 0; }
.faq__a p + p { margin-top: .85em; }
.faq__icon { transition: transform var(--dur-fast) var(--ease); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }

.cost-list { list-style: none; }
.cost-list li { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: 1px dashed var(--border); }

/* --- Procedure body ------------------------------------------------------- */
.procedure-section + .procedure-section { margin-top: var(--space-xl); }

/* --- Sticky mobile conversion bar (Call + Enquire) ------------------------ */
.mobile-cta { display: none; }
@media (max-width: 720px) {
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-header);
    background: var(--surface); border: 0;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.07);
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* Chrome iOS leaves a fixed bar stranded mid-page while its bottom omnibox
       retracts; its own compositor layer keeps it pinned through the scroll. */
    transform: translateZ(0); will-change: transform;
    -webkit-backface-visibility: hidden;
  }
  .mobile-cta__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
    font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.07em;
    text-transform: uppercase; padding: 9px; min-height: 40px;
  }
  .mobile-cta__btn svg { width: 14px; height: 14px; }
  .mobile-cta__btn--call { color: var(--heading); }
  .mobile-cta__btn--call svg { color: var(--accent); }
  .mobile-cta__btn--book { background: var(--btn-primary); color: var(--on-primary); }
  /* keep the footer clear of the fixed bar */
  .site-footer { padding-bottom: calc(var(--space-lg) + 40px); }
}

/* --- Social-proof stats band (Feals "Join 400,000+") ---------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); text-align: center; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-md); } }
.stat__num { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: clamp(2.2rem, 4vw, 3.25rem); line-height: 1; color: var(--heading); }
.stat__label { display: block; margin-top: 10px; font-size: var(--step--1); color: var(--text-muted); letter-spacing: 0.02em; }

/* --- Benefit trio (Feals 3-up benefits; no card boxes, clean icon+text) ---- */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--space-lg), 4vw, var(--space-2xl)); }
@media (max-width: 760px) { .benefits { grid-template-columns: 1fr; gap: var(--space-xl); } }
.benefit { text-align: center; display: flex; flex-direction: column; align-items: center; }
.benefit__icon { width: 64px; height: 64px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-pink-100); color: var(--accent); margin-bottom: var(--space-md); }
.benefit__icon svg { width: 28px; height: 28px; }
.benefit h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--step-2); color: var(--heading); margin-bottom: var(--space-xs); }
.benefit p { color: var(--text-muted); max-width: 34ch; }

/* --- Reassurance / safety band (Feals "Love it, or it's on us") ------------ */
.reassurance { text-align: center; }
.reassurance .band__inner { max-width: var(--container-narrow); }
.reassurance p { margin-inline: auto; font-size: var(--step-1); color: var(--text-muted); }

/* --- Media "as featured in" strip ----------------------------------------- */
.media-strip { display: flex; flex-wrap: wrap; gap: clamp(var(--space-lg), 5vw, var(--space-2xl)); align-items: center; justify-content: center; }
.media-strip span { font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--text-muted); opacity: 0.8; letter-spacing: 0.02em; }
.eyebrow--center { display: block; text-align: center; margin-bottom: var(--space-lg); }

/* --- Homepage FAQ (Feals "You have questions") ---------------------------- */
.home-faq { max-width: var(--container-narrow); margin-inline: auto; }

/* --- Footer --------------------------------------------------------------- */

/* dark footer with giant faded wordmark (Superhuman-style) */
.site-footer { position: relative; overflow: hidden; background: var(--color-ink-900); color: rgba(255,255,255,.72); padding-block: clamp(3.5rem,6vw,5.5rem); }
.site-footer .band__inner { position: relative; z-index: 1; }
.site-footer a { color: rgba(255,255,255,.72); transition: color var(--dur-fast) var(--ease); }
.site-footer a:hover { color: #fff; }
/* Deel-style footer: top links · rule · columns · rule · brand+newsletter · rule · legal */
.footer-rule { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: clamp(1rem, 2.4vw, 1.75rem) 0; }
/* horizontal quick menu — same link style as the columns (label, uppercase, size, color) */
.footer-top { display: flex; flex-wrap: wrap; gap: var(--space-sm) clamp(1.25rem, 3vw, 2.5rem); }
.footer-top a { font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; color: rgba(255, 255, 255, .72); }
.footer-top a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) clamp(1.25rem, 3vw, 2.25rem); }
@media (max-width: 640px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--space-md); } }
/* Procedures spans two of the four columns; its list flows into 2 sub-columns */
.footer-col--procedures { grid-column: span 2; }
.footer-col--procedures ul { grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: clamp(1.25rem, 3vw, 2.25rem); }
.footer-col h4 { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.08em; color: #fff; font-size: var(--step--2); margin-bottom: var(--space-sm); }
.footer-col ul { list-style: none; display: grid; gap: 6px; }
/* footer links share the horizontal-menu style: label font, uppercase, same size/tracking */
.footer-col a { font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; color: rgba(255, 255, 255, .72); }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
/* brand + socials  |  newsletter */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xl) clamp(2rem, 5vw, 5rem); flex-wrap: wrap; }
@media (max-width: 720px) { .footer-bottom { flex-direction: column; align-items: flex-start; } }
.footer-bottom .brand__logo--invert { height: 48px; }
/* social icons + phone button sit on one row */
.footer-social-row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.footer-socials { display: flex; gap: 8px; }
.footer-socials a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 0; background: rgba(255,255,255,.08); color: #fff; transition: background var(--dur-fast) var(--ease); }   /* sharp corners, like the header bar */
.footer-socials a:hover { background: rgba(255,255,255,.18); }
.footer-socials svg { width: 16px; height: 16px; }
.footer-phone { display: inline-flex; align-items: center; gap: 0.5em; color: #fff; font-weight: 500; font-size: var(--step-0); }
.footer-phone svg { color: var(--accent); }
/* phone as a sharp stroke button on the dark footer (white text) */
.footer-phone--btn { padding: 0.5em 1.05em; font-size: var(--step--1); border: 1px solid rgba(255,255,255,.35); border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.footer-phone--btn:hover { border-color: #fff; background: rgba(255,255,255,.08); }
/* newsletter — Deel-style white pill with a dark round arrow button */
.footer-news { justify-self: end; width: 100%; max-width: 600px; }
@media (max-width: 720px) { .footer-news { justify-self: start; max-width: none; } }
.footer-news__head { font-family: var(--font-display); font-size: var(--step-1); color: #fff; line-height: 1.2; margin: 0 0 var(--space-sm); }
@media (min-width: 721px) { .footer-news__head { white-space: nowrap; } }   /* keep it to one line */
/* sharp input + button (no pill, no circle) — matches the site's square aesthetic */
/* sharp white block with interior padding; the dark arrow button sits INSIDE it */
.footer-news__form { display: flex; flex-direction: row; align-items: stretch; gap: 6px; background: #fff; border-radius: 0; padding: 4px; }
.footer-news__form input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: var(--step--1); color: var(--color-ink-900); outline: none; padding: 7px 10px; }
.footer-news__form input::placeholder { color: var(--text-muted); }
.footer-news__form button { flex: none; width: 40px; border-radius: 0; background: var(--color-ink-900); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.footer-news__form button:hover { background: var(--accent); }
.footer-news__msg { font-size: var(--step--1); min-height: 0; margin: 0; color: rgba(255,255,255,.85); }
.footer-news__msg:not(:empty) { margin-top: var(--space-2xs); }
.footer-news__note { font-size: var(--step--1); color: rgba(255,255,255,.55); margin: 8px 0 0; }
.footer-news__note a { color: #fff; text-decoration: underline; }
/* legal */
.footer-legal { font-size: var(--step--1); color: rgba(255,255,255,.55); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); justify-content: space-between; align-items: center; }
.footer-legal__links { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); }
.footer-risk { margin-top: var(--space-md); font-size: var(--step--1); color: rgba(255,255,255,.4); max-width: 80ch; line-height: 1.5; }
/* watermark */
/* giant faded brand wordmark — the real logo SVG, masked so it dissolves into the footer */
.footer-watermark { position: absolute; left: 50%; bottom: -9.5rem; transform: translateX(-50%); z-index: 0; width: min(118%, 1500px); line-height: 0; pointer-events: none; user-select: none; }
.footer-watermark__logo { display: block; width: 100%; height: auto; opacity: 0.16;
  color: #000;   /* black at ~16% alpha */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%);
          mask-image: linear-gradient(to top, transparent 0%, #000 45%); }

/* --- Styleguide page (review only) ---------------------------------------- */
.sg__h { margin: var(--space-2xl) 0 var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--step--1); color: var(--text-muted); }
.sg__swatches { display: flex; flex-wrap: wrap; gap: 16px; }
.sg__swatch { font-size: 12px; display: flex; flex-direction: column; gap: 6px; color: var(--text-muted); }
.sg__chip { width: 84px; height: 48px; border: 1px solid var(--border); }
.sg__stack > * + * { margin-top: 12px; }
.sg__row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sg__icons { display: flex; flex-wrap: wrap; gap: 12px; }
.sg__ico { color: var(--heading); border: 1px solid var(--border); padding: 10px; display: inline-flex; }
.sg .avatar { background: var(--bg-alt); }
.sg__note { font-size: var(--step--1); color: var(--text-muted); max-width: 60ch; margin-top: var(--space-xs); }
.sg__note strong { color: var(--heading); font-weight: 500; }
.chip__count { font-size: 0.78em; opacity: 0.6; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__count { opacity: 0.85; }

/* --- Gallery index (one filter row + count + load-more) -------------------- */
.gallery { margin-top: 0; }

/* ── Refine row ──────────────────────────────────────────────────────────────
   A filled cream band (no border/divider) owning its own padding; controls stretch
   to fill it (each capped at a third), count + Clear all on a line beneath. */
.gallery-filters {
  display: flex; flex-direction: column; gap: 7px; margin: 0;
  padding: var(--space-xs) var(--space-md);
  background: transparent; border-bottom: 1px solid var(--border-50);
}
.gallery-filters__controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; }
.gallery-filters__controls > * { flex: 1 1 0; max-width: 33.333%; min-width: 8rem; }
.gallery-filters__meta { display: flex; align-items: baseline; justify-content: flex-start; gap: var(--space-sm); }

/* one control = a label ABOVE a flat, square value trigger */
.gallery-combo { position: relative; display: flex; flex-direction: column; gap: 6px; }
.gallery-combo__label { font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 10px; font-weight: var(--weight-strong); color: var(--text); line-height: 1; }
.gallery-combo__toggle, .gallery-select__el {
  width: 100%; min-height: 29px; box-sizing: border-box;
  font-family: var(--font-body); font-size: var(--step--1); color: var(--heading);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gallery-combo__toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 10px; text-align: left; }
.gallery-combo__toggle:hover { border-color: var(--heading-soft); }
.gallery-combo__toggle[aria-expanded="true"],
.gallery-combo:has(.gallery-combo__value.is-selected) .gallery-combo__toggle { border-color: var(--heading); }
.gallery-select__el { padding: 8px 30px 8px 12px; -webkit-appearance: none; appearance: none;
  background-image: var(--icon-arrow); background-repeat: no-repeat; background-position: right 11px center; background-size: 12px; }
.gallery-combo__toggle:focus-visible, .gallery-select__el:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; }
.gallery-combo__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-combo__value:not(.is-selected) { color: var(--text-muted); }
.gallery-combo__value.is-selected { font-weight: var(--weight-strong); }
.gallery-combo__caret { flex: none; color: var(--text-muted); transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease); }
.gallery-combo__toggle[aria-expanded="true"] .gallery-combo__caret { transform: rotate(180deg); color: var(--heading); }

/* gender = segmented toggle (Female | Male); neither active = both shown */
.gallery-toggle__group { display: flex; border: 1px solid var(--border-strong); }
.gallery-toggle__btn {
  flex: 1 1 0; min-height: 29px; padding: 3px 8px; cursor: pointer;
  background: var(--surface); border: 0; border-right: 1px solid var(--border-strong);
  font-family: var(--font-body); font-size: var(--step--1); color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gallery-toggle__btn:last-child { border-right: 0; }
.gallery-toggle__btn:hover { color: var(--heading); }
.gallery-toggle__btn.is-active { background: var(--heading); color: var(--color-white); }
.gallery-toggle__btn:focus-visible { outline: 2px solid var(--heading); outline-offset: -2px; }
.gallery-toggle__btn .gallery-toggle__n { margin-left: 5px; color: var(--text-muted); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.gallery-toggle__btn.is-active .gallery-toggle__n { color: rgba(255,255,255,.7); }

/* dropdown panel — flat (tokens carry no shadow): crisp border + thin black top edge */
.gallery-combo__panel {
  position: absolute; top: calc(100% + 5px); left: 0; right: auto; z-index: 30;
  min-width: max(100%, 13rem); display: flex; flex-direction: column; max-height: 290px;
  background: var(--surface); border: 1px solid var(--border-strong); border-top: 2px solid var(--heading);
}
.gallery-filters__controls > .gallery-combo:last-child .gallery-combo__panel { left: auto; right: 0; }
.gallery-combo__panel[hidden] { display: none; }   /* the [hidden] attr must win over display:flex */
.gallery-combo__panel:not([hidden]) { animation: combo-in var(--dur-fast) var(--ease); transform-origin: top; }
@keyframes combo-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.gallery-combo__search { padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border); font-family: var(--font-body); font-size: var(--step--1); color: var(--text); }
.gallery-combo__search:focus-visible { outline: none; }
.gallery-combo__list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.gallery-combo__opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 6px 10px; background: transparent; border: 0; cursor: pointer; font-size: var(--step--1); color: var(--heading); transition: background var(--dur-fast) var(--ease); }
.gallery-combo__opt:hover, .gallery-combo__opt:focus-visible { background: var(--surface-sunken); outline: none; }
.gallery-combo__n { flex: none; color: var(--text-muted); font-size: 0.8em; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* meta: clear-all (only when a filter is active) + live result count */
.gallery-clear { background: 0; border: 0; padding: 0; cursor: pointer; font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--step--1); color: var(--text-muted); text-decoration: underline; text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease); }
.gallery-clear:hover { color: var(--heading); }
.gallery-count { font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--step--1); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.gallery-filters__toggle { display: none; }   /* desktop: filters always shown */

@media (max-width: 600px) {
  /* filters collapse behind a "Filters" button */
  .gallery-filters__toggle { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    padding: 8px 14px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0;
    font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps);
    font-size: var(--step--1); font-weight: 600; color: var(--heading); cursor: pointer; }
  .gallery-filters__toggle-caret { transition: transform var(--dur) var(--ease); }
  .gallery-filters.is-open .gallery-filters__toggle-caret { transform: rotate(180deg); }
  .gallery-filters__controls { display: none; }
  .gallery-filters.is-open .gallery-filters__controls { display: flex; gap: 10px 12px; }
  .gallery-filters__controls > * { flex: 1 1 calc(50% - 6px); min-width: 0; max-width: none; }
  .gallery-filters__meta { width: 100%; justify-content: space-between; margin-left: 0; }
  /* keep the custom dropdown within the viewport — span the control, no 13rem min */
  .gallery-combo__panel { left: 0 !important; right: 0 !important; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .gallery-combo__panel:not([hidden]) { animation: none; } }

/* ── Gallery block ───────────────────────────────────────────────────────────
   A white panel on the porcelain page (modal-like, flat per the tokens). Houses an
   optional heading bar, the refine rail + grid, and a pinned bottom disclaimer.
   Library page: hero above, no bar. Procedure gallery: no hero, bar carries the H1. */
.band--gallery { padding-block: clamp(1.75rem, 4vw, 3rem); }
.gallery-block { background: var(--surface); box-shadow: 0 2px 4px rgba(28, 30, 50, .03), 0 18px 44px -18px rgba(28, 30, 50, .10); }

/* heading bar — back (left) · title (center, sans) · 18+ (right) */
.gallery-block__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border);
}
.gallery-block__back { justify-self: start; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--step--1);
  color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.gallery-block__back:hover { color: var(--accent-deep); }
.gallery-block__back-icon { flex: none; transition: transform var(--dur-fast) var(--ease); }
.gallery-block__back:hover .gallery-block__back-icon { transform: translateX(-2px); }
.gallery-block__title { justify-self: center; margin: 0; text-align: center;
  font-family: var(--font-body); font-weight: var(--weight-strong); font-size: var(--step-2);
  letter-spacing: -0.005em; color: var(--heading); }
.gallery-block__badge { justify-self: end; display: inline-flex; }

/* the body is a bare container — no padding/gap of its own; each section inside
   (filter band, results grid) supplies its own. */
.gallery-block__body { padding: 0; }
.gallery-block__body .grid--gallery { padding: var(--space-md); }
.gallery-block__body .gallery-more { padding: 0 var(--space-md) var(--space-md); margin-top: 0; }

/* full-bleed disclaimer: white, very compact, centred; a top border in the block's
   own colour acts as the divider. Sticks to the viewport bottom while the block is
   in view, then settles at the foot once scrolled past. */
.gallery-block__disclaimer { position: sticky; bottom: 0; z-index: 2; padding: var(--space-2xs) var(--space-md); background: var(--surface); border-top: 1px solid var(--border); text-align: center; }
.gallery-block__disclaimer .disclaimer { margin: 0; padding: 0; background: none; border-radius: 0; max-width: none; width: 100%; font-style: normal; font-size: var(--step--1); line-height: var(--leading-snug); color: var(--text-muted); }

@media (max-width: 600px) {
  /* full-bleed: pull the block out of the band's side gutter, edge to edge */
  .gallery-block { margin-inline: calc(-1 * var(--gutter)); border-left: 0; border-right: 0; }
  /* one tidy row: [back icon] · [name, expanded] · [18+] */
  .gallery-block__bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: var(--space-xs) var(--space-md); }
  .gallery-block__back span { display: none; }                       /* icon only, saves space */
  .gallery-block__back-icon { width: 22px; height: 22px; }           /* bigger */
  .gallery-block__title { justify-self: stretch; text-align: center; font-size: var(--step-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gallery-block__badge .age-gate-badge__rest { display: none; }     /* 18+ only */
  .gallery-block__body .grid--gallery { padding: var(--space-sm); }
  .gallery-block__body .gallery-more { padding: 0 var(--space-sm) var(--space-sm); }
}

.gallery-more { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* Shared-element (container-transform) morph: the clicked thumbnail grows and
   merges into the modal image. Progressive enhancement — unsupported browsers and
   reduced-motion users just get an instant open (handled in JS). */
/* gentle ease-in-out: eases in slowly (soft launch) and glides to a soft stop — no
   sharp acceleration at either end. Paired with a long duration for a calm grow. */
::view-transition-group(case-hero) { animation-duration: 1300ms; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
/* Same image on both sides: skip the default cross-fade so it reads as ONE solid
   element scaling (a clean grow), not a blurry thumbnail dissolving into a sharp one.
   The group still tweens position+size; we just keep the sharp new frame visible. */
::view-transition-old(case-hero) { animation: none; mix-blend-mode: normal; opacity: 0; }
::view-transition-new(case-hero) { animation: none; mix-blend-mode: normal; opacity: 1; }
/* Choreography: the image leads. Hold the gallery for the first ~230ms while the
   plate grows, THEN fade the dark backdrop + modal chrome in over the back half — so
   the modal builds around the arriving image instead of popping in. Both finish
   together. (Delaying old+new equally avoids a see-through gap.) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 820ms; animation-delay: 450ms; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* gallery card hover: subtle zoom within the clipped matte + firmer border */
.case-card .media--pair img { transition: transform var(--dur) var(--ease); }
.case-card:hover .media--pair img { transform: scale(1.04); }

/* --- Team grid (About) ----------------------------------------------------- */
.grid--team { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .grid--team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .grid--team { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* --- Contact page ---------------------------------------------------------- */
.contact-grid {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(24px, 4vw, 56px);
  align-items: start; margin-top: var(--space-xl);
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field label, .contact-details h2 { font-family: var(--font-label); font-weight: 600; }
.field label { font-size: var(--step--1); color: var(--heading); }
.contact-form input,
.contact-form textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--heading);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--accent-deep); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { padding: 12px 16px; margin-bottom: var(--space-md); border: 1px solid var(--border-50); font-size: var(--step--1); }
.form-note--ok  { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--heading); }
.form-note--err { background: var(--surface-sunken); color: var(--heading); }

.contact-details { padding-top: var(--space-2xs); }
.contact-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: var(--space-sm) 0 var(--space-lg); }
.contact-dl dt { font-family: var(--font-label); font-size: var(--step--1); color: var(--text-muted); }
.contact-dl dd { margin: 0; color: var(--heading); }
.contact-map { aspect-ratio: 4 / 3; border: 1px solid var(--border-50); overflow: hidden; }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Blog ------------------------------------------------------------------ */
.grid--blog {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.1rem, 3.6vw, 3.375rem) clamp(1.65rem, 2.7vw, 2.4rem);   /* +50% */
  align-items: stretch;
}
@media (max-width: 900px) { .grid--blog { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid--blog { grid-template-columns: 1fr; } }

/* Unboxed: floating featured image + post data, no container chrome, no inner padding */
.post-card { display: flex; flex-direction: column; background: none; border: 0; }
.post-card__link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.post-card__media { aspect-ratio: 3 / 2; background: var(--surface-sunken); overflow: hidden; margin-bottom: var(--space-sm); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
/* whole block is the link — on hover, just underline the title */
.post-card__link:hover .post-card__title,
.post-card__link:focus-visible .post-card__title { text-decoration: underline; text-underline-offset: 0.2em; }

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
}
.post-card__cat { display: inline-block; font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 0.68rem; font-weight: 600; color: var(--accent-deep); margin-bottom: 8px; }
.post-card__title {
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.32; color: var(--heading-soft); margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card__excerpt {
  font-size: var(--step--1); line-height: 1.55; color: var(--text-muted); margin: 0 0 var(--space-sm);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* no divider line, no read button — just the date */
/* date hidden for now (few posts) — remove this `display:none` to bring it back later */
.post-card__meta { margin-top: auto; padding-top: var(--space-2xs); display: none; align-items: center; }
.post-card__date { font-size: var(--step--1); color: var(--text-muted); }

/* Imageless fallback: no media, body fills the card */
.post-card--text .post-card__body { justify-content: center; min-height: 11rem; }

/* Featured lead (latest post, page 1): full-width, image beside text */
.post-card--lead { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .post-card--lead .post-card__link { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(var(--space-lg), 4vw, var(--space-2xl)); align-items: center; }
  .post-card--lead .post-card__media { aspect-ratio: auto; height: 100%; min-height: 21rem; margin-bottom: 0; }
  /* all content grouped together and vertically centred against the featured image */
  .post-card--lead .post-card__body { justify-content: center; padding: clamp(var(--space-md), 3vw, var(--space-xl)) 0; }
  .post-card--lead .post-card__title { font-size: clamp(var(--step-3), 3vw, var(--step-4)); -webkit-line-clamp: 4; }
  .post-card--lead .post-card__excerpt { font-size: var(--step-0); -webkit-line-clamp: 3; }
  .post-card--lead .post-card__meta { margin-top: var(--space-sm); }   /* keep the date with the rest, not pushed to the bottom */
}

/* --- Archive pagination ---------------------------------------------------- */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
  margin-top: clamp(var(--space-xl), 4vw, var(--space-2xl));
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-50);
}
.pager__numbers { display: flex; align-items: center; gap: 6px; margin: 0 auto; }
.pager__num, .pager__edge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-size: var(--step--1); line-height: 1;
  color: var(--heading); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* Numbered cells: sharp squares (site-wide radius is 0) */
.pager__num {
  min-width: 2.6rem; height: 2.6rem; padding: 0 0.4rem;
  border: 1px solid var(--border-50); font-weight: 600;
}
a.pager__num:hover { border-color: var(--accent); color: var(--accent-deep); }
.pager__num.current { background: var(--accent-cta); border-color: var(--accent-cta); color: var(--on-primary, #fff); }
.pager__num.dots { border-color: transparent; color: var(--text-muted); min-width: 1.4rem; }

/* Prev / Next edges */
.pager__edge {
  gap: 8px; height: 2.6rem; padding: 0 1rem;
  border: 1px solid var(--border-strong); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 0.72rem;
}
.pager__edge:hover { background: var(--heading); color: #fff; border-color: var(--heading); }
.pager__edge:active { transform: translateY(1px); }
.pager__edge:focus-visible, .pager__num:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pager__edge.is-disabled { color: var(--text-muted); border-color: var(--border-50); opacity: 0.55; cursor: default; }

.pager__status { display: none; font-size: var(--step--1); color: var(--text-muted); margin: 0 auto; }

/* Mobile: drop the number strip, lead with Prev · Page X of Y · Next */
@media (max-width: 640px) {
  .pager { gap: var(--space-sm); }
  .pager__numbers { display: none; }
  .pager__status { display: block; }
  .pager__edge span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pager__edge { padding: 0; width: 2.6rem; }
}

.post-single__head { text-align: center; max-width: 60ch; margin: 0 auto var(--space-lg); }
.post-single__cat { display: inline-block; font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 0.72rem; font-weight: 600; color: var(--accent-deep); margin-bottom: var(--space-2xs); }
.post-single__date { display: block; margin-top: var(--space-xs); font-size: var(--step--1); color: var(--text-muted); }
.post-single__media { margin-bottom: var(--space-lg); border: 1px solid var(--border-50); }
.post-single__media img { width: 100%; height: auto; display: block; }
.post-single__body img { height: auto; border-radius: var(--radius-sm); margin: var(--space-sm) 0; }

/* Pricing page cost blocks */
.cost-block { padding: var(--space-lg) 0; border-bottom: 1px solid var(--border-50); }
.cost-block h2 { font-size: var(--step-1); margin: 0 0 var(--space-2xs); }
.cost-block h3 { font-size: var(--step-0); margin: 0 0 var(--space-2xs); color: var(--heading); }
.cost-block .cost-list { margin-top: var(--space-sm); }

/* Pricing: category groups + figures */
.price-group + .price-group { margin-top: clamp(var(--space-xl), 5vw, var(--space-3xl)); }
.price-group > .section-head { margin-bottom: var(--space-md); }
.cost-list__label { color: var(--text-muted); }
.cost-list__fig { font-weight: 600; color: var(--heading); white-space: nowrap; }
.cost-list li:only-child .cost-list__fig { color: var(--accent-deep); }

/* Pricing: regulatory disclaimer */
.price-disclaimer { font-size: var(--step--1); line-height: 1.7; color: var(--text-muted); }
.price-disclaimer h2 { font-size: var(--step-0); color: var(--heading); margin: var(--space-lg) 0 var(--space-sm); }
.price-disclaimer h2:first-child { margin-top: 0; }
.price-disclaimer__list, .price-disclaimer__reqs { margin: 0 0 var(--space-md); padding-left: 1.2em; }
.price-disclaimer__list li, .price-disclaimer__reqs li { margin-bottom: var(--space-xs); }
.price-disclaimer p { margin: 0 0 var(--space-sm); }

/* ===========================================================================
   MOBILE SCALE-DOWN  — scale the whole design system on phones: tighter spacing,
   smaller headings, 2-up cards, a clean compact header. The token overrides
   cascade everywhere (every component uses --space-* / --step-*).
   =========================================================================== */
@media (max-width: 640px) {
  :root {
    --band-pad-y: 2.1rem;        /* was clamp(3.5rem,…) — section rhythm */
    --space-md:  1rem;
    --space-lg:  1.4rem;
    --space-xl:  2rem;
    --space-2xl: 2.6rem;
    --space-3xl: 3.2rem;
    --step-0: 0.875rem;          /* base body text 16px -> 14px on mobile */
    --step-1: 1.0625rem;         /* lede/subhead */
    --step-4: 1.45rem;           /* section H2 */
    --step-5: 1.85rem;           /* hero H1 */
    --gutter: 0.7rem;          /* ~11px side margins on phones (was ~17px) */
  }

  /* Headings a touch tighter */
  h1, .hero__title { line-height: 1.12; }
  h2 { line-height: 1.18; }
  .hero__lede, .section-head__sub { font-size: var(--step-0); }

  /* Cards: compress padding so two fit comfortably */
  .card__body { padding: 13px 14px 15px; gap: 7px; }
  .card__title { font-size: var(--step-0); }
  .case-card__body { padding: 7px 10px; }
  .team-card__name { font-size: var(--step-0); }
  .avatar, .avatar--round { width: 76px; height: 76px; }

  /* Hero / split sections stack with less gap */
  .hero__grid { gap: var(--space-md); }

  /* --- Compact header --- */
  /* hamburger (left) · logo (centre) · Book (right) */
  .header-row--brand .header-row__inner {
    grid-template-columns: 1fr auto 1fr; min-height: 3.4rem; gap: var(--space-sm); padding-block: 0;
  }
  .header-aux--social { display: flex; justify-self: start; }
  .header-aux--social .header-social, .header-aux__tag, .header-phone { display: none; }   /* keep only the toggle */
  .brand { justify-self: center; }
  .brand__logo { height: 26px; width: auto; }             /* smaller, aspect preserved (no squeeze) */
  .header-aux--contact { justify-self: end; }
  .header-cta.btn--sm { padding: 0.4em 0.8em; font-size: 0.74rem; }
  .header-aux--contact { gap: 8px; }
  .nav-toggle { padding: 4px; margin: 0; }
  /* Toggle moved into row 1 — collapse the now-empty nav row (drawer is off-canvas)
     to 0 in BOTH normal and condensed/scrolled states. Can't display:none it — the
     drawer (.nav) lives inside and must stay rendered. The fixed drawer adds no height. */
  .header-row--nav { border: 0; }
  .header-row--nav .header-row__inner--nav,
  .site-header.is-condensed .header-row--nav .header-row__inner--nav { min-height: 0; padding-block: 0; }
  .site-header.is-condensed .header-row--brand .header-row__inner { min-height: 3rem; }
  .site-header.is-condensed .brand__logo { height: 24px; }

  /* Smaller buttons on mobile */
  .btn { padding: 11px 20px; font-size: 0.8rem; }
  .btn--lg { padding: 13px 22px; font-size: 0.82rem; }
  .btn--sm { padding: 8px 15px; font-size: 0.7rem; }
  .hero__actions { gap: var(--space-xs); }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* Extra-small phones: a little tighter still */
@media (max-width: 380px) {
  :root { --gutter: 0.625rem; }     /* 10px side margins on small phones */
  .card__body { padding: 11px 12px 13px; }
  .case-card__line--proc { font-size: var(--step--1); }
}

/* --- 404 page ------------------------------------------------------------- */
.error-band { display: grid; align-items: center; min-height: 52vh; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.error-foot { text-align: center; margin-top: var(--space-lg); }

/* --- Video library -------------------------------------------------------- */
.video-group { margin-top: var(--space-xl); }
.video-group__title { font-size: var(--step-2); margin-bottom: var(--space-md); }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 760px) { .video-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } }
.video-card { display: block; color: inherit; text-decoration: none; }
.video-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--border-50); }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.video-card:hover .video-card__thumb img { transform: scale(1.04); }
.video-card__play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-card__play svg { width: 22px; height: 22px; color: #fff; background: color-mix(in srgb, var(--color-ink-900) 55%, transparent); border-radius: 50%; padding: 11px; box-sizing: content-box; }
.video-card__title { display: block; margin-top: 8px; font-size: var(--step--1); color: var(--heading-soft); line-height: 1.35; }
.video-card:hover .video-card__title { color: var(--accent-deep); }

/* ============================================================================
   PROCEDURE TEMPLATE  (consolidated from live + 2023, our style)
   ========================================================================= */

/* --- Gravity Forms: brand the default plugin output ----------------------- */
/* GF's "orbital/framework" theme drives every accent (the blue #204ce5) from a
   set of CSS custom properties defined on .gform-theme--framework and loaded
   AFTER this file. Re-point those properties to brand tokens (with !important so
   we beat GF's later, equal-specificity rules) and the whole form recolours. */
.gform_wrapper.gform-theme--framework,
.gform_wrapper.gform-theme--orbital,
.gform_wrapper {
  /* Quiet-luxury palette: deep PLUM is the single action colour (no pink). Plum
     is the brand heading tone (--heading-soft #63404b); the form floats over the
     pink hero, so anchoring it on plum makes it read confident, not pink-on-pink. */
  --form-plum: var(--heading-soft);                                  /* #63404b */
  --form-plum-deep: color-mix(in srgb, var(--heading-soft) 80%, #1d141a) !important;
  --form-plum-tint: color-mix(in srgb, var(--heading-soft) 13%, #fff) !important;
  --form-on-plum: #fbf7f4 !important;                                /* warm porcelain */
  --form-field-bg: color-mix(in srgb, var(--surface-sunken) 35%, #fff) !important;
  --gf-color-primary: var(--form-plum) !important;
  --gf-color-primary-rgb: 99, 64, 75 !important;
  --gf-color-primary-darker: var(--form-plum-deep) !important;
  --gf-color-primary-lighter: var(--form-plum-tint) !important;
  --gf-color-primary-contrast: var(--form-on-plum) !important;
  --gf-color-primary-contrast-rgb: 251, 247, 244 !important;
  --gf-ctrl-border-color: var(--border-strong) !important;
  --gf-ctrl-border-color-hover: var(--form-plum) !important;
  --gf-ctrl-border-color-focus: var(--form-plum) !important;
  --gf-ctrl-radius: 0 !important;
  --gf-ctrl-bg-color: var(--form-field-bg) !important;
  /* The dropzone cloud is an icon-FONT glyph coloured by its OWN variable
     (not --gf-color-primary), so it stays GF's default blue unless repointed. */
  --gf-ctrl-file-zone-icon-color: var(--form-plum) !important;
  --gf-ctrl-file-zone-icon-font-size: 1.75rem !important;
  /* GF's "foundation" layer sets the row gap to a very loose 40px; tighten it so
     the card reads as one considered unit rather than a sparse list. */
  --gf-form-gap-y: 0.45rem !important;
  margin: 0;
}
.gform_wrapper form { margin: 0; }
.gform_wrapper .gform_fields { row-gap: 0.45rem; }
.gform_wrapper .gfield { margin: 0; }
/* ── Boxed field (onefinestay/Stripe style): the LABEL sits inside the bordered
   box, just above the value; the input itself is "naked". The box owns the border
   + background and lights up on :focus-within. Still accessible — the label is a
   real, persistent <label>, not a placeholder. Scoped to text-like types; the
   checkbox + file upload keep their own treatment further down. */
.gform_wrapper .gfield--type-text,
.gform_wrapper .gfield--type-email,
.gform_wrapper .gfield--type-phone,
.gform_wrapper .gfield--type-select,
.gform_wrapper .gfield--type-textarea {
  display: flex; flex-direction: column; gap: 0;
  background: #fff;                                     /* white fill */
  border: 1px solid var(--border-strong); border-radius: 0;
  padding: 0.35rem 0.8rem;                             /* uniform vertical (top = bottom) */
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.gform_wrapper .gfield--type-text:hover, .gform_wrapper .gfield--type-email:hover,
.gform_wrapper .gfield--type-phone:hover, .gform_wrapper .gfield--type-select:hover,
.gform_wrapper .gfield--type-textarea:hover { border-color: var(--heading); }
/* focus: border thickens to plum (clean, no heavy ring) */
.gform_wrapper .gfield--type-text:focus-within, .gform_wrapper .gfield--type-email:focus-within,
.gform_wrapper .gfield--type-phone:focus-within, .gform_wrapper .gfield--type-select:focus-within,
.gform_wrapper .gfield--type-textarea:focus-within {
  border-color: var(--form-plum); box-shadow: inset 0 0 0 1px var(--form-plum);
}
/* label inside the box — small, bold, all-caps; plum * marks required */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
  font-family: var(--font-sans); font-size: 12px !important; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em !important; line-height: 1.15;
  color: var(--heading); margin: 0 0 4px !important;
  transition: opacity var(--dur-fast) var(--ease);
}
@media (max-width: 600px) { .gform_wrapper .gfield_label, .gform_wrapper legend.gfield_label { font-size: 11px !important; } }
/* label recedes (dims) while the field is active */
.gform_wrapper .gfield:focus-within > .gfield_label { opacity: 0.6; }
.gform_wrapper .gfield_required { display: none; }     /* hide GF's "(Required)" text */
.gform_wrapper .gfield_contains_required > .gfield_label::after { content: "*"; color: var(--form-plum); margin-left: -2px; letter-spacing: 0; }
.gform_wrapper .ginput_container { margin-top: 0; }
/* the controls are "naked" inside the box — no border/bg/padding of their own */
.gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--color-ink-900);   /* typed text: relaxed weight (matches the "goals" textarea), 16px keeps iOS from zooming */
  background: transparent !important; border: 0 !important; border-radius: 0;
  padding: 0 !important; line-height: 1.3 !important;
  block-size: 1.25rem !important; min-block-size: 0 !important;   /* inputs + select identical height */
  outline: none !important; box-shadow: none !important;
}
/* the select sits in the box like every other field (label above, control below) so
   the NATIVE dropdown anchors to the control — not the top of the box. The whole box
   still opens it (showPicker() JS on box click). */
.gform_wrapper .gfield--type-select { position: relative; }
.gform_wrapper select {
  cursor: pointer; -webkit-appearance: none; appearance: none;
  font-size: 16px !important; font-weight: 400 !important;   /* match the text inputs (GF orbital forces its own size) */
  background-image: none !important; padding-right: 1.4rem !important;   /* room for the chevron */
}
/* uniform height for all single-line boxes */
.gform_wrapper .gfield--type-text,
.gform_wrapper .gfield--type-email,
.gform_wrapper .gfield--type-phone,
.gform_wrapper .gfield--type-select { min-height: 2.65rem; }
/* chevron pinned to the box's right edge, vertically centred */
.gform_wrapper .gfield--type-select::after {
  content: ""; position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 1rem; height: 1rem; background: var(--icon-chevron) center / contain no-repeat; pointer-events: none;
}
.gform_wrapper textarea { block-size: 3.7rem !important; min-block-size: 3.7rem !important; resize: vertical; }
/* Page + modal form versions breathe more — roomier field boxes (the compact
   menu/inline contexts keep the tight 0.35rem above). */
.enquiry-band .gform_wrapper .gfield--type-text,
.enquiry-band .gform_wrapper .gfield--type-email,
.enquiry-band .gform_wrapper .gfield--type-phone,
.enquiry-band .gform_wrapper .gfield--type-select,
.enquiry-band .gform_wrapper .gfield--type-textarea,
.enquiry-stack .gform_wrapper .gfield--type-text,
.enquiry-stack .gform_wrapper .gfield--type-email,
.enquiry-stack .gform_wrapper .gfield--type-phone,
.enquiry-stack .gform_wrapper .gfield--type-select,
.enquiry-stack .gform_wrapper .gfield--type-textarea { padding: 0.7rem 0.95rem; }
.enquiry-band .gform_wrapper .gfield--type-text,
.enquiry-band .gform_wrapper .gfield--type-email,
.enquiry-band .gform_wrapper .gfield--type-phone,
.enquiry-band .gform_wrapper .gfield--type-select,
.enquiry-stack .gform_wrapper .gfield--type-text,
.enquiry-stack .gform_wrapper .gfield--type-email,
.enquiry-stack .gform_wrapper .gfield--type-phone,
.enquiry-stack .gform_wrapper .gfield--type-select { min-height: 3.15rem; }
/* light placeholder text (force past the GF orbital theme) */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder { color: color-mix(in srgb, var(--text-muted) 45%, #fff) !important; font-weight: 400; opacity: 1 !important; }
/* the select's placeholder is an <option>, not ::placeholder — so light it only while
   that option is showing; a real choice reverts to solid black. */
.gform_wrapper select:has(option.gf_placeholder:checked) { color: color-mix(in srgb, var(--text-muted) 45%, #fff); font-weight: 400; }

/* ── Phone country picker — GP Advanced Phone Field (intl-tel-input) ─────────────
   Match the site's filter-bar dropdowns (.gallery-combo): a flat panel with a crisp
   border + thin dark top edge (no radius/shadow) and rows that highlight on --surface-
   sunken. The widget builds .iti > .iti__selected-country (flag button) + .iti__dropdown-
   content (the country list). */
/* The open dropdown is portaled to a body-level .iti--container, so scope there (not the
   form). Flat panel = crisp border + 2px dark top edge, no radius/shadow (like the combos). */
.iti--container .iti__dropdown-content {
  background: var(--surface) !important; border: 1px solid var(--border-strong) !important; border-top: 2px solid var(--heading) !important;
  border-radius: 0 !important; box-shadow: none !important; overflow: hidden;
}
.iti--container .iti__search-input {
  width: 100%; box-sizing: border-box; padding: 8px 12px !important; border: 0 !important; border-bottom: 1px solid var(--border) !important;
  font-family: var(--font-body); font-size: var(--step--1); color: var(--text);
}
.iti--container .iti__search-input:focus-visible { outline: none; }
.iti--container .iti__country-list { margin: 0; padding: 4px; max-height: 290px; }
.iti--container .iti__country {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px !important; margin: 0;
  font-family: var(--font-body); font-size: var(--step--1); color: var(--heading);
}
.iti--container .iti__country.iti__highlight,
.iti--container .iti__country:hover { background: var(--surface-sunken) !important; }
.iti--container .iti__country-name { flex: 1 1 auto; }
.iti--container .iti__dial-code { color: var(--text-muted) !important; font-size: 0.85em; font-variant-numeric: tabular-nums; }
.iti--container .iti__flag { flex: none; }
/* closed flag button — clean inside the input */
.iti .iti__selected-country { background: transparent; }
.iti .iti__selected-country:hover { background: rgba(0, 0, 0, .03); }
/* the input must clear the ~48px flag button (out-specify GF's input padding:0 reset) */
.gform_wrapper .ginput_container_phone .iti .iti__tel-input:not([type="submit"]):not([type="button"]) { padding-left: 52px !important; }
.gform_wrapper .gfield_description, .gform_wrapper .gform_fileupload_rules {
  font-size: var(--step--2); color: var(--text-muted); margin-top: 0.35rem;
}
/* File upload — a bordered box like the textarea (no label). One row: [cloud icon ·
   "Drop files here" text] on the left, "Select files" button on the right; the
   accepted-types rules centred below. */
.gform_wrapper .gfield--type-fileupload > .gfield_label { display: none; }
/* sit flush against the textarea above — pull up over the row-gap and overlap the
   1px borders so the two boxes read as one stacked unit (no seam, no gap) */
.gform_wrapper .gfield--type-fileupload { margin-top: calc(-0.45rem - 1px); }
.gform_wrapper .gform_drop_area {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 0.5rem;
  border: 1px solid var(--border-strong) !important; border-radius: 0;
  background: #fff !important; padding: 0 0.8rem !important;   /* fixed 36px row — flex-centred, not padding-driven */
  height: 2.25rem !important; min-height: 2.25rem !important;
  text-align: left; margin-bottom: 0;
  cursor: pointer;   /* the whole row is the trigger (JS clicks the hidden file input) */
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.gform_wrapper .gform_drop_area:hover { border-color: var(--form-plum) !important; background: var(--surface-sunken) !important; }
.gform_wrapper .gform_drop_area:hover .gform_button_select_files { color: var(--form-plum) !important; }
.gform_wrapper .gform_drop_area::before { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; height: auto !important; margin: 0 !important; flex: none; font-size: 0.95rem !important; line-height: 1 !important; }
.gform_wrapper .gform_drop_instructions { flex: none; margin: 0 !important; font-size: var(--step--1); color: var(--text-muted); white-space: nowrap; line-height: 1.1; }
/* "Select files" is a text LINK on the right of the row (the whole row is the button) */
.gform_wrapper .gform_drop_area .gform_button_select_files,
.gform_wrapper .gform_button_select_files {
  flex: 0 0 auto; margin: 0 0 0 auto !important;
  background: transparent !important; color: var(--form-plum) !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; font-family: var(--font-sans);
  font-size: var(--step--1) !important; font-weight: 600 !important; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
  pointer-events: none;   /* clicks fall through to the row handler (no double dialog) */
  transition: color var(--dur-fast) var(--ease);
}
/* accepted file types — centred, full width */
.gform_wrapper .gform_fileupload_rules { display: block; width: 100%; text-align: center !important; margin-top: 0.4rem; }
/* Submit — full-width primary BLACK button; hover fills pink. The orbital theme +
   the customize-submit plugin add .btn-get-answers and size the button to content,
   so target that class and force the width/display past their rules. */
.gform_wrapper .gform_footer { margin: var(--space-sm) 0 0; padding: 0; }
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper input.gform_button[type=submit],
.gform_wrapper .gform_footer .btn-get-answers {
  width: 100% !important; display: block !important; margin: 0 !important; cursor: pointer; box-sizing: border-box;
  background: var(--btn-secondary) !important; color: var(--on-secondary) !important;
  border: 1.5px solid transparent !important; border-radius: 0 !important;   /* same box model as the outline button */
  padding: 0.95rem 1.5rem !important; font-family: var(--font-label); font-weight: 700 !important; line-height: 1.2;
  font-size: var(--step--1) !important; letter-spacing: var(--tracking-caps) !important; text-transform: uppercase;
  transition: background var(--dur) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper input.gform_button[type=submit]:hover,
.gform_wrapper .gform_footer .btn-get-answers:hover { background: var(--btn-primary) !important; color: var(--color-ink-900) !important; transform: translateY(-1px); }
.gform_wrapper .gform_footer input[type=submit]:active,
.gform_wrapper .gform_footer .btn-get-answers:active { transform: translateY(0); }
.gform_wrapper .gform_footer input[type=submit]:focus-visible,
.gform_wrapper .gform_footer .btn-get-answers:focus-visible { outline: 3px solid var(--btn-primary); outline-offset: 2px; }
/* Submitting state — GF (ajax="true") injects <img.gform_ajax_spinner> into the footer
   while processing. Hide that default spinner and, via :has(), swap the button's label for
   an animated spinner inside the button. Reverts automatically when GF removes the spinner
   (confirmation shown, or the form re-renders with validation errors). */
.gform_wrapper .gform_ajax_spinner { display: none !important; }
.gform_wrapper .gform_footer:has(.gform_ajax_spinner) input[type=submit],
.gform_wrapper .gform_footer:has(.gform_ajax_spinner) .btn-get-answers {
  color: transparent !important; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23ffffff' stroke-opacity='.3' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: 1.35rem 1.35rem !important;
}
/* Newsletter checkbox — plum tick, aligned with its label */
.gform_wrapper .gfield_checkbox input[type=checkbox],
.gform_wrapper .gchoice input[type=checkbox] { accent-color: var(--form-plum); width: 1.05rem; height: 1.05rem; }
.gform_wrapper .gfield_checkbox label, .gform_wrapper .gchoice label { font-size: var(--step--1); color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.gform_wrapper .gform_validation_errors { border-radius: 0; padding-top: 4px !important; padding-bottom: 4px !important; }
.gform_wrapper .gform_validation_errors > h2 { padding: 0 !important; margin: 0 !important; gap: 0.4rem !important; line-height: 1.2 !important; align-items: center !important; }
.gform_wrapper .gform_validation_errors > h2 .gform-icon { margin: 0 !important; }
/* Validation — shown IN THE LABEL (red * + "required"), never as a message below,
   so the field keeps its exact height (no jump). */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message { display: none !important; }
/* red box border on the errored field */
.gform_wrapper .gfield_error.gfield--type-text,
.gform_wrapper .gfield_error.gfield--type-email,
.gform_wrapper .gfield_error.gfield--type-phone,
.gform_wrapper .gfield_error.gfield--type-select,
.gform_wrapper .gfield_error.gfield--type-textarea { border-color: #d83a3a !important; }
.gform_wrapper .gfield_error .gform_drop_area { border-color: #d83a3a !important; }
/* the label's * turns red and gains "required" (uppercased to match the label) */
.gform_wrapper .gfield_error.gfield_contains_required > .gfield_label::after { content: "* required"; color: #d83a3a; font-size: 10px; letter-spacing: .02em; margin-left: 5px; vertical-align: baseline; }

/* --- Enquiry card: notice · surgeon · footer (blocks around the GF form) --- */
/* Complimentary-consultation notice — a compact, collapsible <details> feature.
   Closed by default (one line); expands to the conditions. */
/* soft, layered cream + peach/pink gradient (no border/shadow) */
/* complimentary notice = a compact button in the header that pops a tooltip with the detail */
.enquiry-notice { position: relative; margin: 0; border: 0; box-shadow: none; background: none; }
.enquiry-notice__summary {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none; white-space: nowrap;
  padding: 0.4rem 0.7rem; border: 1px solid var(--border-strong); border-radius: 0;
  font-size: var(--step--1); font-weight: 600; color: var(--heading);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.enquiry-notice__summary:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.enquiry-notice__summary::-webkit-details-marker { display: none; }
.enquiry-notice__ico { flex: none; color: var(--form-plum); }
.enquiry-notice__chev { flex: none; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.enquiry-notice[open] .enquiry-notice__chev { transform: rotate(180deg); }
/* the detail floats as a tooltip/popover (not an accordion push) */
.enquiry-notice__body {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: min(320px, 80vw);
  padding: 0.85rem 0.95rem; border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  background:
    radial-gradient(140% 120% at 10% 0%, rgba(244,164,122,.18), transparent 56%),
    radial-gradient(150% 130% at 100% 105%, rgba(229,138,160,.16), transparent 56%),
    linear-gradient(135deg, #fcf6f2, var(--surface-sunken));
}
.enquiry-notice__body p { margin: 0 0 0.4rem; font-size: 12px; line-height: 1.35; color: var(--text); }
.enquiry-notice__body p:last-child { margin-bottom: 0; }
.enquiry-notice__body .u { text-decoration: underline; text-underline-offset: 0.2em; }
/* Surgeon — avatar · name · meta · AHPRA reg (compact) */
.enquiry-surgeon { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.enquiry-surgeon__avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.enquiry-surgeon__name { font-weight: 700; color: var(--heading); font-size: var(--step-0); line-height: 1.2; }
.enquiry-surgeon__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em; margin-top: 2px; font-size: var(--step--1); color: var(--text-muted); }
.enquiry-surgeon__meta .sep { color: var(--border-strong); }
.enquiry-surgeon__reg { color: var(--form-plum); text-decoration: underline; text-underline-offset: 0.2em; font-variant-numeric: tabular-nums; }
/* Header row (gallery-modal style) — title (sans) left, complimentary notice button right.
   Kept on a single row: nowrap, the title may shrink, the notice pill stays compact. */
.enquiry-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: nowrap;
  margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-50); }
.enquiry-card__title { font-family: var(--font-body); font-weight: 600; font-size: var(--step-1); line-height: 1.15; color: var(--heading); margin: 0; min-width: 0; }
.enquiry-card__head .enquiry-notice { flex: none; }
.enquiry-card__head .enquiry-notice__summary { padding: 0.3rem 0.55rem; font-size: var(--step--2); gap: 0.3rem; }
/* Footer — private/confidential reassurance (inside card) */
.enquiry-foot { margin-top: var(--space-sm); }
.enquiry-foot__private { display: flex; align-items: center; justify-content: center; gap: 0.45rem; font-size: var(--step--1); color: var(--text-muted); }
.enquiry-foot__private svg { flex: none; color: #2f9e5f; }
.enquiry-foot__phone svg { flex: none; color: var(--form-plum); }

/* --- Hero trust list ------------------------------------------------------ */
.hero__trust { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: 0.4rem; }
.hero__trust li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--heading); }
.hero__trust svg { color: var(--accent); flex: none; }

/* Image-icon badges with a title + sub-line (live-site "header_content_list") */
.hero__trust-ico { width: 30px; height: 30px; object-fit: contain; flex: none; filter: brightness(0); opacity: 0.82; }
.hero__trust-item { align-items: center; gap: var(--space-sm); }
.hero__trust-pair { display: flex; flex-direction: column; line-height: 1.3; }
.hero__trust-pair strong { color: var(--heading); font-weight: 700; }
.hero__trust-desc { color: var(--text-muted); font-size: var(--step--1); }
.why-us-links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); }
/* Leaf hero shows the badges two-up and grouped on the left, like the live site */
.proc-layout__hero .hero__trust { grid-template-columns: repeat(2, max-content); justify-content: start; gap: 0.4rem clamp(var(--space-md), 3vw, var(--space-xl)); margin-top: var(--space-md); }
@media (max-width: 560px) { .proc-layout__hero .hero__trust { grid-template-columns: max-content; } }
/* Match the checkmark facts to the hero lede (18px desktop / 16px mobile) — same size as
   the copy above, just compact. Icon scales with the text. */
.hero--procedure .hero__trust li, .proc-layout__hero .hero__trust li { font-size: var(--step-1); gap: 0.55rem; }
.hero--procedure .hero__trust svg, .proc-layout__hero .hero__trust svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .hero--procedure .hero__trust li, .proc-layout__hero .hero__trust li { font-size: var(--step-0); gap: 0.5rem; }
  .hero--procedure .hero__trust svg, .proc-layout__hero .hero__trust svg { width: 16px; height: 16px; }
  .proc-layout__hero .hero__trust { gap: 0.35rem var(--space-md); margin-top: var(--space-sm); }
}

/* --- Sticky anchor sub-nav ------------------------------------------------ */
.proc-nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);                       /* same cream as the page body — one continuous surface */
  border-bottom: 1px solid var(--border);
}
.proc-nav__inner { display: flex; gap: clamp(1rem, 3vw, 2.25rem); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.proc-nav__inner::-webkit-scrollbar { display: none; }
.proc-nav a {
  flex: none; padding: 0.65rem 0; font-size: var(--step-0); font-weight: 600;
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.proc-nav a:hover, .proc-nav a.is-active { color: var(--heading); border-bottom-color: var(--accent); }

/* --- Sub-procedure cards -------------------------------------------------- */
.proc-cards { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: var(--space-xl); }
.proc-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.proc-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 14px 30px -20px rgba(99,64,75,.5); }
/* Media: before/after thumbnail, or the brand mark on a blush field as fallback */
.proc-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-blush); }
.proc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.proc-card:hover .proc-card__media img { transform: scale(1.05); }
.proc-card__mark { display: grid; place-items: center; width: 100%; height: 100%; }
.proc-card__logo { height: 26px; width: auto; color: var(--heading-soft); }
.proc-card__body { display: flex; flex-direction: column; gap: 0.45rem; padding: var(--space-md) var(--space-lg) var(--space-lg); flex: 1; }
.proc-card__title { font-family: var(--font-display); font-size: var(--step-2); color: var(--heading); line-height: 1.15; }
.proc-card__desc { font-size: var(--step--1); color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proc-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--step--1); font-weight: 600; color: var(--accent-deep); }
.proc-card:hover .proc-card__more svg { transform: translateX(3px); }
.proc-card__more svg { transition: transform var(--dur-fast) var(--ease); }

/* --- Before/after album cover card (single-album, cc2x-style) ------------- */
.result-album-wrap { margin-top: var(--space-md); }
.result-album-wrap--center { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-md); }   /* card, then disclaimer in its OWN row below — never beside it */
.result-album {
  display: flex; flex-direction: column; overflow: hidden; max-width: 420px; position: relative;
  background: var(--color-white); border: 1px solid var(--border-50); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) var(--ease);
}
.result-album:hover { border-color: var(--border); }   /* match .card / team / procedure cards: just darken the border, no lift/shadow */
/* 2026-08-13 (Jesus): the photo runs edge to edge, the way the reviewed version
   already showed it — no mat, no padding, and no stacked paper frames behind it.
   The card KEEPS its body and its "View photos" foot; only the image treatment
   changed. The frame follows the cover's real ratio (set inline per card), so a
   contained image fills it exactly and nothing is ever cropped.
   Was: a square mat with a clamp(26px,12%,56px) pad and the .case-card__stack
   sheets peeking out the top-left. */
.result-album__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; padding: 0; }
.result-album .case-card__stack { display: none; }
.result-album__media > img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; }
.result-album__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 20px 20px 16px; }   /* left edge = .card__foot (20px) so the title aligns with "View photos" */
/* title matches the homepage .card__title (sans, step-1) */
.result-album__title { font-family: var(--font-body); font-size: var(--step-1); font-weight: 500; color: var(--heading); line-height: 1.3; }
/* Whole card clickable: the photo sits at z2 (for the stack), so lift the .card__link
   overlay ABOVE it (z3) — otherwise clicks on the image fall through to nothing. The foot
   stays above the overlay (z4) so it remains individually interactive. */
.result-album .card__link::after { z-index: 3; }
.result-album .card__foot { position: relative; z-index: 4; }
.result-album:hover .card__foot { color: var(--heading); background: color-mix(in srgb, var(--heading) 4%, transparent); }
.result-album:hover .card__foot svg { transform: translateX(3px); color: var(--accent); }
.result-album__more svg { transition: transform var(--dur-fast) var(--ease); }

/* --- Essential information: editorial column + sticky CTA rail ------------ */
.procedure-body { display: grid; gap: clamp(var(--space-lg), 4vw, var(--space-2xl)); grid-template-columns: minmax(0,1fr) 320px; align-items: start; }
@media (max-width: 900px) { .procedure-body { grid-template-columns: 1fr; } }
.procedure-body__main { max-width: 68ch; }
.procedure-lead { font-size: var(--step-1); line-height: 1.6; color: var(--heading); margin-bottom: var(--space-lg); }
.procedure-section { margin-top: var(--space-xl); }
.procedure-section h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.procedure-section p { color: var(--text); line-height: 1.7; }

.rail-cta {
  position: sticky; top: calc(3.5rem + var(--space-md));
  background: var(--bg-blush); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-lg); text-align: center;
}
.rail-cta__title { font-size: var(--step-2); margin: 0 0 0.5rem; }
.rail-cta__copy { font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; margin: 0 0 var(--space-md); }
.rail-cta__btn { width: 100%; }
.rail-cta__call { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-sm); font-weight: 600; color: var(--heading); }
@media (max-width: 900px) { .rail-cta { position: static; } }

/* --- Stats / trust band --------------------------------------------------- */
.stat-band { background: var(--heading-soft); }
.stat-band__grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(4, 1fr); text-align: center; }
@media (max-width: 720px) { .stat-band__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } }
.stat { display: flex; flex-direction: column; gap: 0.35rem; }
.stat__num { font-family: var(--font-display); font-size: var(--step-3); color: var(--color-white); line-height: 1; }
.stat__label { font-size: var(--step--1); color: color-mix(in srgb, var(--color-white) 80%, transparent); line-height: 1.4; }

/* eyebrow on dark heroes/bands */
.eyebrow--on-dark { color: color-mix(in srgb, var(--accent) 70%, white); }

/* ============================================================================
   PROCEDURE — 2-column revamp (Option A): title leads left, form sticky right
   ========================================================================= */
.procedure-shell { position: relative; padding-top: 0; padding-bottom: clamp(var(--space-xl), 6vw, var(--space-3xl)); }

/* Full-bleed pink panel behind row 1 (the hero). Sized to the hero row only, it bleeds
   edge-to-edge so the hero reads "full-width" while the form sits in the right column,
   starting at the top — naturally aligned with the hero content (no offsets). */
.procedure--2col .proc-layout { position: relative; }
.procedure--2col .proc-layout::before {
  content: ""; grid-row: 1; grid-column: 1 / -1; align-self: stretch; pointer-events: none;
  /* Soft cream→peach/pink MESH (layered radial gradients over a warm cream base). Subtle,
     not dramatic — peach top-left, pink top-right, warm glow bottom-right, cream bottom-left. */
  /* Light blush base; pink carries the mood, a single soft orange/peach accent used
     sparingly. Kept airy — low alphas so it stays light, not saturated. */
  background-color: #fefafa;
  background-image:
    radial-gradient(120% 120% at 0% 0%,   rgba(244, 178, 146, .08), transparent 55%),   /* peach — barely there, top-left */
    radial-gradient(120% 130% at 100% 4%, rgba(236, 158, 186, .16), transparent 58%),   /* pink — top-right (lead) */
    radial-gradient(150% 140% at 94% 100%, rgba(240, 168, 196, .12), transparent 60%),  /* pink — bottom-right */
    radial-gradient(130% 130% at 2% 100%, rgba(252, 226, 228, .35), transparent 62%);   /* pale pink — bottom-left */
  width: 100vw; margin-left: calc(50% - 50vw);   /* full-bleed; wraps row 1 exactly */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);   /* hairline under the hero */
}
/* The form aligns with the hero content (matches the hero's top padding) and sticks. */
.procedure--2col .proc-layout__rail { align-self: stretch; padding-top: clamp(var(--space-lg), 5vw, var(--space-2xl)); }

/* The grid: hero top-left, form right (spans both rows, sticky), content bottom-left.
   row-gap 0 → the tabs row sits flush under the hero (mesh ends exactly at row 1). */
.proc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  grid-template-areas: "hero rail" "main rail";
  column-gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  row-gap: 0;
  align-items: start;
}
/* Hero column: equal top/bottom padding (geometrically centred) + a min-height so a short
   title can't collapse the band; content vertically centres in any spare height. */
.proc-layout__hero {
  grid-area: hero;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(var(--space-lg), 5vw, var(--space-2xl));
  min-height: 15rem;
}
.proc-layout__main { grid-area: main; max-width: 68ch; }
.proc-layout__rail { grid-area: rail; }
@media (max-width: 980px) {
  .proc-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "rail" "main"; row-gap: var(--space-lg); }
  .proc-layout__main { max-width: none; }
  .proc-layout__hero { min-height: 0; padding-block: clamp(var(--space-lg), 8vw, var(--space-xl)); }
  .procedure--2col .proc-layout__rail { padding-top: 0; }
}

/* Hero block (leads the left column) */
.proc-hero__title { font-size: clamp(var(--step-4), 5.5vw, var(--step-5)); line-height: 1.04; letter-spacing: -0.01em; }
.proc-hero__lede { font-size: var(--step-1); color: var(--text-muted); max-width: 42ch; margin-top: var(--space-sm); line-height: 1.55; }
/* Per-city procedure note ("Available at our Gold Coast clinic, …") */
.proc-clinic-note { display: inline-flex; align-items: center; gap: 7px; margin: var(--space-sm) 0 0; font-size: var(--step--1); color: var(--text-muted); }
.proc-clinic-note svg { color: var(--heading-soft); flex: none; }
.proc-layout__hero .hero__trust { margin-top: var(--space-md); }

/* Sticky form rail — the whole stack (card + secondary CTA + phone) sticks together */
.proc-layout__rail .enquiry-stack { position: sticky; top: calc(var(--header-h, 5.5rem) + var(--space-sm)); }
@media (max-width: 980px) { .proc-layout__rail .enquiry-stack { position: static; margin-top: 0; } }

/* Content blocks — generous, minimal spacing */
.proc-block + .proc-block { margin-top: clamp(var(--space-2xl), 7vw, var(--space-3xl)); }
.proc-block > .section-head { margin-bottom: var(--space-lg); }
.proc-block__more { margin-top: var(--space-lg); }
.proc-block__more .btn svg { transition: transform var(--dur-fast) var(--ease); }
.proc-block__more .btn:hover svg { transform: translateX(3px); }
.procedure-shell .procedure-lead { font-size: var(--step-1); line-height: 1.65; color: var(--heading); margin-bottom: var(--space-lg); }
.procedure-shell .procedure-section { margin-top: var(--space-xl); }
.procedure-shell .procedure-section h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.procedure-shell .procedure-section p { color: var(--text); line-height: 1.75; }

/* The before/after grid sits inside the narrower content column — force 2-up */
.proc-block .grid--gallery { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-md); }
@media (max-width: 540px) { .proc-block .grid--gallery { grid-template-columns: 1fr !important; } }
.results-note { font-size: var(--step--2); color: var(--text-muted); line-height: 1.5; margin-top: var(--space-md); max-width: 62ch; }

/* Hub (parent) — full-width card grid + centered results block */
.proc-cards--wide { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.results-note--center { margin-left: auto; margin-right: auto; text-align: center; }
.proc-block__more--center { text-align: center; }

/* --- Imported ACF content: video embed + rich prose --------------------- */
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--border); margin-top: var(--space-lg); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* About: social interact strip */
.social-strip__label { text-align: center; font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin: var(--space-xl) 0 var(--space-sm); }
.social-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.social-link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--surface); border: 1px solid var(--border-50); color: inherit; text-decoration: none; transition: border-color var(--dur-fast) var(--ease); }
.social-link:hover { border-color: var(--border); }
.social-link__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; color: var(--accent-deep); background: var(--bg-blush); }
.social-link__meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.social-link__name { font-weight: 600; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-link__num { font-size: var(--step--1); color: var(--text-muted); }
@media (max-width: 560px) { .social-strip { grid-template-columns: 1fr; } }

/* About: Sydney founding story */
.founding { display: grid; grid-template-columns: auto 1fr; gap: clamp(var(--space-md), 4vw, var(--space-2xl)); align-items: center; padding: clamp(var(--space-lg), 4vw, var(--space-2xl)); border: 1px solid var(--border-50); background: var(--surface); }
.founding__year { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1; color: var(--accent); }
.founding__body h2 { margin: 4px 0 8px; }
@media (max-width: 560px) { .founding { grid-template-columns: 1fr; gap: var(--space-sm); text-align: left; } }

/* Contact: enquiry channels */
.contact-details__eyebrow { font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 0.72rem; font-weight: 600; color: var(--accent-deep); margin: 0 0 var(--space-2xs); }
.enquiry-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.channel-card { padding: clamp(var(--space-md), 2.4vw, var(--space-lg)); background: var(--surface); border: 1px solid var(--border-50); }
.channel-card__title { font-size: var(--step-0); color: var(--heading); margin: 0 0 var(--space-2xs); }
.channel-card__desc { font-size: var(--step--1); color: var(--text-muted); margin: 0 0 var(--space-sm); }
.channel-card__ctas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.channel-card__ctas a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-deep); text-decoration: none; font-weight: 600; }
.channel-card__ctas a:hover { color: var(--accent-cta-hover); }
.channel-card__ctas svg { flex: none; }
@media (max-width: 760px) { .enquiry-channels { grid-template-columns: 1fr; } }

/* Contact: TGA compliance fine print */
.compliance-note { font-size: var(--step--1); line-height: 1.6; color: var(--text-muted); text-align: center; margin: 0; padding: var(--space-md) 0; border-top: 1px solid var(--border-50); }
/* Shared content-body typography (blog, team bios, About, procedure prose) */
.prose, .prose--rich { color: var(--text); line-height: 1.7; }
.prose--rich { font-size: var(--step-0); }
@media (max-width: 640px) { .prose--rich { font-size: var(--step-1); } }   /* a step bigger on mobile for readability */
.prose--center { text-align: center; margin-inline: auto; max-width: 60ch; }
.prose > :first-child, .prose--rich > :first-child { margin-top: 0; }
/* In-content headings use the SANS face (the serif display is reserved for the page H1) —
   a clearer, faster read. Compact top margins keep each heading tight to its copy. */
.prose h2, .prose--rich h2 { font-family: var(--font-body); font-size: var(--step-2); color: var(--heading); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 1.9rem 0 0.5rem; }
.prose h3, .prose--rich h3 { font-family: var(--font-body); font-size: var(--step-1); color: var(--heading); font-weight: 600; line-height: 1.3; margin: 1.5rem 0 0.4rem; }
.prose h4, .prose--rich h4, .prose h5, .prose--rich h5 { font-family: var(--font-body); font-size: var(--step-0); color: var(--heading-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin: 1.25rem 0 0.35rem; }
.prose h2 + p, .prose h3 + p, .prose--rich h2 + p, .prose--rich h3 + p,
.prose h2 + ul, .prose--rich h2 + ul { margin-top: 0; }   /* no double gap after a heading */
.prose p, .prose--rich p { margin: 0 0 0.9rem; max-width: 68ch; }
/* prose--wide: drop the 68ch reading cap so copy fills the full container width (About) */
.prose--wide p, .prose--wide ul, .prose--wide ol { max-width: none; }
.prose strong, .prose--rich strong { color: var(--heading); font-weight: 700; }
/* bullet list — pink dot, compact rows */
.prose ul, .prose--rich ul { list-style: none; margin: 0 0 0.95rem; padding-left: 0; max-width: 68ch; }   /* same measure as paragraphs */
.prose ul li, .prose--rich ul li { position: relative; padding-left: 1.6em; margin-bottom: 0.3rem; line-height: 1.6; }
/* consolidated bullet: one short accent line (not a dot), with a clear gap to the text */
.prose ul li::before, .prose--rich ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.66em; height: 2px; border-radius: 1px; background: var(--accent-deep); }
/* numbered list — accent markers */
.prose ol, .prose--rich ol { margin: 0 0 0.95rem; padding-left: 1.35rem; max-width: 68ch; }   /* same measure as paragraphs */
.prose ol li, .prose--rich ol li { margin-bottom: 0.3rem; line-height: 1.6; padding-left: 0.25rem; }
.prose ol li::marker, .prose--rich ol li::marker { color: var(--accent-deep); font-weight: 700; }
.prose a, .prose--rich a, .faq__a a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.prose a:hover, .prose--rich a:hover, .faq__a a:hover { color: var(--accent-cta-hover); }
.prose img, .prose--rich img { max-width: 100%; display: block; border-radius: var(--radius-md); margin: var(--space-md) 0; height: auto; }
/* Every embedded media in post content shares ONE vertical rhythm (top + bottom) —
   images, videos, tweets, IG/FB and any oEmbed wrapper — so nothing crowds the text. */
.prose :is(figure, .video-embed, .embed, iframe, video, .wp-block-embed, .wp-block-image, .wp-block-video, .twitter-tweet, .instagram-media, .fb-post),
.prose--rich :is(figure, .video-embed, .embed, iframe, video, .wp-block-embed, .wp-block-image, .wp-block-video, .twitter-tweet, .instagram-media, .fb-post) {
  margin-block: var(--space-md) !important;   /* beats .video-embed's standalone margin-top */
}
.prose figure > :is(img, iframe, video), .prose--rich figure > :is(img, iframe, video) { margin-block: 0; }   /* the figure owns the spacing */
.prose hr, .prose--rich hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-lg) 0; }
/* quote / callout — left accent bar on a soft fill */
.prose blockquote, .prose--rich blockquote { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); background: var(--surface-sunken); border-left: 3px solid var(--accent); color: var(--heading-soft); }
.prose blockquote p:last-child, .prose--rich blockquote p:last-child { margin-bottom: 0; }

/* Content "chapters" — each section divided by a hairline rule, compact even rhythm */
/* equal space above & below each divider so the line sits centred between two chapters */
.proc-layout__main > .proc-block { margin-top: clamp(var(--space-lg), 3.5vw, var(--space-xl)); padding-top: clamp(var(--space-lg), 3.5vw, var(--space-xl)); border-top: 1px solid var(--border); }
/* 2026-08-13 (Jesus): the results block opens right under the in-page tab nav,
   so the pair above it — margin plus padding, 94px between the tabs and the
   heading — reads as a hole rather than as separation. The border that the
   padding was holding away from the text resolves to 0 here, so it was buying
   nothing. Tightened to a single gap. The reviewed version already dropped the
   padding for this same reason on 2026-07-31; this brings both into line and
   takes the margin down with it. Other sections keep the wider rhythm. */
.proc-layout__main > section#results.proc-block { margin-top: clamp(var(--space-md), 2.5vw, var(--space-lg)); padding-top: 0; }
.proc-layout__main > .proc-block:first-child,
.proc-layout__main > .proc-nav + .proc-block { padding-top: var(--space-lg); border-top: 0; }
/* 2026-09-16 (Jesus): the same hole showed wherever the first section under the
   tabs is not Results. City pages and procedures without a results gallery open
   with "The procedure" (#information), which kept the full margin plus padding
   (90px on desktop). Whichever section opens under the tabs now gets the single
   gap the results block has, so every procedure page starts the same way. */
.proc-layout__main > .proc-nav + .proc-block { margin-top: clamp(var(--space-md), 2.5vw, var(--space-lg)); padding-top: 0; }

/* Inline (in-column) variant of the anchor nav for the 2-col leaf layout.
   Pins flush below the sticky site header via the JS-published --header-h. */
.proc-nav--inline { top: var(--header-h, 6rem); margin-bottom: var(--space-sm); }
.proc-nav--inline .proc-nav__inner { gap: clamp(0.9rem, 2.5vw, 1.8rem); }
/* anchor jumps land below the sticky header + tabs nav */
.proc-layout__main > .proc-block, #locations { scroll-margin-top: calc(var(--header-h, 6rem) + 3.5rem); }
.proc-layout__main .section-head { margin-bottom: var(--space-md); }

/* Full-width variant of the anchor nav on hub/category pages (old-site placement) */
.proc-nav--full { top: var(--header-h, 6rem); }
.proc-nav--full .proc-nav__inner { justify-content: center; }
.procedure--hub > section[id], .procedure--hub > div[id] { scroll-margin-top: calc(var(--header-h, 6rem) + 3.5rem); }
/* Chapter titles also use the sans face (only the page H1 keeps the serif) */
.procedure .section-head h2,
.proc-layout__main .section-head h2 { font-family: var(--font-body); font-size: var(--step-3); color: var(--heading); font-weight: 600; line-height: 1.18; letter-spacing: -0.01em; }

/* --- ACF content boxes (Expert Treatment / Procedure / Post Surgery / Results) - */
.box-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, 1fr); margin-top: var(--space-md); }
@media (max-width: 560px) { .box-grid { grid-template-columns: 1fr; } }
.box-card {
  padding: var(--space-lg); background: var(--color-white);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.box-card:hover { border-color: var(--accent); box-shadow: 0 10px 26px -20px rgba(99,64,75,.4); }
.box-card__title { display: flex; align-items: center; gap: 0.55rem; font-size: var(--step-1); font-weight: 600; margin: 0 0 var(--space-xs); color: var(--heading-soft); }
.box-card__title::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); flex: none; }
.box-card__text { font-size: var(--step--1); line-height: 1.65; color: var(--text); }
.box-card__text p { margin: 0 0 0.5rem; }
.box-card__text :last-child { margin-bottom: 0; }

/* --- price callout + why-us highlights --- */
/* Pricing — a tidy highlighted figure (label + value on one baseline) */
.price-callout { display: inline-flex; align-items: baseline; gap: 0.7rem; padding: 0.85rem 1.3rem; background: var(--bg-blush); border-left: 3px solid var(--accent); border-radius: var(--radius-md); margin: 0 0 var(--space-md); }
.price-callout__label { font-size: var(--step--1); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.price-callout__value { font-family: var(--font-display); font-size: var(--step-4); color: var(--accent-deep); line-height: 1; }

/* Procedure cost guide — flat priced rows (label left, figure right). On-brand: sharp, no shadow. */
#cost .price-callout + .muted { margin-top: var(--space-sm); }      /* gap under the FROM callout */
#cost .muted { margin-bottom: var(--space-lg); }                    /* separate intro line from the rows */
.proc-block .cost-list { list-style: none; display: grid; gap: 6px; margin: 0 0 var(--space-md); }
.proc-block .cost-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md);
  padding: 0.95rem 1.15rem; background: var(--surface-sunken); border-left: 3px solid var(--accent); border-bottom: 0;
  transition: background var(--dur-fast) var(--ease); }
.proc-block .cost-list li:hover { background: var(--bg-blush); }
.proc-block .cost-list__label { color: var(--text); font-size: var(--step-0); line-height: 1.4; }
.proc-block .cost-list__fig { font-family: var(--font-display); font-weight: 600; color: var(--accent-deep); font-size: var(--step-1); white-space: nowrap; }
/* Compliance/risk note inside procedure content — quiet, column-aligned, no heavy box */
.proc-layout__main .disclaimer { max-width: 68ch; margin-top: var(--space-md); padding: 0; background: transparent; border-radius: 0; font-style: normal; font-size: var(--step--1); line-height: 1.55; color: var(--text-muted); }
.why-us-list { margin-top: var(--space-md); }

/* Footer quick-links as a native WP menu (ul) — keep the inline flex row. */
.footer-top__list { display: flex; flex-wrap: wrap; gap: var(--space-sm) clamp(1.25rem, 3vw, 2.5rem); list-style: none; margin: 0; padding: 0; }

/* ══ Skeletons / shimmer placeholders ════════════════════════════════════════
   Goal: reserve an element's space so the page doesn't reflow as content lands,
   and show a soft shimmer in that reserved box until the real thing paints. */
@keyframes cm-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.cm-shimmer,
.cm-skel-line,
.cm-skel-card {
  background-image: linear-gradient(90deg, var(--surface-sunken, #ececec) 25%, rgba(255,255,255,.65) 50%, var(--surface-sunken, #ececec) 75%);
  background-size: 200% 100%;
  animation: cm-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .cm-shimmer, .cm-skel-line, .cm-skel-card { animation: none; } }

/* Image containers: shimmer overlay that sits in the already-reserved box and fades
   out the instant the image loads (class toggled by skeleton.js). */
.cm-imgskel { position: relative; }
.cm-imgskel::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--surface-sunken, #ececec) 25%, rgba(255,255,255,.65) 50%, var(--surface-sunken, #ececec) 75%);
  background-size: 200% 100%; animation: cm-shimmer 1.4s ease-in-out infinite;
  transition: opacity .35s ease;
}
.cm-imgskel.is-loaded::after { opacity: 0; visibility: hidden; }
.cm-imgskel > img, .cm-imgskel > picture { position: relative; z-index: 1; }
/* An iframe (the clinic map) is opaque while loading, so its shimmer must sit ON TOP of
   it until it loads (images are empty/transparent, so theirs can stay behind). */
.location-card__map.cm-imgskel::after { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .cm-imgskel::after { animation: none; } }

/* Text-line + card skeletons (used inside the case/gallery modals while they fetch) */
.cm-skel-line { display: block; height: .72em; border-radius: 4px; margin: .55em 0; }
.cm-skel-line--sm { width: 40%; } .cm-skel-line--md { width: 65%; } .cm-skel-line--lg { width: 85%; }
.cm-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; padding: 4px 0; }
.cm-skel-card { aspect-ratio: 1 / 1; border-radius: 8px; }

/* Hub hero without the booking form — left-aligned category intro; the right side
   (where the form used to be) is intentionally left as open space. */
.hero--procedure .hero__solo { max-width: 720px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
.hero--procedure .hero__solo .hero__trust { display: flex; flex-wrap: wrap; justify-content: flex-start; grid-template-columns: none; gap: 0.5rem clamp(var(--space-md), 3.5vw, var(--space-2xl)); margin-top: var(--space-lg); }

/* Album (gallery) cards — match the homepage .card: a bordered shell, a static body with
   a larger title (like .card__title), and a full-width "See photos (N)" foot button that
   reuses .card__foot. (Only album cards; the Library's single-case cards keep their hover overlay.) */
.case-card--album { display: flex; flex-direction: column; border: 1px solid var(--border-50); transition: border-color var(--dur-fast) var(--ease); }
.case-card--album:hover { border-color: var(--border); }
.case-card--album .case-card__body { position: static; opacity: 1; transform: none; pointer-events: auto; background: transparent; border-top: 0; padding: var(--space-sm) var(--space-md) var(--space-2xs); }
.case-card--album .case-card__line--meta { font-size: var(--step-1); font-weight: 500; line-height: 1.3; color: var(--heading); white-space: normal; }
.case-card--album .case-card__foot { margin-top: auto; text-align: left; }
.case-card--album:hover .card__foot { color: var(--heading); background: color-mix(in srgb, var(--heading) 4%, transparent); }
.case-card--album:hover .card__foot svg { transform: translateX(3px); color: var(--accent); }

/* Header CTA: full label on desktop, short label on phones (the header goes mobile at 860px). */
.header-cta__short { display: none; }
@media (max-width: 860px) { .header-cta__full { display: none; } .header-cta__short { display: inline; } }

/* ============================================================================
   /photos/ album directory — ported from the backup site's cosmos-photos
   plugin so the page reads identically (2026-08-13, Jesus). Everything is
   scoped under .cphotos-root; only the body background rule reaches outside,
   keyed to the case archive's body class. Source of truth for the design:
   cosmosbackup.wpenginepowered.com/photos/ (opt-assets/a6a471a2.css).
   ========================================================================= */
/* The theme prints a bare <body> (no body_class()), so key the cream page tint
   off the directory's own root instead. */
body:has(> .cphotos-archive), body:has(.cphotos-archive) { background: #F8F5F5; }
.cphotos-root {
  --cphotos-ink:      #3d3c3d;
  --cphotos-ink-soft: #6a6766;
  --cphotos-line:     #e6e2e0;
  --cphotos-line-strong: #cdc8c5;
  --cphotos-maxw:     1130px;
  /* Backup inherits Graphik from its body; ours would hand down Hanken
     Grotesk, so pin the whole subtree here (theme's fonts.css ships Graphik). */
  font-family: 'Graphik','Graphik Subset',Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cphotos-ink);
  box-sizing: border-box;
  width: var(--cphotos-maxw);
  max-width: 100%;
  margin-left: auto; margin-right: auto;
  padding: 1.5em 15px 2.5em; }
.cphotos-root *, .cphotos-root *::before, .cphotos-root *::after { box-sizing: inherit; }
.cphotos-dirhead { display: flex; align-items: baseline; justify-content: center; gap: .65em; padding: .5em 0 1.4em; flex-wrap: wrap; }
/* h1 keeps its own pin — the theme's element rule for headings (serif) is more
   specific than the root's inherited family. */
.cphotos-dirhead h1 { margin: 0; font-family: 'Graphik','Graphik Subset',Helvetica,Arial,sans-serif; font-weight: 600; font-size: clamp(1.35em, 2.4vw, 1.9em); letter-spacing: -.01em; color: var(--cphotos-ink); }
.cphotos-bar__badge { font-size: .66em; letter-spacing: .06em; font-weight: 600;
  color: var(--cphotos-ink-soft); border: 1px solid var(--cphotos-line-strong);
  padding: .25em .6em; border-radius: 999px; }
.cphotos-albums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5em 1.25em; }
.cphotos-album { display: flex; flex-direction: column; text-decoration: none; background: #fff;
  border: 0; border-radius: 2px; overflow: hidden; height: 100%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px -1px rgba(0,0,0,.06), 0 2px 4px 0 rgba(0,0,0,.04);
  transition: box-shadow .15s ease-out, transform .15s ease-out; }
.cphotos-album:hover { transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px -1px rgba(0,0,0,.08), 0 2px 4px 0 rgba(0,0,0,.06), inset 0 -2px 0 0 #DF8097; }
.cphotos-album__media { display: block; position: relative; aspect-ratio: 1 / 1; background: #F8F5F5; overflow: hidden; }
.cphotos-album__media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: clamp(4px, 3%, 22px); }
.cphotos-album__body { display: block; padding: 22px; flex: 1 1 auto; }
.cphotos-album__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: 'Graphik','Graphik Subset',Helvetica,Arial,sans-serif; font-size: 18px; line-height: 1.3; font-weight: 500; color: #000; }
.cphotos-album__meta { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: #3E3E3E; }
.cphotos-album__cta { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 22px; border-top: 1px solid #ececec;
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; color: #555;
  transition: color .15s ease, background-color .15s ease; }
.cphotos-chevron { flex: none; }
.cphotos-album:hover .cphotos-album__cta { background: rgba(0,0,0,.03); color: #000; }
/* Compact album cards on MOBILE only (per the backup). */
@media (max-width: 767px) {
  .cphotos-album__body { padding: 16px; }
  .cphotos-album__title { font-size: 15px; }
  .cphotos-album__meta { margin-top: 4px; font-size: 13px; line-height: 1.45; }
  .cphotos-album__cta { padding: 9px 16px; font-size: 11px; }
}
.cphotos-legal { max-width: 900px; margin: 2.4em auto 0; padding: 1.3em 15px 0;
  border-top: 1px solid var(--cphotos-line); text-align: left; }
.cphotos-legal p { margin: 0; font-size: .68em; line-height: 1.6; color: var(--cphotos-ink-soft); }
.cphotos-legal p strong { color: var(--cphotos-ink-soft); font-weight: 600; }
@media (max-width: 900px) {
  .cphotos-albums { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .cphotos-albums { grid-template-columns: repeat(2, 1fr); gap: 1.1em .8em; }
}
@media (max-width: 600px) {
  .cphotos-root { padding: 1em 15px 2em; }
}