/* generated by tools/build.py from site.json. Do not edit; edit site.json. */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/source-sans-3-600.woff') format('woff'); }
@font-face { font-family: 'Source Sans 3 Fallback'; src: local('Arial'); size-adjust: 100%; }

:root {
  --c-ink: #25232A;
  --c-muted: #66616C;
  --c-brand: #281140;
  --c-brand-deep: #170a26;
  --c-brand-soft: #4a2568;
  --c-accent: #59BEAD;
  --c-accent-strong: #2f7a68;
  --c-accent-light: #a8e6d7;
  --c-accent-on: #1c0e2c;
  --c-surface: #F8F7F3;
  --c-surface-alt: #e6e1d3;
  --c-surface-white: #ffffff;
  --c-on-dark: #f6f3ea;
  --c-on-dark-muted: #cdbfd6;
  --c-brand-rgb: 40, 17, 64;
  --c-brand-deep-rgb: 23, 10, 38;
  --c-accent-rgb: 89, 190, 173;
  --c-ink-rgb: 37, 35, 42;
  --accent-metal: linear-gradient(104deg, #2f7a68 0%, #3d9986 25%, #56c1a7 50%, #7ed4bf 75%, #a8e6d7 100%);
  --font-display: 'Source Sans 3', 'Source Sans 3 Fallback', Arial, sans-serif;
  --font-text: 'Source Sans 3', 'Source Sans 3 Fallback', Arial, sans-serif;
  --display-weight: 600;
  --btn-radius: 8px;
  --card-radius: 12px;
}

/* Launch Automation studio kit - design system.
   Theme tokens (colors, fonts, radius) are generated from site.json and prepended by build.py.
   This file only ever references semantic tokens, never raw hex, so a new client is a
   site.json change, not a CSS rewrite. Motion: transform and opacity only.
   Lineage: Ascend Financial Wellness Group (Shah + Corey, 2026-09) generalized. */

/* Extra static weights for Source Sans 3 (theme_css() only auto-generates the 600 face used
   for headings; body text at 400 and bold body/emphasis at 700 are added here). */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/source-sans-3-400.woff') format('woff'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/source-sans-3-700.woff') format('woff'); }

:root {
  --surface: var(--c-surface);
  --surface-alt: var(--c-surface-alt);
  --surface-white: var(--c-surface-white);
  --text: var(--c-ink);
  --text-muted: var(--c-muted);
  --heading: var(--c-brand);
  --line: rgba(var(--c-brand-rgb), 0.14);
  --line-on-dark: rgba(255, 255, 255, 0.16);
  --shadow-sm: 0 1px 2px rgba(var(--c-brand-deep-rgb), 0.06), 0 8px 20px -12px rgba(var(--c-brand-deep-rgb), 0.22);
  --shadow: 0 1px 2px rgba(var(--c-brand-deep-rgb), 0.05), 0 16px 40px -18px rgba(var(--c-brand-deep-rgb), 0.28);
  --shadow-lg: 0 2px 4px rgba(var(--c-brand-deep-rgb), 0.06), 0 30px 60px -24px rgba(var(--c-brand-deep-rgb), 0.38);
  --focus-ring: 0 0 0 3px var(--surface-white), 0 0 0 6px var(--c-accent);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 700ms;

  --section-pad: clamp(4rem, 8vw, 8.5rem);
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 76px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--surface); color: var(--text);
  font-family: var(--font-text); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.125rem); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
::selection { background: var(--c-accent-light); color: var(--c-brand-deep); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--c-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul { padding-left: 1.2em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight); margin: 0 0 0.5em; color: var(--heading); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem); line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.3rem, 1.12rem + 0.8vw, 1.8rem); line-height: 1.22; letter-spacing: -0.01em; }
h4 { font-family: var(--font-text); font-weight: 700; font-size: 1.05rem; line-height: 1.35; letter-spacing: 0; }
.lead { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55; color: var(--text-muted); max-width: 60ch; }
.pull-quote { margin: 1.5rem 0 0; padding-left: clamp(1rem, 2vw, 1.5rem); border-left: 3px solid var(--c-brand); font: var(--display-weight) clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem)/1.4 var(--font-display); color: var(--heading); }
.measure { max-width: 66ch; }
.num { font-variant-numeric: tabular-nums; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--c-brand); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* Accent words: 2 or 3 words per headline in the metallic accent. Wrap them in <em>. */
h1 em, h2 em, h3 em, .accent-text {
  --metal: var(--accent-metal);
  font-style: normal; background: var(--metal); background-size: 200% 100%; background-position: 0 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
/* On dark ground the metal runs light-to-lighter so every letter clears contrast. */
.tone-dark em, .hero:not(.hero--split):not(.hero--veil) h1 em, .cta-scene h2 em {
  --metal: linear-gradient(104deg, var(--c-accent-light) 0%, color-mix(in srgb, var(--c-accent-light) 55%, #fff) 30%, var(--c-accent-light) 55%, var(--c-accent) 100%);
  filter: drop-shadow(0 2px 10px rgba(var(--c-brand-deep-rgb), 0.5));
}
.js h1 em[data-sheen] { animation: sheen 2.4s var(--ease-in-out) 0.5s 1 both; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; }
.section { padding-block: var(--section-pad); position: relative; isolation: isolate; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-head { max-width: 64ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head > p { color: var(--text-muted); font-size: 1.08rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center > p { margin-inline: auto; }
.section-head--split { max-width: none; display: grid; gap: 1rem 4rem; align-items: end; }
@media (min-width: 960px) { .section-head--split { grid-template-columns: 1.1fr 1fr; } .section-head--split > p { margin: 0; } }
.rule { width: 56px; height: 3px; border-radius: 2px; background: var(--accent-metal); margin: 0 0 1.4rem; border: 0; }
.section-head--center .rule { margin-inline: auto; }

/* Tones. Never flat: each surface carries a soft gradient. Alternate them, light first under the hero. */
.tone-light { background: radial-gradient(120% 90% at 8% 0%, var(--surface-white) 0%, var(--surface) 55%, color-mix(in srgb, var(--surface) 90%, var(--c-brand) 10%) 140%); }
.tone-white { background: linear-gradient(180deg, var(--surface-white) 0%, color-mix(in srgb, var(--surface-white) 70%, var(--surface) 30%) 100%); }
.tone-alt { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-alt) 60%, var(--surface-white) 40%) 0%, var(--surface-alt) 100%); }
.tone-dark { color: var(--c-on-dark); background: radial-gradient(90% 80% at 88% 8%, var(--c-brand-soft) 0%, var(--c-brand) 45%, var(--c-brand-deep) 100%); }
.tone-dark h1, .tone-dark h2, .tone-dark h3, .tone-dark h4 { color: #fff; }
.tone-dark p, .tone-dark .lead, .tone-dark .section-head > p { color: var(--c-on-dark-muted); }
.tone-dark a:not(.btn) { color: var(--c-accent-light); }
.tone-grain::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }

/* Opaque content panel for a section carrying a background photo/graphic, so text
   always sits on a guaranteed-contrast surface instead of the raw image. */
.bg-panel--ivory { position: relative; background: var(--surface); border-radius: 20px; padding: 72px; box-shadow: var(--shadow-lg); }
.bg-panel--ivory h1, .bg-panel--ivory h2, .bg-panel--ivory h3, .bg-panel--ivory h4 { color: var(--c-brand); }
.bg-panel--ivory p, .bg-panel--ivory .lead, .bg-panel--ivory .section-head > p, .bg-panel--ivory .muted { color: var(--text-muted); }
.bg-panel--purple { position: relative; background: var(--c-brand); border-radius: 20px; padding: 72px; }
.bg-panel--purple h1, .bg-panel--purple h2, .bg-panel--purple h3, .bg-panel--purple h4 { color: #fff; }
.bg-panel--purple p, .bg-panel--purple .lead, .bg-panel--purple .section-head > p, .bg-panel--purple .muted { color: var(--c-on-dark-muted); }
.bg-panel--purple a:not(.btn) { color: var(--c-accent-light); }
.bg-panel--purple .process__step::before { background: var(--c-brand-deep); color: var(--c-accent-light); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04); }
.bg-panel--purple .process__step p { color: var(--c-on-dark-muted); }
@media (max-width: 640px) {
  .bg-panel--ivory, .bg-panel--purple { padding: 32px; border-radius: 14px; }
}

/* Frosted glass content panel, for a section carrying the teal gradient guide background only
   (never applied as opacity to the whole card, which would fade its own text/icon/button; only
   the background itself is translucent, everything painted on top stays fully opaque). Falls
   back to a near-opaque white panel when backdrop-filter is unsupported. */
.bg-panel--glass {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  padding: 56px;
  box-shadow: 0 20px 60px rgba(5, 55, 61, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .bg-panel--glass {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
  }
}
.bg-panel--glass h1, .bg-panel--glass h2, .bg-panel--glass h3, .bg-panel--glass h4 { color: var(--c-brand); }
.bg-panel--glass p, .bg-panel--glass .lead, .bg-panel--glass .section-head > p, .bg-panel--glass .muted { color: var(--text-muted); }
@media (max-width: 640px) {
  .bg-panel--glass { padding: 24px; border-radius: 18px; }
}

/* guide-card section background: the teal art fades to solid white at its own bottom edge,
   stretched 100%/100% (not cover) so that white landing zone always reaches the section's
   actual bottom regardless of content height, then a small CSS safety fade guarantees zero
   seam against the page's white below (including the .hr-wave-cta closing CTA on pages where
   it follows directly). The section's own base background-color is set inline to #fff too. */
.hr-guide-fade { position: relative; isolation: isolate; }
.hr-guide-fade::after { content: ''; position: absolute; inset: auto 0 0; height: 56px; background: linear-gradient(transparent, #fff); pointer-events: none; z-index: 0; }
.hr-guide-fade .container { position: relative; z-index: 1; }

/* guide card: original PDF reference document, offered as-is (not advertised as new). */
.guide-card { display: flex; gap: clamp(1.25rem, 3vw, 2rem); align-items: flex-start; flex-wrap: wrap; }
.guide-card__icon { flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--c-brand) 8%, transparent); color: var(--c-brand); }
.guide-card__icon svg { width: 30px; height: 30px; }
.guide-card__body { flex: 1 1 320px; min-width: 0; }
.guide-card .btn { margin-top: 1rem; }
.guide-card__note { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem; }

/* ---------- buttons: layered, never flat ---------- */
.btn {
  --btn-a: var(--c-brand-soft); --btn-b: var(--c-brand-deep); --btn-fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: var(--btn-radius); border: 1px solid rgba(255, 255, 255, 0.14);
  font: 600 1rem/1.1 var(--font-text); letter-spacing: 0.005em; color: var(--btn-fg); text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 24px -12px rgba(var(--c-brand-deep-rgb), 0.6);
  overflow: hidden; isolation: isolate; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.34) 50%, transparent 70%); transform: translateX(-120%); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 16px 30px -14px rgba(var(--c-brand-deep-rgb), 0.65); }
  .btn:hover::after { animation: btn-sheen 700ms var(--ease-out) 1; }
}
.btn:focus-visible::after { animation: btn-sheen 700ms var(--ease-out) 1; }
.btn:active { transform: translateY(1px) scale(0.985); transition-duration: 80ms; }
@keyframes btn-sheen { to { transform: translateX(120%); } }
.btn--accent {
  --btn-fg: #fff;
  background: linear-gradient(115deg, var(--c-brand-deep) 0%, var(--c-brand-soft) 38%, var(--c-accent-strong) 100%);
  background-size: 180% 100%; background-position: 0 0; border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 14px 30px -12px rgba(var(--c-accent-rgb), 0.55), 0 6px 14px -6px rgba(var(--c-brand-deep-rgb), 0.45);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-position var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background-position: 100% 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(0, 0, 0, 0.25),
      0 18px 36px -12px rgba(var(--c-accent-rgb), 0.65), 0 8px 18px -6px rgba(var(--c-brand-deep-rgb), 0.5); }
}
.btn--ghost { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.5); box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--ghost-dark { background: rgba(255, 255, 255, 0.5); color: var(--c-brand); border-color: rgba(var(--c-brand-rgb), 0.3); box-shadow: none; }
.btn--sm { min-height: 46px; padding: 0 20px; font-size: 0.95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 479px) { .btn-row > .btn { flex: 1 1 100%; } }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c-brand); text-decoration: none; min-height: 44px; }
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover svg { transform: translateX(4px); } .link-arrow:hover span { text-decoration: underline; text-underline-offset: 4px; } }
.tone-dark .link-arrow { color: var(--c-accent-light); }

