/* NashNeuroSpine — design system
   Clinical calm with controlled creative energy.
   Mobile-first: base rules target 375px; min-width queries expand. */

:root {
  --bg: #EDF1F6;
  --surface: #F8FAFC;
  --surface-2: #E2E8EF;
  --stone: #D7DFE8;
  --stone-strong: #B6C2CF;
  --field-border: #737F92;   /* 3.9:1 on surface — WCAG 1.4.11 */
  --graphite: #15131B;
  --graphite-2: #26242B;
  --slate: #4F5867;
  --purple: #5B2A72;
  --aubergine: #3A174C;
  --purple-tint: #ECE4F4;
  --violet: #6B2FA0;
  --ember: #E8622C;
  --blue: #155E8C;
  --blue-tint: #DDEAF5;
  --green: #1F6B4E;
  --green-tint: #E0F0E8;
  --coral: #C8493B;
  --coral-ink: #A63A2E;
  --coral-tint: #F8E9E5;
  --charcoal: #1A1420;
  --charcoal-2: #261C2E;
  --on-dark: #F3F5FA;
  --on-dark-muted: #C4BACD;

  --font-display: "Manrope", "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.9375rem;   /* 15px — meta only, never body */
  --step-0: 1.0625rem;    /* 17px body (mobile) */
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);
  --step-4: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
  --step-5: clamp(2.375rem, 1.6rem + 3.6vw, 4.25rem);

  --radius-s: 4px;
  --radius: 6px;
  --radius-l: 10px;
  --shadow: 0 1px 2px rgb(25 24 29 / 5%), 0 6px 24px -12px rgb(25 24 29 / 18%);
  --gutter: 20px;
  --maxw: 1240px;
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) { :root { --gutter: 40px; --step-0: 1.125rem; --header-h: 72px; } }
@media (min-width: 1440px) { :root { --gutter: 56px; --maxw: 1320px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.02em; margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--step-5); letter-spacing: -0.03em; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.015em; }
h4 { font-size: var(--step-1); }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--purple); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--aubergine); }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 650; }

:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--on-dark); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--graphite); color: var(--on-dark); padding: 12px 16px; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--on-dark); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: 72px; }
@media (min-width: 1024px) { .section { padding-block: 112px; } }
.section--tight { padding-block: 48px; }
.section--surface { background: var(--surface); }
.section--rule { border-top: 1px solid var(--stone); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
  margin: 0 0 16px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--purple); flex: none; }
.on-dark .eyebrow { color: var(--on-dark-muted); }
.on-dark .eyebrow::before { background: var(--on-dark); }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--slate); max-width: 38em; }
.muted { color: var(--slate); }
.meta { font-size: var(--step--1); color: var(--slate); }
.section-head { max-width: 46rem; margin-bottom: 40px; }
.section-head h2 + p { margin-top: 16px; }
@media (min-width: 1024px) { .section-head { margin-bottom: 56px; } }

/* ---------- Buttons & links ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--graphite); --btn-bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 13px 22px; border-radius: 10px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; line-height: 1.2;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-icon {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: -8px; border-radius: 7px;
  background: rgb(255 255 255 / 14%); transition: transform .25s var(--ease), background-color .2s;
}
.btn-icon svg { width: 16px; height: 16px; }
.btn:hover .btn-icon { transform: translateX(3px); }
.btn-primary {
  --btn-bg: var(--purple); --btn-fg: #fff; --btn-bd: var(--purple);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 1px 2px rgb(58 23 76 / 25%), 0 10px 24px -14px rgb(58 23 76 / 70%);
}
.btn-primary:hover { --btn-bg: var(--aubergine); --btn-bd: var(--aubergine); color: #fff; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 2px 4px rgb(58 23 76 / 25%), 0 16px 30px -14px rgb(58 23 76 / 75%); }
.btn-primary:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgb(0 0 0 / 25%); }
.btn-secondary { --btn-fg: var(--graphite); --btn-bd: var(--graphite); background: rgb(255 255 255 / 35%); }
.btn-secondary .btn-icon { background: rgb(25 24 29 / 8%); }
.btn-secondary:hover { --btn-bg: var(--graphite); --btn-fg: var(--on-dark); background: var(--graphite); color: var(--on-dark); }
.btn-secondary:hover .btn-icon { background: rgb(255 255 255 / 14%); }
.btn-glow { --btn-bd: #8A5AA6;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 0 0 1px rgb(138 90 166 / 35%), 0 14px 44px -12px rgb(150 80 200 / 70%); }
.on-dark .btn-primary.btn-glow { --btn-bg: var(--purple); --btn-fg: #fff; --btn-bd: #8A5AA6; }
.on-dark .btn-primary.btn-glow .btn-icon { background: rgb(255 255 255 / 14%); color: #fff; }
.on-dark .btn-primary.btn-glow:hover { --btn-bg: #6B3487; --btn-bd: #A57AC0; color: #fff; }
.btn-lg { min-height: 56px; padding: 15px 26px; font-size: 1.0625rem; }
.on-dark .btn-primary { --btn-bg: var(--on-dark); --btn-fg: var(--graphite); --btn-bd: var(--on-dark); box-shadow: none; }
.on-dark .btn-primary .btn-icon { background: rgb(91 42 114 / 12%); color: var(--purple); }
.on-dark .btn-primary:hover { --btn-bg: #fff; --btn-bd: #fff; color: var(--aubergine); }
.on-dark .btn-secondary { --btn-fg: var(--on-dark); --btn-bd: #6B5D78; background: transparent; }
.on-dark .btn-secondary .btn-icon { background: rgb(255 255 255 / 10%); }
.on-dark .btn-secondary:hover { background: var(--on-dark); color: var(--graphite); --btn-bd: var(--on-dark); }
.on-dark .btn:focus-visible { outline-color: var(--on-dark); }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--font-display); font-weight: 700; color: var(--graphite); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0% 1.5px no-repeat;
  transition: background-size .3s var(--ease), color .2s;
}
.link-arrow:hover, .link-arrow:focus-visible { background-size: 100% 1.5px; color: var(--purple); }
.link-arrow svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.on-dark .link-arrow { color: var(--on-dark); }
.on-dark .link-arrow:hover, .on-dark .link-arrow:focus-visible { color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--stone); box-shadow: 0 8px 24px -20px rgb(25 24 29 / 40%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--graphite); text-decoration: none; min-height: 44px; }
.brand:hover { color: var(--graphite); }
.brand-mark { width: auto; height: 38px; flex: none; }
@media (min-width: 768px) { .brand-mark { height: 42px; } }
.brand-word { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1; }
.brand-word span { color: var(--slate); font-weight: 600; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 12px;
  background: transparent; border: 1.5px solid var(--stone-strong); border-radius: var(--radius-s);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--graphite); cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }
.site-nav { display: none; }
.site-nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--stone);
  padding: 8px var(--gutter) 24px; max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
}
.site-nav ul { list-style: none; }
.site-nav li a {
  display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--stone);
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--graphite); text-decoration: none;
}
.site-nav li a[aria-current="page"] { color: var(--purple); }
.site-nav .nav-cta { margin-top: 20px; }
.header-cta { display: none; }


@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.is-open { display: flex; position: static; padding: 0; border: 0; background: none; max-height: none; overflow: visible; }
  .site-nav ul { display: flex; gap: 4px; }
  .site-nav li a {
    min-height: 44px; padding: 0 12px; border: 0; font-size: 0.9688rem; color: var(--slate);
    background: linear-gradient(var(--purple), var(--purple)) 12px calc(100% - 6px) / 0 2px no-repeat;
    transition: background-size .3s var(--ease), color .2s;
  }
  .site-nav li a:hover { color: var(--graphite); background-size: calc(100% - 24px) 2px; }
  .site-nav li a[aria-current="page"] { color: var(--graphite); background-size: calc(100% - 24px) 2px; }
  .site-nav .nav-cta { display: none; }
  .header-cta { display: inline-flex; min-height: 44px; padding: 10px 18px; }
}

/* ---------- Hero (home) ----------
   Full-bleed section in the hero image's own background colour (--media-bg),
   so the 3D render melts into the page. Mobile: copy, then image, then the
   qualification strip. Desktop: image anchored to the right edge behind a
   soft fade, copy on the left, qualifications along the base. */
