/* =====================================================================
   Solas Healthcare — Option B v2  (refined)
   Off-white · black body text · single muted teal accent · large legible type
   Self-contained: reset + tokens + components live here so v1 stays untouched.
   ===================================================================== */

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }
address { font-style: normal; }

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

:root {
  /* surfaces — one neutral, very slightly cool off-white family (no cream) */
  --bg:        #F3F3EF;          /* page off-white */
  --bg-sink:   #EAEBE5;          /* subtly recessed sections */
  --surface:   #FBFBF8;          /* raised surfaces / inputs */
  --ink-deep:  #0E1A18;          /* deliberate dark anchor (teal-ink, not black) */

  /* text — black, per client (grey reserved only for legal microcopy) */
  --ink:       #121413;
  --ink-micro: #51544F;          /* used ONLY for tiny captions / legal */

  /* single muted accent — deep teal-petrol, desaturated */
  --accent:      #15535C;
  --accent-700:  #0E3D45;
  --accent-300:  #6E949D;
  --accent-tint: #DAE4E0;        /* the highlight tint — card/row hovers, used site-wide */

  /* hairlines + shadow (shadow tinted with the accent hue, never pure black) */
  --line:    rgba(18, 20, 19, 0.12);
  --line-2:  rgba(18, 20, 19, 0.07);
  --shadow-sm: 0 2px 8px -3px rgba(14, 26, 24, 0.18);
  --shadow:    0 24px 60px -28px rgba(16, 61, 57, 0.40);
  --shadow-lg: 0 40px 90px -36px rgba(16, 61, 57, 0.46);

  /* geometry */
  --maxw: 1240px;
  --pad:  clamp(20px, 5vw, 76px);
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 28px;

  /* z-index scale */
  --z-deco: 0;
  --z-base: 1;
  --z-nav:  50;
  --z-menu: 49;
  --z-tool: 2000;

  /* type families — default to the upgraded grotesk; switcher overrides */
  --font-head: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* review-only typeface switcher */
[data-font="inter"]     { --font-head: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; }
[data-font="hanken"]    { --font-head: "Hanken Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; }
[data-font="schibsted"] { --font-head: "Schibsted Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; }

/* ---- base typography ---------------------------------------------------- */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.v2 strong { font-weight: 600; color: var(--ink); }

/* mono eyebrow / technical label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 11px; height: 10px; flex-shrink: 0;
  background: var(--accent);
  -webkit-mask: url("../assets/img/hex-marker.svg") no-repeat center / contain;
  mask: url("../assets/img/hex-marker.svg") no-repeat center / contain;
}
.eyebrow--plain::before { display: none; }

/* numbers use tabular figures everywhere */
.tnum { font-variant-numeric: tabular-nums; }

/* shared layout container */
.wrap { max-width: var(--maxw); margin-inline: auto; }
.section { padding-block: clamp(72px, 9.5vw, 132px); }
.section--tight { padding-block: clamp(54px, 6vw, 88px); }
.section-pad { padding-inline: var(--pad); }

/* utilities */
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 36ch; }
.measure { max-width: 62ch; }

/* accessibility */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 3000;
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600;
  transform: translateY(-160%); transition: transform 0.2s ease;
}
.skip-link:focus { transform: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.btn {
  --btn-bg: var(--ink); --btn-fg: var(--bg);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1),
              box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  will-change: transform;
}
.btn .btn__arrow { transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:hover .btn__arrow { transform: translate(3px, -3px); }
.btn:active { transform: translateY(0); }

.btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; }
.btn--accent:hover { --btn-bg: var(--accent-700); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); box-shadow: none; background: rgba(18,20,19,0.03); }
.btn--light { --btn-bg: var(--bg); --btn-fg: var(--ink); }
.btn--on-dark.btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,0.28); }
.btn--on-dark.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

/* quiet text link with animated arrow */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--accent); font-size: 15.5px;
  width: fit-content;
}
.arrow-link .btn__arrow { transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1); }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.arrow-link:hover .btn__arrow { transform: translate(4px, -4px); }

/* ---- nav ---------------------------------------------------------------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: flex-start; gap: 28px;
  padding-block: 16px;
  padding-inline: max(var(--pad), calc((100% - var(--maxw)) / 2));
  background: transparent;                         /* pure glass — blur only, no white tint */
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, padding 0.3s ease;
}
/* dark-mode scrim — fades in only over dark sections, keeps text legible on
   split backgrounds (e.g. the band) without disturbing the pure glass elsewhere */