/* ---------- header ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); display: flex; align-items: center; color: #fff;
  background: linear-gradient(180deg, rgba(var(--c-brand-deep-rgb), 0.7), rgba(var(--c-brand-deep-rgb), 0)); }
.header::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-base) ease;
  background: color-mix(in srgb, var(--surface-white) 90%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px -18px rgba(var(--c-brand-deep-rgb), 0.4); }
.header.is-solid::before, .header.is-static::before { opacity: 1; }
.header.is-solid, .header.is-static { color: var(--c-brand); }
.header__inner { position: relative; width: min(100% - 2 * var(--gutter), 1340px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* Logo sizes are measured on visible artwork. Trim the canvas in assets.py, never shrink the logo to fit the nav. */
.header__logo { display: block; width: clamp(150px, 42vw, 200px); flex: none; }
.header__logo img { width: 100%; height: auto; }
.header__logo .logo-on-light { display: none; }
.header.is-solid .logo-on-dark, .header.is-static .logo-on-dark { display: none; }
.header.is-solid .logo-on-light, .header.is-static .logo-on-light { display: block; }
.nav { display: none; }
.header__actions { display: flex; align-items: center; gap: 12px; }
.header__phone { display: none; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.header__phone svg { width: 18px; height: 18px; }
.header .btn { min-height: 46px; padding: 0 20px; font-size: 0.95rem; }
.header__cta { display: none; }
.menu-btn { width: 48px; height: 48px; border-radius: 14px; border: 1px solid currentColor; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.menu-btn svg { width: 24px; height: 24px; }
@media (min-width: 1100px) {
  :root { --header-h: 88px; }
  .header__logo { width: clamp(200px, 17vw, 250px); }
  .nav { display: flex; gap: 4px; }
  .nav a { color: inherit; text-decoration: none; font-weight: 500; font-size: 15.5px; padding: 12px 13px; border-radius: 10px; position: relative; white-space: nowrap; }
  .nav a::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .header__cta { display: inline-flex; }
  .menu-btn { display: none; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) { .nav a:hover::after { transform: scaleX(1); } }
@media (min-width: 1380px) { .header__phone { display: inline-flex; } }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; transition: visibility 0s linear 320ms; }
.drawer[data-open] { visibility: visible; transition: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(var(--c-brand-deep-rgb), 0.55); opacity: 0; transition: opacity var(--dur-base) ease; }
.drawer[data-open] .drawer__scrim { opacity: 1; }
.drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(90vw, 420px); background: var(--surface); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 320ms var(--ease-out); box-shadow: -20px 0 60px rgba(var(--c-brand-deep-rgb), 0.35); }
.drawer[data-open] .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); min-height: var(--header-h); }
.drawer__logo { width: 160px; }
.drawer__close { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-white); color: var(--c-brand); display: grid; place-items: center; cursor: pointer; }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__nav { flex: 1; overflow: auto; padding: 10px 12px; }
.drawer__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 10px 14px; color: var(--c-brand); text-decoration: none; font-weight: 600; font-size: 1.08rem; border-radius: 12px; }
.drawer__nav a[aria-current="page"] { background: rgba(var(--c-accent-rgb), 0.14); }
.drawer__nav a svg { width: 18px; height: 18px; opacity: 0.5; }
.drawer__bottom { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; background: var(--surface-white); }
.drawer__bottom .btn { width: 100%; }
.drawer__phone { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-weight: 600; color: var(--c-brand); text-decoration: none; }
.drawer__phone svg { width: 18px; height: 18px; }
body.drawer-open { overflow: hidden; }

/* ---------- hero ----------
   Variants: hero--left (default), hero--right, hero--center, hero--split (light panel + media column),
   hero--veil (light veil over footage, dark copy). Never 100vh: a sliver of the next section shows. */
.hero { position: relative; min-height: 84svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; padding-top: var(--header-h); background: var(--c-brand-deep); }
@media (min-width: 1024px) { .hero { min-height: min(90vh, 980px); align-items: center; } }
.hero--short { min-height: 60svh; }
@media (min-width: 1024px) { .hero--short { min-height: 64vh; } }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.hero__media img.kenburns { animation: kenburns 24s var(--ease-in-out) infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } }
/* Decorative background video (hero + inline photo figures): poster image paints first, the video
   crossfades in once it is actually playing. No user control, same policy as kenburns above. */
