/* =====================================================================
   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 {
  /* ============================================================
     v6 — FINAL palette, from the signed-off Figma.
     Cool BLUE primary, turquoise/cyan secondary, navy darks.
     No green anywhere. */

  /* surfaces — cool off-white / light-blue family */
  --bg:        #EFF3F2;          /* page base */
  --bg-sink:   #F3F5FE;          /* light blue tint */
  --surface:   #FEFEFF;          /* raised surfaces / cards */
  --ink-deep:  #0A2448;          /* deep navy anchor */

  --ink:       #121413;
  --ink-micro: #51544F;

  /* primary accent = BLUE (v7 final — slightly darker tone from Figma) */
  --accent:      #174585;
  --accent-700:  #0F3163;        /* darker still, for hover states */
  --accent-300:  #6C96D9;
  --accent-tint: #DCE7F7;

  /* secondary = a very light blue (used inside CTA arrows, small accents) */
  --accent-2:      #2FA9E0;      /* readable cyan for small accents on light */
  --accent-2-soft: #C0D9FF;      /* v7 final — very light blue (CTA arrows) */

  /* tone aliases kept blue-family so any legacy reference stays on-palette */
  --tone-a: #174585; --tone-a-deep: #0F3163; --tone-a-tint: #DCE7F7;
  --tone-b: #3F83E2; --tone-b-deep: #174585; --tone-b-tint: #DCE7F7;
  --tone-c: #1B3979; --tone-c-deep: #0A2448; --tone-c-tint: #DCE7F7;
  --tone-d: #5099FF; --tone-d-deep: #174585; --tone-d-tint: #DBEAFF;

  /* hairlines + shadow (shadow tinted navy-blue, never green) */
  --line:    rgba(10, 36, 72, 0.12);
  --line-2:  rgba(10, 36, 72, 0.07);
  --shadow-sm: 0 2px 6px -2px rgba(10, 36, 72, 0.14);
  --shadow:    0 12px 26px -10px rgba(10, 36, 72, 0.22);
  --shadow-lg: 0 26px 50px -18px rgba(10, 36, 72, 0.28);

  /* geometry */
  --maxw: 1240px;
  --pad:  clamp(20px, 5vw, 76px);
  --r-sm: 10px;
  --r:    15px;
  --r-lg: 22px;

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

  /* type families */
  --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: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  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; }
/* a little breathing room under section-label eyebrows */
p.eyebrow { margin-bottom: 15px; }

/* 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);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent; border-radius: 999px;  /* oval / pill — the brand hex lives in the icons, not the buttons */
  -webkit-appearance: none; appearance: none;
  font-family: var(--font-body);
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.26s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.3s ease,
              background 0.3s ease, color 0.3s ease, border-color 0.3s 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); box-shadow: none;
}
.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: none; }
.arrow-link:hover .arrow-link__label { 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;                         /* matches the hero at the top; blur kicks in on scroll */
  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;
}
/* scrim only kicks in once scrolling — at the top the nav just matches the (dark) hero */
.nav--on-dark.is-stuck::before { opacity: 1; }
.nav > * { position: relative; }
.nav.is-stuck { border-bottom-color: var(--line); padding-block: 11px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: saturate(135%) blur(9px); -webkit-backdrop-filter: saturate(135%) blur(9px); }
/* the scrolled nav carries its own light tint, so the logo stays visible over any
   section — keep the dark scrim off and the (dark) logo un-inverted once stuck */
.nav.is-stuck::before { opacity: 0 !important; }
.nav.is-stuck .brand__logo-img { filter: none !important; }

/* 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; }
/* nav logo — inline horizontal wordmark (textlogo), vertically centred in the bar */
.nav .brand { position: static; display: flex; align-items: center; height: auto; flex-shrink: 0; }
.brand__logo--badge { position: static; display: flex; align-items: center; height: auto; aspect-ratio: auto; }
.brand__logo-img { position: static; height: clamp(60px, 6vw, 76px); width: auto; max-width: none; }
/* white wordmark over dark sections (the SVG has fixed dark ink, so recolour it) */
.nav--on-dark .brand__logo-img { filter: brightness(0) invert(1); }
/* footer logo — normal placement (not the cut-off nav badge) */
.brand__logo--footer { height: auto; aspect-ratio: auto; }
.brand__logo--footer img { display: block; height: clamp(76px, 7vw, 98px); width: auto; }
/* frosted-glass panel behind the badge, clipped to the shield shape */
.brand__logo-glass { position: absolute; top: 0; left: max(var(--pad), calc((100% - var(--maxw)) / 2));
  height: clamp(98px, 10vw, 118px); aspect-ratio: 514 / 430; z-index: 2; pointer-events: none;
  clip-path: polygon(0.78% 0, 99.17% 0, 99.17% 65.93%, 49.98% 98.9%, 0.78% 65.93%);
  background: color-mix(in srgb, var(--surface) 44%, transparent);
  -webkit-backdrop-filter: blur(15px) saturate(135%); backdrop-filter: blur(15px) saturate(135%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.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__aside > *:not(.hero__wm),
.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: var(--accent-300); }
.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: 24px var(--pad) 28px;
  border-bottom: 1px solid var(--line); background: #fff;
  position: fixed; top: 54px; 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(380px, 43vw, 580px); 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, 800px);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 3vw, 40px);
  padding-block: clamp(152px, 19vh, 182px) clamp(40px, 4.5vw, 56px); }