.hero {
  --glow: #FF7A45;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--media-bg, var(--hero-bg, #000)); color: var(--on-dark);
  display: flex; flex-direction: column;
}
.hero-stage { position: relative; z-index: 2; padding-block: 36px 8px; }
.hero-copy { max-width: 38rem; }
.hero .eyebrow { color: var(--on-dark-muted); }
.hero .eyebrow::before { background: var(--glow); }
.hero h1 { font-size: clamp(2.375rem, 1.5rem + 3.4vw, 4.25rem); line-height: 1.03; letter-spacing: -0.035em; max-width: 13ch; color: var(--on-dark); }
.hero h1 .h1-follow { display: block; margin-top: .12em; color: #B3A8BE; font-weight: 600; }
.hero .lede { margin-top: 22px; color: #D3CADB; max-width: 34rem; }
.hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 30px; }
.hero-actions .link-arrow { justify-content: center; }
.hero-actions .btn, .hero-actions .link-arrow { white-space: nowrap; }
.hero-media { position: relative; z-index: 1; margin-top: 4px; aspect-ratio: 1 / 1; max-height: 520px; }
.hero-media picture, .hero-media img { display: block; width: 100%; height: 100%; }
.hero-media img {
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.hero-foot { position: relative; z-index: 2; padding-block: 8px 40px; }
.hero-name { font-family: var(--font-display); font-weight: 700; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 14px; }
.hero-quals { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid rgb(255 255 255 / 14%); }
.hero-qual { padding: 16px 12px 0 0; }
.hero-qual dt { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--on-dark); letter-spacing: -0.01em; }
.hero-qual dd { margin: 4px 0 0; font-size: .875rem; line-height: 1.4; color: #B3A8BE; }

@media (min-width: 560px) {
  .hero-actions { flex-direction: row; align-items: center; gap: 24px; }
  .hero-actions .btn { width: auto; }
}
@media (min-width: 768px) {
  .hero-stage { padding-block: 56px 0; }
  .hero-media { aspect-ratio: 16 / 9; max-height: none; margin-top: 8px; }
  .hero-quals { grid-template-columns: repeat(4, 1fr); }
  .hero-qual { padding: 18px 20px 0; border-left: 1px solid rgb(255 255 255 / 10%); }
  .hero-qual:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 1024px) {
  .hero { min-height: clamp(640px, 100vh, 900px); }
  .hero-copy { max-width: 42rem; }
  .hero .lede { max-width: 33rem; }
  .hero-stage { flex: 1; display: flex; align-items: center; padding-block: 48px; }
  .hero-media { position: absolute; inset: 0 0 0 auto; width: 72%; margin: 0; aspect-ratio: auto; max-height: none; }
  .hero-media img {
    object-position: 62% 40% !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 100%);
  }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(60% 70% at 18% 50%, rgb(19 14 24 / 65%), transparent 70%); }
  .hero-foot { padding-block: 0 44px; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .hero-media { width: 62%; } .hero-copy { max-width: 32rem; } }
@media (min-width: 1440px) { .hero-media { width: 70%; } }
@media (min-width: 1920px) { .hero-media { width: 66%; } }

/* ---------- Header: deep aubergine bar, white logo ----------
   A colour of its own, distinct from the cream pages and the black hero.
   On the home page it starts transparent over the hero and turns solid on
   scroll. Every text colour here is at least 7:1 against the bar. */
.site-header { --header-bg: #261C2E; background: var(--header-bg); border-bottom: 1px solid rgb(255 255 255 / 7%); color: var(--on-dark); }
.site-header.is-scrolled { border-bottom-color: rgb(255 255 255 / 10%); box-shadow: 0 10px 30px -18px rgb(0 0 0 / 60%); }
.site-header .brand, .site-header .brand:hover { color: var(--on-dark); }
.site-header .brand-word span { color: #BDB2C8; }
.site-header .nav-toggle { color: var(--on-dark); border-color: rgb(255 255 255 / 28%); background: transparent; }
.site-header .nav-toggle:hover { border-color: rgb(255 255 255 / 55%); }
.site-header .site-nav.is-open { background: var(--header-bg); border-bottom-color: rgb(255 255 255 / 10%); }
.site-header .site-nav li a { color: var(--on-dark); border-bottom-color: rgb(255 255 255 / 10%); }
.site-header .site-nav li a[aria-current="page"] { color: #D9BFE8; }
@media (min-width: 1100px) {
  .site-header .site-nav li a { color: #D3CADB; background-image: linear-gradient(#D9BFE8, #D9BFE8); }
  .site-header .site-nav li a:hover, .site-header .site-nav li a[aria-current="page"] { color: #fff; }
}

/* ---------- About section on the dark brain artwork ----------
   The artwork's ink is inverted so the colour half glows on graphite. */
.about-art { background: var(--media-bg, #1A1420); color: var(--on-dark); overflow: hidden; }
.about-art h2 { color: var(--on-dark); }
.about-art .eyebrow { color: #BDB2C8; }
.about-art .eyebrow::before { background: #FF7A45; }
.about-art .doctor-role { color: #D9BFE8; }
.about-art p { color: #D3CADB; }
.about-art .cred-list { border-top-color: rgb(255 255 255 / 40%); }
.about-art .cred-list li { border-bottom-color: rgb(255 255 255 / 12%); }
.about-art .cred-list .cred-abbr { color: var(--on-dark); }
.about-art .cred-list span { color: #BDB2C8; }
.about-art-figure { margin: -24px calc(-1 * var(--gutter)) 0; }
.about-art-figure picture, .about-art-figure img { display: block; width: 100%; height: auto; }
.about-art-figure img { -webkit-mask-image: radial-gradient(closest-side, #000 90%, transparent 100%); mask-image: radial-gradient(closest-side, #000 90%, transparent 100%); }
.about-art-figure--card { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--media-bg); }
.about-art-figure--card img { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 1024px) {
  .about-art .doctor { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; }
  .about-art .about-art-figure { margin: -56px 0 -56px calc(-1 * var(--gutter)); }
}

/* ---------- Media page header (service and patient pages) ---------- */
.page-hero--media { position: relative; overflow: hidden; isolation: isolate; padding: 0; border-bottom: 0;
  background: var(--media-bg, var(--deep)); color: var(--on-dark); display: flex; flex-direction: column; }
.page-hero-inner { position: relative; z-index: 2; padding-block: 28px 8px; }
.page-hero--media h1 { color: var(--on-dark); }
.page-hero--media .lede { color: #D3CADB; }
.page-hero--media .eyebrow { color: var(--on-dark-muted); }
.page-hero--media .eyebrow::before { background: #FF7A45; }
.page-hero--media .breadcrumbs, .page-hero--media .breadcrumbs a { color: #B3A8BE; }
.page-hero--media .breadcrumbs [aria-current] { color: var(--on-dark); }
.page-hero--media .breadcrumbs li + li::before { color: #5A5760; }
.page-hero-media { position: relative; z-index: 1; aspect-ratio: 16 / 9; }
.page-hero-media picture, .page-hero-media img { display: block; width: 100%; height: 100%; }
.page-hero-media img { object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
@media (min-width: 900px) {
  .page-hero--media { min-height: 460px; justify-content: center; }
  .page-hero-inner { padding-block: 56px 72px; }
  .page-hero-copy { max-width: 32rem; }
  .page-hero-media { position: absolute; inset: 0 0 0 auto; width: 64%; aspect-ratio: auto; }
  .page-hero-media img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%); mask-image: linear-gradient(to right, transparent 0, #000 40%); }
}
@media (min-width: 1440px) { .page-hero--media { min-height: 520px; } }

/* hero reveal (motion-safe only) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { animation: rise .7s var(--ease) both; }
  .js .hero-copy > *:nth-child(2) { animation-delay: .06s; }
  .js .hero-copy > *:nth-child(3) { animation-delay: .12s; }
  .js .hero-copy > *:nth-child(4) { animation-delay: .18s; }
  .js .hero-copy > *:nth-child(5) { animation-delay: .24s; }
  .js .hero-media img { animation: settle 2.4s .1s var(--ease) both; }
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: 40px 48px; border-bottom: 1px solid var(--stone); }
.page-hero h1 { font-size: var(--step-4); max-width: 18ch; }
.page-hero .lede { margin-top: 18px; }
@media (min-width: 1024px) { .page-hero { padding-block: 72px 80px; } .page-hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; } }
.breadcrumbs { margin-bottom: 20px; font-size: var(--step--1); color: var(--slate); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--stone-strong); }
.breadcrumbs a { color: var(--slate); display: inline-block; padding-block: 10px; }
.breadcrumbs [aria-current] { color: var(--graphite); padding-block: 10px; display: inline-block; }

/* ---------- Orientation strip ---------- */
.orient { border-block: 1px solid var(--stone); background: var(--surface); }
.orient-list { list-style: none; display: grid; }
.orient-list li + li { border-top: 1px solid var(--stone); }
.orient-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 20px 0; color: var(--graphite); text-decoration: none; }
.orient-item:hover { color: var(--graphite); }
.orient-item:hover .orient-arrow { background: var(--purple); color: #fff; border-color: var(--purple); }
.orient-item h3 { font-size: 1.125rem; }
.orient-item p { grid-column: 1; margin: 0; color: var(--slate); font-size: 1rem; }
.orient-arrow { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--field-border); display: grid; place-items: center; transition: all .2s var(--ease); }
.orient-arrow svg { width: 18px; height: 18px; }
.orient-kicker { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
@media (min-width: 768px) {
  .orient-list { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .orient-list li + li { border-top: 0; border-left: 1px solid var(--stone); }
  .orient-item { padding: 28px 28px; }
  .orient-list li:first-child .orient-item { padding-left: 0; }
}

/* ---------- Services narrative (asymmetric) ---------- */
.svc-grid { display: grid; gap: 20px; }
.svc-panel {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  background: var(--surface); border: 1px solid var(--stone); border-radius: var(--radius);
  padding: 28px 24px; color: var(--graphite); text-decoration: none; overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.svc-panel:hover { color: var(--graphite); border-color: var(--stone-strong); box-shadow: var(--shadow); }
.svc-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent, var(--purple)); transform-origin: left; transform: scaleX(.18); transition: transform .5s var(--ease); }
.svc-panel:hover::before { transform: scaleX(1); }
.svc-panel--blue { background: linear-gradient(180deg, var(--blue-tint) 0%, var(--surface) 46%); border-color: #CFDDE5; }
.svc-panel--blue h3, .svc-panel--blue h2 { color: #10364B; }
.svc-panel--blue { --accent: var(--blue); }
.svc-panel--green { --accent: var(--green); }
.svc-panel h3 { font-size: var(--step-3); }
.svc-index { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--accent, var(--purple)); letter-spacing: .06em; }
.svc-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-tags li { font-size: 0.9375rem; padding: 4px 12px; border: 1px solid var(--stone); border-radius: 14px; color: var(--slate); background: var(--bg); }
.svc-panel .link-arrow { margin-top: auto; }
.svc-panel--feature { background: var(--deep); border-color: var(--deep); color: var(--on-dark); padding: 0; gap: 0; }
.svc-panel--feature::before { display: none; }
.svc-panel--feature:hover { color: var(--on-dark); border-color: #3A2F44; box-shadow: 0 24px 60px -30px rgb(0 0 0 / 70%); }
.svc-media { aspect-ratio: 16 / 10; }
.svc-media picture, .svc-media img { display: block; width: 100%; height: 100%; }
.svc-media img { object-fit: cover; transition: transform .8s var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
.svc-panel--feature:hover .svc-media img { transform: scale(1.03); }
.svc-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; padding: 4px 24px 28px; flex: 1; }
.svc-panel--feature h3, .svc-panel--feature h2 { color: var(--on-dark); }
.svc-panel--feature .svc-index { color: #FF9B6E; }
.svc-panel--feature .svc-lede { color: #D3CADB; font-size: 1.0625rem; margin: 0; }
.svc-panel--feature .svc-tags li { background: transparent; border-color: rgb(255 255 255 / 18%); color: #D3CADB; }
.svc-figure { display: none; }

.spec-list { list-style: none; border-top: 1px solid var(--graphite); }
.spec-list li { padding: 16px 0; border-bottom: 1px solid var(--stone); }
.spec-list strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; }
.spec-list span { color: var(--slate); font-size: 1rem; }
.spec-aside h3 { font-size: var(--step-1); margin-bottom: 8px; }
.spec-aside > p { color: var(--slate); font-size: 1rem; margin-bottom: 20px; }

@media (min-width: 768px) {
  .svc-panel { padding: 40px; }
  .svc-panel--feature { padding: 0; }
  .svc-body { padding: 8px 40px 40px; }
}
@media (min-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .svc-panel--a { grid-column: 1 / span 7; grid-row: 1 / span 2; min-height: 600px; padding: 0; }
  .svc-panel--feature .svc-media { position: absolute; inset: 0 0 0 auto; width: 64%; aspect-ratio: auto; }
  .svc-panel--feature .svc-media img { object-position: 41% 40% !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%); mask-image: linear-gradient(to right, transparent 0, #000 38%); }
  .svc-panel--feature .svc-body { padding: 56px; max-width: 27rem; justify-content: flex-end; }
  .svc-panel--b { grid-column: 8 / span 5; grid-row: 1; min-height: 360px; }
  .spec-aside { grid-column: 8 / span 5; grid-row: 2; padding: 8px 0 0; }
  .svc-panel--a h3 { font-size: var(--step-4); }
  .svc-figure { display: block; position: absolute; right: -40px; bottom: -40px; width: 260px; opacity: .9; color: var(--stone); }
}

/* ---------- Doctor profile ---------- */
.doctor { display: grid; gap: 40px; }
.doctor-name { font-size: var(--step-4); }
.doctor-role { margin-top: 10px; font-family: var(--font-display); font-weight: 600; color: var(--purple); font-size: var(--step-1); }
.cred-list { list-style: none; border-top: 1px solid var(--graphite); }
.cred-list li { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--stone); }
.cred-list abbr, .cred-abbr { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; text-decoration: none; color: var(--graphite); }
.cred-list span { color: var(--slate); font-size: 1rem; }
.monogram {
  display: grid; place-items: center; aspect-ratio: 4 / 5; max-width: 420px;
  background: var(--surface-2); border: 1px solid var(--stone); border-radius: var(--radius); color: var(--purple);
}
.monogram-mark { width: 44%; height: auto; }
@media (min-width: 1024px) { .doctor { grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; } .doctor--flip { grid-template-columns: 7fr 5fr; } }

/* ---------- Principles ---------- */
.principles { list-style: none; display: grid; counter-reset: p; border-top: 1px solid var(--graphite); }
.principles li { counter-increment: p; padding: 28px 0; border-bottom: 1px solid var(--stone); display: grid; gap: 8px; }
.principles li::before { content: counter(p, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; color: var(--purple); font-size: 0.9375rem; letter-spacing: .06em; }
.principles h3 { font-size: var(--step-2); }
.principles p { color: var(--slate); margin: 0; }
@media (min-width: 768px) { .principles { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
@media (min-width: 1200px) { .principles { grid-template-columns: repeat(4, 1fr); column-gap: 32px; } .principles li { padding: 32px 0 0; border-bottom: 0; align-content: start; } }

/* ---------- Journey ---------- */
.journey { list-style: none; display: grid; gap: 0; counter-reset: j; }
.journey li { counter-increment: j; position: relative; padding: 0 0 32px 60px; }
.journey li::before {
  content: counter(j); position: absolute; left: 0; top: -4px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg); border: 1.5px solid var(--graphite);
  font-family: var(--font-display); font-weight: 700;
}
.journey li::after { content: ""; position: absolute; left: 19.25px; top: 40px; bottom: 0; width: 1.5px; background: var(--stone-strong); }
.journey li:last-child { padding-bottom: 0; }
.journey li:last-child::after { display: none; }
.journey h3 { font-size: var(--step-1); margin-bottom: 6px; }
.journey p { color: var(--slate); margin: 0; }
@media (min-width: 1024px) {
  .journey { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .journey li { padding: 64px 0 0; }
  .journey li::before { top: 0; }
  .journey li::after { left: 48px; right: -16px; top: 19.25px; bottom: auto; width: auto; height: 1.5px; }
}

/* ---------- Split / environment ---------- */
.split { display: grid; gap: 32px; }
@media (min-width: 1024px) { .split { grid-template-columns: 5fr 7fr; gap: 80px; align-items: center; } .split--even { grid-template-columns: 1fr 1fr; } }
.photo-slot {
  aspect-ratio: 3 / 2; border-radius: var(--radius); border: 1px solid var(--stone);
  background:
    linear-gradient(var(--stone) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--stone) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--surface-2);
  display: grid; place-items: center; color: var(--purple);
}
.photo-slot-mark { width: 26%; height: auto; opacity: .9; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--stone); }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--stone); }
.checklist svg { width: 24px; height: 24px; color: var(--green); margin-top: 2px; }
.checklist strong { display: block; font-family: var(--font-display); }
.checklist span { color: var(--slate); font-size: 1rem; }
@media (min-width: 768px) { .checklist { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* ---------- Locations ---------- */
.loc-grid { display: grid; gap: 20px; }
.loc-card { background: var(--surface); border: 1px solid var(--stone); border-radius: var(--radius); padding: 28px 24px; }
.loc-card h3 { font-size: var(--step-2); margin-bottom: 4px; }
.loc-role { font-family: var(--font-display); font-weight: 700; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.loc-card address { font-style: normal; margin-top: 12px; color: var(--slate); }
.loc-card .btn, .loc-card .link-arrow { margin-top: 16px; }
@media (min-width: 768px) { .loc-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }

/* ---------- Notices ---------- */
.notice { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 18px 20px; border-radius: var(--radius); border: 1px solid; font-size: 1rem; }
.notice svg { width: 22px; height: 22px; margin-top: 2px; }
.notice strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; margin-bottom: 2px; }
.notice p { margin: 0; }
.notice--emergency { background: var(--coral-tint); border-color: #EBC3BB; color: var(--graphite); }
.notice--emergency svg { color: var(--coral-ink); }
.notice--info { background: var(--blue-tint); border-color: #C5D9E3; }
.notice--info svg { color: var(--blue); }
.notice--success { background: var(--green-tint); border-color: #BFD9CB; }
.notice--success svg { color: var(--green); }
.notice a { color: inherit; font-weight: 600; }
.on-dark .notice--emergency { background: rgb(200 73 59 / 8%); border-color: #6A3B40; color: var(--on-dark); }
.on-dark .notice--emergency svg { color: #F0A498; }

/* ---------- Accordions ---------- */
.accordion { border-top: 1px solid var(--graphite); }
.accordion details { border-bottom: 1px solid var(--stone); }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 0; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 14px; height: 14px; margin-right: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .25s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.accordion summary:hover { color: var(--purple); }
.accordion .acc-body { padding: 0 0 22px; color: var(--graphite); max-width: 44rem; }
.accordion .acc-body ul { padding-left: 1.2em; margin-top: 8px; color: var(--slate); }
.accordion .acc-body li { margin-bottom: 4px; }

/* ---------- Prose / lists ---------- */
.prose { max-width: 44rem; }
.prose h2 { font-size: var(--step-3); margin: 48px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 32px 0 12px; }
.prose ul, .prose ol { padding-left: 1.25em; margin-bottom: 1em; }
.prose li { margin-bottom: 6px; }
.tick-list { list-style: none; display: grid; gap: 10px; }
.tick-list li { position: relative; padding-left: 28px; }
.tick-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.steps { list-style: none; counter-reset: s; display: grid; gap: 20px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.steps li::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .9375rem; }
.steps strong { display: block; font-family: var(--font-display); }
.steps span { color: var(--slate); }

.two-col { display: grid; gap: 48px; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 4fr 8fr; gap: 80px; } .two-col--wide-left { grid-template-columns: 7fr 5fr; } .sticky-col { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } }

.review-meta { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--stone); font-size: var(--step--1); color: var(--slate); display: flex; flex-wrap: wrap; gap: 6px 24px; }

/* ---------- Cards (generic, used sparingly) ---------- */
.card { background: var(--surface); border: 1px solid var(--stone); border-radius: var(--radius); padding: 24px; }
.card-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Closing CTA (graphite) ---------- */
.cta-dark { background: var(--deep, var(--graphite)); color: var(--on-dark); }
.cta-dark h2 { color: var(--on-dark); max-width: 16ch; }
.cta-dark p { color: var(--on-dark-muted); }
.cta-grid { display: grid; gap: 40px; }
.cta-options { display: grid; gap: 0; border-top: 1px solid #3A2F44; }
.cta-option { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid #3A2F44; }
.cta-option h3 { font-size: var(--step-1); color: var(--on-dark); }
.cta-option p { margin: 0; }
.cta-option .btn { justify-self: start; margin-top: 8px; }
@media (min-width: 1024px) { .cta-grid { grid-template-columns: 6fr 6fr; gap: 80px; align-items: start; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 22px; }
.form-row { display: grid; gap: 22px; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; align-items: end; } }
.field { display: grid; gap: 8px; }
.field > label, .field legend { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--graphite); padding: 0; }
.field .hint { font-size: var(--step--1); color: var(--slate); margin-top: -4px; }
.req { color: var(--coral-ink); }
.optional { font-weight: 500; color: var(--slate); font-family: var(--font-body); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 1.0625rem; color: var(--graphite);
  background: var(--surface); border: 1.5px solid var(--field-border); border-radius: var(--radius-s);
  transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2315131B' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
input:hover, select:hover, textarea:hover { border-color: var(--graphite); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgb(91 42 114 / 25%); }
[aria-invalid="true"] { border-color: var(--coral-ink) !important; }
.field-error { display: none; align-items: flex-start; gap: 6px; font-size: 0.9688rem; color: var(--coral-ink); font-weight: 600; }
.field-error.is-shown { display: flex; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 16px; border: 1.5px solid var(--field-border); border-radius: var(--radius-s); background: var(--surface); font-weight: 600; transition: all .15s; }
.choice input:checked + span { background: var(--purple); border-color: var(--purple); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--purple); outline-offset: 2px; }
.choice input:hover + span { border-color: var(--graphite); }
.consent { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.consent input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--purple); }
.consent label { font-size: 1rem; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.form-panel { background: var(--surface); border: 1px solid var(--stone); border-radius: var(--radius); padding: 24px 20px; }
@media (min-width: 768px) { .form-panel { padding: 40px; } }
.form-submit { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
@media (min-width: 640px) { .form-submit { flex-direction: row; align-items: center; } }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---------- Sticky mobile action bar ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgb(252 250 245 / 98%); border-top: 1px solid var(--stone);
  box-shadow: 0 -10px 30px -20px rgb(25 24 29 / 40%);
  transform: translateY(110%); visibility: hidden;
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}
.action-bar.is-visible { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
.action-bar .btn { flex: 1; min-height: 48px; padding-inline: 12px; }
body.has-action-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .action-bar { display: none; } body.has-action-bar { padding-bottom: 0; } }

/* ---------- Footer (graphite, white logo) ---------- */
.site-footer { background: #130E18; color: var(--on-dark-muted); padding-block: 56px 32px; font-size: 1rem; border-top: 1px solid #2A2232; }
.cta-dark + .site-footer { border-top-color: #2C2A31; }
.footer-grid { display: grid; gap: 36px; }
.footer-grid h2 { font-size: 0.875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 14px; }
.footer-grid ul { list-style: none; display: grid; gap: 2px; }
.footer-grid li a { display: inline-flex; min-height: 40px; align-items: center; color: var(--on-dark); text-decoration: none; }
.footer-grid li a:hover { color: #fff; text-decoration: underline; }
.site-footer .muted { color: var(--on-dark-muted); }
.brand--footer, .brand--footer:hover { color: var(--on-dark); }
.brand--footer .brand-word span { color: var(--on-dark-muted); }
.footer-brand p { color: var(--on-dark-muted); margin-top: 14px; max-width: 34ch; }
.footer-brand strong { color: var(--on-dark); }
.footer-quals { font-family: var(--font-display); font-weight: 600; color: var(--on-dark) !important; font-size: .9375rem; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid #2E2537; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--on-dark-muted); font-size: var(--step--1); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 48px; } }

/* ---------- Insights ---------- */
.empty-state { padding: 40px 0; border-top: 1px solid var(--graphite); max-width: 40rem; }
.article-list { list-style: none; border-top: 1px solid var(--graphite); }
.article-list li { border-bottom: 1px solid var(--stone); }
.article-list a { display: grid; gap: 6px; padding: 24px 0; color: var(--graphite); text-decoration: none; }
.article-list a:hover h3 { color: var(--purple); }

/* ---------- Design system page ---------- */
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.ds-swatch { border: 1px solid var(--stone); border-radius: var(--radius); overflow: hidden; background: var(--surface); font-size: .9375rem; }
.ds-swatch div { height: 80px; }
.ds-swatch p { padding: 10px 12px; margin: 0; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ds-table th, .ds-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--stone); vertical-align: top; }
.ds-table th { font-family: var(--font-display); font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }
.table-scroll { overflow-x: auto; border: 1px solid var(--stone); border-radius: var(--radius); background: var(--surface); }
.pass { color: var(--green); font-weight: 700; }
.fail { color: var(--coral-ink); font-weight: 700; }
.ds-frames { display: grid; gap: 24px; }
.ds-frame { border: 1px solid var(--stone); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.ds-frame p { padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--stone); font-size: .9375rem; color: var(--slate); }
.ds-frame iframe { display: block; border: 0; width: 100%; }
@media (min-width: 1200px) { .ds-frames { grid-template-columns: 390px 1fr; align-items: start; } }

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

@media print {
  .site-header, .action-bar, .cta-dark, .site-footer .footer-grid > :not(.footer-brand) { display: none !important; }
  body { background: #fff; }
}

.ds-logos { display: grid; gap: 16px; }
.ds-logo { margin: 0; padding: 28px; border-radius: var(--radius); border: 1px solid var(--stone); display: grid; gap: 16px; align-content: start; }
.ds-logo--light { background: var(--surface); }
.ds-logo--dark { background: var(--graphite); color: var(--on-dark); border-color: var(--graphite); }
.ds-logo figcaption { font-size: .9375rem; color: inherit; opacity: .8; }
@media (min-width: 900px) { .ds-logos { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Cards: editorial treatment ----------
   Hairline frame, a short accent rule that extends on hover, generous
   padding and content laid out as facts rather than a generic box. */
.loc-card { position: relative; background: var(--surface); border: 1px solid var(--stone); border-radius: var(--radius);
  padding: 28px 24px; display: grid; gap: 22px; overflow: hidden; }
.loc-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 64px; background: var(--purple); transition: width .5s var(--ease); }
.loc-card:hover::before { width: 100%; }
.loc-head { display: flex; gap: 16px; align-items: flex-start; }
.loc-pin { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--purple-tint); color: var(--purple); }
.loc-pin svg { width: 22px; height: 22px; }
.loc-card h3 { font-size: var(--step-2); margin-top: 2px; }
.loc-facts { display: grid; gap: 14px; margin: 0; padding-top: 18px; border-top: 1px solid var(--stone); }
.loc-facts dt { font-family: var(--font-display); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.loc-facts dd { margin: 4px 0 0; color: var(--graphite); }
.loc-facts a { color: var(--graphite); font-weight: 600; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
@media (min-width: 768px) {
  .loc-card { padding: 36px 40px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; }
  .loc-head { grid-row: span 2; }
  .loc-facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding-top: 0; border-top: 0; }
}
.loc-grid { grid-template-columns: 1fr !important; }

.card { position: relative; border-radius: var(--radius); padding: 28px; border: 1px solid var(--stone); background: var(--surface); }
.card--deep { background: #261C2E; border-color: #261C2E; color: var(--on-dark); overflow: hidden; }
.card--deep::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(150 80 200 / 35%), transparent); pointer-events: none; }
.card--deep h3 { color: var(--on-dark); }
.card--deep .muted { color: #D3CADB; }

.form-panel { position: relative; border-radius: var(--radius); box-shadow: 0 30px 60px -40px rgb(25 24 29 / 35%); }
.form-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--purple); border-radius: var(--radius) var(--radius) 0 0; }

.orient-arrow { transition: background-color .2s, color .2s, border-color .2s, transform .3s var(--ease); }
.orient-item:hover .orient-arrow { transform: translateX(4px); }
.orient-item h3 { transition: color .2s; }
.orient-item:hover h3 { color: var(--purple); }

.notice { border-radius: var(--radius); }
.checklist li { transition: background-color .2s; }

/* ---------- Principles and journey: editorial numerals ---------- */
.principles li { position: relative; }
.principles li::before {
  font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem); line-height: 1; font-weight: 800; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.25px var(--purple); margin-bottom: 6px;
}
@supports not (-webkit-text-stroke: 1px black) { .principles li::before { color: var(--purple); } }
.principles li::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--purple); transition: width .5s var(--ease); }
.principles li:hover::after { width: 100%; }
.journey li::before { width: 44px; height: 44px; border-color: var(--purple); color: var(--purple); background: var(--surface); }
.journey li:first-child::before { background: var(--purple); color: #fff; box-shadow: 0 8px 20px -10px rgb(91 42 114 / 70%); }
.journey li::after { background: linear-gradient(180deg, var(--purple), var(--stone-strong)); left: 21.25px; top: 44px; }
.journey h3 { min-height: 0; }
@media (min-width: 1024px) {
  .journey li { padding-top: 70px; }
  .journey li::after { left: 54px; right: -18px; top: 21.25px; background: linear-gradient(90deg, var(--purple), var(--stone-strong)); }
  .journey h3 { min-height: 2.4em; }
}

/* Practice panel: charcoal brand moment until original room photography arrives */
.photo-slot { background: radial-gradient(60% 70% at 50% 45%, #3A2A48 0%, var(--charcoal) 70%); border: 0; border-radius: var(--radius); }
.photo-slot-mark { width: 30%; max-width: 200px; opacity: .95; filter: drop-shadow(0 20px 50px rgb(150 80 200 / 45%)); }
.loc-role { color: var(--purple); }

.glance .eyebrow { margin-bottom: 18px; }
.glance-list { display: grid; gap: 16px; margin: 0; }
.glance-list > div { padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 12%); }
.glance-list dt { font-family: var(--font-display); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.glance-list dd { margin: 4px 0 0; color: var(--on-dark); font-family: var(--font-display); font-weight: 600; line-height: 1.5; }
.card--deep .eyebrow { color: var(--on-dark-muted); }
.card--deep .eyebrow::before { background: #FF7A45; }

/* ---------- Cool palette refresh: steel-blue-grey ground, livelier accents ---------- */
body { background: var(--bg); }
.section--surface { background: linear-gradient(180deg, var(--surface) 0%, #F2F5F9 100%); }
.eyebrow::before { background: linear-gradient(90deg, var(--violet), var(--ember)); height: 2px; }
.on-dark .eyebrow::before, .hero .eyebrow::before, .page-hero--media .eyebrow::before { background: linear-gradient(90deg, #B98AE0, var(--ember)); }
.btn-primary { --btn-bg: var(--violet); --btn-bd: var(--violet);
  background-image: linear-gradient(135deg, #7A38B4 0%, #5B2A72 100%); }
.btn-primary:hover { --btn-bg: #4A1E6E; --btn-bd: #4A1E6E; background-image: linear-gradient(135deg, #6B2FA0 0%, #3A174C 100%); }
.on-dark .btn-primary.btn-glow { background-image: linear-gradient(135deg, #8A44C6 0%, #5B2A72 100%); --btn-bd: #9A66C4; }
.on-dark .btn-primary.btn-glow:hover { background-image: linear-gradient(135deg, #9A55D6 0%, #6B2FA0 100%); }
a { color: var(--violet); }
.link-arrow:hover, .link-arrow:focus-visible { color: var(--violet); }
.orient { background: var(--surface); border-color: var(--stone); }
.orient-item:hover .orient-arrow { background: var(--violet); border-color: var(--violet); color: #fff; }
.svc-panel { background: var(--surface); border-color: var(--stone); box-shadow: 0 1px 0 rgb(21 19 27 / 3%); }
.svc-panel:hover { box-shadow: 0 24px 50px -30px rgb(40 50 80 / 35%); }
.svc-panel--blue { background: linear-gradient(160deg, #DCEAF6 0%, var(--surface) 55%); border-color: #C6D8E8; }
.svc-panel--blue .svc-index { color: var(--blue); }
.svc-tags li { background: rgb(255 255 255 / 70%); border-color: var(--stone); }
.principles li::before { -webkit-text-stroke-color: var(--violet); }
.journey li::before { border-color: var(--violet); color: var(--violet); }
.journey li:first-child::before { background: linear-gradient(135deg, #7A38B4, #5B2A72); }
.checklist svg { color: var(--green); }
.loc-card, .form-panel, .card:not(.card--deep) { background: var(--surface); border-color: var(--stone); }
.loc-card { box-shadow: 0 30px 60px -45px rgb(40 50 80 / 45%); }
.loc-card::before { background: linear-gradient(90deg, var(--violet), var(--ember)); }
.loc-pin { background: var(--purple-tint); color: var(--violet); }
.form-panel::before { background: linear-gradient(90deg, var(--violet), var(--ember)); }
.choice input:checked + span { background: var(--violet); border-color: var(--violet); }
.consent input { accent-color: var(--violet); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--violet); box-shadow: 0 0 0 3px rgb(107 47 160 / 22%); }
:focus-visible { outline-color: var(--violet); }
.page-hero:not(.page-hero--media) { background: linear-gradient(180deg, #E4EAF2 0%, var(--bg) 100%); border-bottom-color: var(--stone); }
.notice--info { background: var(--blue-tint); border-color: #BCD3E6; }
.site-nav li a[aria-current="page"] { color: #fff; }
.svc-panel.svc-panel--feature { background: var(--deep); border-color: var(--deep); box-shadow: 0 30px 60px -40px rgb(26 20 32 / 70%); }
.svc-panel.svc-panel--feature:hover { box-shadow: 0 34px 70px -36px rgb(26 20 32 / 80%); }
.svc-panel.svc-panel--feature .svc-tags li { background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 18%); }

/* =====================================================================
   Brand triad: purple (primary), clinical blue, recovery green.
   Modern card system: one consistent surface for every card-like element.
   ===================================================================== */
:root {
  --green: #1D7352;            /* recovery green: 5.1:1 on ground, 4.9:1 on green tint */
  --green-soft: #DDF1E7;
  --mint: #3FB98A;             /* decorative only (rules, dots), never text */
  --sky: #3A8DD0;              /* decorative only */
  --card-radius: 16px;
  --card-bg: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --card-border: rgb(30 42 58 / 9%);
  --card-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 10px 30px -18px rgb(30 42 70 / 22%);
  --card-shadow-hover: 0 2px 4px rgb(16 24 40 / 5%), 0 22px 46px -22px rgb(30 42 70 / 32%);
  --triad: linear-gradient(90deg, var(--violet) 0%, var(--sky) 55%, var(--mint) 100%);
}

/* Signature thread uses the three brand colours */
.eyebrow::before, .loc-card::before, .form-panel::before { background: var(--triad); }
.on-dark .eyebrow::before, .hero .eyebrow::before, .page-hero--media .eyebrow::before, .card--deep .eyebrow::before {
  background: linear-gradient(90deg, #C29BE8, #7DB8E8, #6FD8AE); }

/* ---------- Shared card surface ---------- */
.svc-panel:not(.svc-panel--feature), .loc-card, .form-panel, .card:not(.card--deep),
.orient-item, .checklist li, .principles li, .spec-list li, .cred-list--cards li {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
a.svc-panel:hover, .loc-card:hover, .orient-item:hover, .principles li:hover, .spec-list li:hover {
  transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: rgb(30 42 58 / 14%);
}
.svc-panel.svc-panel--feature, .card--deep { border-radius: var(--card-radius); }
.svc-panel::before { border-radius: var(--card-radius) var(--card-radius) 0 0; }
.svc-panel--blue { background: linear-gradient(165deg, #DCEBF8 0%, #FFFFFF 58%); border-color: #C9DCEC; }

/* ---------- Orientation strip -> two cards ---------- */
.orient { background: transparent; border: 0; padding-block: 28px 0; }
.orient-list { gap: 14px; }
.orient-list li + li { border: 0 !important; }
.orient-item { padding: 22px 22px !important; }
.orient-list li:first-child .orient-arrow { background: var(--purple-tint); border-color: transparent; color: var(--violet); }
.orient-list li:nth-child(2) .orient-arrow { background: var(--blue-tint); border-color: transparent; color: var(--blue); }
.orient-list li:nth-child(3) .orient-arrow { background: var(--green-soft); border-color: transparent; color: var(--green); }
.orient-kicker { color: var(--slate); }
@media (min-width: 768px) { .orient-list { grid-auto-flow: column; } .orient-item { padding: 26px 28px !important; } }

/* ---------- Specialised care -> icon tiles ---------- */
.spec-list { border-top: 0; display: grid; gap: 10px; }
.spec-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-bottom: 1px solid var(--card-border); }
.spec-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.spec-icon svg { width: 20px; height: 20px; }
.tone-purple .spec-icon { background: var(--purple-tint); color: var(--violet); }
.tone-blue .spec-icon { background: var(--blue-tint); color: var(--blue); }
.tone-green .spec-icon { background: var(--green-soft); color: var(--green); }
.spec-list strong { font-size: 1rem; }
.spec-list span { font-size: .9375rem; }

/* ---------- Principles -> four tiles, triad numbering ---------- */
.principles { border-top: 0; gap: 14px; }
.principles li { padding: 26px 24px !important; border-bottom: 1px solid var(--card-border) !important; align-content: start; }
.principles li::after { display: none; }
.principles li:nth-child(1)::before { -webkit-text-stroke-color: var(--violet); }
.principles li:nth-child(2)::before { -webkit-text-stroke-color: var(--blue); }
.principles li:nth-child(3)::before { -webkit-text-stroke-color: var(--green); }
.principles li:nth-child(4)::before { -webkit-text-stroke-color: var(--violet); }
@media (min-width: 1200px) { .principles { column-gap: 14px; } }

/* ---------- Journey: purple start, green finish ---------- */
.journey li:last-child::before { background: linear-gradient(135deg, var(--mint), var(--green)); border-color: var(--green); color: #fff; }
.journey li::after { background: linear-gradient(180deg, var(--violet), var(--sky), var(--mint)); opacity: .6; }
@media (min-width: 1024px) { .journey li::after { background: linear-gradient(90deg, var(--violet), var(--sky), var(--mint)); } }

/* ---------- Checklist -> tiles with green badges ---------- */
.checklist { border-top: 0; gap: 10px; }
.checklist li { grid-template-columns: 36px 1fr; padding: 16px 18px; border-bottom: 1px solid var(--card-border); }
.checklist svg { width: 22px; height: 22px; color: var(--green); background: var(--green-soft); border-radius: 50%; padding: 6px; box-sizing: content-box; margin: -4px 0 0 -4px; }
@media (min-width: 768px) { .checklist { column-gap: 10px; } }

/* ---------- Location and form cards ---------- */
.loc-card { padding: 30px 28px; }
.loc-card::before { width: 100%; height: 3px; border-radius: var(--card-radius) var(--card-radius) 0 0; }
.loc-pin { background: var(--green-soft); color: var(--green); }
.loc-role { color: var(--green); }
.form-panel::before { border-radius: var(--card-radius) var(--card-radius) 0 0; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea { border-radius: 10px; background: #fff; }
.choice span { border-radius: 10px; background: #fff; }
.choice input:checked + span { box-shadow: 0 6px 16px -8px rgb(107 47 160 / 60%); }
.notice { border-radius: 12px; }
.notice--success { background: var(--green-soft); border-color: #B7DFCB; }

/* ---------- Tags and small chips ---------- */
.svc-tags li { border-radius: 999px; padding: 5px 12px; background: #fff; }
.svc-panel--blue .svc-tags li { border-color: #C9DCEC; color: #24506E; }

/* ---------- Dark cards: soft triad glow ---------- */
.card--deep { box-shadow: 0 30px 60px -36px rgb(26 20 32 / 75%); }
.card--deep::after { background: radial-gradient(closest-side, rgb(63 185 138 / 22%), transparent); }
.glance-list > div:nth-child(3) dt { color: #8FD9B8; }

/* ---------- Home "Your surgeon" credentials: green markers ---------- */
.about-art .cred-list li { position: relative; padding-left: 18px; }
.about-art .cred-list li::before { content: ""; position: absolute; left: 0; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.hero-qual dt::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-right: 8px; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) { a.svc-panel:hover, .loc-card:hover, .orient-item:hover, .principles li:hover, .spec-list li:hover { transform: none; } }
.photo-slot, .about-art-figure--card, .page-hero-media { border-radius: var(--card-radius); }
.page-hero-media { border-radius: 0; }
.photo-slot { box-shadow: 0 30px 60px -36px rgb(26 20 32 / 70%); background: radial-gradient(60% 70% at 50% 45%, #3A2A48 0%, var(--charcoal) 72%), var(--charcoal); }
.checklist li { align-items: start; }
.checklist svg { margin: 0; }
.checklist strong { margin-top: 3px; }

/* =====================================================================
   REFINEMENT PASS (Oct 2026)
   Header colour · eyebrow labels · hero type · links · card hovers ·
   "Your surgeon" cut-out · journey motion · practice glow · location map
   ===================================================================== */

/* ---------- Header: purple-to-indigo charcoal with a fine brand line ---------- */
.site-header {
  --header-bg: #241A30;
  background: linear-gradient(100deg, #2C1D3B 0%, #241A30 45%, #1C2236 100%);
  border-bottom: 0;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgb(155 85 214 / 70%), rgb(58 141 208 / 60%), rgb(63 185 138 / 55%));
}
.site-header .site-nav.is-open { background: linear-gradient(180deg, #241A30, #1C2236); }
@media (min-width: 1100px) {
  .site-header .site-nav li a {
    position: relative; min-height: 40px; padding: 0 14px; border-radius: 999px;
    color: #D3CADB; background: none !important;
    transition: color .2s var(--ease), background-color .25s var(--ease);
  }
  .site-header .site-nav li a:hover { color: #fff; background-color: rgb(255 255 255 / 7%) !important; }
  .site-header .site-nav li a[aria-current="page"] { color: #fff; background-color: rgb(155 85 214 / 18%) !important; }
  .site-header .site-nav li a[aria-current="page"]::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
    background: #9EE0C4;
  }
}

/* ---------- Eyebrow labels: refined capsule ----------
   13px, semibold, wide tracking, tinted capsule with a brand dot. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; line-height: 1.3;
  text-transform: uppercase; color: var(--violet);
  background: var(--purple-tint); border: 1px solid rgb(107 47 160 / 12%);
}
.eyebrow::before {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: conic-gradient(from 200deg, #6B2FA0, #3A8DD0, #3FB98A, #6B2FA0) !important;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 70%);
}
.on-dark .eyebrow, .hero .eyebrow, .page-hero--media .eyebrow, .card--deep .eyebrow, .about-art .eyebrow {
  color: #D4B8F0; background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 12%);
}
.on-dark .eyebrow::before, .hero .eyebrow::before, .page-hero--media .eyebrow::before, .card--deep .eyebrow::before, .about-art .eyebrow::before {
  box-shadow: 0 0 10px rgb(155 85 214 / 70%);
}
/* Other small caps labels share the same tracking */
.orient-kicker, .loc-facts dt, .glance-list dt, .hero-name, .footer-grid h2, .svc-index, .fact-label, .loc-role {
  letter-spacing: .12em; font-weight: 700; font-size: .78rem;
}
.svc-index { text-transform: uppercase; }

/* ---------- Hero typography balance ---------- */
.hero h1 { font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; max-width: 15ch; }
.hero h1 .h1-lead { display: block; color: #F7F5FB; }
.hero h1 .h1-follow {
  display: block; margin-top: .14em; font-weight: 500; letter-spacing: -0.03em;
  background: linear-gradient(90deg, #CDB2F2 0%, #A9CDF2 60%, #9EE0C4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .hero h1 .h1-follow { color: #CDB2F2; } }
.hero .lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.65; color: #D3CADB; max-width: 32rem; margin-top: 26px; }
.hero-name { color: #BDB2C8; }
.hero-qual dt { font-size: 1.0625rem; }
.hero-qual dd { color: #BDB2C8; }

/* ---------- Links: colour shift + arrow badge, no underline ---------- */
.link-arrow {
  background: none !important; gap: 10px; color: var(--graphite);
  transition: color .2s var(--ease);
}
.link-arrow svg {
  width: 28px; height: 28px; padding: 6px; box-sizing: border-box; border-radius: 50%;
  background: var(--purple-tint); color: var(--violet);
  transition: transform .3s var(--ease), background-color .2s, color .2s;
}
.link-arrow:hover, .link-arrow:focus-visible { color: var(--violet); }
.link-arrow:hover svg, .link-arrow:focus-visible svg { transform: translateX(4px); background: var(--violet); color: #fff; }
.on-dark .link-arrow, .hero .link-arrow { color: var(--on-dark); }
.on-dark .link-arrow svg, .hero .link-arrow svg { background: rgb(255 255 255 / 10%); color: #fff; }
.on-dark .link-arrow:hover, .hero .link-arrow:hover { color: #CDB2F2; }
.on-dark .link-arrow:hover svg, .hero .link-arrow:hover svg { background: #8A44C6; }
.breadcrumbs a { text-decoration: none; transition: color .2s; }
.breadcrumbs a:hover { color: var(--violet); }
.page-hero--media .breadcrumbs a:hover { color: #fff; }
.footer-grid li a:hover { text-decoration: none; color: #CDB2F2; transform: translateX(3px); }
.footer-grid li a { transition: color .2s, transform .25s var(--ease); }
.prose a, .notice a, .loc-fact-list a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color .2s; }
.prose a:hover, .loc-fact-list a:hover { color: var(--violet); }

/* ---------- Card hovers: lift + heading colour, no bars or underlines ---------- */
.svc-panel::before, .loc-card::before { display: none !important; }
a.svc-panel:hover, .loc-card:hover, .orient-item:hover, .principles li:hover, .spec-list li:hover, .checklist li:hover, .loc-feature:hover {
  transform: translateY(-4px); box-shadow: var(--card-shadow-hover);
}
.svc-panel h2, .svc-panel h3, .orient-item h3, .principles h3, .spec-list strong, .checklist strong, .loc-feature h3 { transition: color .25s var(--ease); }
a.svc-panel:hover h2, a.svc-panel:hover h3, .orient-item:hover h3, .principles li:hover h3, .spec-list li:hover strong, .checklist li:hover strong { color: var(--violet); }
.svc-panel--blue:hover h2, .svc-panel--blue:hover h3 { color: var(--blue) !important; }
.svc-panel.svc-panel--feature:hover h2, .svc-panel.svc-panel--feature:hover h3 { color: #CDB2F2 !important; }
.svc-panel .link-arrow { pointer-events: none; }
a.svc-panel:hover .link-arrow { color: var(--violet); }
a.svc-panel:hover .link-arrow svg { transform: translateX(4px); background: var(--violet); color: #fff; }
.svc-panel--feature:hover .link-arrow { color: #CDB2F2 !important; }
.orient-item:hover .orient-arrow { transform: translateX(4px) !important; }
.checklist li, .spec-list li { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.svc-tags li { transition: background-color .2s, border-color .2s, color .2s; }
a.svc-panel:hover .svc-tags li { border-color: rgb(107 47 160 / 25%); }
.cred-list li { transition: transform .3s var(--ease); }
.cred-list li:hover { transform: translateX(4px); }
.cred-list li:hover .cred-abbr { color: var(--violet); }
.about-art .cred-list li:hover .cred-abbr { color: #CDB2F2; }
.btn-secondary:hover, .btn-primary:hover { transform: translateY(-2px); }
.card--deep { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card--deep:hover { transform: translateY(-3px); }

/* ---------- "Your surgeon": cut-out artwork sits directly on the section ---------- */
.about-art { background: var(--charcoal, #1A1420) !important; }
.about-art-figure { margin: 0 !important; }
.about-art-figure img { -webkit-mask-image: none !important; mask-image: none !important; transition: transform 1.2s var(--ease); }
.about-art-figure:hover img { transform: scale(1.015); }
@media (min-width: 1024px) {
  .about-art .doctor { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
  .about-art-figure { margin-left: calc(-1 * min(var(--gutter), 24px)) !important; }
}

/* ---------- Journey: scroll and hover interaction ---------- */
.journey li { transition: transform .5s var(--ease), opacity .6s var(--ease); }
.journey li::before { transition: background .35s var(--ease), color .3s, box-shadow .35s var(--ease), transform .35s var(--ease); }
.journey li h3 { transition: color .3s var(--ease); }
.journey--animate li { opacity: .38; transform: translateY(14px); }
.journey--animate li.is-in { opacity: 1; transform: none; }
.journey li::after { transform-origin: top; transition: transform .9s .15s var(--ease); }
.journey--animate li::after { transform: scaleY(0); }
.journey--animate li.is-in::after { transform: scaleY(1); }
@media (min-width: 1024px) {
  .journey li::after { transform-origin: left; }
  .journey--animate li::after { transform: scaleX(0); }
  .journey--animate li.is-in::after { transform: scaleX(1); }
}
.journey li.is-current::before, .journey li:hover::before {
  background: linear-gradient(135deg, #8A44C6, #3A8DD0); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 6px rgb(107 47 160 / 12%), 0 10px 24px -8px rgb(107 47 160 / 60%); transform: scale(1.08);
}
.journey li:last-child.is-current::before, .journey li:last-child:hover::before { background: linear-gradient(135deg, #3FB98A, #1D7352); box-shadow: 0 0 0 6px rgb(63 185 138 / 14%), 0 10px 24px -8px rgb(29 115 82 / 60%); }
.journey li.is-current h3, .journey li:hover h3 { color: var(--violet); }
.journey li:last-child.is-current h3, .journey li:last-child:hover h3 { color: var(--green); }
.journey li:hover { transform: translateY(-3px); }

/* ---------- The practice: logo with purple/blue glow and name reveal ---------- */
.practice-mark {
  position: relative; isolation: isolate; overflow: hidden; outline: none;
  display: grid; place-items: center; align-content: center; gap: 18px;
  aspect-ratio: 3 / 2; border-radius: var(--card-radius); padding: 32px;
  background: radial-gradient(70% 80% at 50% 42%, #2E2140 0%, #1A1420 70%);
  box-shadow: 0 30px 60px -36px rgb(26 20 32 / 70%);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.practice-orbit {
  position: absolute; z-index: -1; inset: 50% auto auto 50%; width: 70%; aspect-ratio: 1; translate: -50% -58%;
  border-radius: 50%; opacity: .35;
  background: radial-gradient(closest-side, rgb(155 85 214 / 55%), rgb(58 141 208 / 30%) 55%, transparent 75%);
  filter: blur(18px); transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.practice-logo {
  width: clamp(150px, 34%, 240px); height: auto;
  filter: drop-shadow(0 0 0 rgb(155 85 214 / 0));
  transition: filter .6s var(--ease), transform .6s var(--ease);
}
.practice-name {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  letter-spacing: .18em; text-transform: uppercase; color: #F3F5FA;
  text-shadow: 0 0 14px rgb(155 85 214 / 85%), 0 0 32px rgb(58 141 208 / 70%);
  opacity: .9; transition: opacity .6s var(--ease), transform .6s var(--ease), letter-spacing .6s var(--ease);
}
@media (hover: hover) {
  .practice-name { opacity: 0; transform: translateY(10px); letter-spacing: .3em; }
}
.practice-mark:hover, .practice-mark:focus-visible { transform: translateY(-4px); box-shadow: 0 40px 80px -40px rgb(58 30 90 / 85%); }
.practice-mark:focus-visible { box-shadow: 0 0 0 3px #9A55D6, 0 40px 80px -40px rgb(58 30 90 / 85%); }
.practice-mark:hover .practice-orbit, .practice-mark:focus-visible .practice-orbit { opacity: 1; transform: scale(1.15); }
.practice-mark:hover .practice-logo, .practice-mark:focus-visible .practice-logo {
  transform: scale(1.04);
  filter: drop-shadow(0 0 18px rgb(155 85 214 / 85%)) drop-shadow(0 0 42px rgb(58 141 208 / 65%));
}
.practice-mark:hover .practice-name, .practice-mark:focus-visible .practice-name { opacity: 1; transform: none; letter-spacing: .18em; }

/* ---------- Where to find us: map panel + details ---------- */
.loc-features { display: grid; gap: 24px; }
.loc-feature {
  display: grid; overflow: hidden; border-radius: var(--card-radius);
  background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.loc-map { position: relative; min-height: 240px; background: #1E1726; overflow: hidden; }
.loc-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loc-map-svg .roads-minor path { fill: none; stroke: rgb(255 255 255 / 7%); stroke-width: 1.2; }
.loc-map-svg .road-major { fill: none; stroke: rgb(255 255 255 / 16%); stroke-width: 6; stroke-linecap: round; }
.loc-map-svg .road-route { fill: none; stroke: url(#arterial); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 10; animation: route 3.5s linear infinite; }
.loc-map-svg .park { fill: rgb(63 185 138 / 16%); }
.loc-map-svg .pin path { fill: #9A55D6; }
.loc-map-svg .pin { filter: drop-shadow(0 6px 10px rgb(0 0 0 / 50%)); transition: transform .4s var(--ease); }
.loc-map-svg .pin-pulse { fill: none; stroke: #CDB2F2; stroke-width: 2; transform-origin: 300px 210px; animation: pulse 2.4s var(--ease) infinite; }
.loc-feature:hover .loc-map-svg .pin { transform: translate(300px, 204px); }
@keyframes route { to { stroke-dashoffset: -36; } }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.loc-map-label {
  position: absolute; left: 16px; bottom: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px);
  display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px;
  background: rgb(26 20 32 / 78%); border: 1px solid rgb(255 255 255 / 12%); color: #F3F5FA;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.loc-map-label strong { font-family: var(--font-display); font-size: .9375rem; }
.loc-map-label span { font-size: .8125rem; color: #BDB2C8; }
.loc-panel { padding: 28px 24px 30px; display: grid; gap: 18px; align-content: start; }
.loc-panel .loc-role { color: var(--green); text-transform: uppercase; }
.loc-panel h3 { font-size: var(--step-3); margin-top: -8px; transition: color .25s var(--ease); }
.loc-feature:hover .loc-panel h3 { color: var(--violet); }
.loc-fact-list { list-style: none; display: grid; gap: 14px; }
.loc-fact-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.fact-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.fact-icon svg { width: 20px; height: 20px; }
.loc-fact-list li:nth-child(1) .fact-icon { background: var(--purple-tint); color: var(--violet); }
.loc-fact-list li:nth-child(2) .fact-icon { background: var(--blue-tint); color: var(--blue); }
.loc-fact-list li:nth-child(3) .fact-icon { background: var(--green-soft); color: var(--green); }
.fact-label { display: block; text-transform: uppercase; color: var(--slate); }
.fact-value { display: block; margin-top: 2px; color: var(--graphite); font-weight: 500; }
.fact-value a { color: var(--graphite); font-weight: 600; }
.loc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
@media (min-width: 900px) {
  .loc-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .loc-map { min-height: 420px; }
  .loc-panel { padding: 44px 40px; align-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .journey--animate li, .journey--animate li::after { opacity: 1 !important; transform: none !important; }
  .practice-name { opacity: 1 !important; transform: none !important; }
}

/* ---------- Brand word: "NeuroSpine" in a lilac-to-sky gradient ---------- */
.brand-word { font-weight: 800; letter-spacing: -0.02em; }
.site-header .brand-word span, .brand--footer .brand-word span {
  background: linear-gradient(90deg, #CDB2F2 0%, #A9CDF2 70%, #9EE0C4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;
}
.site-header .brand { transition: opacity .2s; }
.site-header .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }
.site-header .brand-mark { transition: transform .4s var(--ease); }

/* ---------- Header: pressed and active states, mobile menu ---------- */
.site-header .site-nav li a:active { transform: translateY(1px); background-color: rgb(155 85 214 / 26%) !important; }
.site-header .nav-toggle { border-radius: 999px; padding: 8px 16px; transition: background-color .2s, border-color .2s; }
.site-header .nav-toggle:hover { background: rgb(255 255 255 / 7%); }
.site-header .nav-toggle[aria-expanded="true"] { background: rgb(155 85 214 / 22%); border-color: rgb(205 178 242 / 50%); }
@media (max-width: 1099px) {
  .site-header .site-nav li a { padding: 0 12px; margin-inline: -12px; border-radius: 12px; border-bottom: 0; transition: background-color .2s, color .2s, padding-left .25s var(--ease); }
  .site-header .site-nav li + li { border-top: 1px solid rgb(255 255 255 / 8%); }
  .site-header .site-nav li a:hover { background: rgb(255 255 255 / 6%); padding-left: 18px; }
  .site-header .site-nav li a[aria-current="page"] { background: rgb(155 85 214 / 18%); color: #fff; }
}
.header-cta { border-radius: 999px !important; }

/* ---------- Page heroes: plain (light with brand glow) ---------- */
.page-hero--plain {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #E6ECF4 0%, var(--bg) 100%) !important;
  border-bottom: 1px solid var(--stone); padding-block: 40px 56px;
}
.page-hero-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-hero-orbs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.page-hero-orbs i:nth-child(1) { width: 360px; height: 360px; right: 6%; top: -120px; background: #CDB2F2; }
.page-hero-orbs i:nth-child(2) { width: 300px; height: 300px; right: 22%; top: 40px; background: #A9CDF2; opacity: .5; }
.page-hero-orbs i:nth-child(3) { width: 220px; height: 220px; right: 2%; bottom: -100px; background: #9EE0C4; opacity: .45; }
@media (max-width: 767px) { .page-hero-orbs i { filter: blur(48px); opacity: .4; } .page-hero-orbs i:nth-child(1) { right: -120px; } .page-hero-orbs i:nth-child(2) { right: -60px; } }
.page-hero h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
.page-hero .lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.65; max-width: 36rem; }
@media (min-width: 1024px) { .page-hero--plain { padding-block: 64px 80px; } }

/* ---------- Breadcrumbs: pill trail, current page highlighted ---------- */
.breadcrumbs { margin-bottom: 22px; }
.breadcrumbs ol { gap: 6px; align-items: center; }
.breadcrumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 4px 0 0; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); display: inline-block; opacity: .5; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs a, .breadcrumbs [aria-current] { padding: 6px 12px !important; border-radius: 999px; font-size: .875rem; font-weight: 600; font-family: var(--font-display); }
.breadcrumbs a { color: var(--slate); background: rgb(255 255 255 / 60%); border: 1px solid var(--card-border); transition: color .2s, background-color .2s, transform .2s var(--ease); }
.breadcrumbs a:hover { color: var(--violet); background: #fff; transform: translateY(-1px); }
.breadcrumbs [aria-current] { color: var(--violet); background: var(--purple-tint); border: 1px solid rgb(107 47 160 / 14%); }
.page-hero--media .breadcrumbs a { color: #D3CADB; background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 12%); }
.page-hero--media .breadcrumbs a:hover { color: #fff; background: rgb(255 255 255 / 12%); }
.page-hero--media .breadcrumbs [aria-current] { color: #fff; background: rgb(155 85 214 / 26%); border-color: rgb(205 178 242 / 30%); }
.page-hero--media { background: radial-gradient(60% 90% at 0% 100%, rgb(107 47 160 / 22%), transparent 60%), var(--media-bg, var(--deep)); }
.page-hero--media .lede { color: #D3CADB; }

/* ---------- Contact page ---------- */
.contact-side { display: grid; gap: 18px; align-content: start; }
.contact-title { font-size: var(--step-3); }
.channel-list { list-style: none; display: grid; gap: 10px; margin-top: 4px; }
.channel {
  display: grid; grid-template-columns: 44px 1fr 28px; gap: 14px; align-items: center; padding: 14px 16px;
  border-radius: 14px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
  color: var(--graphite); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.channel:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); color: var(--graphite); }
.channel-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.channel-icon svg { width: 20px; height: 20px; }
.channel.tone-purple .channel-icon { background: var(--purple-tint); color: var(--violet); }
.channel.tone-blue .channel-icon { background: var(--blue-tint); color: var(--blue); }
.channel.tone-green .channel-icon { background: var(--green-soft); color: var(--green); }
.channel-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.channel-value { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; transition: color .2s; }
.channel:hover .channel-value { color: var(--violet); }
.channel-go svg { width: 18px; height: 18px; color: var(--slate); transition: transform .3s var(--ease), color .2s; }
.channel:hover .channel-go svg { transform: translateX(4px); color: var(--violet); }
.mini-steps-title { font-size: 1.0625rem; margin-top: 10px; }
.mini-steps { list-style: none; counter-reset: ms; display: grid; gap: 0; }
.mini-steps li { counter-increment: ms; position: relative; padding: 0 0 18px 44px; display: grid; gap: 2px; }
.mini-steps li::before { content: counter(ms); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .8125rem; color: #fff; background: linear-gradient(135deg, #8A44C6, #3A8DD0); }
.mini-steps li:last-child::before { background: linear-gradient(135deg, #3FB98A, #1D7352); }
.mini-steps li::after { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1.5px; background: linear-gradient(var(--sky), var(--stone)); }
.mini-steps li:last-child::after { display: none; }
.mini-steps strong { font-family: var(--font-display); }
.mini-steps span { color: var(--slate); font-size: .9375rem; }
.form-panel { padding: 28px 22px; }
@media (min-width: 768px) { .form-panel { padding: 44px; } }
#enquiry .two-col { align-items: start; }
@media (min-width: 1024px) { #enquiry .contact-side { position: sticky; top: calc(var(--header-h) + 28px); } }

/* ---------- Closing call to action ("Next step") ---------- */
.cta-dark { background: var(--charcoal, #1A1420) !important; padding-block: 80px; position: relative; }
.cta-shell {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: 36px 24px;
  background: linear-gradient(135deg, #2A1D38 0%, #1F1A30 55%, #18263A 100%);
  border: 1px solid rgb(255 255 255 / 8%); display: grid; gap: 32px;
}
.cta-shell::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(155 85 214 / 45%), transparent); filter: blur(10px); }
.cta-shell::after { content: ""; position: absolute; z-index: -1; width: 360px; height: 360px; left: -140px; bottom: -200px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(63 185 138 / 28%), transparent); filter: blur(10px); }
.cta-intro h2 { font-size: var(--step-4); color: var(--on-dark); margin-top: 16px; max-width: 14ch; }
.cta-intro p:not(.eyebrow) { margin-top: 14px; color: #D3CADB; max-width: 32rem; }
.cta-options { display: grid; gap: 12px; border: 0 !important; }
.cta-option {
  display: grid; grid-template-columns: 48px 1fr 32px; gap: 16px; align-items: center; padding: 18px 18px !important;
  border-radius: 16px; border: 1px solid rgb(255 255 255 / 10%) !important; background: rgb(255 255 255 / 5%);
  color: var(--on-dark); text-decoration: none; transition: transform .3s var(--ease), background-color .3s, border-color .3s;
}
.cta-option:hover { transform: translateY(-3px); background: rgb(255 255 255 / 9%); border-color: rgb(205 178 242 / 35%) !important; color: var(--on-dark); }
.cta-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.cta-icon svg { width: 22px; height: 22px; }
.cta-option.tone-purple .cta-icon { background: linear-gradient(135deg, #8A44C6, #5B2A72); box-shadow: 0 10px 24px -10px rgb(138 68 198 / 80%); }
.cta-option.tone-blue .cta-icon { background: linear-gradient(135deg, #3A8DD0, #155E8C); box-shadow: 0 10px 24px -10px rgb(58 141 208 / 80%); }
.cta-text { display: grid; gap: 2px; }
.cta-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #BDB2C8; }
.cta-text strong { font-family: var(--font-display); font-size: 1.1875rem; transition: color .2s; }
.cta-text span:last-child { color: #D3CADB; font-size: .9375rem; }
.cta-option:hover strong { color: #CDB2F2; }
.cta-option.tone-blue:hover strong { color: #A9CDF2; }
.cta-go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 8%); transition: transform .3s var(--ease), background-color .2s; }
.cta-go svg { width: 16px; height: 16px; }
.cta-option:hover .cta-go { transform: translateX(4px); background: rgb(255 255 255 / 16%); }
@media (min-width: 900px) {
  .cta-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; padding: 56px; align-items: center; }
}

/* ---------- Footer ---------- */
.site-footer { position: relative; background: #120D17 !important; border-top: 0 !important; padding-block: 72px 32px; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(155 85 214 / 70%) 20%, rgb(58 141 208 / 60%) 55%, rgb(63 185 138 / 55%) 80%, transparent); }
.footer-mark { height: 64px !important; width: auto !important; }
@media (min-width: 768px) { .footer-mark { height: 76px !important; } }
.brand--footer { gap: 14px; }
.brand--footer .brand-word { font-size: 1.5rem; }
.footer-brand p { color: #BDB2C8; }
.footer-quals { color: #E6E0EC !important; line-height: 1.7; }
.footer-grid h2 { color: #D4B8F0 !important; }
.footer-grid li a { color: #E6E0EC; }
.footer-grid .notice--emergency { background: rgb(200 73 59 / 10%); border-color: rgb(240 164 152 / 30%); }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / 8%) !important; color: #A79CB3; }
.footer-bottom span { color: #BDB2C8; }
.svc-panel--blue:hover .link-arrow { color: var(--blue) !important; }
.svc-panel--blue:hover .link-arrow svg { background: var(--blue) !important; }
.svc-panel--feature .svc-index { color: #A9CDF2 !important; }
.form-panel::before { display: none !important; }

/* ---------- Card hover line ----------
   A 4px purple-blue-green line drawn as the card's first background layer,
   so it sits inside the border and follows the rounded top corners.
   It sweeps in from the left on hover, alongside the lift and heading colour. */
:root { --line: linear-gradient(90deg, #8A44C6 0%, #3A8DD0 55%, #3FB98A 100%); }
.loc-feature, .orient-item, .principles li, .spec-list li, .checklist li, .channel, a.svc-panel:not(.svc-panel--feature):not(.svc-panel--blue) {
  background: var(--line) 0 0 / 0% 4px no-repeat, linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-size .55s var(--ease), border-color .25s !important;
}
a.svc-panel.svc-panel--blue {
  background: var(--line) 0 0 / 0% 4px no-repeat, linear-gradient(165deg, #DCEBF8 0%, #FFFFFF 58%) !important;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-size .55s var(--ease) !important;
}
.cta-option { background: var(--line) 0 0 / 0% 4px no-repeat, rgb(255 255 255 / 5%) !important;
  transition: transform .3s var(--ease), background-size .55s var(--ease), border-color .3s !important; }
.card--deep { background: var(--line) 0 0 / 0% 4px no-repeat, #261C2E !important; transition: transform .35s var(--ease), background-size .55s var(--ease) !important; }
.loc-feature:hover, .orient-item:hover, .principles li:hover, .spec-list li:hover, .checklist li:hover, .channel:hover,
a.svc-panel:not(.svc-panel--feature):hover, .cta-option:hover, .card--deep:hover {
  background-size: 100% 4px, auto !important;
}
.cta-option:hover { background-color: transparent; }
/* Feature panel: its image covers the background, so the line is a top layer instead */
.svc-panel.svc-panel--feature::after {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 4px;
  background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease);
}
.svc-panel.svc-panel--feature:hover::after { transform: scaleX(1); }
.loc-feature { overflow: hidden; }
.loc-feature .loc-map { z-index: 0; }
.loc-feature:hover .loc-map { box-shadow: inset 0 4px 0 0 transparent; }
/* Map covers the line on wide screens: draw a top layer there too */
.loc-feature { position: relative; }
.loc-feature::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 4px;
  background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.loc-feature:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .svc-panel.svc-panel--feature::after, .loc-feature::after { transition: none; }
}

/* ---------- Card hover line: inside the top edge, clipped by the radius ----------
   Drawn as a background layer (not a pseudo-element), so it always sits
   inside the border and follows the rounded corners. 4px, brand triad. */
:root {
  --line-light: linear-gradient(90deg, #6B2FA0 0%, #3A8DD0 55%, #3FB98A 100%);
  --line-dark: linear-gradient(90deg, #B98AE0 0%, #7DB8E8 55%, #6FD8AE 100%);
}
a.svc-panel:not(.svc-panel--feature):not(.svc-panel--blue), .loc-feature .loc-panel, .orient-item, .principles li,
.spec-list li, .checklist li, .channel {
  background-image: var(--line-light), linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, 0 0 !important;
  background-size: 0% 4px, 100% 100% !important;
  background-origin: padding-box !important; background-clip: padding-box !important;
  transition: background-size .5s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease) !important;
}
a.svc-panel.svc-panel--blue {
  background-image: var(--line-light), linear-gradient(165deg, #DCEBF8 0%, #FFFFFF 58%) !important;
  background-repeat: no-repeat !important; background-position: 0 0, 0 0 !important;
  background-size: 0% 4px, 100% 100% !important; background-clip: padding-box !important;
  transition: background-size .5s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease) !important;
}
a.svc-panel:hover, .loc-feature:hover .loc-panel, .orient-item:hover, .principles li:hover,
.spec-list li:hover, .checklist li:hover, .channel:hover {
  background-size: 100% 4px, 100% 100% !important;
}
/* Dark cards use the lighter triad line */
a.svc-panel.svc-panel--feature, .cta-option, .card--deep {
  background-image: var(--line-dark), none;
  background-repeat: no-repeat; background-position: 0 0; background-size: 0% 4px;
  background-clip: padding-box;
}
a.svc-panel.svc-panel--feature { background-color: var(--deep) !important; }
.cta-option { background-color: rgb(255 255 255 / 5%); transition: background-size .5s var(--ease), transform .3s var(--ease), background-color .3s, border-color .3s; }
.card--deep { background-color: #261C2E; transition: background-size .5s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
a.svc-panel.svc-panel--feature:hover, .cta-option:hover, .card--deep:hover { background-size: 100% 4px; }
/* The location card: line runs across the whole card top */
.loc-feature { position: relative; }
.loc-feature::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2;
  background: var(--line-light); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); pointer-events: none; }
.loc-feature:hover::after { transform: scaleX(1); }
.loc-feature .loc-panel { background-size: 0 0, 100% 100% !important; }

/* Card polish: consistent radius, padding rhythm and inner highlight */
.svc-panel, .loc-feature, .orient-item, .principles li, .spec-list li, .checklist li, .channel, .cta-option, .card {
  border-radius: var(--card-radius) !important;
}
.svc-panel:not(.svc-panel--feature), .orient-item, .principles li, .spec-list li, .checklist li, .channel, .loc-feature {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), var(--card-shadow) !important;
}
a.svc-panel:hover, .orient-item:hover, .principles li:hover, .spec-list li:hover, .checklist li:hover, .channel:hover, .loc-feature:hover {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), var(--card-shadow-hover) !important;
}
a.svc-panel.svc-panel--feature:hover { box-shadow: 0 34px 70px -36px rgb(26 20 32 / 80%) !important; }
@media (prefers-reduced-motion: reduce) {
  a.svc-panel, .orient-item, .principles li, .spec-list li, .checklist li, .channel, .cta-option { transition: none !important; }
}

/* =====================================================================
   SPACING AND ALIGNMENT PASS
   One rhythm for every button, card and label (4px base grid).
   ===================================================================== */
:root { --pad-card: 24px; --pad-card-lg: 32px; --pad-item: 18px 20px; }
@media (min-width: 768px) { :root { --pad-card: 28px; --pad-card-lg: 40px; } }

/* Buttons: equal optical padding; the arrow badge replaces right padding */
.btn { min-height: 52px; padding: 12px 24px; line-height: 1.2; gap: 14px; }
.btn-lg { min-height: 56px; padding: 14px 28px; font-size: 1.0625rem; }
.btn:has(.btn-icon) { padding-right: 12px; }
.btn-lg:has(.btn-icon) { padding-right: 14px; }
.btn-icon { width: 30px; height: 30px; margin: 0 !important; border-radius: 8px; }
.btn > span:first-child { display: inline-block; padding-block: 1px; }
.btn svg:first-child:not(.btn-icon svg) { margin-left: -2px; }
.header-cta { min-height: 44px !important; padding: 10px 20px !important; font-size: .9375rem; }
.action-bar .btn { min-height: 50px; padding: 10px 14px; }
.btn-block { justify-content: space-between; }
.btn-block:not(:has(.btn-icon)) { justify-content: center; }

/* Eyebrow capsule: balanced padding */
.eyebrow { padding: 7px 14px 7px 12px; gap: 9px; margin-bottom: 18px; }
.section-head .eyebrow + h2, .page-hero .eyebrow + h1 { margin-top: 0; }

/* Card text: tighter title leading, comfortable descriptions */
.svc-panel h2, .svc-panel h3, .orient-item h3, .principles h3, .loc-panel h3, .cta-text strong { line-height: 1.2; }
.spec-list strong, .checklist strong, .channel-value, .mini-steps strong { line-height: 1.35; }
.spec-list span, .checklist span, .orient-item p, .principles p, .mini-steps span, .cta-text span:last-child, .fact-value { line-height: 1.55; }
.spec-list li > div, .checklist li > div { display: grid; gap: 4px; }
.spec-list strong, .checklist strong { margin: 0 !important; }

/* Item cards (specialised care, checklist): same padding, icon aligned to title */
.spec-list li, .checklist li { padding: var(--pad-item) !important; gap: 16px; align-items: start; }
.spec-list li { grid-template-columns: 40px 1fr; }
.checklist li { grid-template-columns: 34px 1fr; }
.spec-icon { margin-top: 0; }
.checklist svg { margin-top: 0 !important; }

/* Orientation cards */
.orient-item { padding: 22px var(--pad-card) !important; gap: 4px 20px; }
.orient-kicker { display: block; margin-bottom: 4px; }
.orient-item h3 { margin-bottom: 2px; }

/* Service panels */
.svc-panel:not(.svc-panel--feature) { padding: var(--pad-card-lg) var(--pad-card) !important; gap: 18px; }
@media (min-width: 768px) { .svc-panel:not(.svc-panel--feature) { padding: 36px 40px !important; } }
.svc-body { gap: 18px; }
.svc-tags { gap: 8px; }
.svc-tags li { padding: 6px 12px !important; border-radius: 10px !important; font-size: .875rem; line-height: 1.35; }

/* Principles */
.principles li { padding: 28px var(--pad-card) 30px !important; gap: 10px; }

/* Location panel */
.loc-panel { padding: 28px var(--pad-card) 32px; gap: 20px; }
.loc-panel h3 { margin-top: -6px; }
.loc-fact-list li { align-items: center; }
.loc-fact-list li > div { display: grid; gap: 2px; }
@media (min-width: 900px) { .loc-panel { padding: 44px 44px; } }

/* Closing call-to-action options and contact channels */
.cta-option { padding: 18px 18px 18px 18px !important; gap: 16px; }
.channel { padding: 14px 16px 14px 14px; }

/* Forms */
.form { gap: 24px; }
.field { gap: 8px; }
.choice span { padding: 10px 18px; min-height: 46px; }
.form-submit { gap: 16px; }

/* Footer link rhythm */
.footer-grid ul { gap: 0; }
.footer-grid li a { min-height: 36px; }

/* ---------- Hover line v2: hugs the rounded corners ----------
   A border-shaped overlay: 5px at the top, tapering into each corner curve.
   The mask cuts away the padding box (which is itself rounded), so the line's
   inner edge follows the same curve as the card. */
a.svc-panel, .loc-feature, .orient-item, .principles li, .spec-list li, .checklist li, .channel, .cta-option {
  position: relative;
}
a.svc-panel::after, .loc-feature::after, .orient-item::after, .principles li::after,
.spec-list li::after, .checklist li::after, .channel::after, .cta-option::after {
  content: "" !important; display: block !important;
  position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border-radius: inherit; border: 0 solid transparent; border-top-width: 5px; border-left-width: 1px; border-right-width: 1px;
  background: var(--line-light) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transform: none !important; height: auto !important; width: auto !important;
  clip-path: inset(0 100% 0 0 round var(--card-radius));
  transition: opacity .3s var(--ease), clip-path .6s var(--ease);
}
a.svc-panel.svc-panel--feature::after, .cta-option::after { background: var(--line-dark) border-box; }
a.svc-panel:hover::after, .loc-feature:hover::after, .orient-item:hover::after, .principles li:hover::after,
.spec-list li:hover::after, .checklist li:hover::after, .channel:hover::after, .cta-option:hover::after,
a.svc-panel:focus-visible::after, .orient-item:focus-visible::after, .channel:focus-visible::after, .cta-option:focus-visible::after {
  opacity: 1; clip-path: inset(0 0 0 0 round var(--card-radius));
}
/* retire the earlier background-layer line */
a.svc-panel:not(.svc-panel--feature):not(.svc-panel--blue), .loc-feature .loc-panel, .orient-item, .principles li,
.spec-list li, .checklist li, .channel { background-size: 0 0, 100% 100% !important; }
a.svc-panel.svc-panel--blue { background-size: 0 0, 100% 100% !important; }
a.svc-panel.svc-panel--feature, .cta-option, .card--deep { background-size: 0 0 !important; }
.loc-feature { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { a.svc-panel::after, .loc-feature::after, .orient-item::after, .principles li::after, .spec-list li::after, .checklist li::after, .channel::after, .cta-option::after { transition: none; } }
.loc-fact-list li { align-items: start !important; } .fact-icon { margin-top: 2px; }

/* =====================================================================
   MOBILE SCROLLING AND TOUCH
   ===================================================================== */
html { -webkit-tap-highlight-color: transparent; }
/* Touch screens: no sticky "hover" lift after a tap; keep a quick press state instead */
@media (hover: none) {
  a.svc-panel:hover, .loc-feature:hover, .orient-item:hover, .principles li:hover, .spec-list li:hover,
  .checklist li:hover, .channel:hover, .cta-option:hover, .card--deep:hover, .practice-mark:hover,
  .journey li:hover, .cred-list li:hover, .btn:hover, .footer-grid li a:hover, .breadcrumbs a:hover {
    transform: none !important;
  }
  a.svc-panel:active, .orient-item:active, .channel:active, .cta-option:active, .btn:active { transform: scale(.985) !important; transition-duration: .1s !important; }
  a.svc-panel:hover::after, .loc-feature:hover::after, .orient-item:hover::after, .principles li:hover::after,
  .spec-list li:hover::after, .checklist li:hover::after, .channel:hover::after, .cta-option:hover::after { opacity: 0; }
  a.svc-panel:active::after, .orient-item:active::after, .channel:active::after, .cta-option:active::after { opacity: 1; clip-path: inset(0 0 0 0 round var(--card-radius)); }
}
/* Cheaper decorative glows: gradients instead of blur filters (no repaint cost while scrolling) */
.page-hero-orbs i { filter: none !important; opacity: .7 !important; }
.page-hero-orbs i:nth-child(1) { background: radial-gradient(closest-side, rgb(205 178 242 / 85%), transparent) !important; }
.page-hero-orbs i:nth-child(2) { background: radial-gradient(closest-side, rgb(169 205 242 / 80%), transparent) !important; }
.page-hero-orbs i:nth-child(3) { background: radial-gradient(closest-side, rgb(158 224 196 / 75%), transparent) !important; }
.practice-orbit { filter: none !important; }
.cta-shell::before, .cta-shell::after { filter: none !important; }
.loc-map-label { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(26 20 32 / 88%); }
/* Sticky header stays light to composite */
.site-header { will-change: auto; transform: translateZ(0); }
@media (max-width: 767px) {
  .hero-media img { animation-duration: 1.4s !important; }
  .cta-dark { padding-block: 56px; }
  .cta-shell { padding: 28px 20px; border-radius: 20px; }
  .cta-option { grid-template-columns: 44px 1fr 28px; }
  .cta-icon { width: 44px; height: 44px; }
  .section { padding-block: 64px; }
}

/* =====================================================================
   SECTION LABELS (eyebrows): italic serif, sentence case, no capsule
   Instrument Serif italic adds an editorial voice above the sans headings.
   ===================================================================== */
:root { --font-accent: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.eyebrow {
  display: flex; align-items: center; gap: 12px; width: auto;
  padding: 0 !important; margin: 0 0 14px; border: 0 !important; background: none !important; border-radius: 0;
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.25;
  letter-spacing: 0; text-transform: none; color: var(--violet);
}
.eyebrow::before {
  content: ""; flex: none; width: 32px; height: 2px; border-radius: 2px; box-shadow: none !important;
  background: linear-gradient(90deg, #6B2FA0, #3A8DD0 60%, #3FB98A) !important;
}
.on-dark .eyebrow, .hero .eyebrow, .page-hero--media .eyebrow, .card--deep .eyebrow, .about-art .eyebrow {
  color: #D9C2F2; background: none !important; border: 0 !important;
}
.on-dark .eyebrow::before, .hero .eyebrow::before, .page-hero--media .eyebrow::before, .card--deep .eyebrow::before, .about-art .eyebrow::before {
  background: linear-gradient(90deg, #C29BE8, #7DB8E8 60%, #6FD8AE) !important; box-shadow: none !important;
}
.hero .eyebrow { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); margin-bottom: 18px; }
.glance .eyebrow, .cta-intro .eyebrow { margin-bottom: 10px; }
.cta-intro h2 { margin-top: 6px; }
.section-head .eyebrow + h2 { margin-top: 0; }
.hero-name { font-family: var(--font-accent); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.25rem; color: #D9C2F2; margin-bottom: 12px; }
.mini-steps-title { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.375rem; color: var(--violet); }
.orient-kicker, .svc-index {
  font-family: var(--font-accent); font-style: italic; font-weight: 400; text-transform: none !important;
  letter-spacing: 0 !important; font-size: 1.125rem !important; line-height: 1.3;
}
.orient-kicker { color: var(--violet); }
.svc-panel--blue .svc-index { color: var(--blue); }

/* Section labels: larger, with a subtle brand gradient (purple -> blue) */
.eyebrow { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); gap: 14px; margin-bottom: 12px; }
.eyebrow > *, .eyebrow { background-clip: border-box; }
.eyebrow {
  background: linear-gradient(90deg, #5B2A72 0%, #6B2FA0 45%, #155E8C 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
  padding-block: .06em !important;
}
.on-dark .eyebrow, .hero .eyebrow, .page-hero--media .eyebrow, .card--deep .eyebrow, .about-art .eyebrow {
  background: linear-gradient(90deg, #E2CDF7 0%, #CDB2F2 45%, #A9CDF2 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}
/* the leading rule keeps its own gradient (pseudo-element is not text-clipped) */
.eyebrow::before { width: 36px; height: 2px; }
.hero .eyebrow { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.875rem); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .eyebrow { color: var(--violet) !important; background: none !important; }
  .on-dark .eyebrow, .hero .eyebrow, .about-art .eyebrow, .page-hero--media .eyebrow { color: #D9C2F2 !important; }
}
.eyebrow { align-items: baseline; } .eyebrow::before { align-self: center; } .hero .eyebrow::before { align-self: flex-start; margin-top: .62em; }

/* ---------- Transparent artwork: shown whole, never cropped or faded ---------- */
.page-hero--art { background: var(--charcoal) !important; }
.page-hero--art .page-hero-media { aspect-ratio: auto; padding: 8px var(--gutter) 32px; }
.page-hero--art .page-hero-media img {
  object-fit: contain !important; width: 100%; height: auto;
  -webkit-mask-image: none !important; mask-image: none !important;
}
@media (min-width: 900px) {
  .page-hero--art { min-height: 0; }
  .page-hero--art .page-hero-media {
    position: absolute; inset: 0 var(--gutter) 0 auto; width: 52%; padding: 28px 0;
    display: flex; align-items: center; justify-content: flex-end;
  }
  .page-hero--art .page-hero-media picture { width: 100%; height: 100%; display: flex; align-items: center; }
  .page-hero--art .page-hero-media img { height: 100%; max-height: 100%; width: 100%; object-position: right center !important; }
  .page-hero--art .page-hero-inner { padding-block: 64px 72px; }
  .page-hero--art .page-hero-copy { max-width: 30rem; }
}
@media (min-width: 1440px) { .page-hero--art .page-hero-media { right: calc((100vw - var(--maxw)) / 2 + var(--gutter)); } }
/* Home "Your surgeon": keep the whole artwork inside the column, no clipping */
.about-art-figure { margin: 0 !important; overflow: visible; }
.about-art-figure img { object-fit: contain; width: 100%; height: auto; }
@media (min-width: 900px) and (max-width: 1199px) { .page-hero--art .page-hero-media { width: 42%; } .page-hero--art .page-hero-copy { max-width: 25rem; } }

/* =====================================================================
   V3 · ONE SYSTEM FOR BUTTONS AND CARDS
   Radii: card 18px · shell 24px · button 14px · tile 12px · button tile 9px.
   Light cards = white glass; dark shells = charcoal gradient with soft
   purple/green glows (the "next step" look). Buttons echo the same materials.
   ===================================================================== */
:root {
  --r-card: 18px; --r-shell: 24px; --r-btn: 14px; --r-tile: 12px;
  --cta-grad: linear-gradient(135deg, #7A3CC8 0%, #5B32BE 48%, #2E5FC0 100%);
  --shell-bg: linear-gradient(135deg, #2A1D38 0%, #1F1A30 55%, #18263A 100%);
  --card-radius: var(--r-card);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--r-btn) !important; min-height: 52px; gap: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.005em;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-position .5s var(--ease), background-color .25s, border-color .25s, color .2s !important;
}
.btn .btn-icon { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; flex: none; transition: transform .3s var(--ease), background-color .25s; }
.btn .btn-icon svg { width: 16px; height: 16px; }
.btn:hover .btn-icon { transform: translateX(3px); }
.btn:has(.btn-icon) { padding: 10px 11px 10px 22px; }
.btn-lg:has(.btn-icon) { padding: 12px 13px 12px 26px; min-height: 58px; font-size: 1.0625rem; }
.btn:not(:has(.btn-icon)) { padding: 12px 24px; }

/* Primary: purple-to-blue, same family as the dark shells */
.btn.btn-primary, .on-dark .btn.btn-primary, .on-dark .btn.btn-primary.btn-glow {
  background: var(--cta-grad) !important; background-size: 160% 160% !important; background-position: 0% 50% !important;
  color: #fff !important; border: 1px solid rgb(255 255 255 / 16%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 1px 2px rgb(40 30 90 / 25%), 0 12px 28px -14px rgb(70 50 190 / 75%) !important;
}
.btn.btn-primary:hover, .on-dark .btn.btn-primary:hover {
  background-position: 100% 50% !important; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 26%), 0 2px 4px rgb(40 30 90 / 25%), 0 18px 36px -14px rgb(70 50 190 / 85%) !important;
}
.btn.btn-primary:active { transform: translateY(0); }
.btn.btn-primary .btn-icon { background: rgb(255 255 255 / 18%); color: #fff; }

/* Glass: on dark sections (matches the next-step option cards) */
.btn.btn-glass {
  background: rgb(255 255 255 / 6%); color: var(--on-dark); border: 1px solid rgb(255 255 255 / 14%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}
.btn.btn-glass .btn-icon { background: rgb(255 255 255 / 10%); color: #fff; }
.btn.btn-glass:hover { background: rgb(255 255 255 / 11%); border-color: rgb(205 178 242 / 40%); color: #fff; transform: translateY(-2px); }

/* Secondary: on light sections (matches the white cards) */
.btn.btn-secondary {
  background: linear-gradient(180deg, #FFFFFF, #F6F8FB) !important; color: var(--graphite) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: inset 0 1px 0 #fff, var(--card-shadow) !important;
}
.btn.btn-secondary .btn-icon { background: var(--purple-tint); color: var(--violet); }
.btn.btn-secondary:hover { color: var(--violet) !important; transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, var(--card-shadow-hover) !important; }
.on-dark .btn.btn-secondary { background: rgb(255 255 255 / 6%) !important; color: var(--on-dark) !important; border-color: rgb(255 255 255 / 14%) !important; box-shadow: none !important; }
.on-dark .btn.btn-secondary .btn-icon { background: rgb(255 255 255 / 10%); color: #fff; }
.header-cta { padding: 10px 20px !important; min-height: 44px !important; }
.action-bar .btn { border-radius: 12px !important; }

/* ---------- Dark shell (the "next step" material), reused ---------- */
.shell {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--shell-bg); color: var(--on-dark);
  border: 1px solid rgb(255 255 255 / 8%); border-radius: var(--r-shell);
  box-shadow: 0 30px 70px -40px rgb(26 20 32 / 80%);
}
.shell::before, .shell::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.shell::before { width: 460px; height: 460px; right: -140px; top: -180px; background: radial-gradient(closest-side, rgb(155 85 214 / 42%), transparent); }
.shell::after { width: 380px; height: 380px; left: -150px; bottom: -210px; background: radial-gradient(closest-side, rgb(63 185 138 / 26%), transparent); }
.shell--card { border-radius: var(--r-card); padding: 28px; }
.shell h2, .shell h3 { color: var(--on-dark); }
.shell p { color: #D3CADB; }
.shell.glance .glance-list dt, .shell .fact-label { color: #BDB2C8; }
.cta-shell { padding: 36px 24px; }
@media (min-width: 900px) { .cta-shell { padding: 56px; } }
.cta-option { border-radius: var(--r-card) !important; }
.cta-icon { border-radius: var(--r-tile); }
.cta-option.tone-purple .cta-icon { background: linear-gradient(135deg, #8A44C6, #5B32BE); }
.cta-option.tone-blue .cta-icon { background: linear-gradient(135deg, #3A8DD0, #2E5FC0); }
.cta-option.tone-green .cta-icon { background: linear-gradient(135deg, #3FB98A, #1D7352); }

/* ---------- Light cards share radius and material ---------- */
.svc-panel:not(.svc-panel--feature), .orient-item, .principles li, .spec-list li, .checklist li, .channel, .form-panel, .card:not(.card--deep) {
  border-radius: var(--r-card) !important;
}
.spec-icon, .channel-icon, .fact-icon, .tile-icon { border-radius: var(--r-tile) !important; }

/* =====================================================================
   SECTION LABELS · sentence case, display font, gradient text
   ===================================================================== */
.eyebrow {
  display: flex !important; align-items: center !important; gap: 12px !important; width: auto;
  margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  font-family: var(--font-display) !important; font-style: normal !important; font-weight: 700 !important;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem) !important; line-height: 1.35 !important;
  letter-spacing: -0.005em !important; text-transform: none !important;
  background: linear-gradient(90deg, #6B2FA0 0%, #4A3FC4 50%, #155E8C 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}
.eyebrow::before {
  content: "" !important; flex: none; width: 22px !important; height: 4px !important; border-radius: 4px !important;
  background: linear-gradient(90deg, #8A44C6, #3A8DD0 60%, #3FB98A) !important; box-shadow: none !important;
  align-self: center !important; margin: 0 !important;
}
.on-dark .eyebrow, .hero .eyebrow, .page-hero--media .eyebrow, .shell .eyebrow, .about-art .eyebrow {
  background: linear-gradient(90deg, #E2CDF7 0%, #CDB2F2 45%, #A9CDF2 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}
.on-dark .eyebrow::before, .hero .eyebrow::before, .page-hero--media .eyebrow::before, .shell .eyebrow::before, .about-art .eyebrow::before {
  background: linear-gradient(90deg, #C29BE8, #7DB8E8 60%, #6FD8AE) !important;
}
.hero .eyebrow { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem) !important; margin-bottom: 20px !important; }
.orient-kicker, .svc-index, .mini-steps-title {
  font-family: var(--font-display) !important; font-style: normal !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: -0.005em !important; font-size: .9375rem !important;
}
.mini-steps-title { font-size: 1.0625rem !important; color: var(--graphite); }

/* =====================================================================
   HERO (credentials strip removed)
   ===================================================================== */
@media (min-width: 1024px) {
  .hero { min-height: clamp(600px, 88vh, 820px); }
  .hero-stage { padding-block: 72px; }
}
.hero-actions .link-arrow svg { background: rgb(255 255 255 / 10%); }

/* =====================================================================
   SPINE FEATURE CARD
   ===================================================================== */
.svc-feature {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  border-radius: var(--r-shell); text-decoration: none; color: var(--on-dark);
  background:
    radial-gradient(70% 55% at 0% 0%, rgb(138 68 198 / 30%), transparent 65%),
    radial-gradient(60% 50% at 100% 100%, rgb(58 141 208 / 22%), transparent 60%),
    #1A1420;
  border: 1px solid rgb(255 255 255 / 8%);
  box-shadow: 0 30px 70px -40px rgb(26 20 32 / 80%);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.svc-feature:hover { transform: translateY(-4px); color: var(--on-dark); box-shadow: 0 40px 80px -40px rgb(40 25 70 / 90%); }
.svc-feature-media { position: relative; aspect-ratio: 16 / 11; margin-bottom: -40px; }
.svc-feature-media picture, .svc-feature-media img { display: block; width: 100%; height: 100%; }
.svc-feature-media img { object-fit: cover; object-position: 52% 40% !important; mix-blend-mode: lighten; transition: transform 1s var(--ease); }
.svc-feature:hover .svc-feature-media img { transform: scale(1.04); }
.svc-feature-body { position: relative; z-index: 1; display: grid; gap: 18px; padding: 0 24px 28px; align-content: start; }
.feature-kicker { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: .9375rem; color: #CDB2F2; }
.feature-badge {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .8125rem; color: #fff;
  background: linear-gradient(135deg, #8A44C6, #2E5FC0); box-shadow: 0 8px 18px -8px rgb(138 68 198 / 80%);
}
.feature-title { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem) !important; letter-spacing: -0.035em; color: #F7F5FB; transition: color .3s; }
.svc-feature:hover .feature-title { color: #CDB2F2; }
.feature-lede { color: #D3CADB; margin: 0; max-width: 30rem; }
.feature-list { list-style: none; display: grid; margin: 0; padding: 0; border-top: 1px solid rgb(255 255 255 / 10%); }
.feature-list li {
  position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid rgb(255 255 255 / 8%);
  color: #E6E0EC; font-size: 1rem; line-height: 1.45;
}
.feature-list li::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #CDB2F2, #8A44C6 55%, #3A8DD0);
  box-shadow: 0 0 10px rgb(138 68 198 / 60%);
}
.svc-feature-body .btn { justify-self: start; margin-top: 6px; }
.svc-feature:hover .btn-glass { background: rgb(255 255 255 / 11%); border-color: rgb(205 178 242 / 40%); }
.svc-feature:hover .btn-glass .btn-icon { transform: translateX(3px); }
@media (min-width: 640px) { .svc-feature-media { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) {
  .svc-feature { display: block; min-height: 620px; }
  .svc-feature-media { position: absolute; inset: 0 0 0 38%; aspect-ratio: auto; margin: 0; }
  .svc-feature-media img { object-position: 30% 40% !important; }
  .svc-feature-body { position: relative; max-width: 25rem; padding: 48px 0 48px 44px; min-height: 620px; align-content: end; }
}
@media (min-width: 1440px) { .svc-feature-body { padding-left: 52px; max-width: 26rem; } }

/* hover line on the feature card too */
.svc-feature::after {
  content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  border-radius: inherit; border: 0 solid transparent; border-top-width: 5px; border-left-width: 1px; border-right-width: 1px;
  background: var(--line-dark) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; clip-path: inset(0 100% 0 0 round var(--r-shell));
  transition: opacity .3s var(--ease), clip-path .6s var(--ease);
}
.svc-feature:hover::after { opacity: 1; clip-path: inset(0 0 0 0 round var(--r-shell)); }

/* =====================================================================
   PATIENT JOURNEY TIMELINE
   All steps share one resting state. The rail fills with scroll; a step
   turns "done" as the fill reaches it; the latest one is "current".
   ===================================================================== */
.timeline { position: relative; --progress: 0; --r0: 24px; --r1: 100%; --rc: 24px; }
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; position: relative; z-index: 1; }
.tl-step { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.tl-dot {
  position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid #CDBDE2; color: var(--violet);
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem;
  box-shadow: 0 0 0 6px var(--bg);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background .45s var(--ease), border-color .45s, color .3s, box-shadow .45s var(--ease);
}
.section--surface .tl-dot { box-shadow: 0 0 0 6px #F4F6FA; }
.tl-num { display: inline-block; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.tl-body { padding-top: 10px; transition: transform .5s var(--ease); }
.tl-body h3 { font-size: var(--step-1); margin-bottom: 6px; transition: color .3s var(--ease); line-height: 1.25; }
.tl-body p { color: var(--slate); margin: 0; }
.tl-rail {
  position: absolute; z-index: 0; border-radius: 4px; background: rgb(107 47 160 / 14%);
  left: calc(var(--rc) - 2px); top: var(--r0); width: 4px; height: calc(var(--r1) - var(--r0));
}
.tl-fill {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: top; transform: scaleY(var(--progress));
  background: linear-gradient(180deg, #8A44C6 0%, #3A8DD0 60%, #3FB98A 100%);
  transition: transform .15s linear;
}
/* states */
.tl-step.is-done .tl-dot { background: linear-gradient(135deg, #8A44C6, #2E5FC0); border-color: transparent; color: #fff; }
.tl-step.is-done:last-child .tl-dot { background: linear-gradient(135deg, #3FB98A, #1D7352); }
.tl-step.is-done .tl-num { animation: tl-pop .55s cubic-bezier(.34, 1.56, .64, 1); }
.tl-step.is-current .tl-dot { transform: scale(1.12); box-shadow: 0 0 0 6px var(--bg), 0 0 0 12px rgb(138 68 198 / 14%), 0 14px 28px -10px rgb(70 50 190 / 70%); }
.tl-step.is-current.is-done:last-child .tl-dot { box-shadow: 0 0 0 6px var(--bg), 0 0 0 12px rgb(63 185 138 / 16%), 0 14px 28px -10px rgb(29 115 82 / 70%); }
.tl-step.is-current h3 { color: var(--violet); }
.tl-step.is-current:last-child h3 { color: var(--green); }
.tl-step.is-current .tl-body { transform: translateX(4px); }
/* hover: every dot responds the same way */
.tl-step:hover .tl-dot { transform: translateY(-4px) scale(1.08); border-color: #8A44C6; }
.tl-step:hover .tl-num { transform: translateY(-2px) scale(1.12); }
.tl-step:hover h3 { color: var(--violet); }
@keyframes tl-pop { 0% { transform: translateY(10px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (min-width: 1100px) {
  .tl-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
  .tl-step { grid-template-columns: 1fr; gap: 18px; }
  .tl-body { padding-top: 0; }
  .tl-step.is-current .tl-body { transform: translateY(-3px); }
  .tl-rail { left: var(--r0); top: calc(var(--rc) - 2px); width: calc(var(--r1) - var(--r0)); height: 4px; }
  .tl-fill { transform-origin: left; transform: scaleX(var(--progress)); background: linear-gradient(90deg, #8A44C6 0%, #3A8DD0 60%, #3FB98A 100%); }
}
@media (prefers-reduced-motion: reduce) { .tl-step.is-done .tl-num { animation: none; } }

/* =====================================================================
   PRACTICE MARK · logo and name centred as one group
   ===================================================================== */
.practice-stack { position: relative; display: grid; justify-items: center; gap: 16px; transition: transform .6s var(--ease); }
.practice-logo { width: clamp(170px, 36%, 260px) !important; }
@media (hover: hover) {
  .practice-mark .practice-name {
    position: absolute; left: 50%; top: calc(100% + 18px); white-space: nowrap;
    opacity: 0 !important; transform: translate(-50%, 12px) !important; letter-spacing: .3em !important;
  }
  .practice-mark:hover .practice-stack, .practice-mark:focus-visible .practice-stack { transform: translateY(-24px); }
  .practice-mark:hover .practice-name, .practice-mark:focus-visible .practice-name {
    opacity: 1 !important; transform: translate(-50%, 0) !important; letter-spacing: .18em !important;
  }
}
.practice-mark { border-radius: var(--r-shell) !important; background: radial-gradient(60% 70% at 50% 45%, #33224A 0%, #1A1420 72%) !important; }

/* =====================================================================
   WHERE TO FIND US · next-step shell with inset map
   ===================================================================== */
.loc-shell { display: grid; padding: 0; }
.loc-shell-body { display: grid; gap: 18px; padding: 32px 24px 24px; align-content: center; }
.loc-kicker { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: .9375rem; color: #9EE0C4 !important; }
.loc-title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.1; margin: -6px 0 4px; color: #F7F5FB; }
.loc-facts2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.loc-facts2 li {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 12px 14px;
  border-radius: 14px; background: rgb(255 255 255 / 4%); border: 1px solid rgb(255 255 255 / 8%);
  transition: background-color .25s, border-color .25s, transform .3s var(--ease);
}
.loc-facts2 li:hover { background: rgb(255 255 255 / 7%); border-color: rgb(205 178 242 / 25%); transform: translateX(3px); }
.tile-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; }
.tile-icon svg { width: 20px; height: 20px; }
.loc-facts2 .tone-purple .tile-icon { background: linear-gradient(135deg, #8A44C6, #5B32BE); }
.loc-facts2 .tone-blue .tile-icon { background: linear-gradient(135deg, #3A8DD0, #2E5FC0); }
.loc-facts2 .tone-green .tile-icon { background: linear-gradient(135deg, #3FB98A, #1D7352); }
.loc-facts2 .fact-label { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; text-transform: none; color: #BDB2C8; font-family: var(--font-display); }
.loc-facts2 .fact-value { display: block; color: #F3F5FA; font-weight: 500; line-height: 1.5; margin-top: 2px; }
.loc-facts2 .fact-value a { color: #F3F5FA; background: none; }
.loc-shell .loc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.loc-map--inset { position: relative; margin: 0 14px 14px; min-height: 260px; border-radius: 18px; overflow: hidden; border: 1px solid rgb(255 255 255 / 8%); }
.loc-shell:hover .loc-map-svg .pin { transform: translate(300px, 204px); }
@media (min-width: 900px) {
  .loc-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; }
  .loc-shell-body { padding: 48px 20px 48px 48px; }
  .loc-map--inset { margin: 16px 16px 16px 24px; min-height: 440px; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
body.has-action-bar { padding-bottom: 0 !important; }
@media (max-width: 1023px) { body.has-action-bar .site-footer { padding-bottom: calc(32px + 76px + env(safe-area-inset-bottom)) !important; } }
.site-footer {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(50% 60% at 0% 0%, rgb(138 68 198 / 18%), transparent 60%),
    radial-gradient(40% 50% at 100% 100%, rgb(63 185 138 / 12%), transparent 60%),
    #120D17 !important;
  padding: 64px 0 calc(28px + env(safe-area-inset-bottom)) !important;
}
.foot-top { display: grid; gap: 28px; padding-bottom: 40px; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.footer-brand { display: grid; gap: 16px; justify-items: start; }
.footer-brand p { margin: 0; }
.foot-tag { color: #D3CADB !important; font-size: 1.0625rem; max-width: 34ch; }
.footer-mark { height: 72px !important; }
@media (min-width: 768px) { .footer-mark { height: 88px !important; } }
.brand--footer .brand-word { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem) !important; }
.foot-card { padding: 24px !important; }
.foot-card::before { width: 300px; height: 300px; right: -100px; top: -140px; }
.foot-card-title { font-size: 1.125rem !important; margin: 0 0 14px !important; color: #F3F5FA !important; letter-spacing: -0.01em !important; text-transform: none !important; }
.foot-contacts { display: grid; gap: 10px; }
.foot-contact {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 12px 14px;
  border-radius: 14px; background: rgb(255 255 255 / 4%); border: 1px solid rgb(255 255 255 / 8%);
  color: #F3F5FA; text-decoration: none; transition: background-color .25s, border-color .25s, transform .3s var(--ease);
}
.foot-contact:hover { background: rgb(255 255 255 / 8%); border-color: rgb(205 178 242 / 30%); transform: translateY(-2px); color: #fff; }
.foot-contact:nth-child(1) .tile-icon { background: linear-gradient(135deg, #8A44C6, #5B32BE); border-radius: 12px; }
.foot-contact:nth-child(2) .tile-icon { background: linear-gradient(135deg, #3A8DD0, #2E5FC0); border-radius: 12px; }
.foot-contact:nth-child(3) .tile-icon { background: linear-gradient(135deg, #3FB98A, #1D7352); border-radius: 12px; }
.foot-contact .fact-label { display: block; font-family: var(--font-display); font-size: .8125rem; font-weight: 700; color: #BDB2C8; }
.foot-contact .fact-value { display: block; font-weight: 600; overflow-wrap: anywhere; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; padding-block: 40px; }
.site-footer .footer-grid h2 {
  font-family: var(--font-display); font-size: .9375rem !important; font-weight: 700; letter-spacing: -0.005em !important;
  text-transform: none !important; color: #CDB2F2 !important; margin-bottom: 10px !important;
}
.foot-emergency { grid-column: 1 / -1; }
.foot-emergency .notice { border-radius: var(--r-card) !important; background: rgb(200 73 59 / 9%) !important; border: 1px solid rgb(240 164 152 / 25%) !important; }
.site-footer .footer-bottom { margin-top: 0 !important; padding-top: 22px !important; border-top: 1px solid rgb(255 255 255 / 8%) !important; }
@media (min-width: 900px) {
  .foot-top { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 48px; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr 2fr; }
  .foot-emergency { grid-column: auto; }
}
html { background: #120D17; }
.foot-contact .fact-value { color: #F3F5FA !important; margin-top: 2px; }
.foot-contact .fact-label, .loc-facts2 .fact-label { text-transform: none !important; letter-spacing: .01em !important; font-size: .8125rem !important; }
.feature-kicker--light { color: var(--blue); }
.feature-badge--blue { background: linear-gradient(135deg, #3A8DD0, #2E5FC0); box-shadow: 0 8px 18px -8px rgb(46 95 192 / 70%); }
.svc-panel--b { display: grid; gap: 18px; }
.btn > .btn-icon { display: inline-grid !important; padding: 0 !important; place-items: center; }
.loc-facts2 li { align-items: start; }
.loc-facts2 .tile-icon { margin-top: 1px; }

/* =====================================================================
   V4: unified page heroes, About cards, light CTA on dark shells,
   Insights, principle badges
   ===================================================================== */

/* Light button: the CTA on dark shells (the purple gradient vanished on purple) */
.btn.btn-light {
  background: #fff !important; color: #2A1747 !important; border: 1px solid #fff !important;
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 60%), 0 0 0 4px rgb(255 255 255 / 6%) !important;
  justify-content: space-between;
}
.btn.btn-light .btn-icon { background: var(--cta-grad); color: #fff; border-radius: 9px; transition: transform .25s ease; }
.btn.btn-light:hover { background: #F4EEFC !important; transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgb(122 60 200 / 60%), 0 0 0 4px rgb(205 178 242 / 18%) !important; }
.btn.btn-light:hover .btn-icon { transform: translateX(3px); }
.btn.btn-light:focus-visible { outline: 3px solid #CDB2F2; outline-offset: 3px; }

/* Secondary button on light: white card material matching the cards */
.btn.btn-secondary:not(.on-dark .btn) {
  background: #fff; color: #1C1626; border: 1px solid var(--card-border, #D6DDE8);
  box-shadow: 0 10px 24px -18px rgb(40 50 80 / 50%);
}
.btn.btn-secondary .btn-icon { background: #EFE7FA; color: #6B2FA0; border-radius: 9px; }
.btn.btn-secondary:hover { transform: translateY(-2px); border-color: #CDB2F2; color: #6B2FA0; }

/* ---------- Unified page hero (every inner page: dark charcoal) ---------- */
.page-hero--media { background:
    radial-gradient(55% 80% at 0% 100%, rgb(107 47 160 / 26%), transparent 62%),
    radial-gradient(40% 60% at 100% 0%, rgb(46 95 192 / 16%), transparent 65%),
    var(--charcoal) !important; }
.page-hero--media:not(.page-hero--art) .page-hero-media img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 80%, transparent 100%);
}
@media (min-width: 900px) {
  .page-hero--media:not(.page-hero--art) .page-hero-media img {
    -webkit-mask-image: radial-gradient(120% 115% at 78% 50%, #000 42%, transparent 74%);
            mask-image: radial-gradient(120% 115% at 78% 50%, #000 42%, transparent 74%);
  }
  .page-hero--media { min-height: 480px; }
}
.page-hero-byline { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: #E9E2F2; font-weight: 600; }
.page-hero-byline .tile-icon { width: 36px; height: 36px; border-radius: 10px; }
.page-hero-byline .tile-icon svg { width: 17px; height: 17px; }

/* Emblem: holds the picture's place until page images arrive */
.page-hero--emblem { display: flex; flex-direction: column; justify-content: center; }
.page-hero--emblem .page-hero-inner { padding-block: 40px 56px; }
.page-hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero-glow i { position: absolute; border-radius: 50%; }
.page-hero-glow i:nth-child(1) { width: 520px; height: 520px; right: 4%; top: -180px; background: radial-gradient(closest-side, rgb(138 68 198 / 34%), transparent); }
.page-hero-glow i:nth-child(2) { width: 420px; height: 420px; right: 24%; bottom: -220px; background: radial-gradient(closest-side, rgb(46 95 192 / 26%), transparent); }
.page-hero-glow i:nth-child(3) { width: 300px; height: 300px; right: -60px; bottom: -80px; background: radial-gradient(closest-side, rgb(63 185 138 / 18%), transparent); }
.page-hero-emblem { display: none; }
@media (min-width: 900px) {
  .page-hero-emblem {
    display: grid; place-items: center; position: absolute; z-index: 1; pointer-events: none;
    right: clamp(24px, 8vw, 140px); top: 50%; width: clamp(260px, 28vw, 380px); aspect-ratio: 1; transform: translateY(-50%);
  }
  .emblem-logo { width: 46%; height: auto; opacity: .92;
    filter: drop-shadow(0 0 28px rgb(155 85 214 / 55%)) drop-shadow(0 0 70px rgb(46 95 192 / 35%)); }
  .emblem-ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid rgb(205 178 242 / 20%);
    background: radial-gradient(closest-side, rgb(138 68 198 / 18%), transparent 75%); }
  .emblem-ring--2 { inset: -4%; border-color: rgb(169 205 242 / 12%); border-style: dashed; background: none;
    animation: emblem-spin 60s linear infinite; }
  .page-hero--emblem .page-hero-inner { padding-block: 64px 80px; }
  .page-hero--emblem .page-hero-copy { max-width: 36rem; }
}
@keyframes emblem-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .emblem-ring--2 { animation: none; } }

/* ---------- Info cards (qualifications, clinical areas, hospital) ---------- */
.prose .info-cards { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
@media (min-width: 640px) {
  .prose .info-cards--2 { grid-template-columns: 1fr 1fr; }
  .prose .info-cards--3 { grid-template-columns: repeat(3, 1fr); }
}
.prose .info-card {
  position: relative; display: flex; gap: 16px; align-items: flex-start; margin: 0;
  padding: 20px 20px 22px; background: #fff; border: 1px solid var(--card-border, #D6DDE8);
  border-radius: var(--r-card, 18px); box-shadow: 0 18px 40px -32px rgb(40 50 80 / 55%);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.prose .info-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding-top: 5px; pointer-events: none;
  background: linear-gradient(90deg, #8A44C6, #2E5FC0 55%, #3FB98A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .3s ease;
}
.prose .info-card::marker { content: none; }
.prose .info-card > div { display: grid; gap: 4px; min-width: 0; }
.prose .info-card strong { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.3; color: #1C1626; transition: color .25s ease; }
.prose .info-card span:not(.tile-icon) { color: var(--slate); font-size: .9375rem; line-height: 1.5; }
.prose .info-card--stack { flex-direction: column; gap: 14px; }
@media (hover: hover) {
  .prose .info-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgb(60 40 110 / 45%); border-color: #E2D6F3; }
  .prose .info-card:hover::before { opacity: 1; }
  .prose .info-card:hover strong { color: #6B2FA0; }
}
.tile-icon { border-radius: var(--r-tile, 12px); flex: none; }
.tile-icon.tone-purple { background: linear-gradient(135deg, #8A44C6, #5B32BE); box-shadow: 0 10px 20px -10px rgb(122 60 200 / 70%); }
.tile-icon.tone-blue { background: linear-gradient(135deg, #3A8DD0, #2E5FC0); box-shadow: 0 10px 20px -10px rgb(46 95 192 / 70%); }
.tile-icon.tone-green { background: linear-gradient(135deg, #3FB98A, #1D7352); box-shadow: 0 10px 20px -10px rgb(29 115 82 / 70%); }
.prose h2 + .info-cards { margin-top: 18px; }
.about-body > h2 { margin-top: 56px; }
.about-body > h2:first-child { margin-top: 0; }
.about-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) { .about-actions .btn { width: 100%; justify-content: space-between; } }

/* At a glance: cleaner labels */
.glance-list dt { text-transform: none !important; letter-spacing: .01em !important; font-size: .8125rem !important; color: #B9AEC8 !important; font-weight: 600; }

/* ---------- Principles: badge numbers, same card language ---------- */
.principles--cards li::before { content: none !important; display: none !important; }
.principles--cards li { gap: 12px !important; }
.principles--cards .feature-badge { margin-bottom: 6px; }
.feature-badge--green { background: linear-gradient(135deg, #3FB98A, #1D7352); box-shadow: 0 8px 18px -8px rgb(29 115 82 / 70%); }
.feature-badge--purple { background: linear-gradient(135deg, #8A44C6, #5B32BE); }
.feature-badge { font-family: var(--font-display); font-weight: 800; letter-spacing: .02em; }

/* ---------- Insights ---------- */
.insights-soon .cta-intro h2 { max-width: 16ch; }
.article-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
@media (min-width: 720px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .article-grid { grid-template-columns: repeat(3, 1fr); } }
.article-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 26px 24px 22px;
  background: #fff; border: 1px solid var(--card-border, #D6DDE8); border-radius: var(--r-card, 18px);
  color: inherit; text-decoration: none; box-shadow: 0 18px 40px -32px rgb(40 50 80 / 55%);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.article-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding-top: 5px; pointer-events: none;
  background: linear-gradient(90deg, #8A44C6, #2E5FC0 55%, #3FB98A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .3s ease;
}
.article-cat { font-family: var(--font-display); font-weight: 700; font-size: .875rem; color: #6B2FA0; }
.article-card h3 { font-size: var(--step-1); line-height: 1.25; transition: color .25s ease; }
.article-card p { color: var(--slate); margin: 0; }
.article-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--stone); display: flex; justify-content: space-between; align-items: center; font-size: .875rem; font-weight: 600; color: #3D3550; }
.article-go { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #EFE7FA; color: #6B2FA0; transition: transform .25s ease, background .25s ease, color .25s ease; }
.article-go svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .article-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgb(60 40 110 / 45%); }
  .article-card:hover::before { opacity: 1; }
  .article-card:hover h3 { color: #6B2FA0; }
  .article-card:hover .article-go { background: var(--cta-grad); color: #fff; transform: translateX(3px); }
}

/* Brain artwork: soft glow behind the drawing, lifting slightly on hover.
   The formulas and splashes sit on it; the image itself stays untouched. */
.about-art-figure, .page-hero--art .page-hero-media picture { position: relative; isolation: isolate; }
.about-art-figure::before, .page-hero--art .page-hero-media picture::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 4% 2% 4% 6%; border-radius: 50%;
  background:
    radial-gradient(38% 46% at 66% 50%, rgb(229 25 127 / 16%), transparent 70%),
    radial-gradient(34% 44% at 42% 50%, rgb(205 178 242 / 18%), transparent 72%),
    radial-gradient(60% 62% at 55% 50%, rgb(122 60 200 / 22%), transparent 74%),
    radial-gradient(70% 70% at 60% 55%, rgb(46 95 192 / 14%), transparent 78%);
  filter: blur(18px); opacity: .85; transform: scale(.98);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.page-hero--art .page-hero-media picture::before { inset: 2% 0 2% 22%; }
.about-art-figure img, .page-hero--art .page-hero-media img { position: relative; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  .page-hero--art .page-hero-media { pointer-events: auto; }
  .about-art-figure:hover::before, .page-hero--art .page-hero-media:hover picture::before { opacity: 1; transform: scale(1.06); }
  .about-art-figure:hover img, .page-hero--art .page-hero-media:hover img { transform: scale(1.012); }
}
@media (prefers-reduced-motion: reduce) {
  .about-art-figure::before, .page-hero--art .page-hero-media picture::before, .about-art-figure img, .page-hero--art .page-hero-media img { transition: none; }
}
@media (min-width: 900px) {
  .page-hero--media:not(.page-hero--art) .page-hero-media img {
    -webkit-mask-image: radial-gradient(closest-side ellipse at 58% 54%, #000 55%, rgb(0 0 0 / 55%) 78%, transparent 100%);
            mask-image: radial-gradient(closest-side ellipse at 58% 54%, #000 55%, rgb(0 0 0 / 55%) 78%, transparent 100%);
  }
}
@media (max-width: 639px) { .prose .info-card--stack { flex-direction: row; align-items: center; } }
.page-hero--art .page-hero-inner { pointer-events: none; }
.page-hero--art .page-hero-inner a, .page-hero--art .page-hero-copy { pointer-events: auto; }
/* Home "Your surgeon": clinical areas (qualifications live on About only) */
.doctor-areas { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.doctor-areas li { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 14px;
  background: rgb(255 255 255 / 4%); border: 1px solid rgb(255 255 255 / 9%); color: #EDE6F5; font-weight: 600; line-height: 1.4;
  transition: transform .3s ease, background .3s ease, border-color .3s ease; }
.doctor-areas .tile-icon { width: 40px; height: 40px; }
.doctor-areas .tile-icon svg { width: 19px; height: 19px; }
@media (hover: hover) { .doctor-areas li:hover { transform: translateX(4px); background: rgb(255 255 255 / 7%); border-color: rgb(205 178 242 / 28%); } }

/* Stronger glow behind the brain artwork */
.about-art-figure::before, .page-hero--art .page-hero-media picture::before {
  background:
    radial-gradient(30% 40% at 68% 50%, rgb(229 25 127 / 26%), transparent 70%),
    radial-gradient(30% 42% at 40% 48%, rgb(205 178 242 / 26%), transparent 72%),
    radial-gradient(55% 60% at 55% 50%, rgb(122 60 200 / 40%), transparent 74%),
    radial-gradient(70% 72% at 60% 55%, rgb(46 95 192 / 26%), transparent 80%) !important;
  filter: blur(26px); opacity: .9;
}
@media (hover: hover) {
  .about-art-figure:hover::before, .page-hero--art .page-hero-media:hover picture::before { opacity: 1; transform: scale(1.08); filter: blur(22px) saturate(1.25) brightness(1.15); }
}

/* =====================================================================
   V5
   ===================================================================== */
:root { --brand-pastel: linear-gradient(120deg, #B7D3F6 0%, #A9CDF2 40%, #9EE0C4 100%); }

/* Brand: one pastel blue-green gradient for the word and the logo hover */
.site-header .brand-word span, .brand--footer .brand-word span { background: var(--brand-pastel) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.brand-logo { position: relative; display: inline-grid; flex: none; line-height: 0; }
.brand-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: var(--brand-pastel);
  -webkit-mask: url("img/brand/logo-light-192.png") center / contain no-repeat;
          mask: url("img/brand/logo-light-192.png") center / contain no-repeat;
  transition: opacity .45s ease;
}
.brand-logo .brand-mark { transition: opacity .45s ease, filter .45s ease !important; transform: none !important; }
.site-header .brand:hover .brand-mark, .brand--footer:hover .brand-mark { transform: none !important; }
.brand:hover .brand-logo::after, .brand:focus-visible .brand-logo::after { opacity: 1; }
.brand:hover .brand-logo .brand-mark { filter: drop-shadow(0 0 10px rgb(158 224 196 / 35%)) drop-shadow(0 0 18px rgb(169 205 242 / 30%)); }

/* Header nav: clear pill hover, no dot */
@media (min-width: 1100px) {
  .site-header .site-nav li a[aria-current="page"]::after { content: none !important; display: none !important; }
  .site-header .site-nav li a {
    border: 1px solid transparent !important; font-weight: 600;
    transition: color .2s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
  }
  .site-header .site-nav li a:hover {
    color: #fff !important; transform: translateY(-1px);
    background: linear-gradient(135deg, rgb(169 205 242 / 16%), rgb(158 224 196 / 12%)) !important;
    border-color: rgb(169 205 242 / 30%) !important;
    box-shadow: 0 8px 22px -12px rgb(110 190 220 / 55%), inset 0 1px 0 rgb(255 255 255 / 8%);
  }
  .site-header .site-nav li a[aria-current="page"] {
    color: #fff !important;
    background: linear-gradient(135deg, rgb(155 85 214 / 30%), rgb(46 95 192 / 26%)) !important;
    border-color: rgb(205 178 242 / 30%) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
  }
}

/* Conditions and services: two matching cards (dark spine, light brain) + specialised row */
.svc-grid2 { display: grid; gap: 20px; }
@media (min-width: 900px) { .svc-grid2 { grid-template-columns: 1fr 1fr; gap: 24px; } .spec-row { grid-column: 1 / -1; } }
.svc-card {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 16px;
  padding: clamp(28px, 3vw, 44px); border-radius: var(--r-shell, 24px); text-decoration: none; color: inherit;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.svc-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding-top: 5px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, #8A44C6, #2E5FC0 55%, #3FB98A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .35s ease;
}
.svc-card--dark {
  background: radial-gradient(70% 60% at 100% 0%, rgb(138 68 198 / 34%), transparent 70%),
              radial-gradient(60% 50% at 0% 100%, rgb(46 95 192 / 22%), transparent 70%),
              linear-gradient(160deg, #241A30, #1A1420 60%, #16202E);
  box-shadow: 0 40px 70px -40px rgb(26 20 32 / 75%);
}
.svc-card--light {
  background: radial-gradient(70% 60% at 100% 0%, rgb(169 205 242 / 45%), transparent 70%),
              radial-gradient(60% 50% at 0% 100%, rgb(158 224 196 / 22%), transparent 70%), #fff;
  border: 1px solid var(--card-border, #D6DDE8); box-shadow: 0 30px 60px -45px rgb(40 50 80 / 50%);
}
.svc-card-mark {
  position: absolute; z-index: -1; top: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px);
  width: clamp(88px, 9vw, 120px); height: clamp(88px, 9vw, 120px); display: grid; place-items: center; border-radius: 28px;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.svc-card-mark svg { width: 56%; height: 56%; stroke-width: 1.2; }
.svc-card--dark .svc-card-mark { color: #CDB2F2; background: rgb(255 255 255 / 5%); border: 1px solid rgb(205 178 242 / 16%); }
.svc-card--light .svc-card-mark { color: #3A8DD0; background: rgb(58 141 208 / 8%); border: 1px solid rgb(58 141 208 / 16%); }
.svc-card .feature-kicker { padding-right: 130px; }
.svc-card .feature-title { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); letter-spacing: -0.03em; margin-top: 8px; }
.svc-card--dark .feature-title { color: #fff; }
.svc-card--light .feature-title { color: #12324F; }
.svc-card .feature-lede { max-width: 34rem; margin: 0; }
.svc-card--dark .feature-lede { color: #D3CADB; }
.svc-card--light .feature-lede { color: var(--slate); }
.svc-card .feature-list { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; }
.svc-card .feature-list li { position: relative; padding: 13px 0 13px 24px; border-top: 1px solid rgb(255 255 255 / 9%); }
.svc-card--light .feature-list li { border-top-color: var(--stone); color: #2B2A3A; }
.svc-card--dark .feature-list li { color: #EDE6F5; }
.svc-card .feature-list li:last-child { border-bottom: 1px solid rgb(255 255 255 / 9%); }
.svc-card--light .feature-list li:last-child { border-bottom-color: var(--stone); }
.svc-card .feature-list li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: linear-gradient(135deg, #B98AE0, #6B2FA0); }
.svc-card--light .feature-list li::before { background: linear-gradient(135deg, #7FC1EE, #2E5FC0); }
.svc-card > .btn { margin-top: auto; align-self: flex-start; }
@media (hover: hover) {
  .svc-card:hover { transform: translateY(-6px); }
  .svc-card:hover::after { opacity: 1; }
  .svc-card:hover .svc-card-mark { transform: translateY(-4px) rotate(-4deg) scale(1.04); }
  .svc-card--dark:hover { box-shadow: 0 50px 80px -40px rgb(60 30 100 / 80%); }
  .svc-card--light:hover { box-shadow: 0 40px 70px -40px rgb(46 95 192 / 40%); }
  .svc-card--dark:hover .feature-title { color: #E6D5FA; }
  .svc-card--light:hover .feature-title { color: #2E5FC0; }
  .svc-card:hover .btn .btn-icon { transform: translateX(3px); }
}
.spec-row { display: grid; gap: 20px; margin-top: 16px; }
@media (min-width: 1100px) { .spec-row { grid-template-columns: 17rem 1fr; gap: 40px; align-items: start; } }
.spec-row-head p { color: var(--slate); margin-top: 8px; }
.spec-list--row { display: grid !important; gap: 12px !important; margin: 0 !important; }
@media (min-width: 640px) { .spec-list--row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .svc-card .feature-kicker { padding-right: 84px; } .svc-card-mark { width: 64px; height: 64px; border-radius: 18px; } }

/* Home hero: soft, fresh green-blue aurora drifting slowly behind the copy and over the image */
.hero { isolation: isolate; }
.hero-aurora { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.hero-aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.hero-aurora i:nth-child(1) { width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; left: -18%; bottom: -45%;
  background: radial-gradient(closest-side, rgb(63 185 138 / 30%), rgb(63 185 138 / 8%) 55%, transparent); animation: aurora-a 26s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(2) { width: 55vw; height: 55vw; max-width: 820px; max-height: 820px; left: 18%; top: -50%;
  background: radial-gradient(closest-side, rgb(58 141 208 / 26%), rgb(58 141 208 / 6%) 55%, transparent); animation: aurora-b 32s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(3) { width: 40vw; height: 40vw; max-width: 600px; max-height: 600px; right: -8%; bottom: -30%;
  background: radial-gradient(closest-side, rgb(120 210 200 / 18%), transparent); animation: aurora-a 38s ease-in-out infinite alternate-reverse; }
.hero-aurora i:nth-child(4) { inset: 0; width: auto; height: auto; border-radius: 0;
  background: linear-gradient(115deg, rgb(63 185 138 / 7%) 0%, transparent 35%, rgb(58 141 208 / 8%) 70%, transparent 100%); }
.hero-stage { position: relative; z-index: 2; }
@keyframes aurora-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8%, -6%, 0) scale(1.12); } }
@keyframes aurora-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-10%, 8%, 0) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .hero-aurora i { animation: none; } }
@media (max-width: 767px) { .hero-aurora i:nth-child(1) { width: 120vw; height: 120vw; left: -40%; bottom: -30%; } .hero-aurora i:nth-child(2) { width: 110vw; height: 110vw; left: 10%; top: -40%; } }
.hero-aurora i:nth-child(1) { background: radial-gradient(closest-side, rgb(63 185 138 / 42%), rgb(63 185 138 / 12%) 55%, transparent) !important; }
.hero-aurora i:nth-child(2) { background: radial-gradient(closest-side, rgb(58 141 208 / 38%), rgb(58 141 208 / 10%) 55%, transparent) !important; }
.hero-aurora i:nth-child(3) { background: radial-gradient(closest-side, rgb(120 210 200 / 26%), transparent) !important; }

/* Brain artwork: no glow, only a slight zoom on hover */
.about-art-figure::before, .page-hero--art .page-hero-media picture::before { content: none !important; display: none !important; }
.about-art-figure img, .page-hero--art .page-hero-media img { transition: transform .9s cubic-bezier(.2,.7,.2,1) !important; }
@media (hover: hover) {
  .about-art-figure:hover img, .page-hero--art .page-hero-media:hover img { transform: scale(1.03) !important; }
}

/* Emblem heroes: the home practice-mark glow (purple, blue, teal) with a slow, soft pulse */
@media (min-width: 900px) {
  .page-hero-emblem::before {
    content: ""; position: absolute; inset: 14%; border-radius: 50%; z-index: -1;
    background: radial-gradient(closest-side, rgb(155 85 214 / 55%), rgb(58 141 208 / 32%) 55%, rgb(63 185 138 / 12%) 75%, transparent);
    filter: blur(14px); animation: emblem-pulse 5.5s ease-in-out infinite;
  }
  .emblem-ring:not(.emblem-ring--2) { animation: emblem-ring 5.5s ease-in-out infinite; }
  .emblem-logo { filter: drop-shadow(0 0 22px rgb(155 85 214 / 70%)) drop-shadow(0 0 48px rgb(58 141 208 / 45%)) !important; animation: emblem-logo 5.5s ease-in-out infinite; }
}
@keyframes emblem-pulse { 0%, 100% { transform: scale(.92); opacity: .65; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes emblem-ring { 0%, 100% { transform: scale(1); border-color: rgb(205 178 242 / 18%); } 50% { transform: scale(1.04); border-color: rgb(169 205 242 / 34%); } }
@keyframes emblem-logo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce) { .page-hero-emblem::before, .emblem-ring, .emblem-logo { animation: none !important; } }

/* Services page: the two cards carry their render on top */
.svc-card--photo { padding-top: 0; }
.svc-card-media {
  position: relative; margin: 0 calc(-1 * clamp(28px, 3vw, 44px)) 8px; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r-shell, 24px) var(--r-shell, 24px) 0 0; background: var(--charcoal);
}
.svc-card-media picture, .svc-card-media img { display: block; width: 100%; height: 100%; }
.svc-card-media img { object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.svc-card-media::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; pointer-events: none;
  background: linear-gradient(to top, var(--card-fade, #1F1A2A), transparent); }
.svc-card--light .svc-card-media { --card-fade: rgb(26 20 32 / 55%); }
@media (hover: hover) { .svc-card--photo:hover .svc-card-media img { transform: scale(1.04); } }

/* Where to find us: hospital photo with name tag and a small map card */
.loc-photo {
  position: relative; display: block; overflow: hidden; isolation: isolate; margin: 14px 14px 0; min-height: 260px;
  border-radius: 18px; border: 1px solid rgb(255 255 255 / 10%); order: -1; text-decoration: none; color: inherit;
  aspect-ratio: 16 / 10;
}
.loc-photo picture, .loc-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.loc-photo img { object-fit: cover; object-position: 50% 55%; transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter: saturate(.95) brightness(.94); }
.loc-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgb(26 20 32 / 78%) 0%, rgb(26 20 32 / 10%) 45%, transparent 70%),
              linear-gradient(120deg, rgb(122 60 200 / 14%), transparent 50%, rgb(63 185 138 / 10%));
  transition: opacity .6s ease; }
.loc-photo-tag {
  position: absolute; z-index: 2; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px; border-radius: 14px; max-width: calc(100% - 32px);
  background: rgb(26 20 32 / 72%); border: 1px solid rgb(255 255 255 / 14%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.loc-photo-tag .tile-icon { width: 38px; height: 38px; border-radius: 10px; }
.loc-photo-tag .tile-icon svg { width: 18px; height: 18px; }
.loc-photo-tag > span:last-child { display: grid; gap: 2px; }
.loc-photo-tag strong { color: #fff; font-family: var(--font-display); font-size: .9375rem; line-height: 1.25; }
.loc-photo-tag > span:last-child > span { color: #C9BFD6; font-size: .8125rem; }
.loc-map--chip { display: none; }
.loc-shell .loc-map--inset { display: none; }
@media (min-width: 1024px) {
  .loc-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; }
  .loc-photo { order: 0; margin: 14px 14px 14px 0; aspect-ratio: auto; min-height: 460px; }
  .loc-map--chip {
    display: block; position: absolute; z-index: 2; right: 16px; top: 16px; width: 190px; height: 130px; min-height: 0;
    border-radius: 14px; overflow: hidden; border: 1px solid rgb(255 255 255 / 16%);
    box-shadow: 0 18px 30px -16px rgb(0 0 0 / 70%); transition: transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .loc-map--chip .loc-map-svg { width: 100%; height: 100%; display: block; }
  .loc-map--chip .loc-map-label { display: none; }
}
@media (hover: hover) {
  .loc-photo:hover img, .loc-shell:hover .loc-photo img { transform: scale(1.07); filter: saturate(1.08) brightness(1.02); }
  .loc-shell:hover .loc-photo-tag { transform: translateY(-4px); }
  .loc-shell:hover .loc-map--chip { transform: translateY(-4px) rotate(-1deg); }
}
.loc-photo:focus-visible { outline: 3px solid #CDB2F2; outline-offset: 3px; }
/* Bright photographs in the dark hero: fade in from the left, gently toned */
.page-hero--light-photo .page-hero-media img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 25%) !important; mask-image: linear-gradient(to bottom, transparent 0, #000 25%) !important;
  filter: brightness(.82) saturate(.92) contrast(1.04);
}
.page-hero--light-photo .page-hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgb(122 60 200 / 22%), transparent 45%, rgb(46 95 192 / 16%)); }
@media (min-width: 900px) {
  .page-hero--light-photo .page-hero-media img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 55%) 18%, #000 42%) !important;
            mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 55%) 18%, #000 42%) !important;
  }
  .page-hero--light-photo .page-hero-media::after { background: linear-gradient(90deg, var(--charcoal) 0%, transparent 30%), linear-gradient(120deg, rgb(122 60 200 / 20%), transparent 50%, rgb(46 95 192 / 14%)); }
}

/* FAQ: card accordion with numbered badges and a smooth open */
:root { interpolate-size: allow-keywords; }
.faq-layout { display: grid; gap: 36px; }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } .faq-aside { position: sticky; top: 112px; } }
.faq-aside .lede { margin-top: 14px; max-width: 26rem; }
.faq-help { margin-top: 28px; display: grid; gap: 10px; padding: 26px !important; max-width: 26rem; }
.faq-help h3 { color: #fff; font-size: var(--step-1); margin-top: 6px; }
.faq-help p { color: #D3CADB; margin: 0 0 10px; }
.faq-list { display: grid; gap: 12px; }
.faq-item {
  position: relative; background: #fff; border: 1px solid var(--card-border, #D6DDE8); border-radius: var(--r-card, 18px);
  box-shadow: 0 16px 36px -30px rgb(40 50 80 / 55%);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.faq-item::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding-top: 5px; pointer-events: none;
  background: linear-gradient(90deg, #8A44C6, #2E5FC0 55%, #3FB98A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .3s ease;
}
.faq-item summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 18px 18px 18px 18px; min-height: 64px; border-radius: inherit;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: none !important; }
.faq-q { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: #1C1626; transition: color .25s ease; }
.faq-toggle { position: relative; width: 34px; height: 34px; border-radius: 10px; background: #EFE7FA; flex: none; transition: background .3s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #6B2FA0; transition: transform .4s cubic-bezier(.2,.7,.2,1), background .3s ease; }
.faq-toggle::after { transform: rotate(90deg); }
.faq-item[open] .faq-toggle { background: var(--cta-grad); transform: rotate(180deg); }
.faq-item[open] .faq-toggle::before, .faq-item[open] .faq-toggle::after { background: #fff; }
.faq-item[open] .faq-toggle::after { transform: rotate(0deg); }
.faq-item[open] { border-color: #E2D6F3; box-shadow: 0 26px 50px -34px rgb(60 40 110 / 45%); }
.faq-item[open]::before { opacity: 1; }
.faq-item[open] .faq-q { color: #6B2FA0; }
.faq-a { padding: 0 20px 22px 68px; color: var(--slate); }
.faq-a p { margin: 0; line-height: 1.7; }
.faq-a p + p { margin-top: 10px; }
.faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .4s cubic-bezier(.2,.7,.2,1), content-visibility .4s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }
@media (hover: hover) {
  .faq-item:not([open]):hover { transform: translateY(-2px); border-color: #E2D6F3; box-shadow: 0 22px 44px -30px rgb(60 40 110 / 40%); }
  .faq-item:hover .faq-q { color: #6B2FA0; }
  .faq-item:not([open]):hover .faq-toggle { background: #E4D6F7; }
}
.faq-item summary:focus-visible { outline: 3px solid #CDB2F2; outline-offset: 2px; }
@media (max-width: 479px) { .faq-a { padding-left: 18px; } .faq-item summary { gap: 12px; padding: 16px 14px; } }
.faq-emergency { margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { .faq-item::details-content { transition: none; } }
@media (max-width: 1023px) {
  .faq-layout { display: flex; flex-direction: column; }
  .faq-aside { display: contents; }
  .faq-aside > .eyebrow, .faq-aside > h2, .faq-aside > .lede { order: 0; }
  .faq-aside > h2 { margin-top: -22px; }
  .faq-aside > .lede { margin-top: -22px; }
  .faq-layout > div:last-child { order: 1; }
  .faq-help { order: 2; margin-top: 0; max-width: none; }
}

/* Qualifications: certificate-style cards with institution logo or typeset crest */
.prose .cred-card { gap: 18px; padding: 22px 22px 24px; align-items: center; }
.cred-crest, .cred-logo { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.cred-crest {
  background: conic-gradient(from 210deg, #8A44C6, #2E5FC0, #3FB98A, #8A44C6);
  padding: 2px; box-shadow: 0 12px 24px -14px rgb(60 40 110 / 70%);
}
.cred-crest > span {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #3A2A52, #1A1420 70%);
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .875rem; letter-spacing: .04em;
  box-shadow: inset 0 0 0 4px #1A1420, inset 0 0 0 5px rgb(205 178 242 / 45%);
}
.cred-logo { background: #fff; border: 1px solid var(--card-border, #D6DDE8); box-shadow: 0 10px 22px -14px rgb(40 50 80 / 50%); overflow: hidden; }
.cred-logo img { width: 78%; height: 78%; object-fit: contain; }
.prose .cred-card .cred-inst { font-family: var(--font-display); font-weight: 700; font-size: .8125rem !important; color: #6B2FA0 !important; line-height: 1.3; }
.prose .cred-card strong { font-size: 1.125rem; }
@media (hover: hover) { .prose .cred-card:hover .cred-crest { transform: rotate(-8deg) scale(1.04); } }
.cred-crest { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.prose .cred-card .cred-crest > span { color: #fff !important; font-size: .78rem !important; letter-spacing: .02em; line-height: 1 !important; }
@media (min-width: 900px) {
  .page-hero-emblem::before { inset: 4% !important;
    background: radial-gradient(closest-side, rgb(155 85 214 / 60%), rgb(58 141 208 / 45%) 50%, rgb(63 185 138 / 22%) 72%, transparent) !important; }
}
@keyframes emblem-pulse { 0%, 100% { transform: scale(.88); opacity: .55; } 50% { transform: scale(1.1); opacity: 1; } }

/* Qualifications: institution crest tiles */
.cred-logo { width: 72px !important; height: 72px !important; border-radius: 16px !important; background: #fff; padding: 6px;
  border: 1px solid var(--card-border, #D6DDE8); box-shadow: 0 12px 24px -16px rgb(40 50 80 / 55%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.cred-logo img { width: 100% !important; height: 100% !important; object-fit: contain; }
@media (hover: hover) { .prose .cred-card:hover .cred-logo { transform: translateY(-2px) scale(1.05); } }

/* ---------- Patient experiences carousel: fresh and warm ---------- */
.t-section { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #F6F1FB 0%, #EEF4FB 55%, #EDF8F3 100%); }
.t-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.t-glow i { position: absolute; border-radius: 50%; }
.t-glow i:nth-child(1) { width: 520px; height: 520px; left: -160px; top: -200px; background: radial-gradient(closest-side, rgb(205 178 242 / 55%), transparent); }
.t-glow i:nth-child(2) { width: 460px; height: 460px; right: -140px; bottom: -220px; background: radial-gradient(closest-side, rgb(158 224 196 / 50%), transparent); }
.t-glow i:nth-child(3) { width: 380px; height: 380px; right: 30%; top: -180px; background: radial-gradient(closest-side, rgb(255 214 190 / 40%), transparent); }
.t-layout { display: grid; gap: 32px; }
@media (min-width: 1024px) { .t-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; } }
.t-intro .lede { margin-top: 14px; max-width: 26rem; }
.t-controls { display: flex; align-items: center; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.t-btn { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: #6B2FA0; border: 1px solid #E2D6F3; box-shadow: 0 10px 24px -16px rgb(60 40 110 / 50%);
  transition: transform .25s ease, background .25s ease, color .25s ease, opacity .25s ease; }
.t-btn svg { width: 20px; height: 20px; }
.t-btn[data-t-prev] svg { transform: rotate(180deg); }
.t-btn:hover:not(:disabled) { background: var(--cta-grad); color: #fff; transform: translateY(-2px); border-color: transparent; }
.t-btn:disabled { opacity: .4; cursor: default; }
.t-btn:focus-visible, .t-dot:focus-visible, .t-track:focus-visible { outline: 3px solid #CDB2F2; outline-offset: 3px; }
.t-dots { display: flex; gap: 8px; margin-left: 8px; }
.t-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: #CFC3DE; transition: width .35s cubic-bezier(.2,.7,.2,1), background .35s ease; }
.t-dot[aria-current="true"] { width: 26px; background: linear-gradient(90deg, #8A44C6, #2E5FC0 60%, #3FB98A); }
.t-note { margin-top: 18px; font-size: .8125rem; color: var(--slate); max-width: 26rem; }
.t-viewport { position: relative; margin-inline: calc(-1 * var(--gutter, 16px)); }
@media (min-width: 1024px) { .t-viewport { margin-inline: 0 calc(-1 * var(--gutter, 24px)); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }
.t-track { list-style: none; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 420px); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: 18px var(--gutter, 16px) 34px; scrollbar-width: none; }
.t-track::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .t-track { padding: 18px 64px 40px 4px; } }
.t-card {
  position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; min-height: 300px;
  padding: 30px 28px 24px; background: rgb(255 255 255 / 88%); border: 1px solid rgb(255 255 255 / 90%);
  border-radius: var(--r-shell, 24px); box-shadow: 0 30px 60px -40px rgb(60 40 110 / 45%), 0 1px 0 rgb(255 255 255) inset;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
@media (min-width: 1024px) { .t-track { scroll-padding-left: 4px; } }
.t-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding-top: 5px; pointer-events: none;
  background: linear-gradient(90deg, #8A44C6, #2E5FC0 55%, #3FB98A);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .35s ease;
}
.t-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.t-mark svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.t-card.tone-purple .t-mark, .t-card.tone-purple .t-avatar { background: linear-gradient(135deg, #B07CE0, #6B2FA0); }
.t-card.tone-blue .t-mark, .t-card.tone-blue .t-avatar { background: linear-gradient(135deg, #6FB4EC, #2E5FC0); }
.t-card.tone-green .t-mark, .t-card.tone-green .t-avatar { background: linear-gradient(135deg, #7DD8B4, #1D7352); }
.t-card blockquote { margin: 0; flex: 1; }
.t-card blockquote p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; letter-spacing: -0.01em; color: #241B30; }
.t-foot { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgb(107 47 160 / 10%); flex-wrap: wrap; }
.t-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .9375rem; flex: none; }
.t-who { display: grid; gap: 1px; margin-right: auto; }
.t-who strong { font-family: var(--font-display); font-size: .9375rem; color: #1C1626; }
.t-who span { font-size: .8125rem; color: var(--slate); }
.t-sample { font-size: .75rem; font-weight: 700; color: #8A5A00; background: #FFF3D6; border: 1px solid #F3DDA6; border-radius: 999px; padding: 4px 10px; }
@media (hover: hover) {
  .t-card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgb(60 40 110 / 55%); }
  .t-card:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .t-track { scroll-behavior: auto; } }
.cred-logo { padding: 7px !important; }
.t-intro, .t-intro .lede, .t-note { max-width: min(26rem, 100%); min-width: 0; }
.t-layout > * { min-width: 0; }
.t-track { scroll-padding-inline: var(--gutter, 16px); }
@media (min-width: 1024px) { .t-track { scroll-padding-inline: 4px; } }
/* Dots: 44px-tall tap targets with the visible pill drawn inside */
.t-dots { gap: 0; margin-left: 4px; }
.t-dot { position: relative; width: 24px !important; height: 44px !important; background: none !important; border-radius: 0; }
.t-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px; background: #CFC3DE;
  transition: width .35s cubic-bezier(.2,.7,.2,1), margin .35s cubic-bezier(.2,.7,.2,1), background .35s ease; }
.t-dot[aria-current="true"] { width: 40px !important; }
.t-dot[aria-current="true"]::before { width: 26px; margin-left: -13px; background: linear-gradient(90deg, #8A44C6, #2E5FC0 60%, #3FB98A); }

/* =====================================================================
   V6
   ===================================================================== */
/* Brand logo hover: crisp and vibrant, no haze */
:root { --brand-pastel: linear-gradient(120deg, #8CC6FF 0%, #6FD3F2 45%, #5FDDAE 100%); }
.brand:hover .brand-logo .brand-mark, .brand:focus-visible .brand-logo .brand-mark { filter: none !important; }
.brand-logo::after { transition: opacity .35s ease !important; }
.practice-logo-wrap::after, .emblem-logo-wrap::after {
  -webkit-mask-image: url("img/brand/logo-light-512.png"); mask-image: url("img/brand/logo-light-512.png");
}
.practice-mark:hover .practice-logo-wrap::after, .practice-mark:focus-visible .practice-logo-wrap::after { opacity: 1; }
.practice-mark:hover .practice-logo, .practice-mark:focus-visible .practice-logo { filter: none !important; transform: none !important; }
.practice-logo-wrap { transition: transform .6s var(--ease); }
.practice-mark:hover .practice-logo-wrap, .practice-mark:focus-visible .practice-logo-wrap { transform: translateY(-2px) scale(1.03); }
.practice-orbit { background: radial-gradient(closest-side, rgb(95 221 174 / 45%), rgb(58 141 208 / 40%) 50%, rgb(138 68 198 / 26%) 70%, transparent 80%) !important; }

/* Practice name on hover: display font, sentence case, name + role */
.practice-name { text-transform: none !important; letter-spacing: -0.01em !important; text-shadow: none !important; display: grid; justify-items: center; gap: 4px; text-align: center; }
.pn-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); letter-spacing: -0.02em;
  background: var(--brand-pastel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pn-role { font-family: var(--font-display); font-weight: 600; font-size: clamp(.875rem, .82rem + .25vw, 1rem); color: #D9CFE6; letter-spacing: 0; }
@media (hover: hover) {
  .practice-mark .practice-name { letter-spacing: -0.01em !important; }
  .practice-mark:hover .practice-name, .practice-mark:focus-visible .practice-name { letter-spacing: -0.01em !important; }
  .practice-mark:hover .practice-stack, .practice-mark:focus-visible .practice-stack { transform: translateY(-36px) !important; }
}

/* Header nav: fresh green-teal pill, consistent with the brand gradient */
@media (min-width: 1100px) {
  .site-header .site-nav li a:hover {
    background: linear-gradient(135deg, rgb(95 221 174 / 20%), rgb(111 211 242 / 12%)) !important;
    border-color: rgb(95 221 174 / 38%) !important; box-shadow: 0 8px 22px -12px rgb(63 185 138 / 55%), inset 0 1px 0 rgb(255 255 255 / 8%) !important;
  }
  .site-header .site-nav li a[aria-current="page"] {
    background: linear-gradient(135deg, rgb(95 221 174 / 28%), rgb(58 141 208 / 20%)) !important;
    border-color: rgb(95 221 174 / 45%) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%) !important;
  }
}

/* No tilting anywhere: icon cards get a subtle highlighted lift instead */
@media (hover: hover) {
  .site-header .brand:hover .brand-mark { transform: none !important; }
  .svc-card:hover .svc-card-mark { transform: translateY(-4px) !important; }
  .svc-card--dark:hover .svc-card-mark { background: rgb(255 255 255 / 9%); border-color: rgb(95 221 174 / 40%); box-shadow: 0 14px 28px -14px rgb(63 185 138 / 50%); color: #E6D5FA; }
  .svc-card--light:hover .svc-card-mark { background: rgb(58 141 208 / 12%); border-color: rgb(58 141 208 / 34%); box-shadow: 0 14px 28px -16px rgb(46 95 192 / 45%); }
  .loc-shell:hover .loc-map--chip { transform: translateY(-4px) !important; }
  .prose .info-card:hover .tile-icon, .spec-list li:hover .spec-icon { transform: translateY(-2px); }
}
.svc-card-mark { transition: transform .45s cubic-bezier(.2,.7,.2,1), background .35s ease, border-color .35s ease, box-shadow .35s ease, color .35s ease !important; }
.prose .info-card .tile-icon, .spec-icon { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.emblem-ring--2 { display: none !important; }

/* Paint blotches (experiment) */
.blot { position: absolute; z-index: 0; pointer-events: none; height: auto; opacity: .92;
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / 25%)); }
.about-art .doctor { position: relative; }
.about-art .doctor > *:not(.blot) { position: relative; z-index: 1; }
.doctor-cta { position: relative; display: inline-block; margin-top: 28px; }
.blot--cta-a { width: 54px; left: calc(100% + 22px); top: -14px; transform: rotate(18deg); }
.blot--cta-b { width: 34px; left: calc(100% + 74px); top: 22px; transform: rotate(-30deg); }
.blot--cta-c { width: 24px; left: calc(100% + 58px); top: -30px; }
.blot--gap-a, .blot--gap-b, .blot--gap-c { display: none; }
@media (min-width: 1024px) {
  .blot--gap-a, .blot--gap-b, .blot--gap-c { display: block; }
  .blot--gap-a { width: 64px; left: 49%; top: 24%; transform: rotate(-12deg); }
  .blot--gap-b { width: 40px; left: 47%; top: 52%; transform: rotate(40deg); opacity: .85; }
  .blot--gap-c { width: 30px; left: 50.5%; top: 70%; opacity: .8; }
}
.page-hero--art .page-hero-copy { position: relative; }
.blot--hero-a { width: 58px; left: 4px; top: calc(100% + 22px); transform: rotate(-20deg); opacity: .9; }
.blot--hero-b { width: 32px; left: 78px; top: calc(100% + 48px); transform: rotate(25deg); opacity: .85; }
@media (max-width: 899px) { .blot--hero-a, .blot--hero-b { top: calc(100% + 12px); } .blot--hero-a { width: 44px; } .blot--hero-b { width: 26px; left: 60px; top: calc(100% + 30px); } .page-hero--art .page-hero-inner { padding-bottom: 72px; } }
@media (max-width: 479px) { .blot--cta-b { display: none; } }

/* Hippocrates: a calm, elegant quote band */
.quote-band { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(72px, 9vw, 128px);
  background: radial-gradient(60% 90% at 50% 120%, rgb(63 185 138 / 22%), transparent 60%),
              radial-gradient(50% 80% at 50% -20%, rgb(58 141 208 / 20%), transparent 60%), #17121D; }
.quote-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; }
.quote-aurora i { position: absolute; border-radius: 50%; animation: aurora-a 30s ease-in-out infinite alternate; }
.quote-aurora i:nth-child(1) { width: 520px; height: 520px; left: -140px; top: -160px; background: radial-gradient(closest-side, rgb(138 68 198 / 30%), transparent); }
.quote-aurora i:nth-child(2) { width: 560px; height: 560px; right: -160px; bottom: -260px; background: radial-gradient(closest-side, rgb(95 221 174 / 26%), transparent); animation-name: aurora-b; }
.quote-aurora i:nth-child(3) { width: 420px; height: 420px; left: 40%; top: -260px; background: radial-gradient(closest-side, rgb(111 211 242 / 22%), transparent); }
.quote-figure { margin: 0 auto; max-width: 56rem; text-align: center; display: grid; justify-items: center; gap: 26px; }
.quote-glyph { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #8A44C6, #2E5FC0 55%, #3FB98A); box-shadow: 0 18px 40px -18px rgb(63 185 138 / 60%); }
.quote-glyph svg { width: 28px; height: 28px; fill: currentColor; stroke: none; }
.quote-figure blockquote { margin: 0; }
.quote-figure blockquote p { margin: 0; font-family: var(--font-display); font-weight: 500; color: #F3EEF8;
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.2; letter-spacing: -0.03em; text-wrap: balance; }
.quote-em { background: var(--brand-pastel); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.quote-figure figcaption { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #CFC4DC; letter-spacing: .02em; }
.quote-rule { width: 40px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #8A44C6, #3A8DD0, #3FB98A); }

/* Page-hero breadcrumbs: a clean text trail, no pills */
.page-hero .crumbs ol { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 10px !important; padding: 0 !important; margin: 0 0 22px !important; list-style: none; background: none !important; border: 0 !important; }
.page-hero .crumbs li { display: inline-flex !important; align-items: center; gap: 10px; }
.page-hero .crumbs li + li::before {
  content: "" !important; width: 6px; height: 6px; border-top: 1.5px solid #8E83A0; border-right: 1.5px solid #8E83A0;
  transform: rotate(45deg); margin-right: 4px; background: none !important;
}
.page-hero .crumbs a, .page-hero .crumbs [aria-current] {
  display: inline-flex !important; align-items: center; gap: 7px; min-height: 32px; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.page-hero .crumbs a { color: #B8AEC6 !important; transition: color .25s ease; }
.page-hero .crumbs a:hover { color: #9EE8C8 !important; }
.page-hero .crumbs [aria-current] { color: #fff !important; }
.crumb-home { width: 17px; height: 17px; }

/* Emblem: vibrant breathing aura in brand purple, blue and green */
@media (min-width: 900px) {
  .page-hero-emblem { pointer-events: auto; }
  .page-hero-emblem::before { content: none !important; }
  .emblem-aura { position: absolute; inset: 6%; border-radius: 50%; z-index: -1;
    background: conic-gradient(from 0deg, #8A44C6, #3A8DD0, #3FB98A, #6FD3F2, #8A44C6);
    filter: blur(34px) saturate(1.3); opacity: .55; animation: emblem-breathe 6s ease-in-out infinite, emblem-turn 24s linear infinite; }
  .emblem-ring { inset: 10% !important; border: 0 !important; background: none !important; animation: none !important;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), inset 0 0 40px rgb(95 221 174 / 10%); }
  .emblem-logo-wrap { width: 46%; position: relative; }
  .emblem-logo { width: 100% !important; filter: drop-shadow(0 10px 24px rgb(0 0 0 / 35%)) !important; animation: none !important; }
  .page-hero-emblem:hover .emblem-aura { opacity: .95; animation-duration: 3s, 12s; }
  .page-hero-emblem:hover .emblem-logo-wrap::after { opacity: 1; }
}
@keyframes emblem-breathe { 0%, 100% { transform: scale(.9); opacity: .45; } 50% { transform: scale(1.08); opacity: .8; } }
@keyframes emblem-turn { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .emblem-aura, .quote-aurora i { animation: none !important; } }
.practice-logo-wrap { width: clamp(150px, 18vw, 240px); }
.practice-logo { width: 100% !important; height: auto; }
@media (min-width: 1024px) {
  .blot--gap-a { width: 58px !important; left: 53.5% !important; top: 18% !important; }
  .blot--gap-b { width: 36px !important; left: 52.5% !important; top: 58% !important; }
  .blot--gap-c { width: 24px !important; left: 54.5% !important; top: 74% !important; }
}
@media (min-width: 1024px) { .blot--gap-a { left: 52% !important; top: 20% !important; width: 52px !important; } .blot--gap-c { left: 53.2% !important; } }

/* =====================================================================
   V7
   ===================================================================== */
/* Logo: brand blue-green gradient by default, brilliant white with brand glow on hover */
.brand-logo::after { opacity: 1 !important; transition: opacity .4s ease !important; }
.brand-logo .brand-mark { transition: filter .4s ease !important; }
.brand:hover .brand-logo::after, .brand:focus-visible .brand-logo::after,
.practice-mark:hover .practice-logo-wrap::after, .practice-mark:focus-visible .practice-logo-wrap::after,
.page-hero-emblem:hover .emblem-logo-wrap::after { opacity: 0 !important; }
.brand:hover .brand-logo .brand-mark, .brand:focus-visible .brand-logo .brand-mark {
  filter: brightness(1.15) drop-shadow(0 0 6px rgb(255 255 255 / 70%)) drop-shadow(0 0 14px rgb(95 221 174 / 65%)) drop-shadow(0 0 26px rgb(138 68 198 / 55%)) !important;
}
.practice-mark:hover .practice-logo, .practice-mark:focus-visible .practice-logo {
  filter: brightness(1.15) drop-shadow(0 0 10px rgb(255 255 255 / 75%)) drop-shadow(0 0 30px rgb(95 221 174 / 60%)) drop-shadow(0 0 60px rgb(138 68 198 / 60%)) !important;
}
.practice-logo { transition: filter .5s ease !important; }
.pn-role { font-size: clamp(1rem, .92rem + .35vw, 1.1875rem) !important; color: #E4DCEE !important; }

/* Page emblem: defined against the breathing aura (dark ring + shadow), white on hover */
@media (min-width: 900px) {
  .emblem-logo-wrap { border-radius: 50%; box-shadow: 0 0 0 6px rgb(20 15 26 / 85%), 0 18px 50px rgb(10 6 14 / 80%), 0 0 0 7px rgb(255 255 255 / 10%); }
  .emblem-logo { filter: none !important; transition: filter .5s ease; }
  .page-hero-emblem:hover .emblem-logo { filter: brightness(1.12) drop-shadow(0 0 10px rgb(255 255 255 / 60%)) !important; }
  .emblem-aura { opacity: .7; }
}

/* Your surgeon: one blotch beside the role */
.role-wrap { position: relative; display: inline-block; }
.blot--role { width: 34px; left: calc(100% + 14px); top: 50%; margin-top: -18px; opacity: .95; }
@media (max-width: 479px) { .blot--role { width: 26px; left: calc(100% + 8px); } }

/* Map chip: lifts on its own hover, gentle lift with the card */
.loc-map--chip { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease !important; }
@media (hover: hover) {
  .loc-shell:hover .loc-map--chip { transform: translateY(-4px) !important; }
  .loc-map--chip:hover, .loc-photo:hover .loc-map--chip { transform: translateY(-9px) !important; border-color: rgb(95 221 174 / 55%) !important;
    box-shadow: 0 28px 44px -18px rgb(0 0 0 / 80%), 0 0 0 1px rgb(95 221 174 / 30%), 0 14px 30px -14px rgb(63 185 138 / 50%) !important; }
}

/* Services: spine render clearer, with the cervical close-up beside it */
.svc-card-media::after { height: 18% !important; opacity: .8; }
.svc-card-media img { filter: brightness(1.08) contrast(1.06) saturate(1.08); }
.svc-card-media--pair { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2px; background: #0E0B12; }
.svc-card-media--pair picture { position: relative; overflow: hidden; }
.svc-card-media--pair picture:first-child img { object-position: 50% 20%; }
.svc-card-media--pair picture:last-of-type img { object-position: 46% 30%; }

/* Patient journey: background gradient drifts with scroll progress */
section:has([data-timeline]) {
  --jp: 0;
  background:
    radial-gradient(60% 80% at calc(10% + var(--jp) * 80%) 20%, rgb(205 178 242 / calc(45% - var(--jp) * 25%)), transparent 70%),
    radial-gradient(55% 75% at calc(90% - var(--jp) * 60%) 90%, rgb(158 224 196 / calc(15% + var(--jp) * 40%)), transparent 70%),
    linear-gradient(calc(110deg + var(--jp) * 60deg), #F1ECF9 0%, #EAF1FA 50%, #EAF6F1 100%) !important;
  transition: background .2s linear;
}

/* Referring doctors hero: toned into the brand palette */
.page-hero--light-photo .page-hero-media img { filter: grayscale(.35) brightness(.78) contrast(1.06) !important; }
.page-hero--light-photo .page-hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(120deg, #7A3CC8 0%, #2E5FC0 55%, #2FA57A 100%); mix-blend-mode: soft-light; opacity: .85; }
.page-hero--light-photo .page-hero-media::after { z-index: 2; }

/* About hero: portrait standing in front of the artwork */
.hero-portrait { position: absolute; z-index: 2; pointer-events: none; display: block; }
.hero-portrait img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgb(10 6 14 / 65%)); }
.page-hero--art .page-hero-media picture:not(.hero-portrait) img { opacity: .55; }
@media (min-width: 900px) {
  .hero-portrait { width: min(36%, 360px); left: 50%; bottom: 0; transform: translateX(-46%); }
}
@media (max-width: 899px) {
  .page-hero--art .page-hero-media { position: relative; min-height: 300px; }
  .hero-portrait { width: 58%; max-width: 280px; left: 50%; bottom: 0; transform: translateX(-50%); }
}

/* ---------- Quote + testimonials: one continuous, warm dark band ---------- */
.quote-band { padding-bottom: clamp(40px, 5vw, 64px) !important; background:
  radial-gradient(60% 90% at 50% -10%, rgb(58 141 208 / 18%), transparent 60%), #17121D !important; }
.quote-figure { position: relative; }
.quote-big { position: absolute; z-index: -1; top: -0.42em; left: 50%; transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(14rem, 10rem + 14vw, 24rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgb(205 178 242 / 18%); pointer-events: none; user-select: none; }
.quote-figure blockquote p { font-weight: 600 !important; }
.quote-figure figcaption { gap: 16px !important; }
.quote-rule--r { background: linear-gradient(90deg, #3FB98A, #3A8DD0, #8A44C6) !important; }
.quote-by { display: grid; gap: 2px; text-align: center; }
.quote-by strong { color: #fff; font-size: 1.0625rem; letter-spacing: .01em; }
.quote-by span { font-weight: 500; font-size: .875rem; color: #A99DB8; letter-spacing: 0; }

.t-section.on-dark { background:
  radial-gradient(55% 70% at 0% 0%, rgb(138 68 198 / 22%), transparent 65%),
  radial-gradient(50% 70% at 100% 100%, rgb(63 185 138 / 20%), transparent 65%),
  radial-gradient(40% 50% at 60% 10%, rgb(255 170 130 / 8%), transparent 70%),
  #17121D !important; padding-top: clamp(40px, 5vw, 64px); }
.t-section.on-dark .t-glow { display: none; }
.t-section.on-dark h2 { color: #fff; }
.t-section.on-dark .lede, .t-section.on-dark .t-note { color: #CFC4DC; }
.t-section.on-dark .t-card { background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 10%);
  box-shadow: 0 30px 60px -36px rgb(0 0 0 / 70%), inset 0 1px 0 rgb(255 255 255 / 6%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.t-section.on-dark .t-card blockquote p { color: #F3EEF8; font-weight: 500; }
.t-section.on-dark .t-card .t-mark { background: linear-gradient(135deg, #8A44C6, #2E5FC0 55%, #3FB98A) !important; }
.t-section.on-dark .t-foot { border-top-color: rgb(255 255 255 / 10%); }
.t-section.on-dark .t-who strong { color: #fff; }
.t-section.on-dark .t-who span { color: #B3A8C3; }
.t-section.on-dark .t-sample { background: rgb(255 214 120 / 12%); color: #F4D58A; border-color: rgb(255 214 120 / 28%); }
.t-section.on-dark .t-btn { background: rgb(255 255 255 / 6%); color: #fff; border-color: rgb(255 255 255 / 14%); box-shadow: none; }
.t-section.on-dark .t-btn:hover:not(:disabled) { background: linear-gradient(135deg, #3FB98A, #3A8DD0); border-color: transparent; }
.t-section.on-dark .t-dot::before { background: rgb(255 255 255 / 25%); }
.t-section.on-dark .t-dot[aria-current="true"]::before { background: linear-gradient(90deg, #8A44C6, #3A8DD0 60%, #3FB98A); }
@media (hover: hover) {
  .t-section.on-dark .t-card:hover { background: rgb(255 255 255 / 8%); border-color: rgb(95 221 174 / 30%); box-shadow: 0 40px 70px -36px rgb(0 0 0 / 80%), 0 0 0 1px rgb(95 221 174 / 18%); }
}
@media (min-width: 1024px) { .t-section.on-dark .t-viewport { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } }
/* Quote and testimonials meet without a seam */
.quote-aurora i:nth-child(2) { display: none; }
.t-section.on-dark { background:
  radial-gradient(50% 60% at 0% 55%, rgb(138 68 198 / 20%), transparent 65%),
  radial-gradient(50% 70% at 100% 100%, rgb(63 185 138 / 18%), transparent 65%),
  #17121D !important; }
/* About hero: artwork stays full behind the portrait */
.page-hero--art .page-hero-media picture:not(.hero-portrait) img { opacity: .72; }
.page-hero--art .page-hero-media .hero-portrait { height: auto !important; display: block !important; }
.page-hero--art .page-hero-media picture.hero-portrait { position: absolute !important; width: min(34%, 340px) !important; height: auto !important; z-index: 2; }
@media (min-width: 900px) { .page-hero--art .page-hero-media picture.hero-portrait { left: 52%; bottom: 0; transform: translateX(-50%); } }
@media (max-width: 899px) { .page-hero--art .page-hero-media picture.hero-portrait { width: 52% !important; max-width: 260px; left: 50%; bottom: 0; transform: translateX(-50%); } }
.page-hero--art .page-hero-media picture.hero-portrait::before { content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; top: 2%; bottom: -10%;
  background: radial-gradient(closest-side, rgb(26 20 32 / 92%) 38%, rgb(26 20 32 / 60%) 62%, transparent 100%); pointer-events: none; }
.hero-portrait img { position: relative; filter: drop-shadow(0 0 30px rgb(138 68 198 / 28%)) drop-shadow(0 20px 40px rgb(10 6 14 / 60%)) !important; }
@media (min-width: 900px) {
  .page-hero--art .page-hero-media picture.hero-portrait { width: min(44%, 440px) !important; left: auto; right: 2%; transform: none; }
}
@media (max-width: 899px) {
  .page-hero--art .page-hero-media picture.hero-portrait { width: 64% !important; max-width: 320px; }
}
/* Logo: crisp, saturated gradient by default; restrained white glow on hover */
.brand-logo::after { background: linear-gradient(125deg, #4FB4FF 0%, #2FC8E8 48%, #2EDB9C 100%) !important; }
.brand:hover .brand-logo .brand-mark, .brand:focus-visible .brand-logo .brand-mark {
  filter: drop-shadow(0 0 3px rgb(255 255 255 / 35%)) drop-shadow(0 0 10px rgb(63 200 160 / 40%)) !important; }
.practice-mark:hover .practice-logo, .practice-mark:focus-visible .practice-logo {
  filter: drop-shadow(0 0 4px rgb(255 255 255 / 35%)) drop-shadow(0 0 18px rgb(63 200 160 / 35%)) drop-shadow(0 0 36px rgb(138 68 198 / 35%)) !important; }
.page-hero-emblem:hover .emblem-logo { filter: drop-shadow(0 0 4px rgb(255 255 255 / 30%)) !important; }
@media (min-width: 900px) {
  .emblem-logo-wrap { box-shadow: none !important; border-radius: 0; }
  .emblem-logo { filter: drop-shadow(0 0 2px rgb(12 8 16 / 90%)) drop-shadow(0 10px 26px rgb(12 8 16 / 85%)) !important; }
  .page-hero-emblem:hover .emblem-logo { filter: drop-shadow(0 0 2px rgb(12 8 16 / 90%)) drop-shadow(0 10px 26px rgb(12 8 16 / 85%)) drop-shadow(0 0 6px rgb(255 255 255 / 25%)) !important; }
  .page-hero--emblem .page-hero-inner { pointer-events: none; }
  .page-hero--emblem .page-hero-inner a, .page-hero--emblem .page-hero-copy { pointer-events: auto; }
  .page-hero--emblem .page-hero-copy { max-width: 36rem; }
}

/* =====================================================================
   V8
   ===================================================================== */
/* Logo: two solid brand colours (blue left, green right); white on hover with a soft glow */
.brand-logo::after { background: linear-gradient(90deg, #2F9BFF 0 50%, #1FD08E 50% 100%) !important; }
.brand:hover .brand-logo .brand-mark, .brand:focus-visible .brand-logo .brand-mark {
  filter: drop-shadow(0 0 6px rgb(255 255 255 / 22%)) drop-shadow(0 0 14px rgb(255 255 255 / 12%)) !important; }
.practice-mark:hover .practice-logo, .practice-mark:focus-visible .practice-logo {
  filter: drop-shadow(0 0 10px rgb(255 255 255 / 22%)) drop-shadow(0 0 28px rgb(255 255 255 / 12%)) !important; }
/* "NeuroSpine": the same blue-to-green, in pastel tone */
:root { --brand-pastel: linear-gradient(90deg, #9CCBFF 0%, #8FD9E8 50%, #8EE6C2 100%); }
.practice-orbit { background: radial-gradient(closest-side, rgb(47 155 255 / 32%), rgb(31 208 142 / 22%) 55%, transparent 78%) !important; }

/* Page emblem: same two colours, solid white on hover; smoother, softer shadow */
@media (min-width: 900px) {
  .emblem-logo { filter: drop-shadow(0 6px 18px rgb(12 8 16 / 55%)) drop-shadow(0 18px 44px rgb(12 8 16 / 45%)) !important; transition: filter .6s ease !important; }
  .page-hero-emblem:hover .emblem-logo { filter: drop-shadow(0 6px 18px rgb(12 8 16 / 45%)) drop-shadow(0 0 16px rgb(255 255 255 / 20%)) !important; }
}

/* Map chip: warm blue lift */
@media (hover: hover) {
  .loc-map--chip:hover, .loc-photo:hover .loc-map--chip { border-color: rgb(96 170 255 / 70%) !important;
    box-shadow: 0 28px 44px -18px rgb(0 0 0 / 75%), 0 0 0 1px rgb(96 170 255 / 40%), 0 16px 34px -12px rgb(64 140 255 / 55%) !important; }
}

/* Services: the labelled spine render shown whole so the annotations read */
.svc-card-media--whole { aspect-ratio: 2576 / 1861 !important; background: #050407; }
.svc-card-media--whole img { object-fit: contain !important; filter: none !important; }
.svc-card-media--whole::after { height: 10% !important; }
.svc-card--light .svc-card-media { aspect-ratio: 2576 / 1861; }

/* Referring doctors: a little brighter */
.page-hero--light-photo .page-hero-media img { filter: grayscale(.25) brightness(.92) contrast(1.04) !important; }
.page-hero--light-photo .page-hero-media::before { opacity: .65 !important; }

/* About: portrait above "Background", blending into the page */
.about-portrait { display: block; width: min(300px, 70%); margin: -8px 0 8px; }
.about-portrait img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgb(40 50 80 / 18%)); }
.page-hero--art .page-hero-media picture:not(.hero-portrait) img { opacity: 1 !important; }

/* Testimonials: back in their own place, same dark styling */
.t-section.on-dark { padding-top: clamp(64px, 8vw, 112px) !important; background:
  radial-gradient(55% 70% at 0% 10%, rgb(138 68 198 / 22%), transparent 65%),
  radial-gradient(50% 70% at 100% 100%, rgb(63 185 138 / 18%), transparent 65%), #17121D !important; }

/* Quote: more refined */
.quote-band { padding-block: clamp(88px, 10vw, 140px) !important; background:
  radial-gradient(70% 90% at 50% 110%, rgb(31 208 142 / 14%), transparent 60%),
  radial-gradient(60% 80% at 50% -20%, rgb(47 155 255 / 16%), transparent 60%), #17121D !important; }
.quote-aurora i:nth-child(2) { display: block !important; }
.quote-band::before, .quote-band::after { content: ""; position: absolute; left: 50%; width: min(560px, 70%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(156 203 255 / 45%), rgb(142 230 194 / 45%), transparent); }
.quote-band::before { top: clamp(40px, 5vw, 64px); }
.quote-band::after { bottom: clamp(40px, 5vw, 64px); }
.quote-glyph { display: none !important; }
.quote-kicker { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: .9375rem; color: #A9DCC8; letter-spacing: .02em; }
.quote-big { top: -0.36em !important; -webkit-text-stroke: 1.5px rgb(142 230 194 / 22%) !important; }
.quote-figure blockquote p { font-weight: 500 !important; font-size: clamp(1.875rem, 1.25rem + 2.8vw, 3.5rem) !important; line-height: 1.16 !important; }
.quote-em { font-weight: 700; background-size: 200% 100% !important; animation: quote-shimmer 8s ease-in-out infinite alternate; }
@keyframes quote-shimmer { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .quote-em { animation: none; } }
.crumb-home { display: none; }
.quote-figure { padding-top: clamp(70px, 7vw, 100px); }
.quote-big { top: -0.12em !important; font-size: clamp(11rem, 8rem + 10vw, 18rem) !important; }
.spec-row-head h2, .spec-row-head h3 { font-size: var(--step-2) !important; letter-spacing: -0.02em; }

/* =====================================================================
   V9
   ===================================================================== */
/* Logo: solid white left disc; right semicircle in a purple-blue radial */
.brand-logo::after {
  background: radial-gradient(circle at 70% 40%, #B07CFF 0%, #7A4BE0 40%, #3A6FE0 100%) !important;
  -webkit-mask-image: url("img/brand/logo-right-192.png") !important; mask-image: url("img/brand/logo-right-192.png") !important;
}
.practice-logo-wrap::after, .emblem-logo-wrap::after {
  -webkit-mask-image: url("img/brand/logo-right-512.png") !important; mask-image: url("img/brand/logo-right-512.png") !important;
}
:root { --brand-pastel: linear-gradient(90deg, #D5BEFF 0%, #B9C4FF 50%, #A6CCFF 100%); }
.practice-orbit { background: radial-gradient(closest-side, rgb(138 75 224 / 32%), rgb(58 111 224 / 22%) 55%, transparent 78%) !important; }
/* hover: whole mark white, with a soft lilac glow */
.brand:hover .brand-logo .brand-mark, .brand:focus-visible .brand-logo .brand-mark {
  filter: drop-shadow(0 0 6px rgb(255 255 255 / 22%)) drop-shadow(0 0 14px rgb(176 124 255 / 22%)) !important; }

/* Page heroes: fine line-icon texture in soft white */
.hero-pattern { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("img/hero-pattern.svg") 0 0 / 300px 300px repeat; opacity: .07;
  -webkit-mask-image: radial-gradient(120% 90% at 25% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 25% 40%, #000 30%, transparent 85%);
  animation: pattern-drift 90s linear infinite; }
@keyframes pattern-drift { to { background-position: 300px -300px; } }
.page-hero-inner, .page-hero-media, .page-hero-emblem { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero-pattern { animation: none; } }

/* Quote: playful per-word hover */
.quote-play p { cursor: default; }
.qw { display: inline-block; transition: transform .45s cubic-bezier(.34,1.56,.64,1), color .3s ease, text-shadow .3s ease; will-change: transform; }
.qw--em { background: var(--brand-pastel); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.quote-em { background: none; }
@media (hover: hover) {
  .qw:hover { transform: translateY(-8px) rotate(-2deg) scale(1.06); color: #fff; text-shadow: 0 10px 24px rgb(138 75 224 / 45%); }
  .qw--em:hover { text-shadow: none; filter: drop-shadow(0 8px 18px rgb(58 111 224 / 50%)); }
  .quote-play:hover .qw:not(:hover) { opacity: .8; }
  .quote-play:hover .qw { animation: none; }
}
.quote-play:not(:hover) .qw { animation: none; }
.quote-figure.is-visible .qw, .quote-figure .qw { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .qw { transition: none; } .qw:hover { transform: none; } }

/* Emblem: calmer, layered breathing with soft ripples */
@media (min-width: 900px) {
  .emblem-aura { inset: 4% !important; opacity: .5;
    background: conic-gradient(from 0deg, #8A44C6, #3A6FE0, #3FB98A, #6FA8F2, #8A44C6) !important;
    filter: blur(38px) saturate(1.25) !important;
    animation: aura-breathe 7s cubic-bezier(.45,0,.55,1) infinite, emblem-turn 30s linear infinite !important; }
  .emblem-aura--2 { inset: 16% !important; opacity: .45; filter: blur(22px) saturate(1.3) !important;
    background: radial-gradient(closest-side, rgb(176 124 255 / 70%), rgb(58 111 224 / 45%) 60%, transparent) !important;
    animation: aura-breathe 7s cubic-bezier(.45,0,.55,1) -3.5s infinite !important; }
  .emblem-ripple { position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgb(205 178 242 / 40%); z-index: -1;
    animation: emblem-ripple 7s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0; }
  .emblem-ripple--2 { animation-delay: -3.5s; border-color: rgb(142 230 194 / 35%); }
  .page-hero-emblem:hover .emblem-aura { opacity: .85; animation-duration: 4.5s, 18s !important; }
  .page-hero-emblem:hover .emblem-aura--2 { opacity: .75; animation-duration: 4.5s !important; }
}
@keyframes aura-breathe { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.06); } }
@keyframes emblem-ripple { 0% { transform: scale(.95); opacity: .0; } 15% { opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .emblem-aura, .emblem-aura--2, .emblem-ripple { animation: none !important; } }

/* About portrait: face-focused, a touch larger */
.about-portrait { width: min(320px, 72%) !important; }
.about-portrait img { filter: none !important; }
@media (hover: hover) { .qw:hover { transform: translateY(-7px) scale(1.05) !important; } }
.hero-pattern { opacity: .05 !important; }

/* =====================================================================
   V10
   ===================================================================== */
/* Logo right semicircle: purple-blue radial core, light catching the top-right edge */
.brand-logo::after {
  background:
    radial-gradient(70% 55% at 92% 8%, rgb(255 255 255 / 75%) 0%, rgb(220 205 255 / 35%) 30%, transparent 55%),
    radial-gradient(circle at 45% 55%, #9A6BFF 0%, #6C55F0 42%, #3F63E6 75%, #2C45B8 100%) !important;
}
/* "NeuroSpine": pastel of the same purple-blue */
:root { --brand-pastel: linear-gradient(90deg, #D9C8FF 0%, #BFB8FF 50%, #A9C3FF 100%); }

/* Practice mark: name sits a fixed 18px below the logo; hover centres the pair exactly */
@media (hover: hover) {
  .practice-mark .practice-name { top: calc(100% + 18px) !important; }
  .practice-mark:hover .practice-stack, .practice-mark:focus-visible .practice-stack { transform: translateY(calc(-1 * var(--pm-shift, 36px))) !important; }
}

/* Testimonials: soft gradient cards */
.t-section.on-dark .t-card {
  background: linear-gradient(155deg, rgb(155 107 255 / 14%) 0%, rgb(255 255 255 / 4%) 45%, rgb(63 99 230 / 10%) 100%) !important; }
.t-section.on-dark .t-card.tone-green { background: linear-gradient(155deg, rgb(63 185 138 / 13%) 0%, rgb(255 255 255 / 4%) 45%, rgb(63 99 230 / 10%) 100%) !important; }
.t-section.on-dark .t-card.tone-blue { background: linear-gradient(155deg, rgb(63 140 230 / 15%) 0%, rgb(255 255 255 / 4%) 45%, rgb(155 107 255 / 10%) 100%) !important; }
.t-sample { display: none !important; }

/* Map chip: "Open in Google Maps" pill pops out on hover */
.loc-chip-wrap { display: none; }
@media (min-width: 1024px) {
  .loc-chip-wrap { display: block; position: absolute; z-index: 3; right: 16px; top: 16px; width: 190px; }
  .loc-chip-wrap .loc-map--chip { position: relative !important; right: auto !important; top: auto !important; }
  .loc-chip-pill {
    position: absolute; right: 0; top: calc(100% + 10px); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
    padding: 8px 8px 8px 16px; border-radius: 14px; font-family: var(--font-display); font-weight: 700; font-size: .875rem;
    color: #2A1747; background: #fff; box-shadow: 0 16px 30px -14px rgb(0 0 0 / 70%), 0 0 0 4px rgb(255 255 255 / 8%);
    opacity: 0; transform: translateY(-6px) scale(.94); transform-origin: top right; pointer-events: none;
    transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .loc-chip-pill .btn-icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #4F8DFF, #2E5FC0); }
  .loc-chip-pill .btn-icon svg { width: 15px; height: 15px; }
  .loc-chip-wrap:hover .loc-chip-pill, .loc-photo:focus-visible .loc-chip-pill { opacity: 1; transform: none; }
  .loc-chip-wrap:hover .loc-map--chip { transform: translateY(-9px) !important; border-color: rgb(96 170 255 / 70%) !important;
    box-shadow: 0 28px 44px -18px rgb(0 0 0 / 75%), 0 0 0 1px rgb(96 170 255 / 40%), 0 16px 34px -12px rgb(64 140 255 / 55%) !important; }
  .loc-photo:hover:not(:has(.loc-chip-wrap:hover)) .loc-map--chip { transform: translateY(-4px) !important; box-shadow: 0 18px 30px -16px rgb(0 0 0 / 70%) !important; border-color: rgb(255 255 255 / 16%) !important; }
}

/* Icon texture: clearly present (but soft) behind the emblem heroes, faint in "Your surgeon" */
.page-hero--emblem .hero-pattern { opacity: .065 !important;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 70%), #000 55%, rgb(0 0 0 / 60%)) !important; mask-image: linear-gradient(90deg, rgb(0 0 0 / 70%), #000 55%, rgb(0 0 0 / 60%)) !important; }
.about-art { position: relative; isolation: isolate; }
.hero-pattern--soft { opacity: .035 !important; z-index: 0;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 90%) !important; mask-image: radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 90%) !important; }
.about-art > .container { position: relative; z-index: 1; }

/* About: circular face portrait set into the Background text */
.about-body .about-portrait { float: right; width: clamp(200px, 22vw, 260px) !important; margin: -6px -8px 12px 28px !important;
  shape-outside: circle(48%); -webkit-shape-outside: circle(48%); }
.about-body .about-portrait img { width: 100%; height: auto; border-radius: 50%; }
.about-body > h2:nth-of-type(2) { clear: both; }
@media (max-width: 639px) {
  .about-body .about-portrait { float: none; display: block; width: 220px !important; margin: 8px auto 4px !important; }
}

/* =====================================================================
   V11
   ===================================================================== */
/* Logo right semicircle: purple, blue and green in one lit radial */
.brand-logo::after {
  background:
    radial-gradient(70% 55% at 92% 8%, rgb(255 255 255 / 70%) 0%, rgb(220 230 255 / 30%) 30%, transparent 55%),
    radial-gradient(circle at 40% 60%, #9A6BFF 0%, #5E66F0 38%, #3A8FE0 66%, #25C79A 100%) !important;
}
/* "NeuroSpine": the same purple-blue-green, a touch brighter than pastel */
:root { --brand-pastel: linear-gradient(90deg, #C7AEFF 0%, #9DB4FF 45%, #8FD0F2 72%, #7FE3BF 100%); }

/* Hero icon texture: a little more visible */
.page-hero .hero-pattern { opacity: .09 !important; }
.page-hero--emblem .hero-pattern { opacity: .10 !important; }
.hero-pattern--soft { opacity: .06 !important; }

/* Breadcrumbs: quieter, recede into the hero */
.page-hero .crumbs a { color: #8E84A0 !important; }
.page-hero .crumbs a:hover { color: #B9E9D4 !important; }
.page-hero .crumbs [aria-current] { color: #B6ACC6 !important; font-weight: 600; }
.page-hero .crumbs li + li::before { border-color: #6D6380 !important; }

/* About portrait: no clipping edge, the image itself fades out */
.about-body .about-portrait img { border-radius: 0 !important; }

/* Quote marks: gradient brand glyph in a soft halo */
.quote-big { display: none !important; }
.quote-marks { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; margin-bottom: -6px;
  background: radial-gradient(closest-side, rgb(94 102 240 / 22%), rgb(37 199 154 / 8%) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%); }
.quote-marks svg { width: 46px; height: auto; filter: drop-shadow(0 6px 16px rgb(94 102 240 / 45%)); }
.quote-figure { padding-top: clamp(24px, 3vw, 40px) !important; }

/* Practice card: icon texture, clearest at the centre, fading to the edges */
.practice-pattern { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/hero-pattern.svg") center / 260px 260px repeat; opacity: .14;
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, rgb(0 0 0 / 45%) 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 15%, rgb(0 0 0 / 45%) 55%, transparent 100%);
  transition: opacity .6s ease; }
.practice-mark:hover .practice-pattern, .practice-mark:focus-visible .practice-pattern { opacity: .2; }

/* Your surgeon: brain artwork a little larger */
@media (min-width: 1024px) {
  .about-art .doctor { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) !important; gap: 48px !important; }
  .about-art-figure { transform: scale(1.1); transform-origin: 55% 50%; }
}
@media (max-width: 1023px) { .about-art-figure { transform: scale(1.06); } }

/* =====================================================================
   V12
   ===================================================================== */
/* Logo: right half carries more green, matching "NeuroSpine" */
.brand-logo::after {
  background:
    radial-gradient(70% 55% at 92% 8%, rgb(255 255 255 / 65%) 0%, rgb(220 240 235 / 26%) 30%, transparent 55%),
    linear-gradient(160deg, #9A6BFF 0%, #5E66F0 34%, #3A8FE0 62%, #25C79A 100%) !important;
}
.brand-word span { transition: color .35s ease, background .35s ease; }
.brand:hover .brand-word span, .brand:focus-visible .brand-word span {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; }

/* Hide the old tiled pattern; individual drifting icons replace it */
.hero-pattern { display: none !important; }
.drift { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.drift i { position: absolute; display: block; opacity: var(--o, .16); translate: -50% -50%;
  animation: drift-one var(--dur) ease-in-out var(--delay) infinite alternate; }
.drift svg { display: block; width: 100%; height: auto; }
@keyframes drift-one { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
.drift--hero { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, rgb(0 0 0 / 50%) 80%, transparent); mask-image: linear-gradient(90deg, #000 0%, #000 55%, rgb(0 0 0 / 50%) 80%, transparent); }
.drift--hero i { --o: .17; }
.drift--photo { z-index: 2; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 62%); mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 62%); }
.page-hero-inner { position: relative; z-index: 3 !important; }
.drift--soft i { --o: .11; }
.drift--card { -webkit-mask-image: radial-gradient(closest-side, #000 20%, rgb(0 0 0 / 40%) 60%, transparent); mask-image: radial-gradient(closest-side, #000 20%, rgb(0 0 0 / 40%) 60%, transparent); }
.drift--card i { --o: .2; }
.practice-pattern { display: none !important; }
.about-art { position: relative; isolation: isolate; }
.about-art > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .drift i { animation: none; } }

/* Quote mark circle lights up on hover */
.quote-marks { transition: background .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); cursor: default; }
.quote-figure:hover .quote-marks, .quote-marks:hover {
  background: radial-gradient(closest-side, rgb(94 102 240 / 42%), rgb(37 199 154 / 18%) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%), 0 0 40px rgb(94 102 240 / 35%), 0 0 70px rgb(37 199 154 / 18%); transform: translateY(-2px); }

/* Testimonials: warmer, livelier inner colour */
.t-section.on-dark .t-card { background:
  radial-gradient(90% 70% at 0% 0%, rgb(176 124 255 / 30%), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgb(255 170 120 / 14%), transparent 60%),
  linear-gradient(160deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 3%)) !important; }
.t-section.on-dark .t-card.tone-blue { background:
  radial-gradient(90% 70% at 0% 0%, rgb(90 160 255 / 30%), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgb(255 200 120 / 12%), transparent 60%),
  linear-gradient(160deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 3%)) !important; }
.t-section.on-dark .t-card.tone-green { background:
  radial-gradient(90% 70% at 0% 0%, rgb(63 210 150 / 28%), transparent 60%),
  radial-gradient(80% 70% at 100% 100%, rgb(255 190 140 / 12%), transparent 60%),
  linear-gradient(160deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 3%)) !important; }

/* Maps pill: same layer as the map card, lifting with it */
@media (min-width: 1024px) {
  .loc-chip-pill { z-index: 4; top: calc(100% + 14px) !important; box-shadow: 0 12px 26px -12px rgb(0 0 0 / 55%), 0 0 0 1px rgb(255 255 255 / 30%) !important; }
  .loc-chip-wrap:hover .loc-chip-pill { transform: translateY(-9px) !important; }
}

/* Breadcrumbs: quieter still */
.page-hero .crumbs a { color: #776D88 !important; font-weight: 500 !important; }
.page-hero .crumbs [aria-current] { color: #9A90AA !important; font-weight: 500 !important; }
.page-hero .crumbs li + li::before { border-color: #5A5168 !important; }
.page-hero .crumbs a, .page-hero .crumbs [aria-current] { font-size: .875rem !important; }

/* Home hero label: softer */
.hero .eyebrow { color: #B9AECB !important; -webkit-text-fill-color: #B9AECB; background: none !important; font-weight: 600 !important; }
.hero .eyebrow::before { opacity: .6; }

/* About portrait: face a little larger */
.about-body .about-portrait { width: clamp(220px, 24vw, 290px) !important; }

/* =====================================================================
   V13
   ===================================================================== */
/* Home hero label: softer still */
.hero .eyebrow { color: #A49AB6 !important; -webkit-text-fill-color: #A49AB6; font-weight: 500 !important; }
.hero .eyebrow::before { opacity: .45; }

/* Logo: one smooth colour-to-white cross-fade (mark and word together) */
.brand-logo::after { transition: opacity .7s cubic-bezier(.4,0,.2,1) !important; }
.brand-logo .brand-mark, .practice-logo, .emblem-logo { transition: filter .7s cubic-bezier(.4,0,.2,1) !important; }
.brand-word > span { position: relative; display: inline-block; }
.brand-word > span::after { content: "NeuroSpine"; position: absolute; inset: 0; color: #fff; -webkit-text-fill-color: #fff;
  opacity: 0; transition: opacity .7s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.brand:hover .brand-word span, .brand:focus-visible .brand-word span {
  background: var(--brand-pastel) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.brand:hover .brand-word > span::after, .brand:focus-visible .brand-word > span::after { opacity: 1; }

/* Drifting icons: wider, slower, two-leg paths; per-icon opacity */
.drift i { opacity: calc(var(--o, .16) * var(--k, 1)); rotate: var(--r0, 0deg);
  animation: drift-path var(--dur) ease-in-out var(--delay) infinite alternate !important; }
@keyframes drift-path {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
  100% { transform: translate(var(--dx2), var(--dy2)) rotate(calc(var(--rot) * -0.6)); }
}
.drift--soft i { --o: .14; }

/* Testimonials: the card in front is brighter and happier */
.t-section.on-dark .t-card { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, filter .5s ease, opacity .5s ease, border-color .5s ease !important; }
.t-section.on-dark .t-card:not(.is-active) { filter: saturate(.85) brightness(.9); }
.t-section.on-dark .t-card.is-active { filter: none; border-color: rgb(205 178 242 / 38%) !important;
  box-shadow: 0 40px 70px -36px rgb(0 0 0 / 75%), 0 0 0 1px rgb(205 178 242 / 22%), 0 24px 60px -30px rgb(176 124 255 / 55%) !important; }
.t-section.on-dark .t-card.is-active.tone-blue { border-color: rgb(150 196 255 / 40%) !important; box-shadow: 0 40px 70px -36px rgb(0 0 0 / 75%), 0 0 0 1px rgb(150 196 255 / 22%), 0 24px 60px -30px rgb(90 160 255 / 55%) !important; }
.t-section.on-dark .t-card.is-active.tone-green { border-color: rgb(142 230 194 / 40%) !important; box-shadow: 0 40px 70px -36px rgb(0 0 0 / 75%), 0 0 0 1px rgb(142 230 194 / 22%), 0 24px 60px -30px rgb(63 210 150 / 50%) !important; }
.t-section.on-dark .t-card.is-active::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 55% at 15% 0%, rgb(255 255 255 / 10%), transparent 70%); }
.t-section.on-dark .t-card.is-active blockquote p { color: #fff; }

/* Practice logo hover: gentler glow */
.practice-mark:hover .practice-logo, .practice-mark:focus-visible .practice-logo {
  filter: drop-shadow(0 0 8px rgb(255 255 255 / 14%)) drop-shadow(0 0 22px rgb(176 124 255 / 12%)) !important; }
.drift--soft i { --o: .24; }
.drift--hero i { --o: .22; }
.drift--card i { --o: .26; }
.drift--soft i { --o: .32; }

/* =====================================================================
   V14
   ===================================================================== */
/* Drifting icons: more of them, varied sizes, quieter overall */
.drift--hero i { --o: .15 !important; }
.drift--photo i { --o: .14 !important; }
.drift--card i { --o: .18 !important; }
.drift--soft i { --o: .17 !important; }
.drift--art i { --o: .13; }
.drift--art { z-index: 0; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgb(0 0 0 / 60%) 75%, rgb(0 0 0 / 35%)); mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgb(0 0 0 / 60%) 75%, rgb(0 0 0 / 35%)); }

/* "Your surgeon" + About hero: same layered glow as the other page heroes */
.surgeon-glow, .page-hero-glow--art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.surgeon-glow i, .page-hero-glow--art i { position: absolute; border-radius: 50%; animation: aurora-a 34s ease-in-out infinite alternate; }
.surgeon-glow i:nth-child(1) { width: 640px; height: 640px; left: -160px; top: -200px; background: radial-gradient(closest-side, rgb(138 68 198 / 22%), transparent); }
.surgeon-glow i:nth-child(2) { width: 560px; height: 560px; left: 30%; bottom: -300px; background: radial-gradient(closest-side, rgb(58 141 208 / 16%), transparent); animation-name: aurora-b; }
.surgeon-glow i:nth-child(3) { width: 480px; height: 480px; right: -140px; top: 10%; background: radial-gradient(closest-side, rgb(63 185 138 / 13%), transparent); }
.drift--soft { -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, rgb(0 0 0 / 55%) 30%, #000 70%); mask-image: radial-gradient(120% 100% at 50% 50%, rgb(0 0 0 / 55%) 30%, #000 70%); }
.page-hero-glow--art i:nth-child(1) { width: 600px; height: 600px; left: -180px; bottom: -280px; background: radial-gradient(closest-side, rgb(138 68 198 / 26%), transparent); }
.page-hero-glow--art i:nth-child(2) { width: 520px; height: 520px; left: 34%; top: -260px; background: radial-gradient(closest-side, rgb(58 141 208 / 18%), transparent); animation-name: aurora-b; }
.page-hero-glow--art i:nth-child(3) { width: 460px; height: 460px; right: -120px; bottom: -200px; background: radial-gradient(closest-side, rgb(63 185 138 / 14%), transparent); }
@media (prefers-reduced-motion: reduce) { .surgeon-glow i, .page-hero-glow--art i { animation: none; } }

/* About hero name: soft pastels from the colour half of the brain */
.page-hero--art h1 { background: linear-gradient(100deg, #FFB3D1 0%, #FFC9A3 26%, #FFE9A3 48%, #C9F0A8 70%, #A8D8FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* Quote mark: slow, elegant light-up */
.quote-marks { transition: background 1.1s cubic-bezier(.22,.61,.36,1), box-shadow 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1) !important; }
.quote-marks::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgb(205 178 242 / 0%); transform: scale(.9); transition: transform 1.2s cubic-bezier(.22,.61,.36,1), border-color 1.2s ease; }
.quote-marks svg { transition: transform 1.1s cubic-bezier(.22,.61,.36,1), filter 1.1s ease; }
.quote-figure:hover .quote-marks, .quote-marks:hover {
  background: radial-gradient(closest-side, rgb(94 102 240 / 30%), rgb(37 199 154 / 12%) 70%, transparent) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 0 36px rgb(94 102 240 / 22%), 0 0 70px rgb(37 199 154 / 10%) !important; transform: none !important; }
.quote-figure:hover .quote-marks::after { transform: scale(1); border-color: rgb(205 178 242 / 22%); }
.quote-figure:hover .quote-marks svg { transform: scale(1.05); filter: drop-shadow(0 6px 18px rgb(94 102 240 / 55%)); }

/* Testimonials: the card in front is lighter, as if closer, and still warm */
.t-section.on-dark .t-card.is-active { background:
  radial-gradient(90% 70% at 0% 0%, rgb(205 170 255 / 34%), transparent 62%),
  radial-gradient(80% 70% at 100% 100%, rgb(255 190 140 / 20%), transparent 60%),
  linear-gradient(160deg, rgb(255 255 255 / 17%), rgb(255 255 255 / 8%)) !important; transform: translateY(-4px); }
.t-section.on-dark .t-card.is-active.tone-blue { background:
  radial-gradient(90% 70% at 0% 0%, rgb(150 196 255 / 34%), transparent 62%),
  radial-gradient(80% 70% at 100% 100%, rgb(255 200 140 / 18%), transparent 60%),
  linear-gradient(160deg, rgb(255 255 255 / 17%), rgb(255 255 255 / 8%)) !important; }
.t-section.on-dark .t-card.is-active.tone-green { background:
  radial-gradient(90% 70% at 0% 0%, rgb(142 230 194 / 32%), transparent 62%),
  radial-gradient(80% 70% at 100% 100%, rgb(255 200 150 / 18%), transparent 60%),
  linear-gradient(160deg, rgb(255 255 255 / 17%), rgb(255 255 255 / 8%)) !important; }

/* Page-hero emblem hover: subtler */
@media (min-width: 900px) {
  .page-hero-emblem:hover .emblem-aura { opacity: .62 !important; animation-duration: 6s, 26s !important; }
  .page-hero-emblem:hover .emblem-aura--2 { opacity: .55 !important; animation-duration: 6s !important; }
  .page-hero-emblem:hover .emblem-logo { filter: drop-shadow(0 6px 18px rgb(12 8 16 / 50%)) drop-shadow(0 0 8px rgb(255 255 255 / 10%)) !important; }
}
/* Home hero: image sits a little lower, so the raised hand starts just beneath "Johannesburg" */
@media (min-width: 1024px) { .hero-media picture { transform: translateY(30px); } }
/* Testimonials: front card bright, vibrant and fresh (mint, sky, coral warmth) */
.t-section.on-dark .t-card.is-active, .t-section.on-dark .t-card.is-active.tone-blue, .t-section.on-dark .t-card.is-active.tone-green {
  background:
    radial-gradient(85% 70% at 0% 0%, rgb(126 236 196 / 38%), transparent 60%),
    radial-gradient(75% 65% at 100% 0%, rgb(140 190 255 / 30%), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgb(255 160 150 / 30%), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgb(200 150 255 / 26%), transparent 60%),
    linear-gradient(160deg, rgb(255 255 255 / 16%), rgb(255 255 255 / 8%)) !important;
  border-color: rgb(190 240 220 / 50%) !important;
  box-shadow: 0 40px 70px -36px rgb(0 0 0 / 70%), 0 0 0 1px rgb(190 240 220 / 28%), 0 26px 60px -28px rgb(126 236 196 / 45%), 0 18px 50px -30px rgb(255 160 150 / 40%) !important; }
.t-section.on-dark .t-card.is-active .t-mark { background: linear-gradient(135deg, #FF9EB5, #B48CFF 45%, #5FD9B0) !important; box-shadow: 0 10px 24px -10px rgb(255 158 181 / 60%); }
.t-section.on-dark .t-card.is-active .t-avatar { box-shadow: 0 0 0 3px rgb(255 255 255 / 18%); }
.t-section.on-dark .t-card.is-active .t-who span { color: #E6DDF2; }
.t-section.on-dark .t-card.is-active, .t-section.on-dark .t-card.is-active.tone-blue, .t-section.on-dark .t-card.is-active.tone-green {
  background:
    radial-gradient(70% 60% at 0% 0%, rgb(96 230 180 / 48%), transparent 65%),
    radial-gradient(60% 55% at 100% 0%, rgb(110 175 255 / 40%), transparent 65%),
    radial-gradient(70% 65% at 100% 100%, rgb(255 140 160 / 42%), transparent 65%),
    radial-gradient(60% 55% at 0% 100%, rgb(255 196 110 / 30%), transparent 65%),
    linear-gradient(160deg, #3A2E55 0%, #2E2A4C 100%) !important; }

/* =====================================================================
   MOBILE-FIRST PASS (phones and small tablets)
   ===================================================================== */
/* Next-step option cards: sentence-case kicker, roomier layout everywhere */
.cta-kicker { text-transform: none !important; letter-spacing: .01em !important; font-size: .8125rem !important; color: #B9E9D4 !important; font-weight: 600 !important; }
.cta-option .cta-text { min-width: 0; }
@media (max-width: 599px) {
  .cta-option { grid-template-columns: 44px 1fr !important; grid-template-areas: "icon go" "text text"; row-gap: 14px !important; padding: 20px !important; }
  .cta-option .cta-icon { grid-area: icon; }
  .cta-option .cta-go { grid-area: go; justify-self: end; }
  .cta-option .cta-text { grid-area: text; }
}

/* Practice card: never crops the logo or role on small screens */
@media (max-width: 767px) {
  .practice-mark { aspect-ratio: auto !important; min-height: 0; padding: 36px 20px 32px !important; }
  .practice-logo-wrap { width: min(170px, 48vw) !important; }
  .practice-name { position: static !important; transform: none !important; opacity: 1 !important; white-space: normal !important; margin-top: 4px; }
  .practice-stack { transform: none !important; }
}

/* Location photo: fits the card; tappable "Open in Google Maps" cue on phones */
.loc-open-mobile { display: none; }
@media (max-width: 1023px) {
  .loc-shell { overflow: hidden; }
  .loc-photo { margin: 12px 12px 0 !important; width: auto !important; max-width: calc(100% - 24px); min-height: 220px; }
  .loc-open-mobile { display: inline-flex; position: absolute; z-index: 3; right: 12px; top: 12px; align-items: center; gap: 8px;
    padding: 6px 6px 6px 12px; border-radius: 12px; background: rgb(255 255 255 / 94%); color: #2A1747;
    font-family: var(--font-display); font-weight: 700; font-size: .8125rem; box-shadow: 0 10px 22px -12px rgb(0 0 0 / 60%); }
  .loc-open-mobile .btn-icon { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #4F8DFF, #2E5FC0); }
  .loc-open-mobile .btn-icon svg { width: 13px; height: 13px; }
  .loc-photo-tag { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 8px 12px 8px 8px; }
}

/* Page headers without a photo: compact breathing emblem on phones */
@media (max-width: 899px) {
  .page-hero--emblem .page-hero-emblem { display: grid; place-items: center; position: absolute; z-index: 1; pointer-events: none;
    right: -28px; top: 18px; width: 150px; aspect-ratio: 1; opacity: .9; }
  .page-hero--emblem .emblem-aura { position: absolute; inset: 8%; border-radius: 50%; z-index: -1;
    background: conic-gradient(from 0deg, #8A44C6, #3A6FE0, #3FB98A, #6FA8F2, #8A44C6); filter: blur(22px); opacity: .5;
    animation: aura-breathe 7s cubic-bezier(.45,0,.55,1) infinite; }
  .page-hero--emblem .emblem-aura--2, .page-hero--emblem .emblem-ripple, .page-hero--emblem .emblem-ring { display: none; }
  .page-hero--emblem .emblem-logo-wrap { width: 46%; position: relative; }
  .page-hero--emblem .emblem-logo { width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgb(12 8 16 / 60%)); }
  .page-hero--emblem .page-hero-copy { position: relative; z-index: 2; }
  .page-hero--emblem .page-hero-copy h1, .page-hero--emblem .crumbs { max-width: calc(100% - 96px); }
}

/* Fewer drifting icons on phones: calmer and lighter on the battery */
@media (max-width: 767px) {
  .drift i:nth-child(3n), .drift i:nth-child(3n+1) { display: none; }
  .drift i { animation-duration: calc(var(--dur) * 1.2) !important; }
}

/* Touch feedback: cards and buttons respond to a tap */
@media (hover: none) {
  .svc-card, .info-card, .article-card, .cta-option, .t-card, .faq-item, .doctor-areas li, .spec-list li, .btn, .loc-photo, .quick-card, a.card {
    -webkit-tap-highlight-color: transparent; transition: transform .2s ease, box-shadow .2s ease !important; }
  .svc-card:active, .info-card:active, .article-card:active, .cta-option:active, .doctor-areas li:active, .spec-list li:active, .loc-photo:active, .quick-card:active, a.card:active { transform: scale(.985); }
  .btn:active { transform: scale(.97); }
  .site-header .brand:active .brand-logo::after { opacity: 0 !important; }
  .site-header .brand:active .brand-word > span::after { opacity: 1; }
}

/* Quote: words rise in gently when the quote scrolls into view (touch-friendly playfulness) */
@media (prefers-reduced-motion: no-preference) and (hover: none) {
  .quote-figure.reveal .qw { opacity: 0; transform: translateY(14px); }
  .quote-figure.reveal.is-visible .qw { opacity: 1; transform: none;
    transition: opacity .7s ease calc(var(--i) * 55ms), transform .9s cubic-bezier(.34,1.4,.64,1) calc(var(--i) * 55ms); }
}

/* Spacing and type rhythm on phones */
@media (max-width: 599px) {
  .section { padding-block: 64px !important; }
  .quote-band { padding-block: 72px !important; }
  .quote-figure blockquote p { font-size: clamp(1.75rem, 7.4vw, 2.25rem) !important; }
  .t-section.on-dark { padding-top: 64px !important; }
  .t-track { grid-auto-columns: 84% !important; gap: 14px !important; }
  .t-card { min-height: 0 !important; padding: 24px 22px 20px !important; }
  .t-controls { margin-top: 20px; }
  .svc-card { padding: 24px !important; }
  .svc-card .feature-kicker { padding-right: 72px; }
  .hero .eyebrow { font-size: .9375rem !important; }
  .page-hero h1 { font-size: clamp(2.125rem, 9vw, 2.75rem) !important; }
  .faq-a { padding-left: 18px !important; }
  .about-body .about-portrait { width: 200px !important; }
}
@media (max-width: 899px) { .page-hero--emblem .page-hero-emblem { right: 4px !important; top: 22px !important; width: 128px !important; } }
@media (min-width: 600px) and (max-width: 899px) { .page-hero--emblem .page-hero-emblem { right: 24px !important; top: 40px !important; width: 180px !important; } }

/* ---------- Tablet (600–1023px): use the width ---------- */
@media (min-width: 700px) and (max-width: 899px) {
  .svc-grid2 { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .svc-grid2 .spec-row { grid-column: 1 / -1; }
  .svc-card { padding: 26px 22px !important; }
  .svc-card .feature-title { font-size: 1.875rem !important; }
  .svc-card-mark { width: 64px !important; height: 64px !important; border-radius: 18px !important; }
  .svc-card .feature-kicker { padding-right: 72px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .loc-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: stretch; }
  .loc-photo { order: 0 !important; margin: 12px 12px 12px 0 !important; max-width: none !important; aspect-ratio: auto !important; min-height: 100% !important; }
  .loc-shell-body { padding: 28px 24px !important; }
  .foot-top { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px !important; align-items: start; }
  .footer-grid { grid-template-columns: 1fr 1fr 1.4fr !important; }
  .faq-help { max-width: none; }
  .t-track { grid-auto-columns: min(60%, 420px) !important; }
  .about-art .doctor { gap: 28px !important; }
  .about-art-figure { max-width: 620px; margin-inline: auto !important; }
}
/* Touch devices of any size: the practice card shows the name without hover */
@media (hover: none) {
  .practice-mark .practice-name { position: static !important; transform: none !important; opacity: 1 !important; white-space: normal !important; }
  .practice-mark .practice-stack { transform: none !important; }
  .practice-mark { aspect-ratio: auto !important; padding: 40px 24px !important; }
}

/* =====================================================================
   V15
   ===================================================================== */
/* Journey dots: gradient covers the border too, so the fill is seamless */
.tl-dot { background-origin: border-box !important; background-clip: border-box !important; }
.tl-step.is-done .tl-dot { border-color: transparent !important; }

/* Quote mark: soft radial bloom on hover */
.quote-marks { overflow: visible; isolation: isolate; }
.quote-marks::before { content: ""; position: absolute; inset: -34px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(154 107 255 / 34%), rgb(63 127 230 / 18%) 45%, rgb(47 199 154 / 10%) 70%, transparent 100%);
  opacity: 0; transform: scale(.6); transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.4s cubic-bezier(.22,.61,.36,1); }
.quote-figure:hover .quote-marks::before, .quote-marks:hover::before { opacity: 1; transform: scale(1); }

/* Testimonials: focus treatment fades in on its own layer (smooth hand-over) */
.t-card { isolation: isolate; }
.t-fill { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background:
    radial-gradient(70% 60% at 0% 0%, rgb(96 230 180 / 48%), transparent 65%),
    radial-gradient(60% 55% at 100% 0%, rgb(110 175 255 / 40%), transparent 65%),
    radial-gradient(70% 65% at 100% 100%, rgb(255 140 160 / 42%), transparent 65%),
    radial-gradient(60% 55% at 0% 100%, rgb(255 196 110 / 30%), transparent 65%),
    linear-gradient(160deg, #3A2E55 0%, #2E2A4C 100%);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1); }
.t-card.is-active .t-fill { opacity: 1; }
.t-section.on-dark .t-card.is-active, .t-section.on-dark .t-card.is-active.tone-blue, .t-section.on-dark .t-card.is-active.tone-green {
  background: linear-gradient(160deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 3%)) !important; }
.t-section.on-dark .t-card { transition: transform .9s cubic-bezier(.22,.61,.36,1), box-shadow .9s cubic-bezier(.22,.61,.36,1), filter .9s ease, border-color .9s ease !important; }
.t-section.on-dark .t-card .t-mark { transition: background .9s ease, box-shadow .9s ease; }
.t-section.on-dark .t-card blockquote p { transition: color .9s ease; }

/* Practice card: rounder */
.practice-mark { border-radius: 36px !important; }

/* Page-hero breadcrumbs: sit higher, closer to the header */
.page-hero .crumbs { margin-top: -28px; margin-bottom: 36px; }
@media (max-width: 599px) { .page-hero .crumbs { margin-top: -16px; margin-bottom: 24px; } }

/* Home hero label: softer again */
.hero .eyebrow { color: #8F86A2 !important; -webkit-text-fill-color: #8F86A2; font-weight: 500 !important; }
.hero .eyebrow::before { opacity: .35; }
/* Testimonials: focus card a touch warmer */
.t-fill { background:
    radial-gradient(70% 60% at 0% 0%, rgb(110 226 176 / 42%), transparent 65%),
    radial-gradient(60% 55% at 100% 0%, rgb(130 170 255 / 34%), transparent 65%),
    radial-gradient(75% 68% at 100% 100%, rgb(255 140 150 / 48%), transparent 66%),
    radial-gradient(65% 58% at 0% 100%, rgb(255 190 105 / 38%), transparent 66%),
    linear-gradient(160deg, #3E2E52 0%, #33294A 100%) !important; }
/* Testimonials: focus card a little deeper, still warm */
.t-fill { background:
    radial-gradient(70% 60% at 0% 0%, rgb(110 226 176 / 32%), transparent 65%),
    radial-gradient(60% 55% at 100% 0%, rgb(130 170 255 / 26%), transparent 65%),
    radial-gradient(75% 68% at 100% 100%, rgb(255 140 150 / 38%), transparent 66%),
    radial-gradient(65% 58% at 0% 100%, rgb(255 190 105 / 28%), transparent 66%),
    linear-gradient(160deg, #2F2340 0%, #271F3A 100%) !important; }
/* Viewport: focus card on the left, next card fading out on the right */
@media (min-width: 1024px) {
  .t-section.on-dark .t-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 98%) !important; mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 98%) !important; }
}
.t-viewport { overflow: hidden; }
/* Practice card: rounder */
.practice-mark { border-radius: 44px !important; }
/* Breadcrumbs: higher and quieter */
.page-hero .crumbs { margin-top: -44px !important; margin-bottom: 44px !important; }
.page-hero .crumbs a { color: #685E78 !important; }
.page-hero .crumbs [aria-current] { color: #847A96 !important; }
.page-hero .crumbs li + li::before { border-color: #4E465C !important; }
@media (max-width: 599px) { .page-hero .crumbs { margin-top: -24px !important; margin-bottom: 28px !important; } }
.t-track::after { content: ""; width: var(--t-tail, 0px); height: 1px; }
/* About hero name: same pastels, brighter and crisper for contrast */
.page-hero--art h1 { background: linear-gradient(100deg, #FF9EC6 0%, #FFB98A 26%, #FFE27A 48%, #B9F08C 70%, #8CCBFF 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; filter: drop-shadow(0 2px 10px rgb(10 6 14 / 55%)); }
/* Header: slightly taller, with a touch larger logo and menu */
:root { --header-h: 68px; }
@media (min-width: 768px) { :root { --header-h: 80px; } }
@media (min-width: 768px) { .site-header .brand-mark { height: 46px !important; } .site-header .brand-word { font-size: 1.1875rem !important; } }
@media (min-width: 1100px) { .site-header .site-nav li a { min-height: 42px !important; font-size: 1rem; } .header-cta { min-height: 46px !important; } }
/* Header logo grows a touch with the taller header */
.site-header .brand-mark { height: 40px !important; width: auto !important; }
@media (min-width: 768px) { .site-header .brand-mark { height: 48px !important; } .site-header .brand { gap: 12px; } }

/* Page-hero breadcrumbs: pinned a fixed, small distance under the header on every page,
   smaller and quieter, so the hero copy below keeps its own balanced spacing */
.page-hero { position: relative; }
.page-hero .page-hero-inner { position: static !important; }
.page-hero .page-hero-copy { position: relative; z-index: 3; }
.page-hero .crumbs { position: absolute; z-index: 3; margin: 0 !important;
  top: 22px; left: calc(max(0px, (100% - var(--maxw)) / 2) + var(--gutter)); }
.page-hero .crumbs ol { gap: 2px 8px !important; margin: 0 !important; }
.page-hero .crumbs a, .page-hero .crumbs [aria-current] { font-size: .8125rem !important; font-weight: 500 !important; min-height: 24px !important; letter-spacing: .01em; }
.page-hero .crumbs a { color: rgb(255 255 255 / 34%) !important; }
.page-hero .crumbs [aria-current] { color: rgb(255 255 255 / 50%) !important; }
.page-hero .crumbs a:hover { color: #B9E9D4 !important; }
.page-hero .crumbs li + li::before { width: 5px !important; height: 5px !important; border-color: rgb(255 255 255 / 22%) !important; margin-right: 2px !important; }
/* the copy keeps a clean top space now the crumbs sit above it */
.page-hero .page-hero-inner { padding-top: 64px !important; }
@media (min-width: 900px) { .page-hero .page-hero-inner { padding-top: 88px !important; } }
@media (max-width: 599px) { .page-hero .crumbs { top: 16px; } .page-hero .page-hero-inner { padding-top: 52px !important; } }
@media (min-width: 900px) { .page-hero .page-hero-inner { padding-top: 76px !important; } }

/* =====================================================================
   Touch: hover treatments triggered by scroll (element in the middle band)
   ===================================================================== */
@media (hover: none) {
  .touch-hover .svc-card, .touch-hover .info-card, .touch-hover .article-card, .touch-hover .cta-option,
  .touch-hover .spec-list li, .touch-hover .principles li, .touch-hover .doctor-areas li, .touch-hover .checklist li, .touch-hover .shell--card {
    transition: transform .7s cubic-bezier(.22,.61,.36,1), box-shadow .7s ease, border-color .7s ease, background .7s ease !important; }
  .touch-hover .svc-card.is-inview { transform: translateY(-6px); }
  .touch-hover .svc-card.is-inview::after { opacity: 1; }
  .touch-hover .svc-card.is-inview .svc-card-mark { transform: translateY(-4px); }
  .touch-hover .svc-card--dark.is-inview { box-shadow: 0 50px 80px -40px rgb(60 30 100 / 80%); }
  .touch-hover .svc-card--light.is-inview { box-shadow: 0 40px 70px -40px rgb(46 95 192 / 40%); }
  .touch-hover .svc-card--dark.is-inview .feature-title { color: #E6D5FA; }
  .touch-hover .svc-card--light.is-inview .feature-title { color: #2E5FC0; }
  .touch-hover .svc-card--photo.is-inview .svc-card-media img { transform: scale(1.04); }
  .touch-hover .prose .info-card.is-inview, .touch-hover .article-card.is-inview { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgb(60 40 110 / 45%); border-color: #E2D6F3; }
  .touch-hover .prose .info-card.is-inview::before, .touch-hover .article-card.is-inview::before { opacity: 1; }
  .touch-hover .prose .info-card.is-inview strong, .touch-hover .article-card.is-inview h3 { color: #6B2FA0; }
  .touch-hover .principles li.is-inview { transform: translateY(-4px); }
  .touch-hover .principles li.is-inview::after { opacity: 1; }
  .touch-hover .principles li.is-inview h3 { color: #6B2FA0; }
  .touch-hover .doctor-areas li.is-inview { transform: translateX(4px); background: rgb(255 255 255 / 7%); border-color: rgb(205 178 242 / 28%); }
  .touch-hover .spec-list li.is-inview, .touch-hover .checklist li.is-inview { transform: translateY(-3px); }
  .touch-hover .cta-option.is-inview { transform: translateY(-3px); border-color: rgb(205 178 242 / 30%); }
  /* practice logo: colour to white, as on hover */
  .touch-hover .practice-mark .practice-logo-wrap::after { transition: opacity .9s cubic-bezier(.4,0,.2,1) !important; }
  .touch-hover .practice-mark.is-inview .practice-logo-wrap::after { opacity: 0 !important; }
  .touch-hover .practice-mark.is-inview .practice-logo { filter: drop-shadow(0 0 8px rgb(255 255 255 / 14%)) drop-shadow(0 0 22px rgb(176 124 255 / 12%)) !important; }
  .touch-hover .practice-mark.is-inview .practice-orbit { opacity: 1; transform: scale(1.15); }
  /* quote mark bloom */
  .touch-hover .quote-figure.is-inview .quote-marks::before { opacity: 1; transform: scale(1); }
  .touch-hover .quote-figure.is-inview .quote-marks::after { transform: scale(1); border-color: rgb(205 178 242 / 22%); }
  .touch-hover .quote-figure.is-inview .quote-marks { background: radial-gradient(closest-side, rgb(94 102 240 / 30%), rgb(37 199 154 / 12%) 70%, transparent) !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 0 36px rgb(94 102 240 / 22%), 0 0 70px rgb(37 199 154 / 10%) !important; }
  .touch-hover .quote-figure.is-inview .quote-marks svg { transform: scale(1.05); }
  /* hospital photo + map card */
  .touch-hover .loc-shell.is-inview .loc-photo img { transform: scale(1.07); filter: saturate(1.08) brightness(1.02); }
  .touch-hover .loc-shell.is-inview .loc-photo-tag { transform: translateY(-4px); }
  .touch-hover .loc-shell.is-inview .loc-open-mobile { transform: translateY(-3px); box-shadow: 0 14px 26px -12px rgb(64 140 255 / 60%); }
  .touch-hover .loc-open-mobile { transition: transform .7s ease, box-shadow .7s ease; }
  /* brain artwork: slight zoom */
  .touch-hover .about-art-figure.is-inview img { transform: scale(1.03) !important; }
  /* page-hero emblem: brighter breathing */
  .touch-hover .page-hero-emblem.is-inview .emblem-aura { opacity: .7 !important; }
  .touch-hover .page-hero-emblem.is-inview .emblem-logo-wrap::after { opacity: 0 !important; transition: opacity .9s ease; }
}

/* =====================================================================
   Mobile page heroes: spacing, crumbs, images, copy
   ===================================================================== */
@media (max-width: 899px) {
  .page-hero .crumbs { top: 14px !important; left: var(--gutter) !important; }
  /* heroes with an image: crumbs, then image, then copy, each with its own breathing room */
  .page-hero--media:not(.page-hero--emblem) { display: flex; flex-direction: column; padding-top: 44px !important; }
  .page-hero--media:not(.page-hero--emblem) .page-hero-media { margin: 0 var(--gutter); border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; }
  .page-hero--art .page-hero-media { border-radius: 0; overflow: visible; aspect-ratio: auto !important; margin: 0 calc(var(--gutter) * .25) !important; padding: 0 !important; min-height: 0 !important; }
  .page-hero--art .page-hero-media img { width: 100% !important; height: auto !important; max-height: none !important; }
  .page-hero--media:not(.page-hero--emblem) .page-hero-inner { padding-top: 24px !important; padding-bottom: 48px !important; }
  .page-hero--light-photo .page-hero-media img { -webkit-mask-image: none !important; mask-image: none !important; }
  .page-hero--light-photo .page-hero-media::after { background: linear-gradient(120deg, rgb(122 60 200 / 18%), transparent 50%, rgb(46 95 192 / 12%)) !important; }
  .page-hero--media:not(.page-hero--art):not(.page-hero--emblem) .page-hero-media img { -webkit-mask-image: none !important; mask-image: none !important; }
  /* emblem heroes */
  .page-hero--emblem .page-hero-inner { padding-top: 64px !important; padding-bottom: 52px !important; }
  .page-hero--emblem .page-hero-emblem { top: 44px !important; }
  /* copy rhythm */
  .page-hero .eyebrow { margin-bottom: 12px !important; }
  .page-hero .lede { margin-top: 14px !important; font-size: 1.0625rem !important; line-height: 1.6 !important; }
  .page-hero--art .blot--hero-a, .page-hero--art .blot--hero-b { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .page-hero--media:not(.page-hero--emblem) .page-hero-media { aspect-ratio: 16 / 8; }
  .page-hero--emblem .page-hero-inner { padding-top: 80px !important; padding-bottom: 64px !important; }
}

/* Conditions and services: richer marks in a gradient-lit tile */
.svc-card-mark { width: clamp(84px, 8.5vw, 112px) !important; height: clamp(84px, 8.5vw, 112px) !important; border-radius: 26px !important; }
.svc-card-mark svg { width: 66% !important; height: 66% !important; stroke-width: 1.7; }
.svc-card--dark .svc-card-mark { color: #E2D0FF !important;
  background: radial-gradient(80% 80% at 30% 20%, rgb(176 124 255 / 30%), rgb(255 255 255 / 4%) 70%) !important; border: 1px solid rgb(205 178 242 / 26%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 18px 34px -20px rgb(138 68 198 / 70%); }
.svc-card--light .svc-card-mark { color: #2E6FD0 !important;
  background: radial-gradient(80% 80% at 30% 20%, rgb(255 255 255 / 95%), rgb(169 205 242 / 30%) 75%) !important; border: 1px solid rgb(58 141 208 / 24%) !important;
  box-shadow: inset 0 1px 0 #fff, 0 18px 34px -22px rgb(46 95 192 / 55%); }
.svc-card .feature-kicker { padding-right: calc(clamp(84px, 8.5vw, 112px) + 12px) !important; }
@media (max-width: 599px) { .svc-card-mark { width: 68px !important; height: 68px !important; border-radius: 20px !important; } .svc-card .feature-kicker { padding-right: 80px !important; } }

/* =====================================================================
   TABLET (600–1199px): single, centred reading column; use the width well
   ===================================================================== */
@media (min-width: 600px) and (max-width: 1199px) {
  .two-col, .two-col--wide-left { grid-template-columns: 1fr !important; gap: 44px !important; }
  .two-col > * { min-width: 0; }
  .sticky-col { position: static !important; }
  /* About: glance card becomes a wide summary strip above the biography */
  .glance { display: grid !important; gap: 18px; }
  .glance .glance-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .glance .glance-list > div { border-top: 0 !important; padding-top: 0 !important; }
  .glance .btn { justify-self: start; width: auto !important; margin-top: 4px !important; }
  .about-body { max-width: 760px; }
  .about-body .info-cards--2 { grid-template-columns: 1fr 1fr !important; }
  .about-body .info-cards--3 { grid-template-columns: repeat(3, 1fr) !important; }
  /* Contact / referrers / patient info: intro and steps above, full-width form below */
  .form-panel, .enquiry-form, form.form { max-width: none; }
  .page-hero--emblem .page-hero-copy { max-width: calc(100% - 260px) !important; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .page-hero--emblem .page-hero-emblem { width: 240px !important; right: calc(var(--gutter) + 8px) !important; }
  .hero-media { width: 60% !important; }
  .hero .hero-copy { max-width: 30rem !important; position: relative; z-index: 3; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, rgb(26 20 32 / 85%) 0%, rgb(26 20 32 / 55%) 38%, transparent 60%); }
  .about-art .doctor { grid-template-columns: 1fr 1fr !important; gap: 36px !important; align-items: center; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .glance .glance-list { grid-template-columns: 1fr 1fr; gap: 14px 24px; }
}
/* Header: full navigation fits cleanly from 1100px */
@media (min-width: 1100px) and (max-width: 1279px) {
  .site-header .site-nav ul { gap: 0 !important; }
  .site-header .site-nav li a { padding: 0 10px !important; font-size: .9375rem !important; white-space: nowrap; }
  .site-header .brand-word { font-size: 1.0625rem !important; white-space: nowrap; }
  .site-header .brand-mark { height: 42px !important; }
  .header-cta { padding: 10px 16px !important; font-size: .9375rem !important; white-space: nowrap; }
  .header-inner { gap: 12px !important; }
}
/* Touch tablets: practice card sized to its content */
@media (hover: none) and (min-width: 600px) {
  .practice-mark { aspect-ratio: auto !important; min-height: 340px; padding: 44px 32px !important; align-content: center; }
}
@media (min-width: 900px) and (max-width: 1199px) { .about-body { max-width: none; } .about-body .about-portrait { width: 240px !important; } }
/* Header never wraps: links, brand word and button stay on one line at every desktop width */
@media (min-width: 1100px) {
  .site-header .site-nav li a, .site-header .brand-word, .header-cta { white-space: nowrap !important; }
  .site-header .site-nav { flex: 1 1 auto; justify-content: center; min-width: 0; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .site-header .site-nav ul { gap: 2px !important; }
  .site-header .site-nav li a { padding: 0 12px !important; font-size: .96875rem !important; }
  .header-cta { padding: 11px 18px !important; }
}
/* 600–699px: three-up info cards too tight, use two */
@media (min-width: 600px) and (max-width: 699px) { .about-body .info-cards--3 { grid-template-columns: 1fr 1fr !important; } }
.page-hero { overflow: clip; }
.drift { overflow: hidden !important; contain: paint; }

/* =====================================================================
   Practice card: the spine logo rises like a sun over a warm-pink brain landscape
   ===================================================================== */
.practice-mark { display: block !important; position: relative; overflow: hidden !important; aspect-ratio: 3 / 2 !important; min-height: 320px; padding: 0 !important;
  background:
    radial-gradient(60% 55% at 50% 52%, rgb(255 150 170 / 22%), transparent 70%),
    radial-gradient(90% 70% at 50% 0%, #2E2048 0%, #1E1628 55%, #170F1D 100%) !important; }
.practice-mark .practice-orbit { z-index: 1 !important; inset: auto !important; left: 50% !important; top: 47% !important; width: 62% !important; translate: -50% -50% !important;
  background: radial-gradient(closest-side, rgb(255 200 210 / 40%), rgb(255 120 170 / 22%) 45%, rgb(138 75 224 / 12%) 70%, transparent) !important; opacity: .9 !important; filter: blur(14px); }
.practice-mark .pm-sun { position: absolute !important; z-index: 2; left: 50%; top: 47%; transform: translate(-50%, -38%) !important;
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1) !important; }
.practice-mark .practice-logo-wrap { width: clamp(150px, 34%, 230px) !important; display: block; }
.pm-horizon { position: absolute; z-index: 3; left: -14%; right: -14%; bottom: -2%; display: block; pointer-events: none;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1); }
.pm-horizon img { display: block; width: 100%; height: auto; filter: drop-shadow(0 -10px 30px rgb(255 120 170 / 25%)); }
.practice-mark .drift { z-index: 1; }
/* caption over the foreground, readable on the pink */
.practice-mark .pm-caption { position: absolute !important; z-index: 4; left: 0; right: 0; bottom: 22px; top: auto !important; margin: 0;
  transform: translateY(10px) !important; opacity: 0 !important; transition: opacity .8s ease, transform .9s cubic-bezier(.22,.61,.36,1) !important; white-space: normal !important; }
.practice-mark .pm-caption .pn-name, .practice-mark .pm-caption .pn-role { text-shadow: 0 2px 16px rgb(30 8 30 / 85%); }
.practice-mark .pm-caption .pn-name { -webkit-text-fill-color: #fff; background: none; color: #fff; }
.practice-mark::after { content: ""; position: absolute; z-index: 3; inset: auto 0 0 0; height: 46%; pointer-events: none;
  background: linear-gradient(to top, rgb(23 15 29 / 78%), transparent); opacity: 0; transition: opacity .8s ease; }
/* hover / in view: the sun rises, the name appears */
.practice-mark:hover .pm-sun, .practice-mark:focus-visible .pm-sun, .touch-hover .practice-mark.is-inview .pm-sun { transform: translate(-50%, -62%) !important; }
.practice-mark:hover .pm-horizon, .practice-mark:focus-visible .pm-horizon, .touch-hover .practice-mark.is-inview .pm-horizon { transform: translateY(3%); }
.practice-mark:hover .pm-caption, .practice-mark:focus-visible .pm-caption, .touch-hover .practice-mark.is-inview .pm-caption { opacity: 1 !important; transform: none !important; }
.practice-mark:hover::after, .practice-mark:focus-visible::after, .touch-hover .practice-mark.is-inview::after { opacity: 1; }
.practice-mark:hover .practice-orbit, .touch-hover .practice-mark.is-inview .practice-orbit { opacity: 1 !important; transform: scale(1.12) !important; }
@media (max-width: 767px) { .practice-mark { aspect-ratio: 4 / 3.4 !important; } .practice-mark .practice-logo-wrap { width: min(150px, 40vw) !important; } .practice-mark .pm-caption { bottom: 16px; } .pm-horizon { left: -30%; right: -30%; } }
@media (hover: none) { .practice-mark .pm-caption { opacity: 1 !important; transform: none !important; } .practice-mark::after { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .practice-mark .pm-sun, .pm-horizon { transition: none !important; } }
/* Brain sits low as a mountain range: only its crest rises into the card */
.pm-horizon { top: 60% !important; bottom: auto !important; left: -22% !important; right: -22% !important; }
.practice-mark:hover .pm-horizon, .practice-mark:focus-visible .pm-horizon, .touch-hover .practice-mark.is-inview .pm-horizon { transform: translateY(4%) !important; }
.practice-mark .pm-sun { top: 44% !important; }
.practice-mark .practice-orbit { top: 50% !important; }
.practice-mark .pm-caption { bottom: 18px !important; }
@media (max-width: 767px) { .pm-horizon { top: 62% !important; left: -40% !important; right: -40% !important; } }
.about-art, .quote-band, .t-section, .hero { overflow-x: clip; }
@media (max-width: 479px) { .blot--role { left: auto !important; right: -6px; top: -14px; margin-top: 0; width: 22px !important; } .role-wrap { padding-right: 14px; } }
.practice-mark { min-height: 0 !important; width: 100%; max-width: 100%; }
@media (max-width: 767px) { .practice-mark { aspect-ratio: 1 / 1 !important; } }
/* Minimal marks: lighter tiles and a calm, even line */
.svc-card-mark svg { width: 54% !important; height: 54% !important; stroke-width: 1.9 !important; }
/* Practice card caption: always readable over the pink landscape */
.practice-mark::after { height: 58% !important; background: linear-gradient(to top, rgb(18 10 22 / 92%) 0%, rgb(18 10 22 / 70%) 45%, transparent 100%) !important; }
.practice-mark .pm-caption .pn-name { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem) !important; text-shadow: 0 2px 12px rgb(10 4 12 / 95%), 0 0 2px rgb(10 4 12 / 90%) !important; }
.practice-mark .pm-caption .pn-role { color: #F4ECF8 !important; text-shadow: 0 1px 10px rgb(10 4 12 / 95%), 0 0 2px rgb(10 4 12 / 90%) !important; }
.svc-card-mark svg { width: 58% !important; height: 58% !important; }

/* =====================================================================
   V16: practice card landscape, hospital overlay, card media gap, About spacing, mobile hero
   ===================================================================== */
/* --- Practice card: the logo is the sun, two brain ranges are the hills. No dark fade, the caption sits right under the sun. --- */
.practice-mark::after { display: none !important; }
.practice-mark { aspect-ratio: 3 / 2 !important;
  background:
    radial-gradient(70% 60% at 50% 46%, rgb(255 140 170 / 26%), transparent 70%),
    linear-gradient(to bottom, #2B1D44 0%, #3A2250 46%, #52284F 70%, #3A1E43 100%) !important; }
.practice-mark .practice-orbit { top: 40% !important; width: 58% !important; transition: opacity 1s ease, transform 1.2s ease !important; }
.practice-mark .pm-sun { top: 24% !important; transform: translateX(-50%) !important; transition: top 1.3s cubic-bezier(.22,.61,.36,1) !important; z-index: 2; }
.practice-mark .practice-logo-wrap { width: clamp(130px, 30cqw, 240px) !important; }
.practice-mark { container-type: inline-size; }
.practice-mark .pm-horizon { position: absolute; display: block; left: 0; right: auto; bottom: auto; transition: transform 1.4s cubic-bezier(.22,.61,.36,1); pointer-events: none; }
.practice-mark .pm-horizon img { width: 100%; height: auto; display: block; filter: none; }
.practice-mark .pm-back { z-index: 2; top: 59% !important; left: -34% !important; right: auto !important; width: 118%; opacity: .8; transform: scaleX(-1); }
.practice-mark .pm-back img { filter: hue-rotate(-28deg) saturate(.75) brightness(.7) !important; }
.practice-mark .pm-front { z-index: 3; top: 70% !important; left: -22% !important; right: auto !important; width: 150%; }
.practice-mark .pm-front img { filter: saturate(1.05) brightness(1.02) drop-shadow(0 -8px 26px rgb(255 120 170 / 30%)) !important; }
.practice-mark .pm-caption { z-index: 4; top: 54% !important; bottom: auto !important; }
.practice-mark .pm-caption .pn-name { font-size: clamp(1.25rem, 4.4cqw, 1.75rem) !important; }
.practice-mark .pm-caption .pn-role { font-size: clamp(.8125rem, 2.5cqw, 1rem) !important; margin-top: 4px; }
.practice-mark:hover .pm-sun, .practice-mark:focus-visible .pm-sun, .touch-hover .practice-mark.is-inview .pm-sun { top: 5% !important; transform: translateX(-50%) !important; }
.practice-mark:hover .pm-front, .practice-mark:focus-visible .pm-front, .touch-hover .practice-mark.is-inview .pm-front { transform: translateY(3%) !important; }
.practice-mark:hover .pm-back, .practice-mark:focus-visible .pm-back, .touch-hover .practice-mark.is-inview .pm-back { transform: scaleX(-1) translateY(-2%) !important; }
.practice-mark:hover .practice-orbit, .touch-hover .practice-mark.is-inview .practice-orbit { transform: translateY(-20%) scale(1.1) !important; }
@media (max-width: 767px) {
  .practice-mark { aspect-ratio: 1 / 1 !important; }
  .practice-mark .practice-logo-wrap { width: clamp(120px, 42cqw, 170px) !important; }
  .practice-mark .pm-sun { top: 30% !important; }
  .practice-mark .pm-caption { top: 52% !important; bottom: auto !important; padding-inline: 14px; }
  .practice-mark .pm-caption .pn-name { font-size: clamp(1.25rem, 6.2cqw, 1.5rem) !important; }
  .practice-mark .pm-caption .pn-role { font-size: clamp(.8125rem, 3.7cqw, .9375rem) !important; }
  .practice-mark .pm-back { top: 62% !important; left: -50% !important; width: 150%; }
  .practice-mark .pm-front { top: 71% !important; left: -45% !important; width: 190%; }
  .practice-mark:hover .pm-sun, .touch-hover .practice-mark.is-inview .pm-sun { top: 6% !important; }
}
@media (hover: none) {
  .practice-mark .pm-caption { opacity: 0 !important; transform: translateY(8px) !important; }
  .practice-mark:hover .pm-caption { opacity: 0 !important; }
  .touch-hover .practice-mark.is-inview .pm-caption { opacity: 1 !important; transform: none !important; }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
  .practice-mark .pm-sun { top: 6% !important; } .practice-mark .pm-caption { opacity: 1 !important; transform: none !important; }
}

/* --- Hospital card: glassier overlays so the building shows --- */
.loc-photo::after { background: linear-gradient(to top, rgb(26 20 32 / 34%) 0%, transparent 38%), linear-gradient(120deg, rgb(122 60 200 / 8%), transparent 50%, rgb(63 185 138 / 6%)) !important; }
.loc-photo img { filter: saturate(1) brightness(1) !important; }
.loc-photo-tag { background: rgb(20 14 28 / 30%) !important; border-color: rgb(255 255 255 / 18%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(1.2); backdrop-filter: blur(5px) saturate(1.2); padding: 8px 14px 8px 8px !important; }
.loc-photo-tag strong { text-shadow: 0 1px 8px rgb(0 0 0 / 55%); }
.loc-photo-tag > span:last-child > span { color: #E6DEF0 !important; text-shadow: 0 1px 6px rgb(0 0 0 / 55%); }
.loc-map--chip { background: rgb(20 14 28 / 55%) !important; opacity: .92; }

/* --- Service card media: sits flush with the top edge (the card padding left a gap on phones) --- */
.svc-card--photo { padding-top: 0 !important; }
.svc-card--photo .svc-card-media { margin-top: 0 !important; margin-inline: calc(-1 * var(--svc-pad, 28px)) !important; border-radius: var(--r-shell, 24px) var(--r-shell, 24px) 0 0; }
.svc-card--photo { --svc-pad: clamp(28px, 3vw, 44px); }
@media (max-width: 599px) { .svc-card--photo { --svc-pad: 22px; } }
@media (min-width: 600px) and (max-width: 899px) { .svc-card--photo { --svc-pad: 24px; } }

/* --- About hero: a little more air between the breadcrumb and the artwork --- */
@media (max-width: 899px) { .page-hero--art { padding-top: 64px !important; } }
@media (min-width: 900px) { .page-hero--art .page-hero-media { margin-top: 28px; } .page-hero--art .page-hero-inner { padding-top: 28px; } }

/* --- Mobile home hero --- */
@media (max-width: 767px) {
  .hero { background:
      radial-gradient(90% 38% at 50% 92%, rgb(58 141 208 / 30%), transparent 70%),
      radial-gradient(70% 30% at 18% 98%, rgb(63 185 138 / 28%), transparent 70%),
      radial-gradient(70% 30% at 90% 70%, rgb(155 107 255 / 22%), transparent 70%),
      var(--media-bg, var(--hero-bg, #000)); }
  .hero-stage { padding-block: 44px 0; }
  .hero .eyebrow { text-wrap: balance; font-size: .875rem !important; letter-spacing: .01em; color: #A99FBD !important; -webkit-text-fill-color: #A99FBD; }
  .hero h1 { font-size: clamp(2.4rem, 11.4vw, 2.9rem); line-height: 1.02; max-width: none; }
  .hero h1 .h1-follow { margin-top: .08em; }
  .hero .lede { font-size: 1.0625rem; line-height: 1.6; margin-top: 18px; color: #D8D0E2; }
  .hero-actions { gap: 12px; margin-top: 26px; }
  .hero-actions .btn { width: 100%; justify-content: center; min-height: 56px; box-shadow: 0 18px 40px -16px rgb(124 77 255 / 65%); }
  .hero-actions .link-arrow { min-height: 52px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 18%); background: rgb(255 255 255 / 5%);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); justify-content: center; padding-inline: 20px; }
  .hero-media { margin-top: -6px; aspect-ratio: 4 / 5; max-height: none; overflow: hidden; }
  .hero-media::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 40%; width: 118%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgb(124 90 255 / 42%), rgb(58 141 208 / 22%) 48%, rgb(63 185 138 / 10%) 72%, transparent);
    animation: hero-m-pulse 6s ease-in-out infinite; }
  .hero-media picture { position: relative; z-index: 1; }
  .hero-media img { object-position: 50% 12%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
}
@keyframes hero-m-pulse { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hero-media::before { animation: none !important; } }
.practice-mark .pm-caption { display: grid !important; gap: 0 !important; top: 56% !important; }
.practice-mark .pm-caption .pn-name, .practice-mark .pm-caption .pn-role { display: block; line-height: 1.2 !important; margin: 0 !important; }
.practice-mark .pm-caption .pn-role { margin-top: 5px !important; }
@media (max-width: 767px) { .practice-mark .pm-caption { top: 54% !important; } }
@media (max-width: 899px) { .page-hero--art .page-hero-media { margin-top: 22px !important; } }

/* --- Practice card: one easing, one duration, transform/opacity only (no layout animation), so default <-> hover is seamless --- */
.practice-mark {
  --pm-ease: cubic-bezier(.45, .05, .25, 1);
  --pm-dur: 1.3s;
  --rise: 12.7cqw;
}
.practice-mark .pm-sun {
  top: 5% !important;
  transform: translate3d(-50%, var(--rise), 0) !important;
  transition: transform var(--pm-dur) var(--pm-ease) !important;
  will-change: transform;
}
.practice-mark:hover .pm-sun, .practice-mark:focus-visible .pm-sun, .touch-hover .practice-mark.is-inview .pm-sun {
  top: 5% !important; transform: translate3d(-50%, 0, 0) !important; }
.practice-mark .practice-logo-wrap, .practice-mark .practice-logo, .practice-mark .practice-logo-wrap::after {
  transition: opacity var(--pm-dur) var(--pm-ease), filter var(--pm-dur) var(--pm-ease) !important; }
.practice-mark:hover .practice-logo-wrap, .practice-mark:focus-visible .practice-logo-wrap { transform: none !important; }
.practice-mark .practice-orbit { transition: opacity var(--pm-dur) var(--pm-ease), transform var(--pm-dur) var(--pm-ease) !important; will-change: transform, opacity; }
.practice-mark .pm-horizon { transition: transform var(--pm-dur) var(--pm-ease) !important; will-change: transform; }
.practice-mark .pm-back { transform: scaleX(-1) translate3d(0, 0, 0); }
.practice-mark .pm-caption { transition: opacity 1s var(--pm-ease) .2s, transform var(--pm-dur) var(--pm-ease) .1s !important; will-change: opacity, transform; }
.practice-mark:not(:hover):not(:focus-visible) .pm-caption { transition-delay: 0s, 0s !important; transition-duration: .5s, .8s !important; }
.practice-mark { transition: transform var(--pm-dur) var(--pm-ease), box-shadow var(--pm-dur) var(--pm-ease) !important; }
@media (max-width: 767px) {
  .practice-mark { --rise: 24cqw; }
  .practice-mark .pm-sun { top: 6% !important; }
  .practice-mark:hover .pm-sun, .touch-hover .practice-mark.is-inview .pm-sun { top: 6% !important; }
}
@media (hover: none) and (prefers-reduced-motion: reduce) { .practice-mark .pm-sun { transform: translate3d(-50%, 0, 0) !important; } }