.hero__media video[data-bg-src], .figure video[data-bg-src] { opacity: 0; transition: opacity 700ms var(--ease-out); }
.hero__media video[data-bg-src].is-playing, .figure video[data-bg-src].is-playing { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--c-brand-deep-rgb), 0.5) 0%, rgba(var(--c-brand-deep-rgb), 0.28) 28%, rgba(var(--c-brand-deep-rgb), 0.8) 62%, rgba(var(--c-brand-deep-rgb), 0.93) 100%); }
@media (min-width: 1024px) {
  .hero__scrim { background: linear-gradient(90deg, rgba(var(--c-brand-deep-rgb), 0.88) 0%, rgba(var(--c-brand-deep-rgb), 0.62) 40%, rgba(var(--c-brand-deep-rgb), 0.12) 74%, rgba(var(--c-brand-deep-rgb), 0.04) 100%), linear-gradient(180deg, rgba(var(--c-brand-deep-rgb), 0.35), rgba(var(--c-brand-deep-rgb), 0) 30%); }
  .hero--right .hero__scrim { background: linear-gradient(270deg, rgba(var(--c-brand-deep-rgb), 0.88) 0%, rgba(var(--c-brand-deep-rgb), 0.62) 40%, rgba(var(--c-brand-deep-rgb), 0.12) 74%, rgba(var(--c-brand-deep-rgb), 0.04) 100%), linear-gradient(180deg, rgba(var(--c-brand-deep-rgb), 0.35), rgba(var(--c-brand-deep-rgb), 0) 30%); }
  .hero--center .hero__scrim { background: radial-gradient(70% 70% at 50% 60%, rgba(var(--c-brand-deep-rgb), 0.72) 0%, rgba(var(--c-brand-deep-rgb), 0.38) 70%), linear-gradient(0deg, rgba(var(--c-brand-deep-rgb), 0.85), rgba(var(--c-brand-deep-rgb), 0) 55%); }
}
.hero__inner { position: relative; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); }
.hero__copy { max-width: 660px; }
.hero--right .hero__inner { display: flex; justify-content: flex-end; }
.hero--center .hero__copy { margin-inline: auto; text-align: center; }
.hero--center .hero__copy .lead { margin-inline: auto; }
.hero--center .btn-row { justify-content: center; }
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: 0.45em; text-shadow: 0 2px 28px rgba(var(--c-brand-deep-rgb), 0.35); }
.hero--center h1 { margin-inline: auto; }
.hero .lead { color: color-mix(in srgb, #fff 86%, var(--c-accent-light) 14%); max-width: 50ch; margin-bottom: 1.8rem; text-shadow: 0 1px 14px rgba(var(--c-brand-deep-rgb), 0.5); }

/* split: light copy panel beside a tall media column. Same markup as every hero:
   .hero__media, .hero__scrim, .hero__inner as siblings. */
.hero--split { color: var(--text); background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.hero--split .hero__scrim { display: none; }
.hero--split .hero__media { position: relative; inset: auto; z-index: 0; order: 2; margin: 0 var(--gutter) clamp(1.5rem, 4vw, 2.5rem); min-height: 46svh;
  border-radius: calc(var(--card-radius) * 1.4); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero--split .hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(var(--c-accent-rgb), 0.2), transparent 55%); pointer-events: none; }
.hero--split .hero__inner { order: 1; }
.hero--split h1 { color: var(--heading); text-shadow: none; }
.hero--split .lead { color: var(--text-muted); text-shadow: none; }
@media (min-width: 1024px) {
  .hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: min(88vh, 960px); }
  .hero--split .hero__inner { grid-column: 1; grid-row: 1; width: auto; margin: 0 0 0 max(var(--gutter), calc((100vw - var(--container)) / 2)); padding-right: clamp(1.5rem, 3vw, 3rem); align-self: center; }
  .hero--split .hero__media { grid-column: 2; grid-row: 1; margin: calc(var(--header-h) * 0.35) var(--gutter) 2rem 0; min-height: 0; }
}
.hero--split .rail { border-top-color: var(--line); }
@media (min-width: 768px) { .hero--split .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero--split .rail__item strong { color: var(--heading); }
.hero--split .rail__item div > span { color: var(--text-muted); }
.hero--split .rail__item svg, .hero--veil .rail__item svg { color: var(--c-accent-strong); }
.hero--split .btn--ghost, .hero--veil .btn--ghost { background: rgba(255, 255, 255, 0.5); color: var(--c-brand); border-color: rgba(var(--c-brand-rgb), 0.3); }

/* bio/article header: light top-wave background (upper area only), portrait or editorial image
   in a contained 3:4 box on the right, name/lead on the left. Used on team, press and biography
   routes. Modifier on top of hero--split so the media stays a contained box, not a full-bleed video. */
.hero--bio { background: var(--surface) var(--hero-bg, none) top center / 100% auto no-repeat; min-height: 0; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.hero--bio .hero__media { width: min(420px, 90%); max-width: 420px; aspect-ratio: 3 / 4; min-height: 0; margin: 0 var(--gutter) 0 auto; box-shadow: var(--shadow-lg); }
.hero--bio .hero__media img { object-fit: cover; }
/* A real partner-video clip supplies its own intrinsic-ratio contain stage (never cover, per the
   kit's own spec: a face must never be cropped) - let it own its box instead of the static
   cover-cropped bio-photo rule above. Every other bio page is untouched (no .hr-partner-media). */
.hero--bio .hero__media:has(.hr-partner-media) { width: min(420px, 100%); max-width: 420px; aspect-ratio: auto; box-shadow: none; }
.hero--bio .hero__media:has(.hr-partner-media) img { object-fit: contain; }
@media (min-width: 1024px) {
  .hero--bio { padding-bottom: clamp(2.5rem, 4vw, 4rem); }
  .hero--bio .hero__media { grid-column: 2; grid-row: 1; margin: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(1.5rem, 4vw, 3rem) 0; width: min(420px, 100%); }
  /* A press-article hero that sets its own aspect-ratio inline (a landscape logo, podcast cover
     or wide photo, not the default 3:4 portrait crop) must not be grid-stretched to the row's
     full height - .hero--split's align-items:stretch otherwise overrides the aspect-ratio with
     the tall single-row grid track, leaving large pale bands above/below a contained image. */
  .hero--bio .hero__media[style*="aspect-ratio"] { align-self: start; }
}

/* Legal page header (Helio-Site-Polish-Kit, 2026-09-14): title only, directly on plain white,
   no wave background, no floating card, no eyebrow or CTA in the header - the normal global
   nav sits above it as on every other page. Replaces the earlier top-wave/panel treatment. */
.legal-header { background: var(--surface-white); padding: calc(var(--header-h) + 40px) 0 40px; border-bottom: 1px solid var(--line); }
.legal-header .container { max-width: 1120px; }
.legal-header h1 { margin: 0; color: var(--heading); font-size: clamp(2.5rem, 2rem + 2vw, 4rem); line-height: 1.08; letter-spacing: -0.03em; }
@media (max-width: 600px) { .legal-header { padding: calc(var(--header-h) + 24px) 0 24px; } }

/* veil: light wash over footage, dark copy. Good for bright, airy brands. */
.hero--veil { color: var(--text); }
.hero--veil .hero__scrim { background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 94%, transparent) 0%, color-mix(in srgb, var(--surface) 80%, transparent) 42%, color-mix(in srgb, var(--surface) 10%, transparent) 80%); }
@media (max-width: 1023px) { .hero--veil .hero__scrim { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 40%, transparent) 0%, color-mix(in srgb, var(--surface) 94%, transparent) 55%); } }
.hero--veil h1 { color: var(--heading); text-shadow: none; }
.hero--veil .lead { color: var(--text-muted); text-shadow: none; }
.hero--veil .rail { border-top-color: var(--line); }
.hero--veil .rail__item strong { color: var(--heading); }
.hero--veil .rail__item div > span { color: var(--text-muted); }