.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 { position: relative; 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: #2FA9E0; 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; }
/* headline = the value prop (the new logo carries the brand name) */
.hero h1 { font-size: clamp(34px, 4.3vw, 58px); line-height: 1.05; letter-spacing: -0.034em; max-width: none; color: var(--ink); }
.hero__sub { margin-top: 18px; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.55; max-width: 32ch; color: var(--ink); }
.hero__sub strong { font-weight: 700; 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(52%, 660px); height: min(82%, 620px);
  --grid-opacity: 0.82; opacity: 0.82;
  -webkit-mask: radial-gradient(102% 104% at 100% 0%, #000 6%, rgba(0,0,0,0.52) 34%, transparent 68%);
  mask: radial-gradient(102% 104% at 100% 0%, #000 6%, rgba(0,0,0,0.52) 34%, transparent 68%); }
.gridfield.hero__grid-deco--bl { left: 0; right: auto; top: auto; bottom: 0; width: min(50%, 620px); height: min(80%, 600px);
  --grid-opacity: 0.76; opacity: 0.76;
  -webkit-mask: radial-gradient(100% 102% at 0% 100%, #000 6%, rgba(0,0,0,0.5) 32%, transparent 66%);
  mask: radial-gradient(100% 102% at 0% 100%, #000 6%, rgba(0,0,0,0.5) 32%, transparent 66%); }
/* hero corner ambient — a stronger teal glow, always present and anchored in the
   corner (it gently breathes instead of drifting away, so it never reads as blank) */
.hero__grid-deco { --glow: color-mix(in srgb, var(--accent) 90%, transparent); }
.hero__grid-deco::after {
  width: 145%; height: 145%;
  background: radial-gradient(closest-side, var(--glow), color-mix(in srgb, var(--accent) 44%, transparent) 50%, transparent 82%);
  animation: heroGlowPulse 6.5s ease-in-out infinite alternate;
}
.hero__grid-deco--tr::after { left: auto; right: -22%; top: -22%; }
.hero__grid-deco--bl::after { left: -22%; right: auto; top: auto; bottom: -22%; }
@keyframes heroGlowPulse { 0% { opacity: 0.85; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__grid-deco::after { animation: none; opacity: 0.96; } }

/* ---- v5 only: inverted (dark-teal) hero -------------------------------- */
.hero--dark {
  background:
    radial-gradient(120% 130% at 84% -12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 56%),
    linear-gradient(168deg, #143B70 0%, var(--ink-deep) 58%, #08203F 100%);
  border-bottom: 1px solid var(--accent-700); color: #fff;
}
.hero--dark h1 { color: #fff; }
.hero--dark .hero__sub { color: rgba(255,255,255,0.82); }
.hero--dark .hero__sub strong { color: #fff; }
.hero--dark .stat-figure { color: #fff; }
.hero--dark .hero__stat .stat-figure span { color: var(--accent-300); }
.hero--dark .hero__stat .stat-label { color: rgba(255,255,255,0.8); }
.hero--dark .hero__stat-divider { background: rgba(255,255,255,0.24); }
.hero--dark .hero__scroll { color: #fff; }
.hero--dark .hero__scroll-label { color: rgba(255,255,255,0.7); }
.hero--dark .hero__scroll-line { background: rgba(255,255,255,0.28); }
.hero--dark .hero__wm { background: #fff; }
/* CTA flips to a light pill so it reads on the teal */
.hero--dark .btn--accent { --btn-bg: #fff; --btn-fg: var(--accent); }
.hero--dark .btn--accent:hover { --btn-bg: rgba(255,255,255,0.9); }
/* corner glow: soft light-teal on the dark ground */
.hero--dark .hero__grid-deco { --glow: color-mix(in srgb, var(--accent-300) 48%, transparent); }
.hero--dark .hero__grid-deco::after {
  background: radial-gradient(closest-side, var(--glow), color-mix(in srgb, var(--accent-300) 18%, transparent) 50%, transparent 80%);
}
/* cursor-glow on the hero, same as the other dark-teal sections */
.hero__spot { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent-300) 16%, transparent), transparent 72%);
  opacity: 0; transition: opacity 0.45s ease; }
.hero--dark:hover .hero__spot { opacity: 1; }

/* scroll cue */
.hero__scroll { position: absolute; left: 50%; transform: translateX(-50%); 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: 11px; letter-spacing: 0.03em; text-transform: none; 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 -------------------------------------------------------- */

/* v6: light "Working within" strip (the hero is light again) */
.trust { border-block: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-tint) 70%, var(--bg-sink)) 0%, var(--bg-sink) 100%); }
.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-700); 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: 27px; }
.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 — clean editorial text, no image backgrounds; they scroll up
   into place (--cp, set by the pin JS), with a subtle hover accent */
.svc { display: block; color: inherit; position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.4s ease, border-color 0.35s ease; }
/* teal wash warms the card on hover (borrowed from the dark-band palette) */
.svc::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(158deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 56%);
  opacity: 0; transition: opacity 0.4s ease; }
/* hover — a clean teal stroke wraps the whole card, plus lift, wash + icon fill */
.svc:hover { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 1px var(--accent); }
.svc:hover::before { opacity: 1; }
.svc__head { display: flex; align-items: center; justify-content: space-between; position: relative; }
/* ── Reusable hex icon frame — the site-wide icon rule ──────────────────────
   Wrap any icon (svg/img) in <span class="hex-icon"> to give it a hexagon
   outline stroke. --hex-size sizes the frame; --hex-icon-bg MUST match the
   surface the frame sits on (it forms the ring's interior cut-out). Built with
   the same inset-pseudo ring as .btn, so the whole site shares one hex language. */
.hex-icon {
  --hex-size: 50px;
  --hex-ring: 2px;
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--hex-size); aspect-ratio: 1.1547; isolation: isolate; color: var(--accent);
}
.hex-icon::before, .hex-icon::after {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hex-icon::before { background: var(--hex-stroke, currentColor); z-index: -2; }
.hex-icon::after { inset: var(--hex-ring); background: var(--hex-icon-bg, var(--bg)); z-index: -1; }
.hex-icon > svg, .hex-icon > img { width: calc(var(--hex-size) * 0.52); height: calc(var(--hex-size) * 0.52); display: block; }
.svc__icon { color: var(--accent); transition: color 0.3s ease; }
.svc__hex { --hex-icon-bg: var(--surface); transition: color 0.3s ease, transform 0.35s cubic-bezier(0.2,0.7,0.2,1); }
.svc__hex::after { transition: background 0.3s ease; }
.svc:hover .svc__hex { --hex-icon-bg: var(--accent); transform: scale(1.06); }
.svc:hover .svc__icon { color: #fff; }
.svc__index { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--accent); transition: opacity 0.2s ease, color 0.25s ease; }
.svc__go { position: absolute; right: 2px; top: 50%; transform: translateY(-50%) translateX(-4px); font-size: 19px; color: var(--accent); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; }
.svc h3 { font-size: clamp(22px, 1.9vw, 27px); margin: 18px 0 14px; color: var(--ink); transition: color 0.25s ease; }
.cta-soon { cursor: pointer; }
.svc__body { font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.svc__tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.svc__tags span { font-size: 13.5px; position: relative; padding-left: 16px; color: var(--ink-micro); }
.svc__tags span::before { content: "—"; position: absolute; left: 0; color: var(--accent-300); }
/* hover — subtle accent cue */
.svc:hover h3 { color: var(--accent); }
.svc:hover .svc__index { opacity: 0; }
.svc:hover .svc__go { opacity: 1; transform: translateY(-50%); }
.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: 200vh; }
.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); text-align: right; }
/* only the eyebrow goes right (clear of the cut-off nav logo); heading + progress stay left */
.head--svc h2, .head--svc .svc-pin__progress { text-align: left; }
.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.32 + var(--cp) * 0.68);
  transform: translateY(calc((1 - var(--cp)) * 30px));
}

@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) ---------------------------- */

/* dark-teal anchor — borrows the v2 stat-block / band energy: deep teal
   gradient, light bold type, hex-grid texture in the corners, cursor glow */
.why { position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(56px, 7vw, 96px);
  background:
    radial-gradient(118% 130% at 86% -10%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 56%),
    linear-gradient(168deg, #143B70 0%, var(--ink-deep) 58%, #08203F 100%);
  border-block: 1px solid var(--accent-700); color: #fff; }
.why__layout { position: relative; z-index: 2; }
.why .eyebrow { color: var(--accent-300); }
.why .eyebrow::before { background: var(--accent-300); }
.why h2 { color: #fff; }
.why__grid-deco { z-index: 0; }
/* inverted to top-left + bottom-right so the "More about Solas" link (bottom-left) sits clear */
.why__grid-deco--tr { top: 0; left: 0; right: auto; bottom: auto; width: min(46%, 520px); height: min(80%, 430px);
  --grid-opacity: 0.34; opacity: 0.34;
  -webkit-mask: radial-gradient(120% 130% at 0% 0%, #000 4%, transparent 64%);
  mask: radial-gradient(120% 130% at 0% 0%, #000 4%, transparent 64%); }
.why__grid-deco--bl { top: auto; bottom: 0; right: 0; left: auto; width: min(46%, 520px); height: min(80%, 430px);
  --grid-opacity: 0.3; opacity: 0.3;
  -webkit-mask: radial-gradient(120% 130% at 100% 100%, #000 4%, transparent 64%);
  mask: radial-gradient(120% 130% at 100% 100%, #000 4%, transparent 64%); }
.why__spot { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent-300) 16%, transparent), transparent 72%);
  opacity: 0; transition: opacity 0.45s ease; }
.why:hover .why__spot { opacity: 1; }
/* caduceus watermark, bottom centre-right — its right half sits behind the photo */
.why .why__wm { left: 48%; bottom: clamp(-54px, -2.6vw, -18px);
  width: clamp(220px, 24vw, 330px); height: clamp(300px, 32vw, 440px); background: #fff; opacity: 0.05; z-index: 0; }
/* reworked Why: content beside a compact in-section clinic photo (no 01–04 grid) */
.why__layout { max-width: var(--maxw); margin-inline: auto; display: grid;
  grid-template-columns: 1.25fr 0.85fr; gap: clamp(30px, 4vw, 64px); align-items: center; }
.why__content .eyebrow { margin-bottom: 20px; }
.why__content h2 { font-size: clamp(28px, 3.3vw, 44px); max-width: 20ch; }
.why__points { list-style: none; padding: 0; margin: clamp(22px, 2.6vw, 32px) 0 clamp(20px, 2.4vw, 30px);
  display: grid; gap: clamp(14px, 1.7vw, 22px); }
.why__point { position: relative; padding-left: 24px; }
.why__point::before { content: ""; position: absolute; left: 0; top: 8px; width: 11px; height: 10px;
  background: var(--accent-300);
  -webkit-mask: url("../assets/img/hex-marker.svg") no-repeat center / contain;
  mask: url("../assets/img/hex-marker.svg") no-repeat center / contain; }
.why__point h3 { font-size: clamp(17px, 1.4vw, 20px); color: #fff; margin-bottom: 4px; }
.why__point p { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.72); max-width: 44ch; }
.why__cta { color: #fff; }
.why__media { position: relative; margin: 0; align-self: center;
  height: clamp(340px, 36vw, 500px); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.why__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.why__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
@media (max-width: 1080px) {
  .why__layout { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); }
  .why__content { max-width: 100%; }          /* desktop caps it at 48% beside the photo; full width when stacked */
  .why__media { order: 0; height: clamp(200px, 48vw, 280px); }   /* text above the image */
}

/* ---- 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; }

/* (image break removed — the photo now lives inside the Why Solas section) */

/* ---- 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; }
/* surfaced credentials — FRCS / MD */
.about__creds { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(24px, 2.6vw, 32px) 0; }
.about__cred { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--accent);
  border: 1px solid var(--accent-300); border-radius: 999px; padding: 7px 18px; letter-spacing: 0.01em; }

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

.quotes { text-align: left; position: relative; overflow: clip; isolation: isolate;
  background:
    radial-gradient(116% 130% at 14% -12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 56%),
    linear-gradient(168deg, #122F5E 0%, var(--ink-deep) 60%, #0A2448 100%);
  color: #fff; border-block: 1px solid var(--accent-700); }
/* honeycomb texture in two diagonal corners (top-left + bottom-right) */
/* inverted to top-right + bottom-left so the "Read all testimonials" link (bottom-right) sits clear */
.quotes__grid-deco--tl { top: 0; right: 0; left: auto; width: min(40%, 460px); height: min(78%, 520px);
  -webkit-mask: radial-gradient(110% 120% at 100% 0%, #000 6%, transparent 62%);
  mask: radial-gradient(110% 120% at 100% 0%, #000 6%, transparent 62%); }
.quotes__grid-deco--br { top: auto; bottom: 0; left: 0; right: auto; width: min(40%, 460px); height: min(78%, 520px);
  -webkit-mask: radial-gradient(110% 120% at 0% 100%, #000 6%, transparent 62%);
  mask: radial-gradient(110% 120% at 0% 100%, #000 6%, transparent 62%); }
.quotes__inner { position: relative; z-index: 1; max-width: 960px; margin-inline: auto; }
.quotes .eyebrow { margin-bottom: 34px; }
/* carousel transition — clean directional slide (matches the ← → arrows): the
   slides move the full width side-by-side (no opacity crossfade, so the text
   never overlaps), and the track clips whatever is off-stage */
[data-carousel-track] { position: relative; min-height: clamp(244px, 28vw, 312px); overflow: hidden; }
.quote-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.quote-slide.is-active { opacity: 1; visibility: visible; }
.quote-slide.is-prev { opacity: 1; visibility: visible; }   /* visible while it slides out */
[data-dir="next"] .quote-slide.is-active { animation: qInRight 0.6s cubic-bezier(0.5,0,0.2,1) both; }
[data-dir="next"] .quote-slide.is-prev   { animation: qOutLeft 0.6s cubic-bezier(0.5,0,0.2,1) both; }
[data-dir="prev"] .quote-slide.is-active { animation: qInLeft 0.6s cubic-bezier(0.5,0,0.2,1) both; }
[data-dir="prev"] .quote-slide.is-prev   { animation: qOutRight 0.6s cubic-bezier(0.5,0,0.2,1) both; }
@keyframes qInRight  { from { transform: translateX(100%); }  to { transform: translateX(0); } }
@keyframes qOutLeft  { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes qInLeft   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes qOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .quote-slide.is-active, .quote-slide.is-prev { animation: none !important; }
  .quote-slide.is-prev { opacity: 0; visibility: hidden; }
}
.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); }
/* avatar = hex chip (hex-icon ring, tinted interior) */
.q-avatar { --hex-size: 58px; --hex-icon-bg: var(--accent-tint); --hex-stroke: var(--line); --hex-ring: 1px; }
.q-avatar .material-symbols-outlined { font-size: 30px; 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; }
/* round arrows — oval/pill family (hex stays in the avatars + section icons) */
.q-btn {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--accent-300); background: var(--surface);
  -webkit-appearance: none; appearance: none;
  cursor: pointer; font-size: 16px; color: var(--ink);
  display: grid; place-items: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.q-btn:hover { color: #fff; background: var(--accent); 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; }

/* inverted testimonials — dark-teal feature panel (matches Why Solas) */
.quotes > .quotes__inner { position: relative; z-index: 1; }
.quotes .eyebrow { color: var(--accent-300); }
.quotes .eyebrow::before { background: var(--accent-300); }
.quotes .quote-slide blockquote { color: #fff; }
.quotes .quote-slide figcaption { border-top-color: rgba(255,255,255,0.16); }
.quotes .quote-slide figcaption strong { color: #fff; }
.quotes .quote-slide figcaption span { color: rgba(255,255,255,0.7); }
.quotes .q-avatar { --hex-icon-bg: color-mix(in srgb, #fff 10%, transparent); --hex-stroke: rgba(255,255,255,0.28); }
.quotes .q-avatar .material-symbols-outlined { color: var(--accent-300); }
.quotes .q-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); color: #fff; }
.quotes .q-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.quotes .q-progress { color: rgba(255,255,255,0.6); }
.quotes .quotes__cta { color: #fff; }
.quotes__spot { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent-300) 14%, transparent), transparent 72%);
  opacity: 0; transition: opacity 0.45s ease; }
.quotes:hover .quotes__spot { opacity: 1; }

/* ---- 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: 27px; }
.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; }

/* inverted "Helpful links" — a teal feature panel that adds colour straight to
   the page (shares the dark-section language with Why Solas) */
.refs-invert { position: relative; isolation: isolate; overflow: clip;
  background:
    radial-gradient(120% 130% at 12% -14%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 56%),
    linear-gradient(168deg, #122F5E 0%, var(--ink-deep) 60%, #0A2448 100%);
  border-block: 1px solid var(--accent-700); color: #fff; }
.refs-invert .head, .refs-invert .refs__grid { position: relative; z-index: 2; }
.refs-invert .eyebrow { color: var(--accent-300); }
.refs-invert .eyebrow::before { background: var(--accent-300); }
.refs-invert h2 { color: #fff; }
.refs-invert .refs__grid { border-top-color: rgba(255,255,255,0.18); }
.refs-invert .ref { border-bottom-color: rgba(255,255,255,0.18); }
.refs-invert .ref:nth-child(odd) { border-right-color: rgba(255,255,255,0.18); }
.refs-invert .ref__name { color: #fff; }
.refs-invert .ref__src { color: var(--accent-300); }
.refs-invert .ref:hover { background: rgba(255,255,255,0.07); }
/* inverted to bottom-left (matching the Why/Testimonials treatment) */
.refs-invert__deco { z-index: 0; bottom: 0; left: 0; right: auto; top: auto;
  width: min(44%, 480px); height: min(90%, 360px); --grid-opacity: 0.3; opacity: 0.3;
  -webkit-mask: radial-gradient(120% 130% at 0% 100%, #000 4%, transparent 64%);
  mask: radial-gradient(120% 130% at 0% 100%, #000 4%, transparent 64%); }
/* subtle caduceus wordmark, right side (white at low opacity on the dark panel) */
.refs-invert .refs__wm { right: clamp(20px, 4vw, 72px); top: clamp(-8px, 1.4vw, 26px); transform: none;
  width: clamp(116px, 13vw, 170px); height: clamp(156px, 17vw, 226px); background: #fff; opacity: 0.05; z-index: 0; }
.refs-invert__spot { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent-300) 15%, transparent), transparent 72%);
  opacity: 0; transition: opacity 0.45s ease; }
.refs-invert:hover .refs-invert__spot { opacity: 1; }

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

#contact { position: relative; overflow: clip; isolation: isolate;
  background: radial-gradient(64% 56% at 100% 4%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 58%); }
.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 color-mix(in srgb, var(--accent) 20%, 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); }
.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: #EEF2FB; 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-self: end; --btn-interior: var(--surface); }
.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; }
.form__status.is-pending { color: var(--ink-micro); }
/* honeypot — off-screen, present in the DOM for bots, ignored by humans */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

.footer { position: relative; overflow: clip; isolation: isolate;
  background:
    radial-gradient(92% 120% at 100% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 58%),
    linear-gradient(165deg, #143B70 0%, var(--ink-deep) 56%, #0A2040 100%);
  color: rgba(255,255,255,0.82); padding: clamp(56px, 7vw, 92px) var(--pad) 36px; }
.footer__grid--tr { top: 0; right: 0; left: auto; bottom: auto; width: min(46%, 500px); height: min(80%, 360px);
  -webkit-mask: radial-gradient(120% 130% at 100% 0%, #000 4%, transparent 62%);
  mask: radial-gradient(120% 130% at 100% 0%, #000 4%, transparent 62%); }
.footer__grid--bl { top: auto; bottom: 0; left: 0; right: auto; width: min(46%, 500px); height: min(80%, 360px);
  -webkit-mask: radial-gradient(120% 130% at 0% 100%, #000 4%, transparent 62%);
  mask: radial-gradient(120% 130% at 0% 100%, #000 4%, transparent 62%); }
.footer__inner { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; }
/* cursor spotlight glow — same effect as the stat card */
.footer__spot { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent-300) 24%, transparent), transparent 72%);
  opacity: 0; transition: opacity 0.45s ease; }
.footer:hover .footer__spot { opacity: 1; }
.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(22px); transition: opacity 0.55s cubic-bezier(0.22,0.61,0.36,1), transform 0.6s cubic-bezier(0.22,0.61,0.36,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: 19px; align-items: flex-end;
}
.anchors__dot { position: relative; display: block; width: 15px; height: 13px; }
.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: 25px; top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.01em;
  text-transform: none; color: var(--ink);
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px);
  padding: 6px 12px; border-radius: 8px; 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; }
  .nav__right { margin-left: auto; }   /* margin-left:auto normally lives on .nav__links (hidden here) — push the burger right */
  .burger { display: flex; }
  /* when the mobile menu is open, fill the nav bar white behind the logo + burger
     so it reads as one white sheet with the menu panel */
  .nav:has(.burger[aria-expanded="true"]) { background: #fff; border-bottom-color: transparent; }
  .nav:has(.burger[aria-expanded="true"])::before { opacity: 0; }
  /* 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: 14px; padding-block: clamp(122px, 28vw, 150px) clamp(48px, 10vw, 72px); }
  .hero__wm { display: none; }   /* drop the faint caduceus watermark on mobile */
  .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; }
  /* hero decoration on mobile: drop the top-right hex, ease the bottom-left,
     and push the network animation to the right with its right half off-screen */
  .gridfield.hero__grid-deco--tr { display: none; }
  .gridfield.hero__grid-deco--bl { width: min(66%, 360px); height: min(50%, 340px); opacity: 0.45; }
  .hexnet { left: auto; right: 0; top: 62%; transform: translate(46%, -50%);
    width: min(94vw, 420px); }
  .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; }
  /* footer: even 2-col grid so Solas sits under Regulatory and Connect under Services */
  .footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .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;
}
/* soft faint brand mark — sits above the body copy on the right (decorative) */
.hero__wm { position: absolute; left: 0; right: auto; bottom: calc(100% + clamp(14px, 1.8vw, 26px));
  width: clamp(118px, 13vw, 180px); height: clamp(118px, 13vw, 180px);
  -webkit-mask-position: left center; mask-position: left center;
  margin: 0; opacity: 0.06; z-index: 0; pointer-events: none; }

/* ---- 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-blue-v6.svg");
  --grid-opacity: 0.58;
  --glow: color-mix(in srgb, var(--accent) 48%, 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-v3.svg"); --grid-opacity: 0.42; --glow: color-mix(in srgb, var(--accent-300) 42%, 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 0.7s cubic-bezier(0.22,0.61,0.36,1), transform 0.9s cubic-bezier(0.22,0.61,0.36,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 */
}

/* =====================================================================
   v6 — light-hero retune, reusable card kit, per-section layouts,
   review palette/variant switcher.  (Appended; overrides earlier rules.)
   ===================================================================== */

/* ---- hero: kept light (client likes it) + a couple of palette touches -- */
.hero {
  background:
    radial-gradient(78% 70% at 5% 2%, color-mix(in srgb, var(--tone-c) 8%, transparent), transparent 52%),
    radial-gradient(120% 120% at 88% -12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 56%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 62%);
}
/* secondary-palette touches, visible on first load */
.hero .stat-figure span { color: var(--tone-b); }
.hero__scroll-line::after { background: var(--tone-c); }

/* ---- services: a light COLOURED tint to break it off the hero --------- */
.services {
  background:
    radial-gradient(64% 60% at 97% -4%, color-mix(in srgb, var(--tone-b) 9%, transparent), transparent 56%),
    radial-gradient(70% 70% at 0% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--accent-tint) 32%, var(--bg-sink));
  border-block: 1px solid var(--line);
}
.services__inner { max-width: var(--maxw); margin-inline: auto; }
.head--svc { text-align: left; margin-bottom: clamp(34px, 4.5vw, 56px); }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }
.services__all { display: flex; justify-content: flex-end; margin-top: clamp(22px, 2.5vw, 34px); }
@media (max-width: 1080px) { .services__grid { grid-template-columns: 1fr; } }

/* ---- reusable card kit -------------------------------------------------
   ONE grammar (shape, radius, padding, type, motion). Variety lives in the
   modifiers — treatment (.card--outline / --soft / --gradient) and tone
   (.card--t-a / -b / -c). The same kit is composed into DIFFERENT layouts
   per section (services grid, testimonials scroll row, links list…). */
.card {
  --c: var(--tone-a); --c-deep: var(--tone-a-deep); --c-tint: var(--tone-a-tint);
  position: relative; display: flex; flex-direction: column; isolation: isolate;
  padding: clamp(24px, 2.3vw, 32px) clamp(22px, 2vw, 28px);
  border-radius: var(--r-lg); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease,
              border-color .35s ease, background .35s ease, color .35s ease;
}
.card--t-a { --c: var(--tone-a); --c-deep: var(--tone-a-deep); --c-tint: var(--tone-a-tint); }
.card--t-b { --c: var(--tone-b); --c-deep: var(--tone-b-deep); --c-tint: var(--tone-b-tint); }
.card--t-c { --c: var(--tone-c); --c-deep: var(--tone-c-deep); --c-tint: var(--tone-c-tint); }
.card--t-d { --c: var(--tone-d); --c-deep: var(--tone-d-deep); --c-tint: var(--tone-d-tint); }

.card__head { display: flex; align-items: center; justify-content: space-between; }
.card__icon { color: var(--c-deep); display: inline-grid; place-items: center; width: 32px; height: 32px; }
.card__icon svg { width: 28px; height: 28px; }
.card__index { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--c-deep); transition: opacity .2s ease; }
.card__go { font-size: 18px; color: var(--c-deep); opacity: 0; transform: translateX(-4px); transition: opacity .25s ease, transform .25s ease; }
.card h3 { font-size: clamp(21px, 1.9vw, 26px); margin: 16px 0 10px; color: var(--ink); transition: color .3s ease; }
.card__body { font-size: 15.5px; line-height: 1.58; color: var(--ink); transition: color .3s ease; }
.card__tags { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.card__tags span { font-size: 13px; position: relative; padding-left: 14px; color: var(--ink-micro); transition: color .3s ease; }
.card__tags span::before { content: "—"; position: absolute; left: 0; color: var(--c-deep); transition: color .3s ease; }

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card:hover .card__index { opacity: 0; }
.card:hover .card__go { opacity: 1; transform: none; }

/* treatment: OUTLINE — stroke at rest, inverts to a deep fill on hover */
.card--outline { border-color: color-mix(in srgb, var(--c) 46%, var(--line)); }
.card--outline:hover { background: var(--c-deep); border-color: var(--c-deep); box-shadow: var(--shadow), 0 0 0 1px var(--c-deep); }
.card--outline:hover h3, .card--outline:hover .card__body,
.card--outline:hover .card__icon, .card--outline:hover .card__index, .card--outline:hover .card__go { color: #fff; }
.card--outline:hover .card__tags span { color: rgba(255,255,255,.85); }
.card--outline:hover .card__tags span::before { color: rgba(255,255,255,.7); }

/* treatment: SOFT — a bright tonal pastel gradient, dark text */
.card--soft { border-color: color-mix(in srgb, var(--c) 22%, var(--line));
  background: linear-gradient(155deg, var(--c-tint) 0%, color-mix(in srgb, var(--c-tint) 48%, var(--surface)) 100%); }

/* treatment: GRADIENT — a deep, rich tonal fill, white text */
.card--gradient { border-color: transparent; color: #fff;
  background: linear-gradient(150deg, var(--c-deep) 0%, color-mix(in srgb, var(--c-deep) 74%, #061A33) 100%); }
.card--gradient h3 { color: #fff; }
.card--gradient .card__body { color: rgba(255,255,255,.88); }
.card--gradient .card__icon, .card--gradient .card__index, .card--gradient .card__go { color: #fff; }
.card--gradient .card__tags span { color: rgba(255,255,255,.82); }
.card--gradient .card__tags span::before { color: rgba(255,255,255,.7); }
.card--gradient:hover { box-shadow: var(--shadow-lg); }

/* treatment: FILLED — a solid colour block, white text */
.card--filled { border-color: transparent; color: #fff;
  background: color-mix(in srgb, var(--c-deep) 82%, var(--c)); }
.card--filled h3 { color: #fff; }
.card--filled .card__body { color: rgba(255,255,255,.9); }
.card--filled .card__icon, .card--filled .card__index, .card--filled .card__go { color: #fff; }
.card--filled .card__tags span { color: rgba(255,255,255,.85); }
.card--filled .card__tags span::before { color: rgba(255,255,255,.72); }
.card--filled:hover { box-shadow: var(--shadow-lg); }

/* dark-fill cards (gradient + filled) keep white quote text + avatar */
.card--gradient blockquote, .card--filled blockquote { color: #fff; }
.card--filled .qcard__avatar { background: rgba(255,255,255,.16); color: #fff; }
.card--filled figcaption strong { color: #fff; }
.card--filled figcaption strong + span { color: rgba(255,255,255,.78); }

/* ---- testimonials: a horizontal scroll row (different layout, same kit) - */
.quotes { background: var(--bg); border-block: 1px solid var(--line); overflow: clip; }
.quotes .head { max-width: var(--maxw); margin-inline: auto; margin-bottom: clamp(26px, 3vw, 38px); }
.quotes .eyebrow { color: var(--accent-700); }
.quotes .eyebrow::before { background: var(--accent); }
.quotes h2 { color: var(--ink); font-size: clamp(28px, 3.3vw, 44px); max-width: 20ch; }
.quotes__scroll {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; gap: clamp(14px, 1.6vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px;
  scrollbar-width: thin; scrollbar-color: var(--accent-300) transparent;
}
.quotes__scroll::-webkit-scrollbar { height: 8px; }
.quotes__scroll::-webkit-scrollbar-thumb { background: var(--accent-300); border-radius: 99px; }
.qcard { flex: 0 0 clamp(280px, 30vw, 358px); scroll-snap-align: start; min-height: 248px; }
.qcard blockquote { font-family: var(--font-head); font-weight: 500; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.34; letter-spacing: -.01em; color: var(--ink); }
.qcard figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; }
.qcard__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c-deep); }
.qcard__avatar .material-symbols-outlined { font-size: 24px; }
.qcard figcaption strong { font-family: var(--font-head); font-size: 15.5px; display: block; color: var(--ink); }
.qcard figcaption strong + span { font-size: 13.5px; color: var(--ink-micro); }
.card--gradient .qcard__avatar { background: rgba(255,255,255,.16); color: #fff; }
.card--gradient figcaption strong { color: #fff; }
.card--gradient figcaption strong + span { color: rgba(255,255,255,.78); }
.quotes__cta { display: flex; max-width: var(--maxw); margin: clamp(18px, 2vw, 26px) auto 0; }
@media (max-width: 620px) { .qcard { flex-basis: 82vw; } }

/* ---- side anchor dots — slightly larger per client --------------------- */
.anchors { gap: 22px; }
.anchors__dot { width: 19px; height: 17px; }
.anchors__label { font-size: 13.5px; right: 30px; }

/* ---- Why Solas — LIGHTENED (was a dark teal panel) -------------------- */
.why {
  background:
    radial-gradient(64% 80% at 100% 0%, color-mix(in srgb, var(--tone-c) 9%, transparent), transparent 56%),
    color-mix(in srgb, var(--accent-tint) 26%, var(--surface));
  border-block: 1px solid var(--line); color: var(--ink);
  min-height: 0;                                  /* drop the 100vh hold */
}
.why .eyebrow { color: var(--accent-700); }
.why .eyebrow::before { background: var(--accent); }
.why h2 { color: var(--ink); }
.why__lead { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55; color: var(--ink); max-width: none; margin: 16px 0 24px; }
.why__content p { color: var(--ink); }
.why__cta { color: var(--accent); }
.why__media::after { box-shadow: inset 0 0 0 1px var(--line); }

/* ---- helpful links — carded boxes in palette colours (was flush rows) - */
.links { background: color-mix(in srgb, var(--accent-tint) 20%, var(--bg)); border-block: 1px solid var(--line); }
.links .head { max-width: var(--maxw); margin-inline: auto; }
.links .eyebrow { color: var(--accent-700); }
.links .eyebrow::before { background: var(--accent); }
.links__grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.links__card { min-height: 116px; gap: 12px; justify-content: space-between; }
.links__src { font-family: var(--font-mono); font-size: 12.5px; color: var(--c-deep); }
.links__name { font-family: var(--font-head); font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.links__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
@media (max-width: 760px) { .links__grid { grid-template-columns: 1fr; } }

/* ---- FAQs — subtle rounded boxes with a colour offset when open ------- */
.faqs__list { display: grid; gap: 12px; }
.faq { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 0 clamp(16px, 2vw, 24px); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.faq__q { padding: 20px 0; }
.faq.is-open { background: color-mix(in srgb, var(--accent-tint) 45%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); box-shadow: var(--shadow-sm); }

/* ---- footer — LIGHTENED (no longer a dark anchor) -------------------- */
.footer {
  background:
    radial-gradient(58% 100% at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--bg-sink);
  color: var(--ink-micro); border-top: 1px solid var(--line);
}
.footer .gridfield, .footer__spot { display: none; }
.footer__top { border-bottom-color: var(--line); }
.footer .brand__logo { color: var(--ink); --logo-accent: var(--accent); }
.footer__tag { color: var(--ink-micro); }
.footer__col .eyebrow { color: var(--accent-700); }
.footer__col a { color: var(--ink); }
.footer__col a:hover { color: var(--accent); }
.footer__base, .footer__base a { color: var(--ink-micro); }
.footer__base a:hover { color: var(--accent); }

/* =====================================================================
   v6.1 — palette-tinted section backgrounds + the hex motif recoloured
   per section, to break the page up.  Plus small fixes + the v7 reel.
   ===================================================================== */

/* ---- soft palette-tint section backgrounds (swap with the palette) ----- */
.services { background: color-mix(in srgb, var(--tone-a-tint) 55%, var(--bg)); border-block: 1px solid var(--line); }
.why      { background: color-mix(in srgb, var(--tone-c-tint) 48%, var(--surface)); }
.quotes   { background: color-mix(in srgb, var(--tone-b-tint) 46%, var(--bg)); }
.faqs     { background: color-mix(in srgb, var(--tone-d-tint) 50%, var(--bg)); }
.links    { background: color-mix(in srgb, var(--tone-a-tint) 38%, var(--bg)); }

/* ---- the hex motif, recoloured per section (a faint corner texture) ---- */
.services, .why, .quotes, .faqs, .links { position: relative; isolation: isolate; }
.services > *, .why > *, .quotes > *, .faqs > *, .links > * { position: relative; z-index: 1; }
.services::before, .why::before, .quotes::before, .faqs::before, .links::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .38;
  -webkit-mask:
    url("../assets/img/hexgrid-blue-v6.svg") 0 0 / 60px 34.64px repeat,
    radial-gradient(115% 115% at var(--hx, 100%) var(--hy, 0%), #000 0%, transparent 56%);
  -webkit-mask-composite: source-in;
  mask:
    url("../assets/img/hexgrid-blue-v6.svg") 0 0 / 60px 34.64px repeat,
    radial-gradient(115% 115% at var(--hx, 100%) var(--hy, 0%), #000 0%, transparent 56%);
  mask-composite: intersect;
}
.services::before { background: var(--tone-a); }
.why::before      { background: var(--tone-c); --hx: 0%; --hy: 100%; }
.quotes::before   { background: var(--tone-b); }
.faqs::before     { background: var(--tone-d); --hx: 0%; }
.links::before    { background: var(--tone-a); --hy: 100%; }

/* ---- fixes ------------------------------------------------------------- */
/* "Read all testimonials" was inheriting the old dark-section white */
.quotes .quotes__cta { color: var(--accent); }
/* primary CTA: secondary-colour arrow (orange in A, blue in B) */
.btn--accent .btn__arrow { color: var(--tone-b); }

/* ---- regulator logo strip / reel (v7 variant) ------------------------- */
.reel { border-block: 1px solid var(--line); background: color-mix(in srgb, var(--accent-tint) 42%, var(--bg-sink)); }
.reel__inner { max-width: calc(var(--maxw) + 2 * var(--pad)); margin-inline: auto;
  padding: 18px var(--pad); display: flex; align-items: center; gap: clamp(18px, 4vw, 52px); flex-wrap: wrap; }
.reel__label { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-700); flex-shrink: 0; }
.reel__track { display: flex; align-items: center; gap: clamp(26px, 5vw, 64px); flex: 1; flex-wrap: wrap; }
.reel__logo { height: clamp(24px, 3vw, 36px); width: auto; opacity: .7; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease; }
.reel__logo:hover { opacity: 1; filter: none; }

/* =====================================================================
   v6.2 — cards adopt the premium "contact-card" style (clean surface,
   whisper-teal border, soft shadow). Colour lives in the section
   backgrounds, not the cards. Plus an outline-only option to compare.
   ===================================================================== */
.card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  box-shadow: var(--shadow);
  color: var(--ink);
}
.card h3, .card__body { color: var(--ink); }
.card__icon, .card__index, .card__go { color: var(--accent); }
.card__tags span::before { color: var(--accent); }
.card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

/* quote + link cards: teal accents on the clean surface */
.qcard__avatar { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.qcard blockquote, .qcard figcaption strong { color: var(--ink); }
.links__src { color: var(--accent); }

/* outline-only variant — review toggle: body[data-cards="outline"] */
[data-cards="outline"] .card {
  background: transparent !important; box-shadow: none !important;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)) !important;
}
[data-cards="outline"] .card:hover {
  transform: translateY(-3px); box-shadow: none !important;
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent-tint) 26%, transparent) !important;
}

/* =====================================================================
   v6 FINAL — aligned to the signed-off Figma.
   Blue palette · seamless vertical gradients (no stripey blocks) ·
   minimal white cards (soft shadow, lift on hover) · minimal links grid ·
   blue footer. (Appended last so it wins the cascade.)
   ===================================================================== */

/* ---- one continuous vertical gradient across the whole page ----------- */
/* sections are transparent so this flows seamlessly between them          */
body {
  background:
    linear-gradient(180deg,
      #FBFDFF 0%, #EEF3FB 14%, #F2F6FD 30%, #E9F0FB 46%,
      #F3F6FE 62%, #E8EFFB 78%, #EFF4FD 92%, #E9F1FC 100%) no-repeat;
  background-size: 100% 100%;
}
.hero, .trust, .reel, .services, .why, .quotes, .faqs, .links, .about, #contact {
  background: transparent !important;
  border-block: 0 !important;
}
/* keep subtle per-section hex texture, recoloured uniform blue */
.services::before, .why::before, .quotes::before, .faqs::before, .links::before {
  background: var(--accent); opacity: .14;
}

/* ---- hero touches ----------------------------------------------------- */
.hero .stat-figure span { color: var(--accent-2); }          /* the "+" is cyan secondary */
.hero__scroll-line::after { background: var(--accent); }
.btn--accent .btn__arrow { color: var(--accent-2-soft); }    /* light-cyan arrow on the blue pill */

/* ---- trust strip / logo reel: light, blends into the gradient --------- */
.trust__label, .reel__label { color: var(--accent-700); }
/* reel border is set in the v6.4 block (top + bottom stroke) */
.reel__logo { filter: grayscale(1); opacity: .68; }
.reel__logo:hover { filter: none; opacity: 1; }

/* ---- service cards: soft shadow at rest, lift + raise on hover -------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.card h3, .card__body { color: var(--ink); }
.card__icon, .card__index, .card__go, .card__tags span::before { color: var(--accent); }
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

/* ---- testimonials: outline at rest → white fill + shadow on hover ----- */
.qcard {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: none;
}
.qcard:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: var(--shadow);
  transform: translateY(-6px);
}
.qcard__avatar { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.qcard blockquote, .qcard figcaption strong { color: var(--ink); }

/* ---- helpful links: minimal grid (rows + hairlines), not boxes -------- */
.links__grid { gap: 0; border-top: 1px solid var(--line); }
.links__card {
  background: transparent !important; box-shadow: none !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 0; padding: 22px clamp(8px, 2vw, 26px);
  transition: background .25s ease, padding .25s ease;
}
.links__card:nth-child(odd) { border-right: 1px solid var(--line) !important; }
.links__card:hover {
  transform: none !important; box-shadow: none !important;
  background: color-mix(in srgb, var(--accent-tint) 45%, transparent) !important;
  padding-left: clamp(16px, 2.4vw, 34px);
}
.links__name { order: 1; color: var(--ink); font-weight: 500; }
.links__src { order: 2; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
@media (max-width: 760px) { .links__card:nth-child(odd) { border-right: 0 !important; } }

/* ---- FAQs: open item gets a soft blue offset -------------------------- */
.faq.is-open { background: color-mix(in srgb, var(--accent-tint) 55%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.faqs__cta { display: inline-flex; margin-top: clamp(20px, 2.5vw, 30px); }

/* ---- Why Solas: full-bleed image (bleeds to the right viewport edge) -- */
.why__media { margin: 0; border-radius: 0; box-shadow: none; }
.why__media img { width: 100%; height: 100%; object-fit: cover; }
.why__media::after { box-shadow: none; }
@media (min-width: 1081px) {
  .why { overflow: clip; }
  .why.section-pad { padding-right: 0; }
  .why__layout {
    max-width: none; margin: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46vw);
    gap: clamp(30px, 4vw, 64px); align-items: stretch;
  }
  .why__content {
    max-width: calc(var(--maxw) * 0.52);
    margin-left: max(var(--pad), calc((100% - var(--maxw)) / 2));
    padding-block: clamp(40px, 6vw, 96px);
  }
  .why__media { height: auto; min-height: 100%; border-radius: 0; }
}

/* ---- footer: blue gradient, standard (blue) logo, light text ---------- */
.footer {
  background: linear-gradient(120deg, #174585 0%, #0C2A54 52%, #071A34 100%) !important;
  color: rgba(255,255,255,0.86); border: 0 !important;
}
.footer .gridfield, .footer__spot { display: none; }
.footer__top { border-bottom-color: rgba(255,255,255,0.18); }
.footer__tag { color: rgba(255,255,255,0.7); }
.footer__col .eyebrow { color: var(--accent-2-soft); }
.footer__col a, .footer__base, .footer__base a { color: rgba(255,255,255,0.78); }
.footer__col a:hover, .footer__base a:hover { color: #fff; }

/* ---- remove the review switcher entirely ----------------------------- */
.tools, [data-tools] { display: none !important; }

/* =====================================================================
   v6.3 — FIGMA ALIGNMENT (node 1:592). Appended last; overrides above.
   ===================================================================== */

/* ---- eyebrows become CHIPS (1px blue pill + hex marker) --------------- */
.eyebrow { border: 1px solid var(--accent); border-radius: 12px; padding: 4px 16px; gap: 9px;
  color: var(--accent); background: transparent; }
.eyebrow::before { background: var(--accent); }
.eyebrow--plain { border: 0; padding: 0; border-radius: 0; }
p.eyebrow { margin-bottom: 18px; }

/* ---- hero: near-white ground; the 100+ "+" is Figma blue #3F83E2 ------ */
.hero { background: #ffffff !important; }   /* !important: beats the page-gradient reset at the 'transparent' group */
.hero .stat-figure span, .hero__stat .stat-figure span { color: #2C63B3; }

/* ---- partner logo reel: soft-outlined bar on the hero bg, colour, centred, bigger -- */
.reel { background: transparent; border: 0; padding: 16px var(--pad) 22px; }
.reel__inner { background: #FEFEFF; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm);
  padding: 14px clamp(20px, 3vw, 40px); gap: clamp(16px, 3vw, 40px); }
.reel__label { color: #143B70; flex-shrink: 0; }
.reel__track { flex: 1; justify-content: center; gap: clamp(28px, 5vw, 60px); }
.reel__logo { height: auto; max-height: clamp(30px, 3.4vw, 44px); max-width: clamp(86px, 9vw, 116px); width: auto; object-fit: contain; filter: none; opacity: 1; }
@media (max-width: 760px) { .reel__inner { flex-direction: column; } .reel__track { justify-content: center; } }

/* ---- services: the important vertical gradient; NO hex texture --------- */
.services { background: linear-gradient(180deg, rgba(255,255,255,0.7) 1%, rgba(212,222,242,0.7) 84%), #ffffff; }
.services::before { display: none; }
/* service cards: white, 2px BLUE outline by default, lift on hover ------ */
.services .card { background: #fff; border: 2px solid #4786E6; box-shadow: none; }
.services .card:hover { border-color: var(--accent); transform: translateY(-4px);
  box-shadow: 0 16px 32px -16px rgba(28,86,166,0.32); }
.services .card__icon, .services .card__index, .services .card__go { color: var(--accent); }
.services .card__tags span::before { color: var(--accent); }

/* ---- CTA arrow-links: navy text, lighter-blue arrow ------------------- */
.arrow-link { color: #0A2448; }
.arrow-link .btn__arrow { color: #4786E6; }

/* ---- Why Solas: light-blue bg, hex top-left, FULL-BLEED taller image --- */
.why { background: #F3F5FE; }
.why::before { background: var(--accent); --hx: 0%; --hy: 0%; opacity: .34; }
.why__layout { align-items: stretch; gap: clamp(28px, 4vw, 64px); }
.why__content { align-self: center; }
.why__media { height: auto; min-height: clamp(440px, 50vw, 660px); border-radius: 0; align-self: stretch;
  margin-right: calc(-1 * max(var(--pad), (100vw - var(--maxw)) / 2)); box-shadow: none; }
.why__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.why__media::after { box-shadow: none; }
@media (max-width: 1080px) { .why__media { margin-right: 0; min-height: clamp(280px, 60vw, 420px); } }

/* ---- testimonials: 2-col (left heading / right 3 auto-rotating cards) -- */
.quotes { background: #F3F5FE; }
.quotes::before { display: none; }
.quotes__layout { max-width: var(--maxw); margin-inline: auto; display: grid;
  grid-template-columns: 0.82fr 1.9fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.quotes__head { position: sticky; top: 112px; }
.quotes__head h2 { font-size: clamp(28px, 3.1vw, 42px); max-width: 12ch; margin-top: 16px; color: var(--ink); }
.quotes__right { min-width: 0; }
.quotes__track { display: flex; gap: clamp(14px, 1.3vw, 18px); overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.quotes__track::-webkit-scrollbar { display: none; }
.qcard { flex: 0 0 calc((100% - 2 * clamp(14px,1.3vw,18px)) / 3); scroll-snap-align: start;
  min-height: 304px; background: #fff; border: 1px solid var(--accent-300); box-shadow: none; }
.qcard:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.qcard blockquote { color: var(--ink); font-size: clamp(14.5px, 1vw, 16px); line-height: 1.5; font-weight: 500; }
.qcard figcaption { margin-top: auto; }
.qcard__avatar { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.qcard figcaption strong { color: var(--ink); }
.quotes__controls { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.q-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); display: grid; place-items: center; cursor: pointer;
  font-size: 17px; transition: background .2s ease, color .2s ease; }
.q-btn:hover { background: var(--accent); color: #fff; }
.q-progress { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: var(--ink); margin-left: 6px; }
.quotes__controls .quotes__cta { margin-left: auto; color: #0A2448; }
@media (max-width: 1080px) { .quotes__layout { grid-template-columns: 1fr; } .quotes__head { position: static; }
  .quotes__head h2 { max-width: none; } .qcard { flex-basis: 78%; } }

/* ---- FAQs: V3 style — NO boxes, lighter bg, soft logo watermark right -- */
.faqs { background: #FFFFFF !important; position: relative; overflow: clip; }
.faqs::before { display: none; }
.faqs::after { content: ""; position: absolute; right: clamp(-40px, -2vw, -8px); top: 50%; transform: translateY(-50%);
  width: clamp(180px, 22vw, 300px); height: clamp(240px, 30vw, 400px); background: var(--accent); opacity: .05;
  pointer-events: none; z-index: 0;
  -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; }
.faqs__grid { position: relative; z-index: 1; }
.faq { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
.faq.is-open { background: transparent; border-color: var(--line); box-shadow: none; }
.faq__q { padding: 24px 0; }

/* ---- helpful links: minimal grid (rows + hairlines, not boxes) -------- */
.links { background: #F3F5FE; }
.links::before { display: none; }
.links__grid { border-top: 1px solid var(--line); }
.links__card { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  box-shadow: none; min-height: 0; padding: 22px clamp(6px, 1.6vw, 18px);
  flex-direction: row-reverse; align-items: baseline; justify-content: space-between; gap: 18px; }
.links__card:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.links__name { color: var(--ink); font-size: clamp(16px, 1.3vw, 18px); }
.links__src { color: var(--accent); white-space: nowrap; }

/* ---- contact: same vertical gradient as the services section ---------- */
#contact { background: linear-gradient(180deg, #FEFEFF 0%, #FFFFFF 38%, #D9E2F4 100%) !important; }

/* ---- footer: Figma blue gradient, white text, standard logo ----------- */
.footer { background: linear-gradient(120deg, #174585 0%, #0C2A54 52%, #071A34 100%); color: rgba(255,255,255,0.82); border-top: 0; }
.footer .gridfield, .footer__spot { display: none; }
.footer__tag { color: rgba(255,255,255,0.72); }
.footer__col .eyebrow { color: #C0D9FF; border: 0; padding: 0; }
.footer__col a, .footer__base, .footer__base a { color: rgba(255,255,255,0.78); }
.footer__col a:hover, .footer__base a:hover { color: #fff; }
.footer__top { border-bottom-color: rgba(255,255,255,0.18); }
.footer .brand__logo--footer img { height: clamp(48px, 4.6vw, 60px); }

/* ---- soft scroll-reveal also lifts the cards in ----------------------- */
.reveal-ready .card[data-reveal] { transition-duration: .6s; }

/* =====================================================================
   v6.4 — client review fixes (logo strip, cards, gradients, testimonials)
   ===================================================================== */

/* ---- logo strip: no card behind it — just a top + bottom stroke ------- */
.reel { background: transparent; border-top: 1px solid rgba(18,20,19,0.14) !important; border-bottom: 1px solid rgba(18,20,19,0.14) !important; padding: 18px var(--pad); }
body:not(.page) .reel { background: #ffffff !important; }   /* homepage only — merges hero→reel→services; inner pages keep the page ground */
.reel__inner { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0;
  align-items: center; }
.reel__track { align-items: center; }                 /* stop the logos stretching (GMC skew) */
.reel__logo { flex-shrink: 0; align-self: center; }
.reel__logo--gmc { max-height: clamp(40px, 4.4vw, 54px); max-width: clamp(52px, 5.5vw, 66px); }  /* square text mark — size by height */

/* ---- services: clearly-visible diagonal gradient ground --------------- */
.services { background: linear-gradient(162deg, #FFFFFF 0%, #FFFFFF 38%, #DCE4F5 100%); }

/* ---- service cards: black outline + no fill at rest; white + thicker
   blue stroke + shadow on hover (no layout shift via a box-shadow ring) -- */
.services .card { background: transparent; border: 1.5px solid var(--ink); box-shadow: none; }
.services .card:hover { background: #fff; border-color: var(--accent); transform: translateY(-4px);
  box-shadow: 0 0 0 1.5px var(--accent), 0 18px 36px -16px rgba(10,36,72,0.30); }

/* ---- Why Solas: hex fades out earlier and is fainter ------------------- */
.why::before { opacity: .18;
  -webkit-mask: url("../assets/img/hexgrid-blue-v6.svg") 0 0 / 60px 34.64px repeat,
    radial-gradient(76% 76% at 0% 0%, #000 0%, transparent 40%);
  -webkit-mask-composite: source-in;
  mask: url("../assets/img/hexgrid-blue-v6.svg") 0 0 / 60px 34.64px repeat,
    radial-gradient(76% 76% at 0% 0%, #000 0%, transparent 40%);
  mask-composite: intersect; }

/* ---- testimonials: tighter to the section above; subtext; cards; arrows  */
.quotes { padding-top: clamp(44px, 5vw, 70px); overflow: visible; }
.quotes__sub { font-size: 17px; line-height: 1.5; color: var(--ink); margin-top: 14px; max-width: 26ch; }
.quotes__right { overflow: visible; }
.quotes__track { align-items: stretch; padding: 14px 6px 40px; }   /* room so hover shadow isn't clipped */
.qcard { background: #fff; border: 2px solid #6C96D9; box-shadow: 0 8px 16px -8px rgba(10,36,72,0.18); min-height: 262px; }
.qcard:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 18px 32px -14px rgba(10,36,72,0.28); }
/* arrows must read on the light section (override the old dark-section rules) */
.quotes .q-btn { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.quotes .q-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.quotes .q-progress { color: var(--ink); }
.quotes .quotes__cta { color: #0A2448; margin-left: auto; }   /* read-all sits right */

/* ---- FAQ watermark: anchored high so its top sits above the questions -- */
.faqs::after { top: clamp(-16px, 1.5vw, 24px); transform: none; }

/* =====================================================================
   v6.5 — logo reel as a smooth, seamless marquee (more spacing) --------- */
.reel__inner { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(20px, 3vw, 44px);
  max-width: var(--maxw); margin-inline: auto; }
.reel__label { flex-shrink: 0; }
.reel__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
/* uniform wide gaps so one copy is wider than the viewport — only ~4 logos
   ever show at once (no logo repeats on screen), spacing uniform incl. seam */
.reel__track { display: flex; width: max-content; animation: reelScroll 30s linear infinite; will-change: transform; }
.reel__group { display: flex; align-items: center; flex-shrink: 0;
  gap: clamp(120px, 13vw, 200px); padding-right: clamp(120px, 13vw, 200px); }
@keyframes reelScroll { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) {
  .reel__track { animation: none; }
  .reel__group:nth-child(n+2) { display: none; }
}

/* =====================================================================
   v6.6 — services: bring back the gradient + correct white/blue cards
   + hard right-align the index. (!important beats the grouped overrides.)
   ===================================================================== */
.services { background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 38%, #D9E2F4 100%) !important; }

/* service cards: WHITE fill + 2px BLUE stroke as the base (not the
   testimonials' transparent/ink treatment); slight shadow at rest that
   grows on hover */
.services .card { background: #ffffff !important; border: 2px solid #4786E6 !important;
  box-shadow: 0 6px 18px -10px rgba(28,86,166,0.22) !important; }
.services .card:hover { background: #ffffff !important; border-color: #174585 !important;
  transform: translateY(-4px); box-shadow: 0 20px 38px -16px rgba(23,69,133,0.34) !important; }
.services .card__icon, .services .card__index, .services .card__go { color: var(--accent) !important; }
.services .card__tags span::before { color: var(--accent) !important; }

/* the 01/02/03 index sits hard right; the hover arrow overlays it (taken
   out of flow) so it can't push the number to the middle */
.services .card__head { position: relative; }
.services .card__index { margin-left: auto; }
.services .card__go { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.services .card:hover .card__go { transform: translateY(-50%); }
@media (max-width: 760px) {
  .reel__inner { flex-direction: column; gap: 12px; }
  .reel__viewport { width: 100%; flex: none; }
}

/* =====================================================================
   v6.7 — Why Solas: image FULL-BLEED (top + bottom + right); stronger hex
   ===================================================================== */
.why { position: relative; isolation: isolate; overflow: clip; }
.why.section.section-pad { padding: 0 !important; }     /* drop section padding so the image bleeds */
.why__layout { display: flex !important; justify-content: flex-start !important; align-items: center; gap: 0;
  width: 100% !important; box-sizing: border-box;
  min-height: clamp(260px, 25vw, 340px);    /* image height = text + the padding spacing */
  padding: clamp(36px, 4vw, 56px) var(--pad) !important;
  max-width: calc(var(--maxw) + 2 * var(--pad)) !important; margin-inline: auto !important; }
.why__content { max-width: min(48%, 560px) !important; margin: 0 !important; align-self: center; }
.why__media { position: absolute; top: 0; right: 0; bottom: 0; left: auto;
  width: 45vw; height: auto; min-height: 0; margin: 0; border-radius: 0; box-shadow: none; }
.why__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.why__media::after { display: none; }
/* stronger, clearer hex (position unchanged — top-left corner) */
.why::before { opacity: .55 !important; }
@media (max-width: 1080px) {
  .why__layout { flex-direction: column; padding: 0; min-height: 0; }
  .why__media { position: static; width: 100%; height: clamp(240px, 56vw, 380px); order: 0; }  /* image below the text */
  .why__content { max-width: none !important; padding: clamp(40px, 8vw, 60px) var(--pad); }     /* !important to beat the desktop 48% cap */
}

/* Why image: clip the oversized (parallax) image; bottom-up fade-in load-in */
.why__media { overflow: hidden; }
.reveal-ready .why__media[data-reveal] { opacity: 0; transform: translateY(46px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.reveal-ready .why__media[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .why__media img { transform: none !important; } }

/* =====================================================================
   v6.8 — testimonials: 5 stars, quote marks, outline->fill cards -------- */
/* stars sit directly below the eyebrow pill, above the heading */
.quotes__head .eyebrow { margin-bottom: 14px !important; }
.quotes__stars { display: flex; gap: 4px; margin: 0 0 18px; color: #3F83E2; }
.quotes__stars .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 1, 'wght' 500; }

/* cards: white fill + soft grey stroke at rest -> blue outline + deeper shadow on hover */
.qcard { position: relative; background: #ffffff !important; border: 1px solid #E3E6EC !important;
  box-shadow: 0 4px 14px -8px rgba(10,36,72,0.10) !important; }
.qcard:hover { background: #ffffff !important; border-color: var(--accent) !important;
  box-shadow: 0 20px 38px -14px rgba(10,36,72,0.30) !important; transform: translateY(-4px); }

/* decorative quote mark */
.qcard__mark { display: block; font-family: var(--font-head); font-weight: 700; font-size: 50px;
  line-height: 0.66; height: 24px; color: #6C96D9; }

/* name BLACK (not blue); tighter role line spacing */
.qcard figcaption strong { color: var(--ink) !important; }
.qcard figcaption strong + span { display: block; line-height: 1.25 !important; color: var(--ink-micro); }

/* nav arrows: white fill at rest, blue fill on hover; no lift on hover */
.quotes .q-btn { background: #ffffff !important; border: 1px solid var(--accent) !important; color: var(--accent) !important; }
.quotes .q-btn:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #ffffff !important; transform: none !important; }

/* "See all testimonials" sits flush-right with the cards.
   The old full-width rule (.quotes__cta { margin: .. auto 0 }) centred it inside
   the controls row and pushed it down — override the full margin box here. */
.quotes__controls .quotes__cta { margin: 0 0 0 auto !important; max-width: none !important; }

/* =====================================================================
   v6.9 — regulatory context: hex pattern in top-left + bottom-right ----- */
.links { position: relative; isolation: isolate; overflow: clip; }
.links > * { position: relative; z-index: 1; }
.links::before, .links::after {
  content: ""; display: block; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .5; background: var(--accent);
  -webkit-mask:
    url("../assets/img/hexgrid-blue-v6.svg") 0 0 / 60px 34.64px repeat,
    radial-gradient(58% 70% at var(--hx) var(--hy), #000 0%, transparent 62%);
  -webkit-mask-composite: source-in;
  mask:
    url("../assets/img/hexgrid-blue-v6.svg") 0 0 / 60px 34.64px repeat,
    radial-gradient(58% 70% at var(--hx) var(--hy), #000 0%, transparent 62%);
  mask-composite: intersect;
}
.links::before { --hx: 0%;   --hy: 0%;   }   /* top-left  */
.links::after  { --hx: 100%; --hy: 100%; }   /* bottom-right */

/* ---- mobile: hex textures read too big / too heavy on small screens ----
   Applies to every section hex, not just the links block. Fainter + a smaller,
   corner-concentrated radial so the pattern stays a subtle accent on phones. */
@media (max-width: 640px) {
  .services::before, .why::before, .quotes::before, .faqs::before,
  .links::before, .links::after {
    opacity: .2 !important;
    -webkit-mask:
      url("../assets/img/hexgrid-blue-v6.svg") 0 0 / 46px 26.56px repeat,
      radial-gradient(circle 230px at var(--hx, 100%) var(--hy, 0%), #000 0%, transparent 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask:
      url("../assets/img/hexgrid-blue-v6.svg") 0 0 / 46px 26.56px repeat,
      radial-gradient(circle 230px at var(--hx, 100%) var(--hy, 0%), #000 0%, transparent 100%) !important;
    mask-composite: intersect !important;
  }
  /* Why section: ease the outlined-hex corner grids */
  .why__grid-deco--tr, .why__grid-deco--bl { opacity: .15 !important; }
}

/* CTA links: hover underline sits under the text label only, never the arrow.
   The text is wrapped in .arrow-link__label and the underline is applied there
   (see .arrow-link:hover .arrow-link__label) instead of on the whole link. */

/* =====================================================================
   V7 — service cards: photo fading to white, pill chips, staggered
   cascade, reveal one-by-one ---------------------------------------- */

/* cards sit at their own (staggered) heights, not stretched to match;
   a touch narrower with a little more space between them */
.services__grid { align-items: start; gap: clamp(24px, 2.5vw, 36px); max-width: 1040px; margin-inline: auto; }  /* cards narrower + centred; heading keeps the full margin */

/* card shell: white, rounded, soft shadow, no border; content bottom-aligned */
/* No overflow:hidden here — the rounded clip lives on .card__media instead, so
   the hover lift never re-clips the card (that re-clip was the glitchy line).
   Fast, snappy transition (!important beats the reveal's .6s duration rule). */
.services .card {
  position: relative; isolation: isolate;
  min-height: clamp(330px, 26vw, 392px);
  justify-content: flex-end;
  padding: 24px 22px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 28px -18px rgba(10,36,72,0.20) !important;
  transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease !important;
}
/* hover lift + deeper shadow (!important beats the reveal's resting transform) */
.services .card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 26px 46px -22px rgba(10,36,72,0.30) !important;
}
.services .card--invert:hover { background: #467ACE !important; }
.services .card--tint:hover { background: #E8F6FF !important; }

/* trim the section so it sits better in the viewport */
.services.section-pad { padding-block: clamp(52px, 6vw, 88px); }
.services .head--svc { margin-bottom: clamp(20px, 2.6vw, 36px); }

/* consistent section headings across the whole page (~42px on desktop) */
.head h2, .head--svc h2, .why__content h2, .quotes h2, .quotes__head h2,
.faqs__intro h2, .contact__intro h2, .about__text h2, .doctors__text h2,
.band__copy h2 { font-size: clamp(28px, 3.1vw, 42px) !important; }

/* photo band across the top, fading into the card colour; content sits below.
   A band (not the full card) lets the landscape photos frame naturally. */
/* media covers the WHOLE card (no mid-card element edge to shimmer on hover);
   the image sits in a band at the top and the gradient fades it into the card
   colour, then fills the lower half with that colour — one seamless surface. */
.services .card__media { position: absolute; inset: 0;
  z-index: 0; pointer-events: none; overflow: hidden; border-radius: 20px; }
/* parallax uses the independent `translate` property and the hover zoom uses
   `scale`, so the zoom can transition smoothly without smoothing the (per-scroll)
   parallax translate. */
.services .card__media img { position: absolute; left: 0; right: 0; top: -8%;
  width: 100%; height: 64%; object-fit: cover; object-position: center 45%;
  translate: 0 var(--py, 0px); scale: 1; backface-visibility: hidden;
  transition: scale .7s cubic-bezier(.2, .7, .2, 1); }
.services .card:hover .card__media img { scale: 1.07; }   /* zoom the photo in on hover */
.services .card__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 12%, #ffffff 44%); }
.services .card > *:not(.card__media) { position: relative; z-index: 1; }

/* chips as light-blue pills; three shades by position (Figma), ink #51544f */
.services .card__tags { margin-top: 18px !important; padding-top: 0 !important; gap: 6px !important;
  min-height: 53px; align-content: flex-end; }   /* reserve 2 chip-rows so a wrapping card doesn't push its icon/title up out of line with the others */
.services .card__tags span { padding: 3px 9px; border-radius: 20px;
  color: #51544f; font-size: 13px; line-height: 1.35; }
.services .card__tags span:nth-child(1) { background: #E4F2FF; }
.services .card__tags span:nth-child(2) { background: #C0DBFC; }
.services .card__tags span:nth-child(3) { background: #B5CFF6; }
/* on the light-blue card, the lightest chip blends in — make it white */
.services .card--tint .card__tags span:nth-child(1) { background: #ffffff; }
.services .card__tags span::before { display: none; }

/* body copy fills the card width; reserve 4 lines so differing wrap counts
   never push the titles/icons out of line across the three cards */
.services .card__body { line-height: 1.6; min-height: 6.4em; }

/* ---- colour variants (Figma): 1 = inverted blue, 3 = light-blue tint --- */
.services .card--invert { background: #467ACE !important; }
.services .card--invert .card__media::after {
  background: linear-gradient(180deg, rgba(70,122,206,0) 20%, #467ACE 50%); }
.services .card--invert h3,
.services .card--invert .card__body,
.services .card--invert .card__icon,
.services .card--invert .card__index,
.services .card--invert .card__go { color: #ffffff !important; }

.services .card--tint { background: #E8F6FF !important; }
.services .card--tint .card__media::after {
  background: linear-gradient(180deg, rgba(232,246,255,0) 20%, #E8F6FF 50%); }

/* v7 final: no cascade — all three cards sit in one row at the same level */
.services__grid { align-items: stretch !important; }
.services__grid > .card:nth-child(2) { margin-top: 0; }
.services__grid > .card:nth-child(3) { margin-top: 0; }

/* reveal one-by-one via a keyframe ANIMATION (not a transition) so the stagger
   delay is on the animation and never leaks into the hover transition.
   `backwards` fill holds the hidden state during each card's delay; after the
   animation the card reverts to its resting transform so hover can lift it. */
@keyframes svcReveal { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }
.reveal-ready .services__grid > .card[data-reveal] { opacity: 0; }
.reveal-ready .services__grid > .card[data-reveal].is-in {
  opacity: 1; animation: svcReveal .6s cubic-bezier(.22,.61,.36,1) backwards;
}
.reveal-ready .services__grid > .card:nth-child(2)[data-reveal].is-in { animation-delay: .13s; }
.reveal-ready .services__grid > .card:nth-child(3)[data-reveal].is-in { animation-delay: .26s; }

@media (max-width: 1080px) {
  .services__grid > .card:nth-child(2),
  .services__grid > .card:nth-child(3) { margin-top: 0; }
}

/* =====================================================================
   V7 — hero headline: each word is its own line-slot. Words start hidden and
   slide IN from the left (staggered top-to-bottom) on load; on each swap the
   old word slides OUT to the right (line 1 then line 2) and only once it's
   gone does the new one slide IN from the left. Fixed-height slots = no shift.
   The whole thing (incl. "Your organisation's") loads in the same way. */
.hero__ln { position: relative; display: block; height: 1.05em; }
.hero__word { position: absolute; left: 0; top: 0; white-space: nowrap;
  opacity: 0; transform: translateX(-0.4em);           /* default: waiting on the LEFT */
  transition: opacity .6s ease, transform .6s cubic-bezier(.4, 0, .2, 1); }
.hero__word.is-active { opacity: 1; transform: translateX(0); }        /* live, centred */
.hero__word.is-out { opacity: 0; transform: translateX(0.4em); }       /* gone to the RIGHT */
@media (prefers-reduced-motion: reduce) {
  .hero__word { transition: none; }
  .hero__word:first-child { opacity: 1; transform: none; }             /* static fallback */
}

/* =====================================================================
   V7 — Why Solas: the photo is revealed only inside a movable plus lens.
   Outside the plus it's the section colour, so the image "hides" until the
   plus (which drifts by default and follows the cursor) passes over it.
   The plus mask (two crossed bands) is sized/positioned inline by JS. */
/* transparent (not a flat #F3F5FE patch) so the media shows the SAME body
   gradient as the text side — outside the plus it blends into the section */
.why__media[data-why-lens] { background: transparent; cursor: none; }

/* =====================================================================
   V7 — regulatory context darker bg + "Let's get connected" banner ---- */
/* darker regulatory-context background (from the updated Figma) */
.links { background: #DCE5F5 !important; }

/* full-width gradient banner marquee below the regulatory context */
.cbanner { overflow: hidden; background: linear-gradient(90deg, #6093DA 0%, #1B3979 100%); --cb-op: 0.5; }
.cbanner__track { display: flex; width: max-content; will-change: transform;
  animation: cbannerScroll 26s linear infinite; }
/* fixed strip height so the logo mark can grow within it without making the
   strip taller; font-size on the group so the hex (a sibling of the phrase)
   inherits the large size */
.cbanner__group { display: flex; align-items: center; flex-shrink: 0;
  height: clamp(56px, 5.8vw, 88px); font-size: clamp(22px, 3.9vw, 56px); }
.cbanner__phrase { display: inline-flex; align-items: center; white-space: nowrap; height: 100%;
  font-weight: 400; line-height: 1; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, var(--cb-op)); }
.cbanner__phrase b, .cbanner__phrase--b { font-weight: 700; }
.cbanner__mark { height: 82%; width: auto; margin-right: 0.22em;
  filter: brightness(0) invert(1); opacity: var(--cb-op); }
.cbanner__hex { height: 0.4em; width: auto; margin: 0 clamp(28px, 3.4vw, 56px);
  filter: brightness(0) invert(1); opacity: var(--cb-op); }
@keyframes cbannerScroll { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) {
  .cbanner__track { animation: none; }
  .cbanner__group:not(:first-child) { display: none; }
}

/* =====================================================================
   V7.1 — nav "Services" dropdown -------------------------------------- */
.nav__drop { position: relative; }
.nav__drop-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.nav__drop-caret { width: 8px; height: 8px; margin-top: -4px; flex-shrink: 0;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease; }
.nav__drop:hover .nav__drop-caret,
.nav__drop:focus-within .nav__drop-caret { transform: rotate(225deg) translate(-2px, -2px); }

/* panel opens on hover / keyboard focus; padding-top bridges the hover gap */
.nav__drop-menu { position: absolute; top: 100%; left: -16px; padding-top: 14px; min-width: 284px;
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; z-index: 60;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s linear .25s; }
.nav__drop:hover .nav__drop-menu,
.nav__drop:focus-within .nav__drop-menu { opacity: 1; visibility: visible; transform: none;
  pointer-events: auto; transition-delay: 0s; }
.nav__drop-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 8px; display: grid; gap: 2px; }
.nav__links .nav__drop-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 10px; font-size: 15.5px; font-weight: 500; color: var(--ink) !important; opacity: 1;
  transition: background .2s ease, color .2s ease; }
.nav__links .nav__drop-item::after { display: none; }   /* no underline animation inside the panel */
.nav__links .nav__drop-item:hover { background: var(--accent-tint); color: var(--accent-700) !important; }
.nav__drop-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.nav__drop-soon { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
  padding: 3px 9px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-700); }

/* mobile menu: indented service sub-links under "Services" */
.mobile-menu__head { padding: 15px 0 4px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.mobile-menu .mobile-menu__sub { display: flex; align-items: center; gap: 10px;
  padding: 13px 0 13px 20px; font-size: 16px; }
.mobile-menu .mobile-menu__sub .nav__drop-num { font-size: 11.5px; }
.mobile-menu .mobile-menu__sub .nav__drop-soon { margin-left: auto; }

/* =====================================================================
   V7.2 — dropdown items carry the service icons (not index numbers) -- */
.nav__drop-ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent);
  display: inline-grid; place-items: center; }
.nav__drop-ico svg { width: 20px; height: 20px; }
.mobile-menu .mobile-menu__sub .nav__drop-ico { width: 20px; height: 20px; }

/* =====================================================================
   V7.3 — footer hex texture: top-right + bottom-left (all pages) ------- */
.footer::before, .footer::after { content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; background: #ffffff; opacity: .26;
  -webkit-mask: url("../assets/img/hexgrid-blue-v6.svg") 0 0 / 60px 34.64px repeat,
    radial-gradient(44% 60% at var(--hx) var(--hy), #000 0%, transparent 58%);
  -webkit-mask-composite: source-in;
  mask: url("../assets/img/hexgrid-blue-v6.svg") 0 0 / 60px 34.64px repeat,
    radial-gradient(44% 60% at var(--hx) var(--hy), #000 0%, transparent 58%);
  mask-composite: intersect; }
.footer::before { --hx: 100%; --hy: 0%; }   /* top-right */
.footer::after  { --hx: 0%;   --hy: 100%; }  /* bottom-left */
.footer__inner { position: relative; z-index: 2; }