.nav::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,24,22,0.58) 0%, rgba(13,24,22,0.26) 100%);
  opacity: 0; transition: opacity 0.35s ease;
}
.nav--on-dark::before { opacity: 1; }
.nav > * { position: relative; }
.nav.is-stuck { border-bottom-color: var(--line); padding-block: 11px; }

/* lowercase wordmark = caduceus mark + live text */
.brand { display: inline-flex; align-items: center; }
.brand__logo { position: relative; display: block; height: 48px; aspect-ratio: 164 / 66;
  color: var(--ink); --logo-accent: var(--accent); transition: color 0.35s ease; }
.lk { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lk-dark { fill: currentColor; }
.lk-accent { fill: var(--logo-accent); transition: fill 0.35s ease; }
/* logo is static — it fades in as part of the nav intro (see GSAP intro in v2.js) */
/* FOUC-safe: intro targets start hidden from first paint; GSAP reveals them */
.gsap-intro .nav,
.gsap-intro .hero__title h1,
.gsap-intro .hero__aside > *,
.gsap-intro .hero__stat,
.gsap-intro .hexnet { opacity: 0; }

.nav__links { display: flex; gap: 34px; margin-left: auto; }
.nav__links a { font-size: 16.5px; font-weight: 500; color: var(--ink); position: relative; padding-block: 4px; opacity: 0.8; transition: opacity 0.2s ease, color 0.35s ease; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--accent); transition: right 0.35s cubic-bezier(0.2,0.6,0.2,1);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { right: 0; }
.nav__right { display: flex; align-items: center; gap: 18px; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span { width: 24px; height: 2px; background: var(--ink); display: block; transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.35s ease; }

/* ---- nav dark mode — when the glass bar overlaps a dark section ---------- */
.nav--on-dark .brand__logo { color: #fff; --logo-accent: var(--accent-300); }
.nav--on-dark .nav__links a { color: #fff; }
.nav--on-dark .nav__links a::after { background: #fff; }
.nav--on-dark .burger span { background: #fff; }
.nav--on-dark.is-stuck { border-bottom-color: rgba(255,255,255,0.16); }
/* primary CTA flips to a light pill so it reads on dark teal / ink */
.nav--on-dark .btn--accent { --btn-bg: #fff; --btn-fg: var(--accent); }
.nav--on-dark .btn--accent:hover { --btn-bg: rgba(255,255,255,0.88); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; flex-direction: column; gap: 2px;
  padding: 8px var(--pad) 24px;
  border-bottom: 1px solid var(--line); background: var(--bg);
  position: fixed; top: 62px; left: 0; right: 0; z-index: var(--z-menu);
}
.mobile-menu a { padding: 15px 0; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--line-2); }
.mobile-menu .btn { justify-content: center; margin-top: 16px; }
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { display: flex; }

/* ---- hero --------------------------------------------------------------- */

/* split hero — copy left, interactive hex-network + profile card right */
/* hero — a contained hex circle floats in the middle; copy sits in the corners
   with room to breathe, overlapping the network at its edges (it never covers
   the whole background) */
.hero { position: relative; display: block; overflow: clip; isolation: isolate; }
.hexnet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(330px, 37vw, 500px); aspect-ratio: 1; height: auto; display: block; z-index: 0; }
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: calc(var(--maxw) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad);
  min-height: min(90vh, 820px);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto;
  gap: clamp(20px, 4vw, 52px);
  padding-block: clamp(92px, 12vh, 128px) clamp(38px, 5vw, 66px); }
.hero__title { grid-column: 1; grid-row: 1; align-self: start; }                       /* top-left */
.hero__stat  { grid-column: 1; grid-row: 3; align-self: end; justify-self: start; }    /* bottom-left */
.hero__aside { grid-column: 2; grid-row: 3; align-self: end; justify-self: end;        /* bottom-right */
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 360px; }

/* Mr Ashraf profile card (bottom-left of the hero) */
.hero__profile {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 14px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 11px 18px 11px 11px; box-shadow: var(--shadow);
  max-width: 330px;
}
.hero__profile-pic { position: relative; flex-shrink: 0; }
.hero__profile-pic img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; object-position: top center; display: block; }
.hero__profile-dot { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: #34b27b; border: 2.5px solid var(--surface); }
.hero__profile figcaption { display: flex; flex-direction: column; gap: 2px; }
.hero__profile-name { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.15; white-space: nowrap; }
.hero__profile-name span { color: var(--accent); }
.hero__profile-role { font-size: 12.5px; color: var(--ink-micro); line-height: 1.3; }
.hero__profile-go {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 7px; font-size: 13px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.hero__profile-go:hover { background: var(--accent); color: #fff; transform: translate(1px, -1px); }
.hero__profile-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero__eyebrow { margin-bottom: 24px; }
.hero h1 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -0.034em; max-width: none; }
.hero__sub { margin-top: 18px; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.55; max-width: 32ch; color: var(--ink); }
.hero__actions { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; }

/* single stat — top-right corner */
.hero__stat { margin-top: 0; display: flex; align-items: center; gap: 16px; }
.stat-figure { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.04em; line-height: 0.9; color: var(--ink); }
.hero__stat .stat-figure { font-size: clamp(40px, 4.4vw, 60px); }
.hero__stat .stat-figure span { color: var(--accent); }
.hero__stat .stat-label { font-size: 16px; line-height: 1.4; max-width: 18ch; color: var(--ink); }
.hero__stat-divider { width: 1px; align-self: stretch; min-height: 48px; background: rgba(18,20,19,0.2); }

/* animated honeycomb — kept faint and pulled into the top-left corner so it
   never competes with the headline/body copy for legibility */
/* subtle honeycomb pattern fading in from the top-right & bottom-left corners */
.gridfield.hero__grid-deco--tr { left: auto; right: 0; top: 0; bottom: auto; width: min(50%, 640px); height: min(80%, 600px);
  --grid-opacity: 0.5; opacity: 0.5;
  -webkit-mask: radial-gradient(96% 100% at 100% 0%, #000 6%, rgba(0,0,0,0.5) 34%, transparent 66%);
  mask: radial-gradient(96% 100% at 100% 0%, #000 6%, rgba(0,0,0,0.5) 34%, transparent 66%); }
.gridfield.hero__grid-deco--bl { left: 0; right: auto; top: auto; bottom: 0; width: min(48%, 600px); height: min(78%, 580px);
  --grid-opacity: 0.44; opacity: 0.44;
  -webkit-mask: radial-gradient(94% 98% at 0% 100%, #000 6%, rgba(0,0,0,0.48) 32%, transparent 64%);
  mask: radial-gradient(94% 98% at 0% 100%, #000 6%, rgba(0,0,0,0.48) 32%, transparent 64%); }

/* scroll cue */
.hero__scroll { position: absolute; left: var(--pad); bottom: 24px; z-index: 3; display: flex; align-items: center; gap: 12px; color: var(--ink); }
.hero__scroll-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-micro); }
.hero__scroll-line { width: 38px; height: 1px; background: rgba(18,20,19,0.25); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; left: -40%; top: 0; width: 40%; height: 1px; background: var(--accent); animation: scrollCue 2s cubic-bezier(0.6,0,0.2,1) infinite; }
@keyframes scrollCue { 0% { left: -40%; } 60%, 100% { left: 100%; } }

/* ---- trust strip -------------------------------------------------------- */

.trust { border-block: 1px solid var(--line); background: var(--bg-sink); }
.trust__inner { display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; padding: 22px var(--pad); max-width: calc(var(--maxw) + 2 * var(--pad)); margin-inline: auto; }
.trust__label { color: var(--accent); flex-shrink: 0; }
.trust__items { display: flex; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap; }
.trust__items span { font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; }

/* ---- generic section head ---------------------------------------------- */

.head { max-width: var(--maxw); margin-inline: auto; margin-bottom: clamp(40px, 5vw, 64px); }
.head__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; flex-wrap: wrap; }
.head .eyebrow { margin-bottom: 20px; }
.head h2 { font-size: clamp(30px, 3.7vw, 50px); max-width: 18ch; }
.head__lead { margin-top: 18px; font-size: 18px; max-width: 52ch; color: var(--ink); }

/* ---- services (editorial, not boxed cards) ----------------------------- */

.services__grid {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px);
}
/* service cards — black text while scrolling up; as each card settles (--ip,
   set by the pin JS, runs 0->1 over the final stretch of its reveal) the image
   background fades in and the text turns white, landing on the image-bg version.
   Hover then flips that settled card to a clean cream panel. */
.svc { display: flex; flex-direction: column; color: inherit; position: relative; overflow: hidden;
  min-height: clamp(300px, 38vh, 360px);
  padding: clamp(22px, 2vw, 28px) clamp(18px, 1.6vw, 24px);
  border-radius: var(--r); --ip: 0;
  transition: box-shadow 0.4s ease; }
.svc > *:not(.svc__img) { position: relative; z-index: 1; }
.svc__img { position: absolute; inset: 0; z-index: 0; opacity: var(--ip); transition: opacity 0.4s ease; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 0.6s cubic-bezier(0.2,0.6,0.2,1); }
.svc__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,24,0.5) 0%, rgba(14,26,24,0.82) 100%); }
.svc__head { display: flex; align-items: center; justify-content: space-between; position: relative; }
.svc__icon { width: 30px; height: 30px; color: color-mix(in srgb, #fff calc(var(--ip) * 100%), var(--accent)); transition: color 0.3s ease; }
.svc__index { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: color-mix(in srgb, #fff calc(var(--ip) * 100%), var(--accent)); transition: opacity 0.2s ease, color 0.3s ease; }
.svc__go { position: absolute; right: 2px; top: 50%; transform: translateY(-50%) translateX(-4px); font-size: 19px; color: #fff; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease, color 0.3s ease; }
.svc h3 { font-size: clamp(22px, 1.9vw, 27px); margin: auto 0 0; color: color-mix(in srgb, #fff calc(var(--ip) * 100%), var(--ink)); transition: color 0.3s ease; }
.cta-soon { cursor: pointer; }
/* body + tags are hidden by default (minimal tile) and reveal on hover */
.svc__body { font-size: 15.5px; line-height: 1.5; color: color-mix(in srgb, #fff calc(var(--ip) * 100%), var(--ink));
  max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.2,0.6,0.2,1), opacity 0.4s ease, margin-top 0.5s cubic-bezier(0.2,0.6,0.2,1), color 0.3s ease; }
.svc__tags { display: flex; flex-wrap: wrap; gap: 8px 18px;
  max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.2,0.6,0.2,1), opacity 0.4s ease, margin-top 0.5s cubic-bezier(0.2,0.6,0.2,1); }
.svc__tags span { font-size: 13.5px; position: relative; padding-left: 16px; color: color-mix(in srgb, rgba(255,255,255,0.82) calc(var(--ip) * 100%), var(--ink-micro)); }
.svc__tags span::before { content: "—"; position: absolute; left: 0; color: color-mix(in srgb, rgba(255,255,255,0.55) calc(var(--ip) * 100%), var(--accent-300)); }
/* hover — reveal the description (a bit more info before clicking through); image stays */
.svc:hover { box-shadow: 0 22px 48px -30px rgba(14,26,24,0.55); }
.svc:hover .svc__img img { transform: scale(1.06); }
.svc:hover .svc__body { max-height: 9em; opacity: 1; margin-top: 12px; }
.svc:hover .svc__tags { max-height: 5em; opacity: 1; margin-top: 16px; }
.svc:hover .svc__index { opacity: 0; }
.svc:hover .svc__go { opacity: 1; transform: translateY(-50%); }
.svc:hover .svc__tags span { color: rgba(255,255,255,0.82); }
.svc:hover .svc__tags span::before { color: rgba(255,255,255,0.6); }
.services__all { display: flex; justify-content: flex-end; width: 100%; margin-top: clamp(22px, 2.5vw, 36px); }

/* ---- pinned services (scroll-scrubbed prototype) ----------------------- */

.svc-pin { position: relative; height: 240vh; }
.svc-pin__stage {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; align-items: center;
  padding-block: clamp(80px, 12vh, 140px);
}
.svc-pin__inner { max-width: var(--maxw); margin-inline: auto; width: 100%; }
.head--svc { margin-bottom: clamp(34px, 4.5vw, 60px); }
.svc-pin__progress { margin-top: 26px; max-width: 360px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.svc-pin__progress span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--accent); transform-origin: left; }

/* cards are driven by per-card progress --cp (0..1), scrubbed by scroll */
.svc-pin .svc {
  --cp: 0;
  opacity: calc(0.12 + var(--cp) * 0.88);
  transform: translateY(calc((1 - var(--cp)) * 52px));
}

@media (max-width: 1080px) {
  /* no pinning on small screens — fall back to a normal stacked section */
  .svc-pin { height: auto; }
  .svc-pin__stage { position: static; min-height: 0; display: block; padding-block: clamp(56px, 7vw, 88px); }
  .svc-pin .svc { opacity: 1 !important; transform: none !important; }
  .svc-pin__progress { display: none; }
}

/* ---- why / principles (open list, no boxes) ---------------------------- */

.why { background: var(--bg-sink); border-block: 1px solid var(--line); }
.why__grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2px, 1vw, 8px); }
.principle {
  padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 36px);
  border-top: 1px solid var(--line);
}
.principle:nth-child(odd) { border-right: 1px solid var(--line); }
.principle__num { font-family: var(--font-mono); font-size: 13px; color: var(--accent); margin-bottom: 7px; }
.why__cta { display: flex; justify-content: flex-end; width: 100%; max-width: var(--maxw); margin: clamp(28px,3.5vw,44px) auto 0; }
.principle h3 { font-size: clamp(19px, 1.6vw, 23px); margin-bottom: 9px; transition: color 0.25s ease; }
.principle p { font-size: 16px; color: var(--ink); max-width: 40ch; }

/* ---- image band --------------------------------------------------------- */

.band { padding-inline: var(--pad); }
.band__media {
  position: relative; max-width: var(--maxw); margin-inline: auto;
  border-radius: var(--r-lg); overflow: hidden;
  min-height: clamp(440px, 52vw, 600px); box-shadow: var(--shadow);
}
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,26,24,0.88) 0%, rgba(14,26,24,0.55) 42%, rgba(14,26,24,0.12) 66%, transparent 80%); }
.band__copy { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(28px, 5vw, 68px); max-width: 640px; }
.band__copy .eyebrow { color: #fff; }
.band__copy .eyebrow::before { background: #fff; }
.band__copy h2 { color: #fff; font-size: clamp(24px, 3vw, 40px); max-width: 18ch; }
.band__copy p:not(.eyebrow) { color: rgba(255,255,255,0.88); font-size: 17px; max-width: 46ch; }
.band__cta { margin-top: 10px; align-self: flex-start; }

/* ---- market context (deliberate dark anchor) --------------------------- */

.context { padding-inline: var(--pad); }
.context__card {
  max-width: var(--maxw); margin-inline: auto;
  background: var(--ink-deep); color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(40px, 6vw, 80px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(30px, 5vw, 72px); align-items: center;
  position: relative; overflow: hidden;
}
.context__figure { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.045em; line-height: 0.86; font-size: clamp(72px, 11vw, 150px); color: #fff; }
.context__figure span { color: var(--accent-300); }
.context__lead { font-size: clamp(19px, 1.8vw, 25px); line-height: 1.42; color: #fff; max-width: 30ch; }
.context__cite { margin-top: 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.55); letter-spacing: 0.01em; }
.context__cite a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; }

/* ---- doctors split ------------------------------------------------------ */

.doctors__grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.doctors__text h2 { font-size: clamp(26px, 3vw, 42px); margin: 20px 0 18px; }
.doctors__text p { font-size: 17.5px; max-width: 46ch; margin-bottom: 30px; color: var(--ink); }
.doctors__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow); }
.doctors__media img { width: 100%; height: 100%; object-fit: cover; }

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

.about { background: var(--bg-sink); border-block: 1px solid var(--line); }
.about__grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(34px, 5vw, 80px); align-items: center; }
.about__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.about__badge {
  position: absolute; left: 18px; bottom: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px;
}
.about__badge .eyebrow { margin: 0 0 4px; }
.about__badge strong { font-family: var(--font-head); font-size: 16px; }
.about__text h2 { font-size: clamp(28px, 3.4vw, 46px); margin-bottom: 12px; }
.about__text h2 .credential { color: var(--accent); }
.about__lede { font-size: clamp(18px, 1.5vw, 21px); margin-bottom: 18px; color: var(--ink); max-width: 46ch; }
.about__text p:not(.eyebrow) { font-size: 17px; color: var(--ink); max-width: 56ch; }
.about__meta { display: flex; flex-wrap: wrap; gap: 14px 48px; margin: 30px 0; }
.about__meta .eyebrow { margin-bottom: 8px; }
.about__meta p { font-size: 15.5px; line-height: 1.5; }

/* ---- testimonials ------------------------------------------------------- */

.quotes { text-align: left; position: relative; overflow: clip; isolation: isolate; }
.quotes__grid-deco { top: 0; right: 0; width: min(42%, 480px); height: 100%;
  -webkit-mask: radial-gradient(120% 130% at 100% 35%, #000 6%, transparent 60%);
  mask: radial-gradient(120% 130% at 100% 35%, #000 6%, transparent 60%); }
.quotes__inner { position: relative; z-index: 1; max-width: 960px; margin-inline: auto; }
.quotes .eyebrow { margin-bottom: 34px; }
.quote-slide { display: none; }
.quote-slide.is-active { display: block; animation: quoteIn 0.6s cubic-bezier(0.2,0.6,0.2,1); }
@keyframes quoteIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.quote-slide blockquote { font-family: var(--font-head); font-weight: 500; font-size: clamp(24px, 3.1vw, 42px); line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); }
.quote-slide blockquote .mark { color: var(--accent-300); }
.quote-slide figcaption { display: flex; align-items: center; gap: 16px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.q-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--accent-tint); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.q-avatar .material-symbols-outlined { font-size: 28px; color: var(--accent); }
.quote-slide figcaption strong { font-family: var(--font-head); font-size: 16.5px; display: block; }
.quote-slide figcaption span { font-size: 15px; color: var(--ink-micro); }
.quotes__controls { display: flex; align-items: center; gap: 10px; margin-top: 36px; }
.quotes__cta { margin-left: auto; }
.q-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.q-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-2px); }
.q-progress { margin-left: 14px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-micro); letter-spacing: 0.06em; }

/* ---- faqs --------------------------------------------------------------- */

.faqs { background: var(--bg-sink); border-block: 1px solid var(--line); }
.faqs__grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 6vw, 92px); align-items: start; }
.faqs__intro { position: sticky; top: 96px; }
.faqs__intro h2 { font-size: clamp(28px, 3.4vw, 46px); }
.faqs__intro .eyebrow { margin-bottom: 20px; }
.faqs__intro p:not(.eyebrow) { margin-top: 18px; font-size: 17px; max-width: 36ch; color: var(--ink); }
.faq { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-head); font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); transition: color 0.2s ease; }
.faq__q:hover { color: var(--accent); }
.faq__icon { position: relative; width: 17px; height: 17px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--accent); transition: transform 0.3s cubic-bezier(0.2,0.6,0.2,1), opacity 0.3s ease; }
.faq__icon::before { top: 8px; left: 0; width: 17px; height: 1.5px; }
.faq__icon::after { left: 8px; top: 0; width: 1.5px; height: 17px; }
.faq.is-open .faq__icon::after { opacity: 0; transform: rotate(90deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s cubic-bezier(0.2,0.6,0.2,1); }
.faq.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; min-height: 0; }
.faq__a p { font-size: 16.5px; line-height: 1.62; color: var(--ink); max-width: 58ch; padding-bottom: 26px; }