/* trust rail anchoring the fold */
.rail { border-top: 1px solid var(--line-on-dark); margin-top: clamp(2rem, 4vw, 3.25rem); padding-top: 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
@media (min-width: 768px) { .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rail__item { display: flex; gap: 12px; align-items: flex-start; }
.rail__item svg { width: 26px; height: 26px; flex: none; color: var(--c-accent-light); }
.rail__item strong { display: block; font-size: 1rem; line-height: 1.25; color: #fff; }
.rail__item div > span { display: block; font-size: 0.86rem; line-height: 1.4; color: color-mix(in srgb, #fff 78%, transparent); margin-top: 2px; }

/* ---------- reveal engine (gated behind .js so a JS error never hides content) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal][data-shown] { opacity: 1; transform: none; }
.js [data-reveal-group] > * { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-reveal-group][data-shown] > * { opacity: 1; transform: none; }
.js [data-reveal-group][data-shown] > :nth-child(2) { transition-delay: 60ms; }
.js [data-reveal-group][data-shown] > :nth-child(3) { transition-delay: 120ms; }
.js [data-reveal-group][data-shown] > :nth-child(4) { transition-delay: 180ms; }
.js [data-reveal-group][data-shown] > :nth-child(5) { transition-delay: 240ms; }
.js [data-reveal-group][data-shown] > :nth-child(n+6) { transition-delay: 300ms; }

/* ---------- media ---------- */
.figure { position: relative; overflow: hidden; border-radius: var(--card-radius); background: color-mix(in srgb, var(--surface-alt) 70%, var(--c-brand) 8%); }
.figure img, .figure video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.figure img { transition: transform 900ms var(--ease-out); }
/* A figure carrying a background video: poster img and video stack in the same box instead of
   flowing one under the other. Used wherever a figure pairs a poster <img> with a <video data-bg-src>. */
.figure--bgvideo img, .figure--bgvideo video { position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) { .figure:hover img { transform: scale(1.05); } }
.figure--4x5 { aspect-ratio: 4 / 5; } .figure--4x3 { aspect-ratio: 4 / 3; } .figure--3x4 { aspect-ratio: 3 / 4; } .figure--16x9 { aspect-ratio: 16 / 9; } .figure--sq { aspect-ratio: 1; }
.figure--frame::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: calc(var(--card-radius) - 8px); pointer-events: none; }
.figure__tag { position: absolute; left: 16px; bottom: 16px; right: auto; max-width: 260px; padding: 14px 18px; border-radius: 16px; color: #fff;
  background: linear-gradient(160deg, rgba(var(--c-brand-deep-rgb), 0.86), rgba(var(--c-brand-deep-rgb), 0.72)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: var(--shadow); }
.figure__tag strong { display: block; font: var(--display-weight) 1.7rem/1 var(--font-display); margin-bottom: 4px; }
.figure__tag span { font-size: 0.86rem; line-height: 1.4; opacity: 0.85; }
.media-stack { position: relative; }
.media-stack .figure + .figure { position: absolute; width: 46%; right: -4%; bottom: -8%; border: 6px solid var(--surface-white); box-shadow: var(--shadow-lg); }
@media (max-width: 767px) { .media-stack .figure + .figure { display: none; } }

/* ---------- grids ---------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 640px) { .grid--2, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--text { grid-template-columns: 1.15fr 1fr; } .split--media { grid-template-columns: 1fr 1.15fr; } .split .order-first { order: -1; } }

/* ---------- cards ---------- */
.card { position: relative; background: var(--surface-white); border-radius: var(--card-radius); border: 1px solid rgba(var(--c-brand-rgb), 0.07); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.card__body { padding: clamp(1.4rem, 3vw, 2rem); }
a.card { display: block; color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a.card:hover, .card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } }
.tone-dark .card { background: rgba(255, 255, 255, 0.05); border-color: var(--line-on-dark); box-shadow: none; }

.icon-plate { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; color: var(--c-brand);
  background: linear-gradient(160deg, var(--surface-white), color-mix(in srgb, var(--surface) 70%, var(--c-accent) 18%));
  border: 1px solid rgba(var(--c-accent-rgb), 0.35); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(var(--c-brand-deep-rgb), 0.35); }
.icon-plate svg { width: 30px; height: 30px; }
.icon-plate--dark { color: var(--c-accent-light); background: linear-gradient(160deg, var(--c-brand-soft), var(--c-brand-deep)); border-color: rgba(var(--c-accent-rgb), 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }

/* points: icon + short heading + one line. Used in intro splits. */
/* wider-team: compact row of linked portrait cards, replacing the old low-resolution group photo. */
.wider-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 1.8rem; }
@media (min-width: 700px) { .wider-team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wider-team__card { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; gap: 12px; }
.wider-team__card img { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; border: 2px solid rgba(var(--c-accent-rgb), 0.4); }
.wider-team__card .hr-avatar { width: 96px; height: 96px; margin: 0 auto; border: 2px solid rgba(var(--c-accent-rgb), 0.4); }
.wider-team__card span { font-weight: 600; color: var(--on-dark, #f6f3ea); font-size: 0.95rem; line-height: 1.3; }
.wider-team__card small { display: block; font-weight: 400; color: var(--on-dark-muted, #cdbfd6); font-size: 0.82rem; margin-top: 2px; }
/* light-background variant, for a wider-team grid placed on a tone-light/tone-alt/tone-white section */
.wider-team--light .wider-team__card span { color: var(--heading); }
.wider-team--light .wider-team__card small { color: var(--text-muted); }

.points { display: grid; gap: 20px; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.point { display: flex; gap: 16px; align-items: flex-start; }
.point h3 { font-family: var(--font-text); font-weight: 700; font-size: 1.05rem; margin: 2px 0 4px; letter-spacing: 0; color: var(--heading); }
.point p { margin: 0; color: var(--text-muted); }
.point > a { display: flex; gap: 16px; align-items: flex-start; color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .point > a:hover h3 { text-decoration: underline; text-underline-offset: 4px; } }

/* ---------- services mosaic: one lead card, supporting cards, never four equal boxes ---------- */
.mosaic { display: grid; gap: 20px; }
@media (min-width: 760px) { .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mosaic > .svc--lead, .mosaic > .svc-right { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); } .mosaic > .svc { grid-column: span 4; } .mosaic > .svc--lead { grid-column: span 7; grid-row: span 2; } .mosaic > .svc--side { grid-column: span 5; } .mosaic > .svc-right { grid-column: span 5; grid-row: span 2; } }
.card.svc { display: flex; flex-direction: column; }
.svc .figure { border-radius: 0; aspect-ratio: 16 / 10; }
.card.svc--side { flex-direction: row; }
.svc--side .figure { width: 40%; aspect-ratio: auto; flex: none; min-height: 180px; }
.svc--side .figure img { position: absolute; inset: 0; }
.svc--side .figure .hr-partner-media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
@media (max-width: 559px) { .card.svc--side { flex-direction: column; } .svc--side .figure { width: 100%; aspect-ratio: 16 / 10; } }
/* Services next-step card (Helio-Site-Polish-Kit, 2026-09-14): fills the right column below the
   risk-consulting card so .svc-right's two children match .svc--lead's overall height (grid-
   template-rows: auto 1fr, not a fixed-height spacer - the risk-consulting card keeps its own
   natural height and the next-step card stretches to take up whatever remains). */
.svc-right { display: grid; grid-template-rows: auto 1fr; gap: 20px; }
.svc-next { background: linear-gradient(140deg, var(--c-brand-deep), var(--c-brand-soft)); border: 1px solid var(--c-brand-soft); border-radius: var(--card-radius); padding: 32px; color: var(--c-on-dark); display: flex; flex-direction: column; justify-content: center; }
.svc-next h3 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); max-width: 22ch; color: var(--c-on-dark); }
.svc-next > p { margin: 14px 0 0; color: var(--c-on-dark-muted); font-size: 1rem; line-height: 1.6; }
.svc-next ul { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
.svc-next li { display: flex; align-items: flex-start; gap: 10px; color: var(--c-on-dark); font-size: 0.95rem; line-height: 1.5; }
.svc-next li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--c-accent-light); }
.svc-next .btn { align-self: flex-start; margin-top: 4px; }
.svc__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc__body h3 { margin: 0; }
.svc__body p { color: var(--text-muted); margin: 0; }
.svc__foot { margin-top: auto; padding-top: 6px; }
.svc--lead h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); }
.svc--lead .svc__body { padding: clamp(1.5rem, 3vw, 2.4rem); }

/* ---------- process: connected steps, horizontal on desktop, vertical rail on mobile ---------- */
.process { position: relative; display: grid; gap: 28px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.process__step { position: relative; padding-left: 76px; }
.process__step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font: var(--display-weight) 1.25rem/1 var(--font-display); color: var(--c-brand); background: var(--surface-white);
  border: 1px solid rgba(var(--c-accent-rgb), 0.5); box-shadow: 0 0 0 6px color-mix(in srgb, var(--surface) 70%, transparent), var(--shadow-sm); font-variant-numeric: tabular-nums; }
.process__step::after { content: ''; position: absolute; left: 27px; top: 64px; bottom: -24px; width: 2px; background: linear-gradient(180deg, var(--c-accent), rgba(var(--c-accent-rgb), 0.1)); transform-origin: top; }
.process__step:last-child::after { display: none; }
.process__step h3 { margin: 12px 0 6px; }
.process__step p { color: var(--text-muted); margin: 0; }
.js .process[data-reveal-group] .process__step::after { transform: scaleY(0); transition: transform 900ms var(--ease-out) 200ms; }
.js .process[data-shown] .process__step::after { transform: none; }
@media (min-width: 900px) {
  .process { grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
  .process__step { padding: 84px 0 0; }
  .process__step::after { left: 72px; right: -24px; top: 27px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--c-accent), rgba(var(--c-accent-rgb), 0.15)); transform-origin: left; }
  .js .process[data-reveal-group] .process__step::after { transform: scaleX(0); }
}
.tone-dark .process__step::before { background: var(--c-brand-deep); color: var(--c-accent-light); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04); }
.tone-dark .process__step p { color: var(--c-on-dark-muted); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--card-radius); overflow: hidden; border: 1px solid var(--line); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--surface-white); padding: clamp(1.25rem, 3vw, 2rem); }
.stat strong { display: block; font: var(--display-weight) clamp(2.2rem, 1.8rem + 2vw, 3.4rem)/1 var(--font-display); color: var(--heading); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat > span { display: block; margin-top: 8px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.4; }
.tone-dark .stats { background: var(--line-on-dark); border-color: var(--line-on-dark); }
.tone-dark .stat { background: rgba(var(--c-brand-deep-rgb), 0.6); }
.tone-dark .stat strong { color: #fff; }

/* ---------- staff grid: circular headshots, name + title, no bio ---------- */
.staff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2rem) 1.2rem; list-style: none; margin: 0; padding: 0; text-align: center; }
/* Three per row on desktop (not four): larger 30% headshots need the extra room, and it keeps
   nine staff at exactly three even rows. */
@media (min-width: 640px) { .staff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.staff img { width: clamp(110px, 18vw, 151px); height: clamp(110px, 18vw, 151px); border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-sm); border: 3px solid var(--surface-white); }
/* Every staff headshot is now the hr-avatar video component (see build.py avatar_media),
   sized and shaped here on the container itself rather than on .staff img above (which still
   covers any plain-photo use of .staff that isn't a named person). */
.staff .hr-avatar { width: clamp(110px, 18vw, 151px); height: clamp(110px, 18vw, 151px); margin: 0 auto; box-shadow: var(--shadow-sm); border: 3px solid var(--surface-white); }
.staff h3 { margin: 14px 0 2px; font: 700 1rem/1.3 var(--font-text); color: var(--heading); }
.staff span { display: block; color: var(--text-muted); font-size: 0.88rem; line-height: 1.4; }
.staff a { display: block; color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .staff a:hover img, .staff a:hover .hr-avatar { box-shadow: var(--shadow-lg); }
  .staff a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
}
.tone-dark .staff h3 { color: #fff; }
.tone-dark .staff span { color: var(--c-on-dark-muted); }
.tone-dark .staff img, .tone-dark .staff .hr-avatar { border-color: rgba(255, 255, 255, 0.25); }

/* ---------- proof: rating summary + quotes ---------- */
.rating { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px; background: var(--surface-white); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); border: 1px solid var(--line); font-size: 0.95rem; }
.rating > svg { width: 22px; height: 22px; }
.rating__stars { position: relative; display: inline-flex; color: color-mix(in srgb, var(--c-muted) 35%, transparent); }
.rating__stars > span { display: inline-flex; }
.rating__stars > span:last-child { position: absolute; inset: 0; width: var(--pct); overflow: hidden; color: #f5a623; }
.rating__stars svg { width: 18px; height: 18px; flex: none; }
.quotes { display: grid; gap: 20px; }
@media (min-width: 900px) { .quotes { grid-template-columns: 1.3fr 1fr 1fr; } }
.quote { margin: 0; padding: clamp(1.5rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 18px; }
.quote blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.quote:first-child blockquote { font: var(--display-weight) clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem)/1.35 var(--font-display); color: var(--heading); }
.quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 0.92rem; color: var(--text-muted); }
.quote figcaption strong { color: var(--text); display: block; }
.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; color: var(--c-brand); background: color-mix(in srgb, var(--c-accent-light) 55%, var(--surface-white)); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
[data-placeholder="review"] { outline: 2px dashed rgba(var(--c-accent-rgb), 0.7); outline-offset: 4px; }
.placeholder-note { font-size: 0.85rem; color: var(--c-accent-strong); font-weight: 600; }

/* ---------- comparison: designed table on desktop, stacked cards under 768px ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface-white); border-radius: var(--card-radius); box-shadow: var(--shadow); overflow: hidden; font-size: 0.98rem; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 700 0.95rem/1.3 var(--font-text); color: var(--heading); background: color-mix(in srgb, var(--surface) 70%, var(--surface-white)); }
.compare .is-us { background: color-mix(in srgb, var(--c-accent-light) 18%, var(--surface-white)); }
.compare thead .is-us { background: var(--c-brand); color: #fff; }
.compare td svg { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; margin-right: 6px; }
.compare .yes svg { color: #1f8a5b; } .compare .no svg { color: #b4493f; }
@media (max-width: 767px) {
  .compare, .compare tbody, .compare tr, .compare td, .compare th { display: block; width: 100%; }
  .compare { background: none; box-shadow: none; }
  .compare thead { display: none; }
  .compare tr { background: var(--surface-white); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); margin-bottom: 14px; overflow: hidden; }
  .compare tbody th { background: var(--c-brand); color: #fff; font-size: 1rem; }
  .compare td { display: grid; grid-template-columns: 42% 1fr; gap: 12px; }
  .compare td::before { content: attr(data-label); font-weight: 700; color: var(--heading); font-size: 0.9rem; }
}

/* ---------- press coverage: one featured story plus a real-photo card grid ---------- */
.press-feature { display: grid; grid-template-columns: 1fr; border-radius: var(--card-radius); background: var(--surface-white); border: 1px solid rgba(var(--c-brand-rgb), 0.08); box-shadow: var(--shadow); overflow: hidden; margin-bottom: clamp(2rem, 4vw, 3rem); }
.press-feature__media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-alt); }
.press-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.press-feature__body { padding: clamp(1.5rem, 3vw, 2.75rem); display: grid; gap: 0.85rem; align-content: center; }
.press-feature__date { color: var(--c-accent); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.press-feature__body h3 { margin: 0; font: var(--display-weight) clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem)/1.25 var(--font-display); color: var(--heading); }
.press-feature__body h3 a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .press-feature__body h3 a:hover { text-decoration: underline; } }
.press-feature__body p { margin: 0; color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; max-width: 56ch; }
@media (min-width: 820px) { .press-feature { grid-template-columns: 1.15fr 1fr; } .press-feature__media { aspect-ratio: auto; } }

.press-grid { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .press-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.press-card { display: flex; flex-direction: column; background: var(--surface-white); border-radius: var(--card-radius); border: 1px solid rgba(var(--c-brand-rgb), 0.08); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .press-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .press-card:hover .press-card__media img { transform: scale(1.045); }
}
.press-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.press-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.press-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.press-card__date { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.press-card h3 { margin: 0; font: 700 1.06rem/1.35 var(--font-text); color: var(--heading); }
.press-card p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; flex: 1; }
.press-card .link-arrow { margin-top: 0.4rem; }

.staff-grid--feature { grid-template-columns: repeat(auto-fit, minmax(120px, 150px)); justify-content: center; }

/* ---------- cost factors: range bars, not paragraphs ---------- */
.factors { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.factor { display: grid; gap: 8px; padding: 18px 20px; border-radius: 16px; background: var(--surface-white); border: 1px solid var(--line); }
.factor__top { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; color: var(--heading); }
.factor__top span { font-weight: 600; color: var(--text-muted); font-size: 0.9rem; }
.factor__bar { height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--surface-alt) 80%, var(--c-brand) 6%); overflow: hidden; }
.factor__bar i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: var(--accent-metal); transform-origin: left; }
.js .factors[data-reveal-group] .factor__bar i { transform: scaleX(0); transition: transform 1s var(--ease-out) 250ms; }
.js .factors[data-shown] .factor__bar i { transform: none; }
.factor p { margin: 0; font-size: 0.95rem; color: var(--text-muted); }