/* ---- references --------------------------------------------------------- */

.refs__grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.ref {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px clamp(8px, 2vw, 28px); border-bottom: 1px solid var(--line);
  transition: background 0.25s ease, padding-left 0.25s ease;
}
.ref:nth-child(odd) { border-right: 1px solid var(--line); }
.ref:hover { background: var(--accent-tint); padding-left: clamp(16px, 2.4vw, 36px); }
.ref__name { font-size: 17px; font-weight: 500; max-width: 34ch; }
.ref__src { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); white-space: nowrap; }

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

#contact { position: relative; overflow: clip; isolation: isolate; }
.contact__wm { right: clamp(8px, 3vw, 56px); bottom: -50px; width: 200px; height: 300px; opacity: 0.05; }
.contact__grid { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact__intro h2 { font-size: clamp(30px, 3.6vw, 50px); margin-bottom: 16px; }
.contact__intro > p:not(.eyebrow) { font-size: 18px; max-width: 38ch; color: var(--ink); margin-bottom: 32px; }
.contact__details { display: flex; flex-direction: column; gap: 4px; }
.detail { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.detail .eyebrow { margin: 0; }
.detail > span:not(.eyebrow), .detail address { font-size: 17px; color: var(--ink); }
a.detail { transition: padding-left 0.25s ease; }
a.detail:hover { padding-left: 8px; }
a.detail:hover > span:not(.eyebrow) { color: var(--accent); }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 3.4vw, 42px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; box-shadow: var(--shadow-sm); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea {
  font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.field textarea { resize: vertical; min-height: 120px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b3261e; }
.consent { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--ink-micro); }
.consent input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--accent); }
.consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.consent.is-invalid { color: #b3261e; }
.form__submit { grid-column: 1 / -1; justify-content: center; }
.form__status { grid-column: 1 / -1; font-size: 15px; margin: 0; }
.form__status.is-error { color: #b3261e; }
.form__status.is-ok { color: var(--accent); font-weight: 600; }

/* ---- footer (dark anchor) ---------------------------------------------- */

.footer { position: relative; overflow: clip; isolation: isolate; background: var(--ink-deep); color: rgba(255,255,255,0.82); padding: clamp(56px, 7vw, 92px) var(--pad) 36px; }
.footer__grid { top: 0; right: 0; width: min(52%, 540px); height: 100%;
  -webkit-mask: radial-gradient(130% 140% at 100% 0%, #000 4%, transparent 58%);
  mask: radial-gradient(130% 140% at 100% 0%, #000 4%, transparent 58%); }
.footer__inner { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer .brand__name { color: #fff; }
.footer .brand__sub { color: var(--accent-300); }
.footer__tag { margin-top: 18px; font-size: 15px; color: rgba(255,255,255,0.6); max-width: 34ch; }
.footer__cols { display: flex; gap: clamp(40px, 7vw, 96px); flex-wrap: wrap; }
.footer__col .eyebrow { color: var(--accent-300); margin-bottom: 16px; }
.footer__col a { display: block; font-size: 15px; color: rgba(255,255,255,0.72); padding: 6px 0; transition: color 0.2s ease; }
.footer__col a:hover { color: #fff; }
.footer__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 28px; }
.footer__base, .footer__base a { font-family: var(--font-mono); font-size: 12.5px; color: rgba(255,255,255,0.5); }
.footer__base a:hover { color: #fff; }

/* ---- scroll reveal ------------------------------------------------------ */

.reveal-ready [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 0.95s cubic-bezier(0.16,0.7,0.18,1), transform 0.95s cubic-bezier(0.16,0.7,0.18,1); will-change: opacity, transform; }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* keep anchored sections clear of the sticky nav when jumped to */
section[id], [id="hero"] { scroll-margin-top: 88px; }

/* ---- sticky section anchors -------------------------------------------- */

.anchors {
  position: fixed; right: clamp(14px, 1.8vw, 30px); top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 18px; align-items: flex-end;
}
.anchors__dot { position: relative; display: block; width: 13px; height: 12px; }
.anchors__dot::before {
  content: ""; position: absolute; inset: 0;
  background: var(--accent-300); opacity: 0.5;
  -webkit-mask: url("../assets/img/hex-marker.svg") no-repeat center / contain;
  mask: url("../assets/img/hex-marker.svg") no-repeat center / contain;
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1), opacity 0.3s ease, background 0.3s ease;
}
.anchors__dot:hover::before { opacity: 0.85; transform: scale(1.2); }
.anchors__dot.is-active::before { background: var(--accent); opacity: 1; transform: scale(1.3); }
.anchors__label {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px);
  padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
}
.anchors__dot:hover .anchors__label { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1080px) { .anchors { display: none; } }

/* ---- review-only controls ---------------------------------------------- */

.tools {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: var(--z-tool); display: flex; align-items: center; gap: 14px;
  padding: 9px 12px; border-radius: 999px;
  background: rgba(14,26,24,0.94); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 16px 40px rgba(0,0,0,0.34);
}
.tools__group { display: flex; align-items: center; gap: 4px; }
.tools__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding-right: 4px; }
.tools__btn { border: none; cursor: pointer; padding: 7px 13px; border-radius: 999px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.66); background: transparent; transition: background 0.18s ease, color 0.18s ease; }
.tools__btn:hover { color: #fff; }
.tools__btn.is-active { background: #fff; color: var(--ink-deep); }
.tools__sep { width: 1px; height: 22px; background: rgba(255,255,255,0.16); }

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  .nav__links, .nav__right .btn { display: none; }
  .burger { display: flex; }
  /* layered hero collapses to a single stacked column on small screens */
  .hero__inner { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0;
    gap: 24px; padding-block: clamp(98px, 24vw, 132px) clamp(48px, 10vw, 72px); }
  .hero__title, .hero__stat, .hero__aside, .hero__profile {
    grid-column: 1; grid-row: auto; justify-self: start; align-self: auto; }
  .hero__title { order: 1; }
  .hero__aside { order: 2; align-items: flex-start; text-align: left; }
  .hero__actions { justify-content: flex-start; }
  .hero__stat { order: 3; }
  .hero__profile { order: 4; }
  .hero__scroll { display: none; }
  .services__grid { grid-template-columns: 1fr; gap: 10px; }
  .about__grid, .faqs__grid, .contact__grid { grid-template-columns: 1fr; }
  .faqs__intro { position: static; }
  .doctors__media { order: -1; }
  .form { grid-template-columns: 1fr; }
  .context__card { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .why__grid, .refs__grid { grid-template-columns: 1fr; }
  .principle:nth-child(odd), .ref:nth-child(odd) { border-right: none; }
  .hero__stat { gap: 16px; }
  .about__meta { gap: 18px 32px; }
  .tools { gap: 8px; padding: 8px; flex-wrap: wrap; max-width: calc(100vw - 24px); justify-content: center; }
  .tools__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .lk--mark, .lk--text { animation: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

@media print { .tools, .skip-link { display: none; } }

/* =====================================================================
   BATCH 2 — motion, parallax, background geometry, micro-interactions
   ===================================================================== */

/* ---- decorative geometry layer ----------------------------------------- */

.deco { position: absolute; pointer-events: none; z-index: var(--z-deco); }

/* fine dot-grid, fades out radially */
.deco-dots {
  background-image: radial-gradient(var(--accent) 1.15px, transparent 1.15px);
  background-size: 24px 24px;
  opacity: 0.13;
}
/* faint line-grid variant */
.deco-grid-lines {
  background-image:
    linear-gradient(var(--accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.06;
}
/* soft ambient teal glow */
.deco-glow { border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%); filter: blur(28px); opacity: 0.55; }

/* oversized faint caduceus watermark (brings the mark into the layout) */
.deco-watermark {
  background: var(--accent);
  -webkit-mask: url("../assets/img/solas-mark-new.svg") no-repeat center / contain;
  mask: url("../assets/img/solas-mark-new.svg") no-repeat center / contain;
  opacity: 0.05;
}

/* ---- animated grid pattern (the throughline motif) --------------------- */

.gridfield {
  position: absolute; pointer-events: none; z-index: var(--z-deco); overflow: hidden;
  --hex-w: 50px; --hex-h: 28.87px;
  --hex-src: url("../assets/img/hexgrid-teal.svg");
  --grid-opacity: 0.42;
  --glow: color-mix(in srgb, var(--accent) 36%, transparent);
  background-image: var(--hex-src);
  background-size: var(--hex-w) var(--hex-h);
  background-repeat: repeat;
  opacity: var(--grid-opacity);
}
/* a soft accent light drifts across the honeycomb (transform-animated = GPU-cheap) */
.gridfield::after {
  content: ""; position: absolute; left: 0; top: 0; width: 66%; height: 88%;
  background: radial-gradient(closest-side, var(--glow), transparent 70%);
  animation: gridPulse 12s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes gridPulse {
  0%   { transform: translate(-28%, 70%); }
  100% { transform: translate(95%, -25%); }
}
.gridfield--dark { --hex-src: url("../assets/img/hexgrid-light.svg"); --grid-opacity: 0.5; --glow: color-mix(in srgb, var(--accent-300) 48%, transparent); }

/* small honeycomb cluster accent (Why Solas, top-right) */
.head--deco { position: relative; }
.why__hc { position: absolute; top: -14px; right: 0; width: clamp(98px, 9.5vw, 134px); height: auto; z-index: 0; pointer-events: none; }
.why__hc .hc-pulse { animation: hcPulse 4.8s ease-in-out infinite; }
@keyframes hcPulse { 0%, 100% { fill-opacity: 0.05; } 50% { fill-opacity: 0.20; } }
@media (max-width: 760px) { .why__hc { display: none; } }

/* ---- unifying image grade (cohesive, less stocky) ---------------------- */

.graded img, .hero__bg img, .hero__bg video, .band__media img, .doctors__media img, .about__photo img {
  filter: saturate(0.82) contrast(1.03) brightness(1.02);
}

/* ---- official lockup theming (shape fixed, colour adapts) -------------- */

.footer .brand__logo { color: #fff; --logo-accent: var(--accent-300); }

/* ---- parallax ----------------------------------------------------------- */

[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
/* media parallax: image is oversized inside an overflow-hidden frame */
.parallax-media { overflow: hidden; }
.parallax-media img, .parallax-media video { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); will-change: transform; }

/* ---- image clip reveal (band hero moment) ------------------------------ */

.reveal-ready .clip-reveal[data-reveal] { opacity: 1; transform: none; }  /* clip is the effect, suppress fade-up */
.reveal-ready .clip-reveal img { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s cubic-bezier(0.16,0.7,0.18,1), transform 1.4s cubic-bezier(0.16,0.7,0.18,1); transform: scale(1.12); }
.reveal-ready .clip-reveal.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ---- context card: grid + watermark + cursor spotlight ----------------- */

.context__card { isolation: isolate; }
.context__card .gridfield { inset: 0; --grid-opacity: 0.14; opacity: 0.14;
  -webkit-mask: linear-gradient(90deg, #000 0%, #000 12%, transparent 40%);
  mask: linear-gradient(90deg, #000 0%, #000 12%, transparent 40%); }
.context__card .deco-watermark { right: -40px; bottom: -70px; width: 300px; height: 300px; background: #fff; opacity: 0.05; }
.context__spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent-300) 30%, transparent), transparent 70%);
  opacity: 0; transition: opacity 0.4s ease;
}
.context__card:hover .context__spot { opacity: 1; }
.context__figure, .context__body { position: relative; z-index: 2; }

/* buttons keep a single, restrained upward lift on hover (see base .btn rules) */

@media (prefers-reduced-motion: reduce) {
  [data-parallax], .parallax-media img, .parallax-media video { transform: none !important; }
  .reveal-ready .clip-reveal img { clip-path: none !important; transform: none !important; transition: none; }
  .btn, .btn:hover { transform: none !important; }
  .deco-glow { display: none; }
  .hero__video { display: none; }  /* fall back to the poster still */
}