/* ---------- fit: who this is for / not for ---------- */
.fit { display: grid; gap: 20px; }
@media (min-width: 900px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__col { padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: var(--card-radius); }
.fit__col--yes { background: var(--surface-white); box-shadow: var(--shadow); }
.fit__col--no { background: color-mix(in srgb, var(--surface-alt) 70%, var(--surface)); border: 1px dashed rgba(var(--c-brand-rgb), 0.25); }
.fit__col ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 12px; }
.fit__col li { display: flex; gap: 10px; align-items: flex-start; }
.fit__col li svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.fit__col--yes li svg { color: #1f8a5b; } .fit__col--no li svg { color: #9a4a3f; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq__item { background: var(--surface-white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(var(--c-brand-deep-rgb), 0.04); }
.faq__h { margin: 0; font: inherit; }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 16px 20px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 1.02rem/1.4 var(--font-text); color: var(--heading); border-radius: 16px; }
.faq__q svg { width: 22px; height: 22px; flex: none; color: var(--c-accent-strong); transition: transform var(--dur-base) var(--ease-out); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.faq__a > .faq__inner { overflow: hidden; padding: 0 20px; color: var(--text-muted); }
.faq__q[aria-expanded="true"] + .faq__a, .faq__h:has(.faq__q[aria-expanded="true"]) + .faq__a { grid-template-rows: 1fr; }
.faq__q[aria-expanded="true"] ~ .faq__a > .faq__inner, .faq__h:has([aria-expanded="true"]) + .faq__a > .faq__inner { padding-bottom: 18px; }
html:not(.js) .faq__a { grid-template-rows: 1fr; }
html:not(.js) .faq__a > .faq__inner { padding-bottom: 18px; }
.faq__more { justify-self: start; margin-top: 8px; }

/* ---------- CTA scene: photo or video behind a directional scrim ---------- */
.cta-scene { position: relative; color: #fff; overflow: hidden; isolation: isolate; padding-block: clamp(4.5rem, 9vw, 8rem); background: var(--c-brand-deep); }
.cta-scene__media { position: absolute; inset: 0; z-index: -2; }
.cta-scene__media img, .cta-scene__media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.cta-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(var(--c-brand-deep-rgb), 0.92) 0%, rgba(var(--c-brand-deep-rgb), 0.7) 45%, rgba(var(--c-brand-deep-rgb), 0.35) 100%); }
.cta-scene h2 { color: #fff; max-width: 18ch; }
.cta-scene p { color: color-mix(in srgb, #fff 84%, transparent); max-width: 52ch; }
.cta-scene__inner { display: grid; gap: 1.5rem 3rem; align-items: end; }
@media (min-width: 960px) { .cta-scene__inner { grid-template-columns: 1.3fr auto; } }
/* The last content section before the footer is a scene with its own media, never a flat dark band. */
.cta-scene + .footer { border-top: 1px solid rgba(var(--c-accent-rgb), 0.5); }

/* ---------- contact ---------- */
.contact { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: 1.15fr 1fr; } }
.form { display: grid; gap: 18px; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--surface-white); border-radius: var(--card-radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
.form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: 0.95rem; color: var(--heading); }
.field input, .field select, .field textarea { width: 100%; min-height: 54px; padding: 12px 16px; font: inherit; font-size: 1rem; color: var(--text); background: color-mix(in srgb, var(--surface) 50%, var(--surface-white));
  border: 1px solid rgba(var(--c-brand-rgb), 0.22); border-radius: 14px; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(var(--c-accent-rgb), 0.25); }
.field [aria-invalid="true"] { border-color: #b4493f; }
.field__hint { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.form__status { margin: 0; font-weight: 600; min-height: 1.5em; }
.form__status[data-ok] { color: #1f7a50; } .form__status[data-error] { color: #a33f35; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form--preview { position: relative; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-list a, .contact-list span.item { display: flex; gap: 14px; align-items: center; color: var(--text); text-decoration: none; min-height: 48px; }
.contact-list svg { width: 22px; height: 22px; color: var(--c-accent-strong); flex: none; }
.map { border: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--card-radius); box-shadow: var(--shadow); background: var(--surface-alt); }

/* ---------- links page ---------- */
.links-page { min-height: 100svh; padding: calc(var(--header-h) + 2rem) 0 4rem; background: var(--surface) var(--hero-bg, none) top center / 100% auto no-repeat; }
.links { width: min(100% - 2 * var(--gutter), 520px); margin-inline: auto; text-align: center; }
.links__logo { width: 220px; margin: 0 auto 1rem; }
.links__portrait { display: inline-block; width: 128px; height: 128px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.2rem; box-shadow: var(--shadow-lg); border: 3px solid var(--surface-white); }
.links__list { display: grid; gap: 12px; margin: 1.6rem 0; }
.links__list .btn { width: 100%; justify-content: flex-start; padding-left: 22px; }
.links__list .btn span { flex: 1; text-align: center; margin-right: 22px; }
.links__qr { width: 180px; margin: 1.5rem auto 0.5rem; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); background: #fff; padding: 10px; }

/* ---------- prose (legal, insights) ---------- */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2em; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.prose h3 { margin-top: 1.6em; }
.prose li { margin-bottom: 0.4em; }
.draft-note { padding: 14px 18px; border-radius: 12px; background: color-mix(in srgb, var(--c-accent-light) 30%, var(--surface-white)); border: 1px solid rgba(var(--c-accent-rgb), 0.5); font-weight: 600; }

/* ---------- footer: designed, multi-column, centered base ---------- */
.footer { position: relative; color: var(--c-on-dark-muted); padding: clamp(3.5rem, 7vw, 5.5rem) 0 calc(2rem + env(safe-area-inset-bottom));
  background: radial-gradient(80% 60% at 10% 0%, var(--c-brand-soft) 0%, var(--c-brand) 40%, var(--c-brand-deep) 100%); }
.footer a { color: #fff; text-decoration: none; }
.footer__grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__brand { grid-column: 1 / -1; order: 1; }
@media (min-width: 960px) { .footer__grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); } .footer__brand { grid-column: auto; order: 0; } }
.footer__logo { width: clamp(200px, 22vw, 260px); margin-bottom: 1.2rem; }
.footer__brand p { max-width: 38ch; font-size: 0.98rem; }
.footer__social { display: flex; align-items: center; gap: 14px; margin-top: 1.2rem; }
.footer__social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-on-dark); transition: background-color var(--dur-fast) ease; }
.footer__social svg { width: 20px; height: 20px; }
.footer__social a.hr-footer-mark { width: auto; height: auto; border: none; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) { .footer__social a:hover { background: rgba(255, 255, 255, 0.08); } .footer__links a:hover span { text-decoration: underline; text-underline-offset: 4px; } }
.footer__h { font: 700 0.8rem/1 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-light); margin: 0 0 1.1rem; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer__links a, .footer__links li > span { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 0.95rem; line-height: 1.35; color: color-mix(in srgb, #fff 88%, transparent); }
.footer__links svg { width: 18px; height: 18px; flex: none; color: var(--c-accent-light); }
.footer__base { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--line-on-dark); display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 0.88rem; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.footer__legal a { min-height: 32px; display: inline-flex; align-items: center; }
.footer__line, .footer__attr { margin: 0; }
.footer__disc { margin: 6px 0 0; max-width: 90ch; font-size: 0.78rem; line-height: 1.55; opacity: 0.8; }
.la-attr { font-weight: 700; color: var(--c-accent-light) !important; text-shadow: 0 0 14px rgba(var(--c-accent-rgb), 0.55); }

/* ---------- 404 ---------- */
.notfound { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 3rem) var(--gutter) 4rem; }
.notfound h1 { font-size: clamp(3rem, 2rem + 5vw, 6rem); }

/* ---------- utilities ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--text-muted); }
.small { font-size: 0.9rem; }

/* ---------- reduced motion: reduce, never remove meaning ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1; transform: none; }
  .hero__media img.kenburns { animation: none; }
}

/* ---------- print (contact and links keep address and phone) ---------- */
@media print {
  .header, .drawer, .hero__media, video, .btn::after { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: 0; color: #000; padding-top: 0; }
  .hero h1, .hero .lead { color: #000; text-shadow: none; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; }
}

/* ---------- holding page (stage: holding) ---------- */
.holding { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 3rem var(--gutter); }
.holding__logo { width: min(440px, 80vw); height: auto; margin: 0 auto 2rem; }
.holding__attr { margin-top: 3rem; }
/* On light ground the attribution drops the glow and takes the accent at full strength. */
.la-attr--light { color: var(--c-accent-strong) !important; text-shadow: none; }

/* ---------- V3 repair components (buttons, team cards, footer credentials, bg bands) ---------- */
.hr-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 48px; padding: .85rem 1.35rem; border: 1px solid transparent; border-radius: var(--btn-radius); font: 600 1rem/1.25 var(--font-text); text-decoration: none; cursor: pointer; box-sizing: border-box; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; box-shadow: var(--shadow-sm); }
.hr-button.hr-button--primary { color: #fff; background: linear-gradient(115deg, var(--c-brand-deep), var(--c-accent-strong)); border-color: #ffffff26; }
.hr-button.hr-button--secondary { background: var(--surface-white); color: var(--c-brand); border-color: rgba(var(--c-brand-rgb), .28); box-shadow: none; }
.hr-button svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; }
.hr-button:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 4px; }
.hr-button:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.hr-button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
@media (hover:hover) and (pointer:fine) { .hr-button:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--shadow); } .hr-button--secondary:hover { background: var(--surface); } }

.hr-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.hr-team-card { display: block; text-decoration: none; color: var(--text); border: 1px solid var(--line); border-radius: var(--card-radius); overflow: hidden; background: var(--surface-white); transition: box-shadow 180ms ease, border-color 180ms ease; }
.hr-team-card:hover { box-shadow: var(--shadow); border-color: rgba(var(--c-brand-rgb), .22); }
.hr-person-frame { display: block; margin: 0; position: relative; width: 100%; height: auto; aspect-ratio: 3/4; background: var(--surface-alt); overflow: visible; }
.hr-team-card .hr-person-frame { border-radius: 0; }
.hr-person-frame img { display: block; position: static; inset: auto; width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; object-position: 50% 50%; transform: none !important; border-radius: inherit; }
.hr-team-card__body { padding: 24px; }
.hr-team-card__body h3 { margin: 0 0 .4rem; font-size: 1.35rem; line-height: 1.2; color: var(--heading); }
.hr-team-card__body p { margin: .4rem 0 1rem; color: var(--text-muted); }

.hr-bio-layout { display: grid; grid-template-columns: minmax(0, 68ch) minmax(240px, 320px); gap: clamp(32px,6vw,80px); align-items: start; max-width: 1200px; margin: auto; padding: 64px var(--gutter); }
[data-bio-full] { font-size: 18px; line-height: 1.75; color: var(--text); }
[data-bio-full] p { margin: 0 0 1.4em; max-width: none; display: block; -webkit-line-clamp: unset; overflow: visible; }

.hr-footer-credentials { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 18px; }
.hr-footer-linkedin { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 8px; color: inherit; }
.hr-footer-mark { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 0; }
.hr-footer-mark img { display: block; width: 64px; height: 64px; object-fit: contain; }
.hr-footer-credentials a:focus-visible { outline: 3px solid var(--c-accent-light); outline-offset: 5px; }

.hr-article { max-width: 72ch; margin: auto; padding: 48px var(--gutter) 80px; font-size: 18px; line-height: 1.75; }
.hr-article p { margin: 0 0 1.35em; }
.hr-article a { text-decoration: underline; text-underline-offset: 3px; }

.hr-bg-top { background-color: var(--surface); background-image: linear-gradient(to bottom, rgba(248,247,243,.25), var(--surface) 82%), url('/assets/helio-v3/assets/backgrounds/purple-teal-top.png'); background-size: 100% auto; background-position: top center; background-repeat: no-repeat; }
.hr-bg-bottom { background-color: var(--surface); background-image: linear-gradient(to bottom, var(--surface), rgba(248,247,243,.85)), url('/assets/helio-v3/assets/backgrounds/purple-teal-bottom.png'); background-size: cover; background-position: bottom center; background-repeat: no-repeat; }
.hr-bg-green { background-color: var(--surface); background-image: linear-gradient(rgba(248,247,243,.86), rgba(248,247,243,.86)), url('/assets/helio-v3/assets/backgrounds/green.png'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.hr-bg-purple { background-color: var(--c-brand); background-image: linear-gradient(rgba(40,17,64,.86), rgba(40,17,64,.86)), url('/assets/helio-v3/assets/backgrounds/purple.png'); background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; }
.hr-bg-purple h2, .hr-bg-purple p { color: inherit; }

@media (max-width: 900px) { .hr-team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .hr-bio-layout { grid-template-columns: 1fr; gap: 24px; } .hr-bio-layout aside { max-width: 380px; width: 100%; justify-self: center; } }
@media (max-width: 560px) { .hr-team-grid { grid-template-columns: 1fr; } .hr-team-card { max-width: 420px; width: 100%; margin-inline: auto; } .hr-button { max-width: 100%; white-space: normal; text-align: center; } .hr-bio-layout { padding: 36px 20px; } .hr-footer-credentials { gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .hr-button { transition: none; } .hr-button:not(:disabled):hover { transform: none; } }

/* ---------- wave footer treatment: closing CTA over supplied wave art, purple footer ----------
   Adds onto the existing .cta-scene / .footer rules above rather than replacing them; both the old
   and new classes stay on the elements, and these single-class selectors win same-specificity ties
   by coming later in the file. See Helio-Footer-Waves-Handoff-2026-09-14/START-HERE.md. */
.hr-wave-cta { position: relative; isolation: isolate; overflow: hidden; margin: 0; background: #fff; min-height: 520px; padding: 100px var(--gutter) 130px; display: grid; place-items: center; box-sizing: border-box; }
.hr-wave-media { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hr-wave-media img, .hr-wave-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hr-wave-media video { opacity: 0; transition: opacity 0.4s; }
.hr-wave-media video.is-playing { opacity: 1; }
.hr-wave-cta::before { content: ''; position: absolute; inset: 0 0 auto; height: 80px; background: linear-gradient(#fff, transparent); pointer-events: none; z-index: -1; }
.hr-wave-cta::after { content: ''; position: absolute; inset: auto 0 0; height: 130px; background: linear-gradient(transparent, #10071c); pointer-events: none; z-index: -1; }
.hr-wave-cta + .footer { border-top: 0; }
/* Corey 2026-09-14: the section right above this closing CTA must be pure white so the CTA's
   own white top fade has no visible seam against it - only applies to the light/neutral tones. */
.section:has(+ .hr-wave-cta):not(.tone-dark) { background: #fff; }
/* Team-bio and press-article pages close with a dark tone-dark section instead (see above).
   The wave art itself is authored to emerge from a white page (its own top third is solid
   white, by design, for the light case above) - object-position can only crop within that
   white band on these wide/short crops, it can never skip past it, so on a dark-preceded page
   the fix is not a crop tweak but swapping the CTA's own top fade from white to the same near-
   black the dark section already ends on, sized generously enough to fully hide the poster's
   white lead-in before the real wave color takes over. */
body:has(.tone-dark + .hr-wave-cta) .hr-wave-cta { background: var(--c-brand-deep); }
body:has(.tone-dark + .hr-wave-cta) .hr-wave-cta::before { height: 220px; background: linear-gradient(var(--c-brand-deep), transparent); }
@media (max-width: 600px) { body:has(.tone-dark + .hr-wave-cta) .hr-wave-cta::before { height: 170px; } }
.hr-wave-content { display: block; width: min(100%, 900px); box-sizing: border-box; padding: clamp(24px, 4vw, 48px); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--card-radius); background: rgb(25 9 43 / 94%); color: #fff; text-align: center; }
.hr-wave-content h2 { color: #fff; margin-inline: auto; }
.hr-wave-content h2 em { color: #fff; }
.hr-wave-content p { color: #e9e1f1; max-width: 60ch; margin-inline: auto; }
.hr-wave-content .btn-row { justify-content: center; flex-wrap: wrap; }
.hr-wave-content .btn { min-height: 48px; white-space: normal; }
footer.hr-purple-footer { position: relative; isolation: isolate; background: #10071c url('/assets/helio-footer/footer-purple-glow.jpg') center top / cover no-repeat; padding-top: 90px; }
footer.hr-purple-footer::before { content: ''; position: absolute; inset: 0 0 auto; height: 130px; background: linear-gradient(#10071c, transparent); pointer-events: none; z-index: 0; }
footer.hr-purple-footer::after { content: ''; position: absolute; inset: auto 0 0; height: 260px; background: linear-gradient(transparent, #10071c 68%); pointer-events: none; z-index: 0; }
.hr-purple-footer .footer__grid, .hr-purple-footer .footer__base { position: relative; z-index: 1; }
.hr-wave-cta a:focus-visible, .hr-purple-footer a:focus-visible { outline: 3px solid var(--c-accent-light); outline-offset: 4px; }
@media (max-width: 600px) { .hr-wave-cta { min-height: 480px; padding: 70px var(--gutter) 120px; } .hr-wave-content .btn-row { display: grid; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .hr-wave-media video { display: none; transition: none; } }

/* Partner portrait video (Helio-Partner-Videos-V5): a real play-once/hold-last-frame clip for
   Heather McClure, Kyle Sweet and Blake Kerr only, standing in for their static portrait on a
   biography hero, a featured press-article hero, the homepage leadership figure and the two team
   card grids. Never object-fit:cover here (the kit's own spec: a face must never be cropped by a
   fixed box) - contain inside a reserved stage, dark side margins are fine on a tall clip. */
.hr-partner-media { position: relative; isolation: isolate; width: 100%; aspect-ratio: var(--ratio, 3/4); background: #21152e; border-radius: var(--card-radius); overflow: hidden; }
.hr-partner-media[data-stage="hero"] { max-width: 420px; margin: 0 auto; }
.hr-partner-media > img, .hr-partner-media > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* card stage: fill the fixed 3:4 box (cover), never letterbox a narrow source with dark bars.
   hero stage keeps the rule above (contain at the video's own intrinsic ratio, so nothing crops). */
.hr-partner-media[data-stage="card"] > img, .hr-partner-media[data-stage="card"] > video,
.hr-partner-media[data-stage="avatar"] > img, .hr-partner-media[data-stage="avatar"] > video { object-fit: cover; }
.hr-partner-media > video { opacity: 0; transition: opacity 400ms var(--ease-out); }
.hr-partner-media.is-ready > video { opacity: 1; }
/* No play/pause/replay control on partner video anywhere on the site - it autoplays once and
   holds the last frame, full stop. Only the error-fallback status line remains. */
.hr-partner-media__status { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 16px; margin: 0; color: #fff; font-size: 0.8rem; }
.hr-partner-media__status:empty { display: none; }
/* The small circular staff-grid avatar has no room for the fallback caption; if a browser can't
   play the video it should just quietly keep showing the photo, same as it does while the video
   is still loading. Name and title are already printed under the avatar either way. */
.hr-partner-media[data-stage="avatar"] .hr-partner-media__status { display: none; }

/* Circular avatar video (Helio-Site-Polish-Kit, 2026-09-14): the small hr-avatar component built
   in build.py avatar_media(), used everywhere a person's headshot appears as a circle - the
   /team and /about staff grids, every bio page's "meet the wider team" row, press-article
   featured-story rows, /links and each person's own links page. Sized by its wrapper class
   (.staff, .wider-team__card, .links__portrait above); fills 100% of that box by default. */
.hr-avatar { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: #21152e; }
.hr-avatar > img, .hr-avatar > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hr-avatar > video { opacity: 0; transition: opacity 400ms var(--ease-out); }
.hr-avatar.is-ready > video { opacity: 1; }

/* Partner card grid: the About/Team leadership row (Heather, Kyle, Blake). Replaces the shared
   .card.svc figure (16:10 cover crop, wrong for a tall contained video) with a dedicated 3:4
   contain stage; name/title/bio copy underneath is unchanged from the standard .svc__body. */

/* Office-locations footer animation (Helio-Office-Animation-V2, 2026-09-14): the client-supplied
   transparent VP9-alpha WebM, one graphic at every width, no card/border/background of its own so
   the purple footer paints straight through. Centered, width 100% up to a 760px max, the media
   box's own aspect-ratio holds the source's 1600x720 shape so nothing crops or stretches at any
   screen size. The video fades in over the PNG once playback actually starts; before that, and on
   any failure, the PNG alone is what's shown. */
.hr-office-anim { max-width: 760px; width: 100%; margin: 48px auto 24px; padding: 0 var(--gutter); position: relative; }
.hr-office-anim__media { position: relative; width: 100%; aspect-ratio: 1600 / 720; background: transparent; }
.hr-office-anim__media img, .hr-office-anim__media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.hr-office-anim__media video { opacity: 0; transition: opacity 300ms var(--ease-out); }
.hr-office-anim__media.is-ready video { opacity: 1; }
/* No play/pause/replay control on this video either - it autoplays once and holds the last
   frame, matching the partner-media rule above. */

/* Recognition and stats (Helio-Recognition-Redesign, 2026-09-14): code-native, no stock art, no
   invented logos. Left feature card is a static rank, never a count-up. Right column is two plain
   editorial stories, not matching boxed cards. Bottom panel counts up 12/5/2 once; ICCIE stays a
   static credential. Colors and type come from the site's own palette and Source Sans 3, not the
   kit's bundled hex/fonts. */
.hr-recognition { background: var(--surface-white); padding-block: 80px; }
.hr-recognition__heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; margin-bottom: 40px; }
.hr-recognition__heading h2 { font-size: clamp(38px, 4vw, 56px); letter-spacing: -1.8px; line-height: 1.04; margin: 0; }
.hr-recognition__heading > p { max-width: 455px; font-size: 18px; line-height: 1.65; color: var(--text-muted); margin: 0; padding-bottom: 3px; }
.hr-recognition__stories { display: grid; grid-template-columns: 1.1fr 1fr; gap: 38px; margin-bottom: 40px; }
.hr-recognition__feature { background: color-mix(in srgb, var(--c-accent-light) 20%, var(--surface-white)); border-radius: 20px; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.hr-recognition__rank { display: flex; align-items: center; gap: 24px; }
.hr-recognition__rank > span { font-size: 42px; letter-spacing: -4px; line-height: 1; color: var(--c-accent-strong); font-family: var(--font-display); }
.hr-recognition__rank b { font-size: 126px; font-weight: 500; letter-spacing: -8px; }
.hr-recognition__rank p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-accent-strong); border-left: 1px solid color-mix(in srgb, var(--c-accent-strong) 30%, transparent); padding-left: 24px; }
.hr-recognition__feature h3 { font-size: 30px; line-height: 1.15; letter-spacing: -.7px; margin: 0; }
.hr-recognition__feature-copy > p { font-size: 16px; line-height: 1.6; color: var(--text-muted); max-width: 460px; margin: 14px 0 0; }
.hr-recognition__feature .link-arrow { margin-top: 14px; }
.hr-recognition__secondary { display: grid; grid-template-rows: 1fr 1fr; }
.hr-recognition__story { padding: 22px 0; }
.hr-recognition__story:first-child { border-bottom: 1px solid var(--line); padding-top: 12px; }
.hr-recognition__story:last-child { padding-bottom: 0; }
.hr-recognition__meta { font-size: 14px; font-weight: 600; color: var(--c-accent-strong); display: flex; justify-content: space-between; gap: 15px; line-height: 1.5; margin-bottom: 14px; }
.hr-recognition__meta span { color: var(--text-muted); font-weight: 400; white-space: nowrap; }
.hr-recognition__story h3 { font-size: 27px; line-height: 1.18; letter-spacing: -.5px; margin: 0; }
.hr-recognition__story p { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 10px 0 8px; max-width: 445px; }
.hr-recognition__stats { background: linear-gradient(110deg, var(--c-brand-deep), var(--c-brand-soft)); color: var(--c-on-dark); border-radius: 20px; padding: 32px 38px 36px; }
.hr-recognition__stats-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.hr-recognition__stats-head h3 { font-size: 23px; font-weight: 400; letter-spacing: -.3px; margin: 0; color: var(--c-on-dark); }
.hr-recognition__stats .link-arrow { color: var(--c-accent-light); }
.hr-recognition__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-recognition__metric { padding: 0 24px; border-left: 1px solid rgba(255,255,255,0.15); }
.hr-recognition__metric:first-child { padding-left: 0; border: 0; }
.hr-recognition__metric:last-child { padding-right: 0; }
.hr-recognition__number { display: block; font-size: 76px; font-weight: 400; letter-spacing: -3px; line-height: 1.1; color: var(--c-accent-light); font-variant-numeric: tabular-nums; }
.hr-recognition__metric strong { display: block; font-size: 17px; font-weight: 600; margin-top: 10px; }
.hr-recognition__metric p { color: var(--c-on-dark-muted); font-size: 14px; line-height: 1.6; margin: 7px 0 0; }
.hr-recognition__credential { display: flex; height: 84px; align-items: center; font-size: 43px; letter-spacing: 1px; color: var(--c-accent-light); font-family: var(--font-display); }
@media (max-width: 900px) {
  .hr-recognition__heading { align-items: flex-start; gap: 25px; }
  .hr-recognition__heading > p { max-width: 350px; font-size: 16px; }
  .hr-recognition__stories { gap: 24px; }
  .hr-recognition__feature { padding: 28px; }
  .hr-recognition__rank { gap: 16px; }
  .hr-recognition__rank b { font-size: 96px; }
  .hr-recognition__rank p { padding-left: 16px; font-size: 14px; }
  .hr-recognition__metrics { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .hr-recognition__metric:nth-child(3) { border: 0; padding-left: 0; }
  .hr-recognition__metric p { max-width: 230px; }
  .hr-recognition__meta { display: block; }
  .hr-recognition__meta span { display: block; }
}
@media (max-width: 640px) {
  .hr-recognition { padding-block: 48px; }
  .hr-recognition__heading { display: block; margin-bottom: 28px; }
  .hr-recognition__heading > p { margin-top: 20px; max-width: none; }
  .hr-recognition__stories { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  .hr-recognition__rank b { font-size: 112px; }
  .hr-recognition__feature { padding: 26px; gap: 24px; }
  .hr-recognition__feature h3 { font-size: 28px; }
  .hr-recognition__story { padding: 24px 0; }
  .hr-recognition__story:last-child { padding-bottom: 6px; }
  .hr-recognition__meta { display: flex; font-size: 12px; gap: 8px; }
  .hr-recognition__stats { padding: 24px 22px; border-radius: 16px; }
  .hr-recognition__stats-head { display: block; margin-bottom: 22px; }
  .hr-recognition__stats-head h3 { font-size: 22px; }
  .hr-recognition__stats-head .link-arrow { margin-top: 5px; }
  .hr-recognition__metric { padding: 0 0 0 16px; }
  .hr-recognition__metric:nth-child(odd) { padding-left: 0; padding-right: 12px; }
  .hr-recognition__number { font-size: 62px; }
  .hr-recognition__credential { font-size: 30px; height: 68px; }
  .hr-recognition__metric strong { font-size: 15px; }
  .hr-recognition__metric p { font-size: 13px; }
  .hr-recognition__metrics { gap: 26px 0; }
}