styles.css

/* SPDX-FileCopyrightText: 2024-2026 Sebastien Rousseau */
/* SPDX-License-Identifier: Apache-2.0 OR MIT */
@charset "UTF-8";

:root {
  --cl-primary: light-dark(oklch(0.4 0.2 250), oklch(0.7 0.16 250));
  --cl-secondary: light-dark(oklch(0.38 0.15 200), oklch(0.65 0.12 200));
  --cl-success: light-dark(oklch(0.7 0.2 140), oklch(0.75 0.15 140));
  --cl-info: light-dark(oklch(0.85 0.15 100), oklch(0.88 0.12 100));
  --cl-warning: light-dark(oklch(0.8 0.15 80), oklch(0.82 0.12 80));
  --cl-danger: light-dark(oklch(0.55 0.25 20), oklch(0.65 0.2 20));
/* Background tints. Concrete light-dark() pairs (no relative-color
     syntax) so older Chromium / pa11y / WAVE can resolve them — the
     fallback to `transparent` was making `.alert-warning` and
     `.alert-danger` register 1.21:1 contrast in WCAG audits.
     Each tint pairs a near-white tint of the brand hue with a near-
     black tint at the same hue + chroma for dark mode. */
  --bg-primary: light-dark(oklch(0.96 0.03 250), oklch(0.18 0.04 250));
  --bg-secondary: light-dark(oklch(0.96 0.03 200), oklch(0.18 0.04 200));
  --bg-success: light-dark(oklch(0.96 0.03 140), oklch(0.18 0.04 140));
  --bg-info: light-dark(oklch(0.96 0.04 100), oklch(0.18 0.04 100));
  --bg-warning: light-dark(oklch(0.96 0.04 80), oklch(0.18 0.04 80));
  --bg-danger: light-dark(oklch(0.96 0.03 20), oklch(0.18 0.04 20));
  --cl-grey-100: light-dark(oklch(0.98 0.01 250), oklch(0.15 0.01 250));
  --cl-grey-200: light-dark(oklch(0.9 0.01 250), oklch(0.25 0.01 250));
}
.text-primary {
  color: var(--cl-primary);
}
.text-secondary {
  color: var(--cl-secondary);
}
.text-white {
  color: var(--cl-white);
}
.text-black {
  color: var(--cl-black);
}
.bg-primary {
  background-color: var(--bg-primary);
}
.bg-surface {
  background-color: var(--cl-surface);
}
.bg-black {
  background-color: var(--cl-black);
}
.bg-white {
  background-color: var(--cl-white);
}
.bg-soft {
  background-color: var(--cl-grey-100);
}
:root {
  color-scheme: light dark;
  --gr: 1.62;
  --gr-fsb: clamp(1.0625rem, 1.4vw, 1.25rem);
  --gr-fsl: clamp(1.25rem, 2vw, 1.5rem);
  --gr-fss: clamp(0.75rem, 1vw, 0.875rem);
  --gr-h1: clamp(2.5rem, 8vw, 4.5rem);
  --gr-h2: clamp(2rem, 5vw, 3rem);
  --gr-h3: clamp(1.5rem, 3vw, 1.875rem);
  --gr-h4: clamp(1.25rem, 2vw, 1.5rem);
  --gr-h5: clamp(1.125rem, 1vw, 1.25rem);
  --gr-h6: clamp(1rem, 1.4vw, 1.125rem);
  --gr-lh-h1: 1.1;
  --gr-lh-h2: 1.1;
  --gr-lh-h3: 1.2;
  --gr-lh-h4: 1.3;
  --gr-lh-h5: 1.4;
  --gr-lh-h6: 1.5;
  --cl-white: oklch(1 0 0);
  --cl-black: oklch(0 0 0);
  --background-color: light-dark(oklch(1 0 0), oklch(0.05 0.01 250));
  --foreground-color: light-dark(oklch(0.11 0.01 250), oklch(0.95 0.01 250));
  --cl-surface: light-dark(oklch(0.98 0.01 250), oklch(0.12 0.02 250));
  --link-color: light-dark(#0056b3, #66b2ff);
  --link-color-visited: light-dark(#5a3a8c, #b89bf0);
  --link-color-hover: light-dark(#003d7a, #9cf);
  --link-color-focus: light-dark(#003d7a, #9cf);
  --link-color-active: light-dark(#003d7a, #9cf);
  --focus-ring-color: var(--link-color);
  --bp-sm: 30em;
  --bp-md: 48em;
  --bp-lg: 64em;
  --bp-xl: 80em;
  --bp-xxl: 96em;
}
@layer theme.tokens, theme.base, theme.layout, theme.components, theme.variants;

@layer theme.tokens {
:root,
:root[data-theme="light"] {
  --bg: #f5f4ef;
  --bg-soft: #eeeaf2;
  --surface: #ffffff;
  --surface-soft: #f4f0f7;
  --ink: #101713;
  --ink-soft: #2e4037;
  --ink-muted: #3f4642;
  --accent: #5a347d;
  --accent-hover: #40215d;
  --accent-ink: #ffffff;
  --accent-soft: #ecddf7;
  --on-accent-soft: #3d2255;
  --focus: #875100;
  --line: #707a74;
  --line-soft: #c9cec9;
  --scene: #382247;
  --scene-ink: #ffffff;
  --scene-muted: #d9eee6;
  --scene-accent: #d3b2ec;
  --glow: #d8c0e6;
  --shadow: 0 1.5rem 4rem rgb(12 31 23 / 14%);
  --background-color: var(--bg);
  --foreground-color: var(--ink);
  --focus-ring-color: var(--focus);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0d1210;
  --bg-soft: #18141b;
  --surface: #201923;
  --surface-soft: #291f2e;
  --ink: #f5faf7;
  --ink-soft: #d4e3da;
  --ink-muted: #b9cec1;
  --accent: #d8b5f8;
  --accent-hover: #ead6ff;
  --accent-ink: #251330;
  --accent-soft: #49305c;
  --on-accent-soft: #faf1ff;
  --focus: #ffc870;
  --line: #82968a;
  --line-soft: #3e5147;
  --scene: #160d1c;
  --scene-ink: #ffffff;
  --scene-muted: #d9eee6;
  --scene-accent: #e1c2fa;
  --glow: #563867;
  --shadow: 0 1.5rem 4rem rgb(0 0 0 / 44%);
  --background-color: var(--bg);
  --foreground-color: var(--ink);
  --focus-ring-color: var(--focus);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1210;
    --bg-soft: #18141b;
    --surface: #201923;
    --surface-soft: #291f2e;
    --ink: #f5faf7;
    --ink-soft: #d4e3da;
    --ink-muted: #b9cec1;
    --accent: #d8b5f8;
    --accent-hover: #ead6ff;
    --accent-ink: #251330;
    --accent-soft: #49305c;
    --on-accent-soft: #faf1ff;
    --focus: #ffc870;
    --line: #82968a;
    --line-soft: #3e5147;
    --scene: #160d1c;
    --scene-ink: #ffffff;
    --scene-muted: #d9eee6;
    --scene-accent: #e1c2fa;
    --glow: #563867;
    --background-color: var(--bg);
    --foreground-color: var(--ink);
    --focus-ring-color: var(--focus);
    color-scheme: dark;
  }
}

:root {
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.22vw, 1.14rem);
  --step-1: clamp(1.24rem, 1.12rem + 0.58vw, 1.62rem);
  --step-2: clamp(1.62rem, 1.35rem + 1.3vw, 2.5rem);
  --step-3: clamp(2.15rem, 1.65rem + 2.5vw, 3.85rem);
  --step-4: clamp(2.8rem, 1.85rem + 4.8vw, 6rem);
  --space: clamp(1rem, 0.72rem + 1.4vw, 2rem);
  --section: clamp(4rem, 2.7rem + 6vw, 8rem);
  --radius: 1rem;
  --radius-lg: 1.8rem;
  --measure: 67ch;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
}
}

@layer theme.rebuild {
.style-visage {
  --vi-bg:#f3f2f5; --vi-surface:#fff; --vi-soft:#e6d6f4;
  --vi-ink:#111; --vi-muted:#454047; --vi-accent:#5b287b; --vi-accent-hover:#431a60;
  --vi-line:#737078; --vi-button:#17131b; --vi-button-ink:#fff;
  --vi-highlight:#d9c5f1; --vi-highlight-ink:#141018; --vi-footer:#120d1a;
  --clinical:var(--vi-bg); --bg:var(--vi-bg); --ink:var(--vi-ink); --ink-soft:var(--vi-muted);
  --muted:var(--vi-muted); --lilac:var(--vi-accent); --accent:var(--vi-accent);
  --accent-hover:var(--vi-accent-hover); --accent-ink:#fff; --surface:var(--vi-surface);
  --surface-soft:var(--vi-soft); --focus:var(--vi-accent); --focus-ring-color:var(--vi-accent);
  background:var(--vi-bg); color:var(--vi-ink);
}
body.style-visage {
  background:var(--vi-bg) !important;
  color:var(--vi-ink) !important;
}
:root[data-theme="dark"] .style-visage {
  --vi-bg:#100d14; --vi-surface:#19151f; --vi-soft:#2d2337;
  --vi-ink:#f8f5fa; --vi-muted:#d2cbd6; --vi-accent:#e1c4f3; --vi-accent-hover:#f0dcfb;
  --vi-line:#8b828e; --vi-button:#e6d6f4; --vi-button-ink:#100d14;
  --vi-highlight:#392447; --vi-highlight-ink:#fff; --vi-footer:#09070b;
  --accent-ink:#100d14;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .style-visage {
  --vi-bg:#100d14; --vi-surface:#19151f; --vi-soft:#2d2337;
  --vi-ink:#f8f5fa; --vi-muted:#d2cbd6; --vi-accent:#e1c4f3; --vi-accent-hover:#f0dcfb;
  --vi-line:#8b828e; --vi-button:#e6d6f4; --vi-button-ink:#100d14;
  --vi-highlight:#392447; --vi-highlight-ink:#fff; --vi-footer:#09070b;
  --accent-ink:#100d14;
}}
.style-visage .wrap { width:min(calc(100% - 3rem),80rem); margin-inline:auto; }
.style-visage h1,.style-visage h2,.style-visage h3 { color:inherit; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif; font-weight:600; letter-spacing:-0.03em; }
.style-visage .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--vi-bg) 84%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid color-mix(in srgb, var(--vi-line) 40%, transparent);
  transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-backdrop-filter 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Unscrolled state over spatial hero: high-contrast AAA white typography & dark scrim */
body:has(.hero-spatial) .site-header:not(.scrolled),
.site-header.on-hero:not(.scrolled) {
  background: linear-gradient(to bottom, rgba(8, 6, 12, 0.85) 0%, rgba(8, 6, 12, 0.45) 70%, transparent 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body:has(.hero-spatial) .site-header:not(.scrolled) .brand,
.site-header.on-hero:not(.scrolled) .brand {
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

body:has(.hero-spatial) .site-header:not(.scrolled) .site-nav a:not(.nav-cta),
.site-header.on-hero:not(.scrolled) .site-nav a:not(.nav-cta) {
  color: #ffffff !important;
  font-weight: 650;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

body:has(.hero-spatial) .site-header:not(.scrolled) .site-nav a:not(.nav-cta):hover,
.site-header.on-hero:not(.scrolled) .site-nav a:not(.nav-cta):hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18) !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

body:has(.hero-spatial) .site-header:not(.scrolled) .theme-toggle,
.site-header.on-hero:not(.scrolled) .theme-toggle {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body:has(.hero-spatial) .site-header:not(.scrolled) .nav-toggle,
.site-header.on-hero:not(.scrolled) .nav-toggle {
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body:has(.hero-spatial) .site-header:not(.scrolled) .nav-toggle svg path,
.site-header.on-hero:not(.scrolled) .nav-toggle svg path {
  stroke: #ffffff !important;
}

/* Scrolled state: visionOS frosted glass navbar with automatic light/dark ink */
body:has(.hero-spatial) .site-header.scrolled,
.style-visage .site-header.scrolled {
  background: color-mix(in srgb, var(--vi-bg) 84%, transparent) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--vi-line) 35%, transparent) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="dark"] body:has(.hero-spatial) .site-header.scrolled,
:root[data-theme="dark"] .style-visage .site-header.scrolled {
  background: color-mix(in srgb, var(--vi-bg) 85%, transparent) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.site-header.scrolled .brand {
  color: var(--vi-ink) !important;
  text-shadow: none !important;
}

.site-header.scrolled .site-nav a:not(.nav-cta) {
  color: var(--vi-muted) !important;
  text-shadow: none !important;
}

.site-header.scrolled .site-nav a:not(.nav-cta):hover {
  color: var(--vi-ink) !important;
  background: var(--vi-soft) !important;
}

.site-header.scrolled .theme-toggle {
  color: var(--vi-ink) !important;
  border-color: color-mix(in srgb, var(--vi-line) 40%, transparent) !important;
  background: color-mix(in srgb, var(--vi-surface) 80%, transparent) !important;
  box-shadow: none !important;
}

.site-header.scrolled .nav-toggle {
  color: var(--vi-ink) !important;
  border-color: color-mix(in srgb, var(--vi-line) 40%, transparent) !important;
  background: color-mix(in srgb, var(--vi-surface) 80%, transparent) !important;
}

.site-header.scrolled .nav-toggle svg path {
  stroke: var(--vi-ink) !important;
}
.style-visage .brand-mark { display:none; }
.style-visage .site-header .brand { color:var(--vi-ink); font-weight:800; font-size:1.15rem; gap:.75rem; text-decoration:none; }
.style-visage .site-header .brand img { width:32px; height:32px; flex-shrink:0; }
.style-visage .site-header .site-nav { display:flex; align-items:center; gap:.25rem; margin-inline-start:auto; }
.style-visage .site-header .site-nav a { flex:0 0 auto; white-space:nowrap !important; padding:.5rem .75rem; color:var(--vi-muted); font-size:.95rem; font-weight:600; text-decoration:none; border-radius:8px; transition: all .2s cubic-bezier(0.16, 1, 0.3, 1); }
.style-visage .site-header .site-nav a:hover { color:var(--vi-ink); background:var(--vi-soft); }
.style-visage .site-nav .nav-cta,.style-visage .site-header .site-nav .nav-cta { border-radius:9999px; background:var(--vi-accent) !important; color:var(--vi-button-ink, #100d14) !important; font-weight:700; padding:.55rem 1.25rem; margin-inline-start:.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 12px rgba(91,40,123,0.2), inset 0 1px 0 rgba(255,255,255,0.4); transition: all .2s cubic-bezier(0.16, 1, 0.3, 1); }
.style-visage .site-nav .nav-cta:hover,.style-visage .site-header .site-nav .nav-cta:hover { background:var(--vi-accent-hover) !important; color:var(--vi-button-ink, #100d14) !important; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 6px 18px rgba(91,40,123,0.3), inset 0 1px 0 rgba(255,255,255,0.5); }
.style-visage .site-nav .nav-cta:active,.style-visage .site-header .site-nav .nav-cta:active { transform: scale(0.975); box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
#ssg-search-btn, #ssg-search-widget, .style-visage #ssg-search-btn { display:none!important; }
.style-visage :focus-visible { outline:3px solid var(--vi-accent); outline-offset:4px; }
.style-visage .skip-link { background:var(--vi-button); color:var(--vi-button-ink); }
.lilac-label { max-width:none; color:var(--vi-accent); font-size:.8125rem; font-weight:800; letter-spacing:.12em; line-height:1.35; text-transform:uppercase; }
.style-visage .primary,
.style-visage .actions .primary,
.style-visage .consultation-card .primary,
.style-visage .visage-closing .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.65rem 1.75rem;
  border-radius: 9999px;
  background: var(--vi-accent) !important;
  color: var(--vi-button-ink, #ffffff) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--vi-accent-hover) 80%, black);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 14px rgba(91, 40, 123, 0.28),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.style-visage .primary:hover,
.style-visage .actions .primary:hover,
.style-visage .consultation-card .primary:hover,
.style-visage .visage-closing .primary:hover {
  background: var(--vi-accent-hover) !important;
  transform: translateY(-1.5px);
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(91, 40, 123, 0.38),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.55);
}

.style-visage .primary:active,
.style-visage .actions .primary:active,
.style-visage .consultation-card .primary:active,
.style-visage .visage-closing .primary:active {
  transform: scale(0.975);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Visage Standard Intro */
.visage-intro { padding:clamp(4rem,6vw,6rem) 0 clamp(3rem,5vw,4.5rem); text-align:center; }
.visage-intro .wrap { display:grid; justify-items:center; }
.visage-intro h1 { max-width:22ch; margin:.9rem 0 0; font-size:clamp(3rem,5.5vw,5.25rem); line-height:1; letter-spacing:-.06em; }
.visage-intro h1 em { color:var(--vi-accent); font-style:normal; }
.visage-intro>div>p:not(.lilac-label) { max-width:62ch; margin:1.75rem auto; color:var(--vi-muted); font-size:clamp(1.06rem,1.5vw,1.2rem); line-height:1.6; }
.style-visage .actions { display:flex; gap:.75rem; }
.style-visage .actions a:not(.primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.65rem 1.65rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--vi-surface) 75%, transparent) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--vi-line) 40%, transparent);
  color: var(--vi-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 650;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.style-visage .actions a:not(.primary):hover {
  background: var(--vi-surface) !important;
  border-color: var(--vi-accent);
  color: var(--vi-accent) !important;
  transform: translateY(-1px);
}
.hero-assurances { display:flex; flex-wrap:wrap; justify-content:center; gap:.65rem 1.75rem; margin:2rem 0 0; padding:0; color:var(--vi-muted); font-size:.875rem; font-weight:700; list-style:none; }
.hero-assurances li::before { margin-right:.55rem; color:var(--vi-accent); content:"✓"; }

/* ==========================================================================
   Apple Vision Pro Spatial Hero & Frosted Glass Layering
   ========================================================================== */
.visage-intro.hero-spatial {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -4.5rem;
  padding: clamp(6.5rem, 12vw, 9rem) 0 clamp(4rem, 6vw, 5.5rem);
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero-bg-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transform: scale(1.03);
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform 0.15s ease-out;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 75% at 50% 45%, rgba(10, 8, 14, 0.42) 0%, rgba(10, 8, 14, 0.85) 68%, rgba(10, 8, 14, 0.98) 100%),
    linear-gradient(to bottom, rgba(10, 8, 14, 0.6) 0%, transparent 20%, transparent 60%, var(--vi-bg) 100%);
  pointer-events: none;
}

:root[data-theme="light"] .hero-scrim {
  background:
    radial-gradient(ellipse 95% 75% at 50% 45%, rgba(14, 11, 18, 0.48) 0%, rgba(14, 11, 18, 0.86) 68%, rgba(14, 11, 18, 0.98) 100%),
    linear-gradient(to bottom, rgba(14, 11, 18, 0.65) 0%, transparent 20%, transparent 60%, var(--vi-bg) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 64rem;
  padding-inline: 1.5rem;
  margin-inline: auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1.15rem;
  margin-bottom: 0.5rem;
  border-radius: 9999px;
  background: rgba(225, 196, 243, 0.14) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(225, 196, 243, 0.35);
  color: #f5e8fc !important;
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.visage-intro.hero-spatial h1 {
  max-width: 24ch;
  margin: 0.75rem auto 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(2.75rem, 5.5vw, 5.25rem);
  font-weight: 850;
  letter-spacing: -0.05em;
  line-height: 1.05;
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.visage-intro.hero-spatial h1 em {
  color: #e5ccf8 !important;
  font-style: normal;
  text-shadow: 0 0 32px rgba(225, 196, 243, 0.45);
}

.hero-lead {
  max-width: 58ch;
  margin: 1.5rem auto 2.25rem !important;
  color: #e8e2ef !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.62;
  font-weight: 450;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.hero-actions .secondary-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.65rem 1.85rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.hero-actions .secondary-glass:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1.5px);
  box-shadow: 
    0 8px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.7);
}

.hero-actions .secondary-glass:active {
  transform: scale(0.975);
}

.hero-spatial .hero-assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin: 0;
  padding: 0;
  color: #dcd3e5 !important;
  font-size: 0.875rem;
  font-weight: 650;
  list-style: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.hero-spatial .hero-assurances li::before {
  margin-right: 0.5rem;
  color: #d8b5f8 !important;
  content: "✓";
  font-weight: 800;
}

/* Apple-style Scroll Indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.hero-scroll-indicator .scroll-label {
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.scroll-mouse {
  width: 20px;
  height: 32px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  position: relative;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.scroll-wheel {
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  animation: mouseScroll 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes mouseScroll {
  0% { opacity: 1; transform: translate(-50%, 0); }
  50% { opacity: 0.2; transform: translate(-50%, 9px); }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* Parallax zoom & fade via CSS scroll timeline when supported */
@supports (animation-timeline: scroll()) {
  @keyframes heroZoomFade {
    0% {
      transform: scale(1.03);
      opacity: 1;
    }
    100% {
      transform: scale(1.16);
      opacity: 0.25;
    }
  }
  @keyframes heroContentShift {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(50px);
      opacity: 0.1;
    }
  }
  .hero-spatial .hero-bg-photo {
    animation: heroZoomFade linear both;
    animation-timeline: scroll();
    animation-range: 0 100vh;
  }
  .hero-spatial .hero-content {
    animation: heroContentShift linear both;
    animation-timeline: scroll();
    animation-range: 0 85vh;
  }
}

/* VisionOS Specular Sheen on Frosted Glass Surfaces */
.trust-strip li,
.three-cells article,
.process-grid article,
.consultation-card {
  position: relative;
  overflow: hidden;
}

.trust-strip li::before,
.three-cells article::before,
.process-grid article::before,
.consultation-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.12),
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.trust-strip li:hover::before,
.three-cells article:hover::before,
.process-grid article:hover::before,
.consultation-card:hover::before {
  opacity: 1;
}

/* Scroll Reveal Dynamics */
.js-ready .scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-ready .scroll-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-wheel {
    animation: none !important;
  }
  .hero-spatial .hero-bg-photo,
  .hero-spatial .hero-content {
    animation: none !important;
  }
  .js-ready .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.trust-strip {
  border-block: 1px solid color-mix(in srgb, var(--vi-line) 30%, transparent);
  background: color-mix(in srgb, var(--vi-surface) 60%, var(--vi-bg));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: clamp(2rem, 4vw, 3rem) 0;
}

.trust-strip ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-strip li {
  min-width: 0;
  padding: 1.75rem 1.5rem;
  background: color-mix(in srgb, var(--vi-surface) 80%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--vi-line) 35%, transparent);
  border-radius: 16px;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

:root[data-theme="dark"] .trust-strip li {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.trust-strip li:hover {
  transform: translateY(-2px);
  border-color: var(--vi-accent);
  box-shadow: 0 8px 24px rgba(91, 40, 123, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root[data-theme="dark"] .trust-strip li:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--vi-accent);
}

.trust-strip b {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
  font-weight: 850;
  letter-spacing: -0.04em;
  font-feature-settings: "tnum" on, "cv02" on;
  color: var(--vi-ink);
  line-height: 1.1;
}

.trust-strip span {
  display: block;
  margin-top: 0.65rem;
  color: var(--vi-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  font-weight: 500;
}

.analysis-stage { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--vi-bg); }
.image-shell {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vi-line) 40%, transparent);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}
.image-shell picture { display: block; }
.image-shell img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center; display: block; }

.consultation-card {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  width: min(34rem, calc(100% - 3rem));
  padding: clamp(2rem, 3.5vw, 2.75rem);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px;
  background: color-mix(in srgb, var(--vi-surface) 84%, transparent);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  color: var(--vi-ink);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.16),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.85);
}

:root[data-theme="dark"] .consultation-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--vi-surface) 80%, transparent);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.consultation-card h2 {
  margin: 0.65rem 0 0.9rem;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--vi-ink);
}
.consultation-card > p:not(.lilac-label) {
  color: var(--vi-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.consultation-card .primary { margin-top: 0.5rem; }

.terminal-stage { padding:clamp(4rem,7vw,6rem) 0; background:var(--vi-bg); }
.terminal-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(24rem,1.25fr); gap:3rem 5rem; align-items:center; }
.terminal-box {
  border: 1px solid color-mix(in srgb, var(--vi-line) 40%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, #140e1c 94%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
  max-width: 100%;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: color-mix(in srgb, #1d1527 90%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #332442 60%, transparent);
}
.terminal-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.terminal-title {
  margin-left: 0.5rem;
  color: #b5a9c2;
  font-size: 0.8125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.terminal-box pre {
  margin: 0 !important;
  padding: 1.25rem 1.5rem !important;
  overflow-x: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1.65;
}
.terminal-box pre::before,
.terminal-box pre::after {
  display: none !important;
}
.terminal-box code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  color: #f0e6f8;
  white-space: pre;
  display: block;
}
.terminal-body {
  padding: 1.25rem 1.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #f0e6f8;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.t-line {
  display: block;
  white-space: pre;
  min-width: fit-content;
}
.t-comment { color: #c2b1d0; }
.t-prompt { color: #d8b5f8; font-weight: 700; margin-right: 0.45rem; }
.t-key { color: #e1c4f3; }
.t-val { color: #9bc0ff; }


.visage-features { padding: clamp(5rem, 9vw, 8rem) 0; background: var(--vi-surface); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.55fr); gap: 2rem 5rem; align-items: end; margin-bottom: 3.5rem; }
.section-heading .lilac-label { grid-column: 1/-1; }
.section-heading h2 { max-width: none; font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.055em; }
.section-heading > p:last-child { color: var(--vi-muted); font-size: 1rem; line-height: 1.6; }

.three-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  border: none !important;
}

.three-cells article {
  min-height: 18rem;
  padding: clamp(2rem, 3.5vw, 2.75rem);
  border: 1px solid color-mix(in srgb, var(--vi-line) 40%, transparent) !important;
  border-radius: 18px;
  background: color-mix(in srgb, var(--vi-surface) 80%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

:root[data-theme="dark"] .three-cells article {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.three-cells article:hover {
  transform: translateY(-4px);
  border-color: var(--vi-accent) !important;
  box-shadow: 
    0 16px 40px rgba(91, 40, 123, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

:root[data-theme="dark"] .three-cells article:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--vi-accent);
}

.three-cells span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: var(--vi-soft);
  color: var(--vi-accent);
  font-size: 0.8125rem;
  font-weight: 850;
  border: 1px solid color-mix(in srgb, var(--vi-accent) 30%, transparent);
}

.three-cells h3 {
  margin: 2.25rem 0 0.85rem;
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--vi-ink);
}

.three-cells p {
  color: var(--vi-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.visage-process { padding: clamp(6rem, 10vw, 9rem) 0; background: var(--vi-bg); }
.visage-process h2 { max-width: 18ch; margin: 0.8rem 0 4rem; font-size: clamp(2.75rem, 5.5vw, 5rem); line-height: 1.05; letter-spacing: -0.05em; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  border-top: none !important;
}

.process-grid article {
  min-width: 0;
  padding: 2rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--vi-line) 35%, transparent) !important;
  border-radius: 16px;
  background: color-mix(in srgb, var(--vi-surface) 75%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

:root[data-theme="dark"] .process-grid article {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.process-grid article:hover {
  transform: translateY(-2px);
  border-color: var(--vi-accent) !important;
  box-shadow: 0 8px 24px rgba(91, 40, 123, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root[data-theme="dark"] .process-grid article:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--vi-accent);
}

.process-grid b {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 2.25rem;
  border: 1.5px solid var(--vi-accent);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--vi-accent) 10%, transparent);
  color: var(--vi-accent);
  font-weight: 850;
  font-size: 0.95rem;
}

.process-grid h3 {
  font-size: 1.35rem;
  font-weight: 750;
  color: var(--vi-ink);
  letter-spacing: -0.02em;
}

.process-grid p {
  margin-top: 0.75rem;
  color: var(--vi-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.process-grid small {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: var(--vi-soft);
  color: var(--vi-accent);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.45;
}

.visage-specialists { padding:clamp(6rem,10vw,9rem) 0; background:var(--vi-soft); }
.specialist-layout>header { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.55fr); gap:1rem 5rem; align-items:end; }
.specialist-layout>header .lilac-label { grid-column:1/-1; }
.specialist-layout>header h2 { max-width:none; font-size:clamp(2.75rem,5vw,4.5rem); line-height:1; letter-spacing:-.055em; }
.specialist-layout>header>p:last-child { color:var(--vi-muted); line-height:1.6; }
.specialist-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:3rem; background:var(--vi-line); border:1px solid var(--vi-line); }
.specialist-grid article { padding:clamp(1.5rem,3vw,2.5rem); background:var(--vi-surface); }
.specialist-grid article>span { display:grid; place-items:center; width:4.25rem; aspect-ratio:1; border-radius:50%; background:var(--vi-accent); color:var(--vi-bg); font-weight:800; }
.specialist-grid article>p:first-of-type { margin-top:3rem; color:var(--vi-accent); font-size:.8125rem; font-weight:800; text-transform:uppercase; }
.specialist-grid h3 { margin:.45rem 0 1.25rem; font-size:1.75rem; }
.specialist-grid article>p:last-child { color:var(--vi-muted); line-height:1.55; }
.demo-note { max-width:70ch; margin-top:1rem; color:var(--vi-muted); font-size:.8125rem; line-height:1.5; }

.privacy-panel {
  padding: clamp(5rem, 8vw, 7rem) 0;
  background: linear-gradient(135deg, #140e1c 0%, #211728 100%);
  color: #fff;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.privacy-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 0.3fr) minmax(0, 1fr) auto;
  gap: 2rem 4rem;
  align-items: center;
}

.privacy-panel .lilac-label { color: #e1c4f3; }
.privacy-panel h2 { margin-bottom: 0.75rem; font-size: clamp(2.3rem, 4vw, 3.8rem); letter-spacing: -0.045em; }
.privacy-panel div>p { max-width: 58ch; color: #eee8f1; line-height: 1.6; }

.privacy-panel a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.65rem 1.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.privacy-panel a:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.visage-faq { padding: clamp(6rem, 10vw, 9rem) 0; background: var(--vi-surface); }
.faq-layout { display: grid; grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1fr); gap: 3rem 7rem; }
.faq-layout h2 { margin-top: 0.75rem; font-size: clamp(2.75rem, 5vw, 4.5rem); letter-spacing: -0.055em; }

.visage-faq details {
  border-top: 1px solid color-mix(in srgb, var(--vi-line) 40%, transparent);
  transition: background 0.2s ease;
}

.visage-faq details:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--vi-line) 40%, transparent);
}

.visage-faq summary {
  min-height: 4.5rem;
  padding: 1.3rem 2.25rem 1.3rem 0;
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--vi-ink);
  cursor: pointer;
  list-style: none;
  position: relative;
}

.visage-faq summary::-webkit-details-marker {
  display: none;
}

.visage-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--vi-accent);
  transition: transform 0.2s ease;
}

.visage-faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-layout details p { padding: 0 2rem 1.5rem 0; color: var(--vi-muted); line-height: 1.6; }

.visage-closing { padding:clamp(6rem,10vw,9rem) 0; background:var(--vi-highlight); color:var(--vi-highlight-ink); }
.visage-closing .wrap { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(17rem,.45fr); gap:3rem 7rem; align-items:end; }
.visage-closing .lilac-label { color:var(--vi-highlight-ink); }
.visage-closing h2 { max-width:15ch; margin-top:.8rem; font-size:clamp(3rem,6vw,5.75rem); line-height:1; letter-spacing:-.055em; }
.visage-closing h2 em { color:var(--vi-highlight-ink); font-style:normal; }
.visage-closing .wrap>div:last-child>p { margin-bottom:1.5rem; line-height:1.6; }
.style-visage .site-footer { background:var(--vi-footer); color:#fff; border-color:#807687; }
.style-visage .site-footer a,.style-visage .site-footer p,.style-visage .site-footer h2 { color:#fff; }
.style-visage .footer-grid a { min-width:3rem; }
body:not(:has(.visage-intro)) .eyebrow { color:var(--vi-accent); }
body:not(:has(.visage-intro)) .lead { color:var(--vi-muted); }

@media(max-width:64rem){
  .trust-strip ul { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .three-cells { grid-template-columns: 1fr; gap: 1.25rem; }
  .privacy-grid { grid-template-columns: 1fr; align-items: start; }
  .privacy-grid a { width: fit-content; }
}

@media(max-width:48rem){
  .style-visage .wrap { width: min(calc(100% - 2rem), 80rem); }
  .visage-intro { padding-top: 4.5rem; }
  .visage-intro h1 { font-size: clamp(2.65rem, 12vw, 4rem); }
  .image-shell img { aspect-ratio: 4/5; object-position: 44% center; }
  .consultation-card { position: relative; right: auto; bottom: auto; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.4); }
  .section-heading, .specialist-layout>header, .faq-layout, .visage-closing .wrap { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
}

@media(max-width:32rem){
  .style-visage .actions { align-items: stretch; flex-direction: column; width: 100%; }
  .trust-strip ul { grid-template-columns: 1fr; }
}
/* Visage Documentation & Inner Page System */
.style-visage.page-shell,
.style-visage .page-shell {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
  background: var(--vi-bg);
  min-height: calc(100vh - 20rem);
}

.style-visage .page-container {
  width: min(calc(100% - 3rem), 58rem);
  margin-inline: auto;
}

@media (max-width: 48rem) {
  .style-visage .page-container {
    width: min(calc(100% - 2rem), 58rem);
  }
}

.style-visage .page-meta-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--vi-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.style-visage .page-meta-header .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--vi-muted);
}

.style-visage .page-meta-header .breadcrumb a {
  color: var(--vi-accent);
  text-decoration: none;
  font-weight: 600;
}

.style-visage .page-meta-header .breadcrumb a:hover {
  text-decoration: underline;
}

.style-visage .page-meta-header .breadcrumb .sep {
  color: var(--vi-line);
}

.style-visage .page-meta-header .breadcrumb li[aria-current="page"] {
  color: var(--vi-muted);
  font-weight: 500;
}

.style-visage .content-body {
  width: 100%;
}

.style-visage .page-container .prose {
  max-width: none;
}

.style-visage .content-body h1 {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--vi-ink);
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.style-visage .content-body h1 + p {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.65;
  color: var(--vi-muted);
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--vi-line);
  max-width: 100%;
}

.style-visage .content-body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--vi-ink);
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vi-line);
}

.style-visage .content-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--vi-ink);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.style-visage .content-body p {
  margin-bottom: 1.35rem;
  line-height: 1.65;
  color: var(--vi-ink);
  font-size: 1.05rem;
  max-width: 100%;
}

.style-visage .content-body a {
  color: var(--vi-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.style-visage .content-body a:hover {
  color: var(--vi-accent-hover);
}

.style-visage .content-body pre,
.style-visage .content-body pre.highlight {
  position: relative;
  margin: 1.5rem 0 2.25rem;
  padding: 2.75rem 1.5rem 1.5rem;
  background: #140e1c !important;
  color: #f0e6f8 !important;
  border: 1px solid #3d3446 !important;
  border-radius: 8px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.65;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  -webkit-overflow-scrolling: touch;
}

.style-visage .content-body pre::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2rem;
  background: #1d1527;
  border-bottom: 1px solid #332442;
  border-radius: 7px 7px 0 0;
}

.style-visage .content-body pre::after {
  content: "•••";
  position: absolute;
  top: 0.25rem;
  left: 1rem;
  font-size: 1.15rem;
  line-height: 1.5;
  letter-spacing: 0.15em;
  color: #8b759e;
}

:root[data-theme="dark"] .style-visage .content-body pre,
:root[data-theme="dark"] .style-visage .content-body pre.highlight {
  background: #0d0913 !important;
  border-color: #4a3f55 !important;
}

:root[data-theme="dark"] .style-visage .content-body pre::before {
  background: #171120;
  border-bottom-color: #2b1f38;
}

.style-visage .content-body pre code,
.style-visage .content-body pre.highlight code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre;
  display: block;
}

.style-visage .content-body :not(pre) > code {
  padding: 0.2em 0.45em;
  background: var(--vi-soft);
  color: var(--vi-ink);
  border: 1px solid color-mix(in srgb, var(--vi-line) 40%, transparent);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  font-weight: 600;
  white-space: nowrap;
  word-break: keep-all;
}

.style-visage .content-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95rem;
  border: 1px solid var(--vi-line);
  border-radius: 6px;
  overflow: hidden;
}

.style-visage .content-body th,
.style-visage .content-body td {
  padding: 0.85rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--vi-line) 30%, transparent);
  text-align: left;
  line-height: 1.5;
}

.style-visage .content-body th {
  background: var(--vi-surface);
  color: var(--vi-ink);
  font-weight: 750;
  border-bottom: 2px solid var(--vi-line);
}

.style-visage .content-body tr:nth-child(even) td {
  background: color-mix(in srgb, var(--vi-surface) 60%, var(--vi-bg));
}

.style-visage .content-body hr {
  border: 0;
  border-top: 1px solid var(--vi-line);
  margin: 3rem 0;
  opacity: 0.6;
}

.style-visage .content-body ul,
.style-visage .content-body ol {
  padding-left: 1.75rem;
  margin: 1rem 0 1.75rem;
  max-width: 100%;
}

.style-visage .content-body li {
  margin: 0.5rem 0;
  line-height: 1.65;
  color: var(--vi-ink);
}

.style-visage .content-body li::marker {
  color: var(--vi-accent);
}

.style-visage .content-body blockquote {
  border-left: 4px solid var(--vi-accent);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: var(--vi-surface);
  border-radius: 0 6px 6px 0;
  color: var(--vi-muted);
  font-style: italic;
  max-width: 100%;
}

/* ==========================================================================
   Apple-Grade FAQ System Components
   ========================================================================== */

.faq-container {
  width: 100%;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 1. Search Box */
.faq-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.faq-search-icon {
  position: absolute;
  left: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--vi-muted);
  pointer-events: none;
  transition: color 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.faq-search-input {
  width: 100%;
  height: 3.5rem;
  padding: 0 1.25rem 0 3.25rem;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--vi-ink);
  background: var(--vi-surface);
  border: 1px solid var(--vi-line);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  outline: none;
  -webkit-appearance: none;
}

.faq-search-input:focus {
  border-color: var(--vi-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vi-accent) 25%, transparent), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.faq-search-box:focus-within .faq-search-icon {
  color: var(--vi-accent);
}

.faq-search-input::placeholder {
  color: var(--vi-muted);
  opacity: 0.85;
}

/* 2. Filter Pills */
.faq-filter-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0;
}

.faq-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 1.15rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--vi-ink);
  background: var(--vi-surface);
  border: 1px solid var(--vi-line);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  text-decoration: none;
}

.faq-pill:hover {
  background: var(--vi-soft);
  border-color: var(--vi-accent);
  color: var(--vi-ink);
  transform: translateY(-1px);
}

.faq-pill.active {
  background: var(--vi-accent);
  border-color: var(--vi-accent);
  color: #ffffff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--vi-accent) 40%, transparent);
}

:root[data-theme="dark"] .faq-pill.active {
  color: #100d14;
}

.faq-pill .pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.4rem;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 9999px;
  background: color-mix(in srgb, currentColor 15%, transparent);
  color: inherit;
}

/* 3. Action Bar */
.faq-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--vi-line) 40%, transparent);
  font-size: 0.875rem;
  color: var(--vi-muted);
}

.faq-count-label {
  font-weight: 600;
}

.faq-toggle-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vi-accent);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.faq-toggle-all-btn:hover {
  background: var(--vi-soft);
  color: var(--vi-accent-hover);
}

.faq-toggle-all-btn .chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-toggle-all-btn[aria-expanded="true"] .chevron {
  transform: translateY(2px) rotate(-135deg);
}

/* 4. FAQ Card List */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-card {
  border: 1px solid var(--vi-line);
  border-radius: 14px;
  background: var(--vi-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.faq-card:hover {
  border-color: color-mix(in srgb, var(--vi-accent) 60%, var(--vi-line));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.faq-card[open] {
  border-color: var(--vi-accent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.6rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  gap: 1.25rem;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-question-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.faq-category-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vi-accent);
  background: var(--vi-soft);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  line-height: 1.2;
}

.faq-question {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--vi-ink);
  letter-spacing: -0.015em;
}

.faq-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--vi-soft);
  color: var(--vi-accent);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, color 0.2s ease;
}

.faq-icon::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-card[open] .faq-icon {
  background: var(--vi-accent);
  color: #ffffff;
  transform: rotate(180deg);
}

:root[data-theme="dark"] .faq-card[open] .faq-icon {
  color: #100d14;
}

.faq-answer {
  padding: 0 1.6rem 1.6rem 1.6rem;
  color: var(--vi-ink);
  font-size: 1.03125rem;
  line-height: 1.7;
  border-top: 1px solid color-mix(in srgb, var(--vi-line) 30%, transparent);
  margin-top: 0.25rem;
  padding-top: 1.25rem;
}

.faq-answer p {
  margin: 0 0 1rem 0;
  max-width: 100%;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
  margin: 0.75rem 0 1rem 0;
  padding-left: 1.5rem;
  max-width: 100%;
}

.faq-answer li {
  margin: 0.4rem 0;
}

.faq-answer pre,
.faq-answer pre.highlight {
  margin: 1rem 0;
  max-width: 100%;
}

/* 5. Empty State */
.faq-no-results {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  background: var(--vi-surface);
  border: 1px dashed var(--vi-line);
  border-radius: 14px;
}

.faq-no-results.visible {
  display: flex;
}

.faq-no-results svg,
.faq-no-results-icon {
  width: 3rem;
  height: 3rem;
  color: var(--vi-muted);
  margin-bottom: 1rem;
}

.faq-no-results-icon {
  margin-inline: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.faq-no-results h2,
.faq-no-results h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--vi-ink);
  margin-bottom: 0.5rem;
}

.faq-no-results p {
  color: var(--vi-muted);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.faq-reset-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--vi-accent);
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

:root[data-theme="dark"] .faq-reset-btn {
  color: #100d14;
}

.faq-reset-btn:hover {
  background: var(--vi-accent-hover);
}

/* 6. Apple-Style Assistance Card */
.faq-help-card {
  margin-top: 3.5rem;
  padding: 2.25rem;
  background: color-mix(in srgb, var(--vi-accent) 4%, var(--vi-surface));
  border: 1px solid color-mix(in srgb, var(--vi-accent) 25%, var(--vi-line));
  border-radius: 16px;
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

@media (max-width: 48rem) {
  .faq-help-card {
    flex-direction: column;
    padding: 1.75rem;
    gap: 1.25rem;
  }
}

.faq-help-icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 12px;
  background: var(--vi-soft);
  color: var(--vi-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-help-icon::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23703399' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.faq-help-content {
  flex: 1;
}

.faq-help-content h2,
.faq-help-content h3 {
  font-size: 1.35rem;
  font-weight: 750;
  color: var(--vi-ink);
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem 0;
}

.faq-help-content p {
  color: var(--vi-muted);
  font-size: 0.9875rem;
  line-height: 1.65;
  margin: 0 0 1.5rem 0;
  max-width: 100%;
}

.faq-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.faq-help-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.625rem;
  padding: 0.55rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  transition: all 0.15s ease;
}

.faq-help-actions a.primary {
  background: var(--vi-accent);
  color: #ffffff;
  border: 1px solid var(--vi-accent);
}

:root[data-theme="dark"] .faq-help-actions a.primary {
  color: #100d14;
}

.faq-help-actions a.primary:hover {
  background: var(--vi-accent-hover);
  border-color: var(--vi-accent-hover);
}

.faq-help-actions a.secondary {
  background: var(--vi-surface);
  color: var(--vi-ink);
  border: 1px solid var(--vi-line);
}

.faq-help-actions a.secondary:hover {
  background: var(--vi-soft);
  border-color: var(--vi-accent);
}

/* Visage Page Grid Header Breadcrumb */
.page-grid header .breadcrumb {
  margin-bottom: 0.5rem;
}
.page-grid header .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--vi-muted);
}
.page-grid header .breadcrumb a {
  color: var(--vi-accent);
  text-decoration: none;
  font-weight: 600;
}
.page-grid header .breadcrumb a:hover {
  text-decoration: underline;
}
.page-grid header .breadcrumb .sep {
  color: var(--vi-line);
}
.page-grid header .breadcrumb li[aria-current="page"] {
  color: var(--vi-muted);
  font-weight: 500;
}

/* Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-block: 2rem;
}
.bento-card {
  padding: 1.75rem;
  border: 1px solid var(--vi-line);
  background: var(--vi-surface);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  box-sizing: border-box;
}
.bento-card.bento-col-12 {
  grid-column: 1 / -1;
}
.bento-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--vi-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bento-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--vi-ink);
  margin: 0;
  letter-spacing: -0.02em;
  border: none !important;
  padding: 0 !important;
}
.bento-desc {
  font-size: 0.95rem;
  color: var(--vi-muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 48rem) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}

/* Stat Cards */
.stat-grid, .row.g-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-block: 2rem;
}
.stat-card {
  padding: 1.5rem;
  border: 1px solid var(--vi-line);
  background: var(--vi-surface);
  border-radius: 4px;
  text-align: center;
  min-width: 0;
  box-sizing: border-box;
}
.stat-figure {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--vi-accent);
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.stat-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--vi-muted);
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 48rem) {
  .stat-grid, .row.g-3 {
    grid-template-columns: 1fr;
  }
}

/* Form Controls */
.card-surface {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--vi-line);
  background: var(--vi-surface);
  border-radius: 4px;
  margin-block: 2rem;
}
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--vi-ink);
}
.form-control {
  width: 100%;
  padding: 0.85rem 1.15rem;
  border: 1px solid var(--vi-line);
  background: var(--vi-bg);
  color: var(--vi-ink);
  font-family: inherit;
  font-size: 1rem;
  box-sizing: border-box;
  margin-bottom: 1.25rem;
  border-radius: 2px;
}
.form-control:focus {
  outline: 3px solid var(--vi-accent);
  outline-offset: 2px;
}
.btn-primary-quantum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 2rem;
  background: var(--vi-button);
  color: var(--vi-button-ink);
  border: 1px solid var(--vi-button);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-primary-quantum:hover {
  background: var(--vi-accent);
  border-color: var(--vi-accent);
  color: var(--vi-bg);
}
.btn-secondary-quantum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 2rem;
  background: var(--vi-surface);
  color: var(--vi-ink);
  border: 1px solid var(--vi-line);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.15s ease;
}
.btn-secondary-quantum:hover {
  background: var(--vi-soft);
  color: var(--vi-ink);
}

/* Author Strip */
.author-pedigree-strip {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-block: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--vi-line);
  background: var(--vi-surface);
  border-radius: 4px;
}
.author-avatar-wrap {
  flex-shrink: 0;
}
.author-avatar {
  border-radius: 50%;
  border: 2px solid var(--vi-accent);
  display: block;
}

/* Getting Started & Documentation Enhancements */
.install-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
  margin-block: 1.75rem 2.5rem;
  min-width: 0;
  max-width: 100%;
}

.install-card {
  padding: 1.35rem 1.5rem;
  background: color-mix(in srgb, var(--vi-surface) 80%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid color-mix(in srgb, var(--vi-line) 50%, transparent);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

:root[data-theme="dark"] .install-card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.install-card:hover {
  transform: translateY(-2px);
  border-color: var(--vi-accent);
  box-shadow: 0 8px 24px rgba(91, 40, 123, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

:root[data-theme="dark"] .install-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--vi-accent);
}

.install-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.install-card-title {
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--vi-ink);
  margin: 0;
  border: none !important;
  padding: 0 !important;
  letter-spacing: -0.02em;
}

.install-card-tag {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--vi-accent);
  background: var(--vi-soft);
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid color-mix(in srgb, var(--vi-accent) 25%, transparent);
}

.install-card-desc {
  font-size: 0.875rem;
  color: var(--vi-muted);
  line-height: 1.5;
  margin: 0;
}

.style-visage .content-body .install-card pre,
.install-card pre {
  position: static !important;
  margin: auto 0 0 0 !important;
  padding: 0.75rem 1rem !important;
  background: color-mix(in srgb, #140e1c 95%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.style-visage .content-body .install-card pre::before,
.style-visage .content-body .install-card pre::after,
.install-card pre::before,
.install-card pre::after {
  display: none !important;
}

.install-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  color: #f0e6f8;
  white-space: pre;
  display: block;
}

/* Step Progression */
.step-item {
  margin-block: 3.5rem 2.5rem;
  padding-block-start: 0.5rem;
}

.step-item:first-of-type {
  margin-block-start: 2rem;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: var(--vi-accent);
  color: var(--vi-button-ink, #100d14);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(91, 40, 123, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.step-title {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 750;
  color: var(--vi-ink);
  margin: 0;
  letter-spacing: -0.03em;
  border: none !important;
  padding: 0 !important;
}

/* Responsive Tables & Apple HIG Glassmorphism */
.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2rem 0;
  border: 1px solid color-mix(in srgb, var(--vi-line) 50%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--vi-surface) 75%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

:root[data-theme="dark"] .table-responsive {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.visage-table,
.style-visage .content-body table {
  width: 100%;
  min-width: 32rem;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: 0.9375rem;
  border: none;
}

.visage-table th,
.visage-table td,
.style-visage .content-body th,
.style-visage .content-body td {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--vi-line) 40%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--vi-line) 20%, transparent);
  text-align: left;
  line-height: 1.5;
  color: var(--vi-ink);
}

.visage-table th:last-child,
.visage-table td:last-child,
.style-visage .content-body th:last-child,
.style-visage .content-body td:last-child {
  border-right: none;
}

.visage-table th,
.style-visage .content-body th {
  background: color-mix(in srgb, var(--vi-surface) 90%, var(--vi-bg));
  color: var(--vi-ink);
  font-weight: 750;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid color-mix(in srgb, var(--vi-line) 70%, transparent);
}

.visage-table tbody tr:last-child td,
.style-visage .content-body tbody tr:last-child td {
  border-bottom: none;
}

.visage-table tr:hover td,
.style-visage .content-body tr:hover td {
  background: color-mix(in srgb, var(--vi-accent) 4%, transparent);
}

/* Technical Image Callout */
.doc-visual-card {
  margin-block: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--vi-line) 50%, transparent);
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--vi-surface) 80%, transparent);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.doc-visual-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.doc-visual-caption {
  padding: 1rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--vi-muted);
  line-height: 1.45;
  border-top: 1px solid color-mix(in srgb, var(--vi-line) 40%, transparent);
  background: color-mix(in srgb, var(--vi-soft) 40%, var(--vi-surface));
}

@media(prefers-reduced-motion:reduce){.style-visage *{scroll-behavior:auto!important;transition:none!important}}
}

@layer theme.base {
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.62; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { color: var(--ink); font-weight: 760; line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; word-break: normal; overflow-wrap: normal; hyphens: none; }
h1 { font-size: var(--step-4); max-width: 12ch; }
h2 { font-size: var(--step-3); max-width: 17ch; }
h3 { font-size: var(--step-1); letter-spacing: -0.025em; }
p { max-width: var(--measure); text-wrap: pretty; }
a { color: var(--accent); text-decoration-thickness: 0.09em; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 0.25rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
}

@layer theme.layout {
.container { width: min(100% - 2rem, 88rem); margin-inline: auto; padding-inline: 0; }
.section { padding-block: var(--section); }
.section-head { display: grid; gap: 1rem; max-width: 52rem; margin-block-end: clamp(2.5rem, 5vw, 5rem); }
.split-head { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.65fr); align-items: end; }
.lead { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.48; }
.eyebrow { color: var(--accent); font-size: var(--step--1); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.hero { position: relative; padding-block: clamp(3rem, 7vw, 8rem); border-block-end: 1px solid var(--line-soft); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(22rem, 1.08fr); align-items: center; gap: clamp(2rem, 6vw, 7rem); min-height: min(49rem, calc(100svh - 5rem)); }
.hero-copy { position: relative; z-index: 2; display: grid; gap: 1.35rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-block-start: 0.55rem; }
.hero-art { position: relative; isolation: isolate; min-height: clamp(24rem, 45vw, 39rem); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-soft); box-shadow: var(--shadow); overflow: clip; }
.proof { border-block-end: 1px solid var(--line-soft); background: var(--surface); }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(9rem, 0.7fr)) minmax(16rem, 1.3fr); }
.metric-grid > * { padding: 2rem; border-inline-start: 1px solid var(--line-soft); }
.metric-grid > :last-child { border-inline-end: 1px solid var(--line-soft); }
.metric-grid dl { display: flex; flex-direction: column-reverse; gap: 0.4rem; }
.metric-grid dt { color: var(--ink-muted); font-size: var(--step--1); }
.metric-grid dd { font-size: var(--step-2); font-weight: 780; letter-spacing: -0.04em; }
.proof-note { align-self: center; color: var(--ink-soft); font-size: var(--step--1); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.service-card { display: grid; align-content: start; gap: 1.15rem; min-height: 23rem; padding: clamp(1.5rem, 3.5vw, 3rem); border-inline-end: 1px solid var(--line); }
.service-card:last-child { border-inline-end: 0; }
.service-card .index { color: var(--ink-muted); font: 700 var(--step--1)/1 var(--font-sans); }
.service-card p { color: var(--ink-soft); }
.service-card a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block-start: auto; width: fit-content; font-weight: 750; }
.feature-section { background: var(--bg-soft); }
.feature-grid { display: grid; grid-template-columns: minmax(20rem, 1fr) minmax(0, 0.82fr); align-items: center; gap: clamp(2.5rem, 7vw, 8rem); }
.feature-copy { display: grid; gap: 1.25rem; }
.feature-art { position: relative; min-height: clamp(26rem, 45vw, 43rem); overflow: clip; border-radius: var(--radius-lg); background: var(--scene); color: var(--scene-ink); }
.feature-caption { position: absolute; inset: auto 1.5rem 1.5rem; z-index: 2; max-width: 20ch; padding: 0.65rem 0.85rem; background: var(--scene-ink); color: var(--scene); font-size: var(--step--1); font-weight: 750; }
.check-list { display: grid; gap: 0.8rem; padding: 0; list-style: none; }
.check-list li { position: relative; padding-inline-start: 1.75rem; }
.check-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--accent); font-weight: 900; }
.text-link { width: fit-content; min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 800; }
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space); }
.work-card { display: grid; gap: 0.85rem; min-width: 0; }
.work-card:nth-child(1) { grid-column: span 5; }
.work-card:nth-child(2) { grid-column: span 7; }
.work-card:nth-child(3) { grid-column: 4 / span 6; margin-block-start: var(--space); }
.work-card > p:not(.tag) { color: var(--ink-soft); }
.work-visual { position: relative; min-height: clamp(18rem, 31vw, 31rem); margin-block-end: 0.5rem; overflow: clip; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-soft); }
.tag { width: fit-content; color: var(--on-accent-soft); background: var(--accent-soft); padding: 0.25rem 0.55rem; font-size: var(--step--1); font-weight: 800; }
.quote-section { background: var(--surface); border-block: 1px solid var(--line-soft); }
.quote-grid { display: grid; grid-template-columns: 0.35fr 1fr; gap: var(--space); }
blockquote p { max-width: 31ch; font: 600 var(--step-2)/1.25 var(--font-serif); }
figcaption { margin-block-start: 1.5rem; color: var(--ink-muted); }
.closing { background: var(--scene); color: var(--scene-ink); }
.closing h2, .closing .eyebrow { color: var(--scene-ink); }
.closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.page-grid { display: grid; grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.page-grid > * { min-width: 0; max-width: 100%; }
.page-grid header { position: sticky; top: 6.5rem; display: grid; gap: 1rem; }
.prose { max-width: 68ch; }
.prose > * + * { margin-block-start: 1.6lh; }
/* 1.4.8 Visual Presentation (AAA): paragraph spacing at least 1.5x the line
   spacing. The generator wraps rendered Markdown in its own element
   (<div lang>), so the rule above matches only that wrapper and leaves two
   paragraphs in a row inside it touching. Matched on descendants, as Lucid
   and Prism do; :where() keeps specificity at zero so `.prose h2` still wins. */
.prose :where(p, ul, ol, pre, blockquote, table, dl, figure)
  + :where(p, ul, ol, pre, blockquote, table, dl, figure) { margin-block-start: 1.6lh; }
.prose h2 { margin-block-start: 1.8em; }
.prose ul, .prose ol { padding-inline-start: 1.35rem; }
.error-page { min-height: 70svh; display: grid; align-items: center; }
.error-page .container { display: grid; gap: 1.5rem; }
}

@layer theme.components {
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; inset: 0 auto auto 1rem; z-index: 100; translate: 0 -150%; padding: 0.75rem 1rem; background: var(--surface); color: var(--ink); border: 3px solid var(--focus); }
.skip-link:focus { translate: 0 1rem; }
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 94%, transparent); border-block-end: 1px solid var(--line-soft); backdrop-filter: blur(18px); }
.header-inner { display: flex; align-items: center; min-height: 5rem; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 2.75rem; color: var(--ink); font-size: 1.12rem; font-weight: 850; letter-spacing: -0.025em; text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.85rem; }
.site-nav { display: flex; align-items: center; gap: 0.2rem; margin-inline-start: auto; }
.site-nav a, .mode-toggle, .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding-inline: 0.75rem; border: 0; background: transparent; color: var(--ink-soft); font-size: var(--step--1); font-weight: 740; text-decoration: none; cursor: pointer; }
.site-nav a:hover, .mode-toggle:hover, .nav-toggle:hover { color: var(--ink); background: var(--surface-soft); }
.site-nav .nav-cta { margin-inline-start: 0.5rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); padding-inline: 1.15rem; }
.site-nav .nav-cta:hover { background: var(--accent-hover); color: var(--accent-ink); }
.mode-toggle { gap: 0.4rem; border: 1px solid var(--line); border-radius: 999px; }
.mode-toggle svg, .nav-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-toggle { display: none; gap: 0.5rem; border: 1px solid var(--line); border-radius: 999px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; min-width: 2.9rem; padding: 0.7rem 1.2rem; border: 2px solid var(--accent); border-radius: 999px; font-weight: 800; text-decoration: none; }
.button-primary { background: var(--accent); color: var(--accent-ink); }
.button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.button-secondary { background: var(--surface); color: var(--accent); }
.button-secondary:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.button-inverse { border-color: var(--scene-ink); background: var(--scene-ink); color: var(--scene); }
.button-inverse:hover { background: transparent; color: var(--scene-ink); }
.art-halo { position: absolute; width: min(26rem, 90%); aspect-ratio: 1; border-radius: 50%; background: var(--glow); filter: blur(1px); inset: 8% 5% auto auto; }
.art-object { position: absolute; z-index: 1; inset: 18% 12% 8% 16%; border-radius: 48% 48% 12% 12% / 34% 34% 10% 10%; background: var(--scene); transform: rotate(-5deg); box-shadow: 1.2rem 1.2rem 0 var(--scene-accent); }
.art-object span { position: absolute; width: 44%; height: 18%; inset: 14% auto auto 28%; border: 0.7rem solid var(--scene-muted); border-inline-color: transparent; border-radius: 50%; }
.art-card { position: absolute; z-index: 4; display: grid; gap: 0.25rem; padding: 1rem; border: 1px solid #6b6b6b; background: #ffffff; color: #0b0b0b; box-shadow: var(--shadow); }
.art-card small { color: #333333; }
.art-card strong { font-size: var(--step-1); }
.art-card span { color: #333333; font-size: var(--step--1); }
.art-card-a { inset: auto auto 8% 5%; max-width: 16rem; }
.art-card-b { inset: 8% 5% auto auto; }
.art-line { position: absolute; z-index: 3; width: 45%; height: 2px; inset: 48% 5% auto auto; background: var(--scene-accent); transform: rotate(-18deg); }
.feature-shape { position: absolute; display: block; }
.shape-one { width: 70%; aspect-ratio: 1; inset: 12% auto auto 15%; border: 1.2rem solid var(--scene-accent); border-radius: 50%; }
.shape-two { width: 42%; aspect-ratio: 1; inset: 32% auto auto 29%; background: var(--scene-muted); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.work-one .work-visual::before, .work-two .work-visual::before, .work-three .work-visual::before { content: ""; position: absolute; inset: 12%; border: 0.75rem solid var(--accent); }
.work-one .work-visual span { position: absolute; inset: 30% 18%; background: var(--scene); transform: rotate(8deg); }
.work-two .work-visual span { position: absolute; width: 58%; aspect-ratio: 1; inset: 18% auto auto 22%; border-radius: 50%; background: var(--glow); box-shadow: 5rem 3rem 0 var(--scene); }
.work-three .work-visual span { position: absolute; inset: 22% 14%; background: repeating-linear-gradient(90deg, var(--scene) 0 1rem, transparent 1rem 1.8rem); }
.site-footer { padding-block: clamp(3rem, 6vw, 5rem); background: var(--bg-soft); border-block-start: 1px solid var(--line-soft); }
#ssg-search-btn { --ssg-search-top: 18px; }
#ssg-search-btn kbd { margin-block: 0; }
.site-nav > #ssg-search-btn { position: static; inset: auto; flex: 0 0 auto; box-shadow: none; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 0.7fr 1fr; gap: 3rem; }
.footer-grid > div { display: grid; align-content: start; gap: 1rem; }
.footer-grid h2 { font: 800 var(--step--1)/1.2 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; }
.footer-grid ul { display: grid; gap: 0.45rem; padding: 0; list-style: none; }
.footer-grid a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-grid p { color: var(--ink-soft); }
.footer-action { font-size: var(--step-1); font-weight: 800; overflow-wrap: anywhere; }
.fine-print { font-size: var(--step--1); }
}

@layer theme.variants {
/* Institutional finance: measured grid, serif authority, green ledger. */
.style-steward h1, .style-steward h2, .style-steward blockquote p { font-family: var(--font-serif); font-weight: 600; }
.style-steward .hero-art { border-radius: 0; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 3rem 3rem; }
.style-steward .art-object { border-radius: 0; clip-path: polygon(10% 14%, 50% 0, 92% 18%, 100% 100%, 0 100%); }

/* Creative portfolio: oversized geometry and punchy orange editorialism. */
.style-kairo .hero-grid { grid-template-columns: minmax(0, 0.8fr) minmax(24rem, 1.2fr); }
.style-kairo h1 { font-size: clamp(3rem, 5.5vw, 5.7rem); text-transform: uppercase; }
.style-kairo .hero-art { border-radius: 0; background: var(--scene); }
.style-kairo .art-halo { inset: 3% auto auto 5%; width: 88%; border-radius: 0; background: linear-gradient(130deg, var(--glow), var(--scene-accent)); }
.style-kairo .art-object { inset: 8% 18% 0; border-radius: 48% 48% 8% 8%; box-shadow: none; background: linear-gradient(90deg, var(--scene) 0 48%, var(--scene-ink) 48% 52%, var(--scene) 52%); }
.style-kairo .art-line { width: 88%; right: 6%; top: 60%; height: 3.2rem; background: var(--scene-accent); transform: rotate(-6deg); }

/* Aesthetic health: clinical whitespace, centred copy and facial orbit. */
.style-visage .hero-grid { grid-template-columns: 1fr; text-align: center; }
.style-visage .hero-copy { max-width: 58rem; margin-inline: auto; justify-items: center; }
.style-visage h1 { max-width: 17ch; }
.style-visage .hero-art { min-height: 32rem; box-shadow: none; }
.style-visage .art-object { inset: 7% 28% -15%; border-radius: 50% 50% 42% 42%; background: var(--glow); box-shadow: 0 0 0 2rem var(--surface), 0 0 0 2.1rem var(--line); }
.style-visage .art-object span { width: 46%; height: 58%; inset: 12% auto auto 27%; border: 3px solid var(--scene); border-block-end-color: transparent; }

/* Revenue intelligence: luminous dashboard cards on a pale blue field. */
.style-signal .hero { background: var(--bg); }
.style-signal .hero-copy { text-align: center; justify-items: center; }
.style-signal .hero-grid { grid-template-columns: 1fr; }
.style-signal h1 { max-width: 15ch; }
.style-signal .hero-art { width: min(100%, 70rem); margin-inline: auto; min-height: 27rem; background: radial-gradient(circle at 50% 100%, var(--glow), var(--surface) 68%); }
.style-signal .art-object { inset: 12% 8%; border-radius: 0.75rem; transform: none; box-shadow: none; background: linear-gradient(180deg, var(--accent-soft), var(--surface)); border: 1px solid var(--line); }
.style-signal .art-object::before { content: ""; position: absolute; inset: 18% 8% 12%; background: linear-gradient(110deg, transparent 0 12%, var(--accent) 13% 15%, transparent 16% 35%, var(--scene-accent) 36% 38%, transparent 39%); clip-path: polygon(0 80%, 18% 55%, 36% 68%, 55% 28%, 72% 44%, 100% 5%, 100% 100%, 0 100%); }

/* Cycling: dark performance poster with a road-light flare. */
.style-cadence h1 { font-size: clamp(3rem, 5vw, 5.2rem); }
.style-cadence .hero { background: var(--scene); }
.style-cadence .hero h1, .style-cadence .hero .lead, .style-cadence .hero .eyebrow { color: var(--scene-ink); }
.style-cadence .hero .button-secondary { background: transparent; color: var(--scene-ink); border-color: var(--scene-ink); }
.style-cadence .hero-art { border-color: var(--scene-muted); background: radial-gradient(circle at 85% 85%, var(--scene-accent), transparent 42%), #080a0b; }
.style-cadence .art-object { inset: 8% 12% 12% 18%; border-radius: 50% 50% 15% 50%; transform: skewX(-8deg); box-shadow: -4rem 5rem 0 -2rem var(--scene-accent); }
.style-cadence .art-object::after { content: ""; position: absolute; width: 45%; aspect-ratio: 1; inset: auto auto -14% -17%; border: 0.7rem solid var(--scene-ink); border-radius: 50%; }

/* Streetwear: near-black catalogue, product silhouette and hard rules. */
.style-noir h1 { font-size: clamp(3rem, 5vw, 5.1rem); }
.style-noir .hero, .style-noir .feature-section { background: var(--scene); }
.style-noir .hero h1, .style-noir .hero .lead, .style-noir .hero .eyebrow { color: var(--scene-ink); }
.style-noir .feature-section, .style-noir .feature-section h2, .style-noir .feature-section .eyebrow, .style-noir .feature-section .lead, .style-noir .feature-section li, .style-noir .feature-section a { color: var(--scene-ink); }
.style-noir .hero-grid { grid-template-columns: minmax(22rem, 0.85fr) 1.15fr; }
.style-noir .hero-art { border-radius: 0; border-color: var(--scene-muted); background: #0a0a0a; }
.style-noir .art-object { inset: 10% 28% 3%; border-radius: 38% 38% 10% 10%; background: #262a31; box-shadow: -5rem 5rem 0 -2rem #181a1e, 5rem 5rem 0 -2rem #181a1e; transform: none; }
.style-noir .service-grid { border-color: var(--ink); }

/* Private equity: black, ivory, red geometry and editorial serif type. */
.style-covenant h1, .style-covenant h2, .style-covenant blockquote p { font-family: var(--font-serif); font-weight: 600; }
.style-covenant h1 { font-size: clamp(3rem, 5vw, 5.4rem); }
.style-covenant .hero { background: var(--scene); border-block: 0.7rem solid var(--scene-accent); }
.style-covenant .hero h1, .style-covenant .hero .lead, .style-covenant .hero .eyebrow { color: var(--scene-ink); }
.style-covenant .hero-art { border-radius: 0; background: #080808; }
.style-covenant .art-object { inset: 8% 6% 8% 20%; border-radius: 0; clip-path: polygon(0 20%, 62% 0, 100% 36%, 66% 36%, 66% 100%, 0 100%); box-shadow: none; }
.style-covenant .art-line { width: 85%; height: 0.5rem; background: var(--scene-accent); }

/* Furniture: airy catalogue and an abstract upholstered chair. */
.style-hearth .hero-grid { grid-template-columns: 1fr; }
.style-hearth .hero-copy { max-width: 58rem; }
.style-hearth h1 { max-width: 18ch; text-transform: uppercase; }
.style-hearth .hero-art { min-height: 28rem; box-shadow: none; background: var(--surface); }
.style-hearth .art-object { inset: 17% 19% 18%; border-radius: 2rem 2rem 0 0; transform: none; background: var(--surface-soft); border: 2px solid var(--line); box-shadow: inset 0 -5rem 0 var(--glow); }
.style-hearth .art-object::before, .style-hearth .art-object::after { content: ""; position: absolute; width: 3px; height: 24%; bottom: -24%; background: var(--scene-accent); }
.style-hearth .art-object::before { left: 12%; transform: skew(-5deg); }
.style-hearth .art-object::after { right: 12%; transform: skew(5deg); }

/* Editorial designer: monochrome grids cut by a yellow studio ribbon. */
.style-intent h1, .style-intent h2, .style-intent blockquote p { font-family: var(--font-serif); font-weight: 600; }
.style-intent .hero-art { border-radius: 0; background: #0a0a0a; }
.style-intent .art-object { inset: 7% 25% 0; transform: none; border-radius: 48% 48% 0 0; background: linear-gradient(90deg, #151515, #ecebe6 48% 52%, #151515); box-shadow: none; }
.style-intent .art-line { width: 90%; height: 3.5rem; right: 5%; top: 54%; background: var(--scene-accent); transform: rotate(3deg); }
.style-intent .service-card { min-height: 19rem; }

/* AI shopping: bold type, purple agent controls and modular product tiles. */
.style-scout h1 { max-width: 13ch; font-size: clamp(3rem, 6.7vw, 7rem); }
.style-scout .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
.style-scout .hero-art { background: var(--surface); box-shadow: none; }
.style-scout .art-halo { inset: 18% 5% auto auto; background: radial-gradient(circle, var(--glow), transparent 70%); }
.style-scout .art-object { inset: 11% 12% 27%; border-radius: 50% 50% 8% 8%; transform: none; box-shadow: none; background: linear-gradient(140deg, var(--scene-accent), var(--glow)); }
.style-scout .art-card-a { inset: auto 5% 5%; max-width: none; width: 90%; border-radius: 1.2rem; }
.style-scout .work-visual { border-radius: 2rem; }
.style-covenant .art-card-a strong, .style-signal .art-card-a span, .style-steward .art-card-a span { display: none; }
}

@media (max-width: 64rem) {
.hero-grid, .feature-grid, .page-grid, .style-kairo .hero-grid, .style-noir .hero-grid, .style-scout .hero-grid { grid-template-columns: 1fr; }
.hero-grid { min-height: 0; }
.page-grid header { position: static; }
.metric-grid { grid-template-columns: repeat(3, 1fr); }
.proof-note { grid-column: 1 / -1; border-block-start: 1px solid var(--line-soft); }
.work-card:nth-child(1), .work-card:nth-child(2) { grid-column: span 6; }
.work-card:nth-child(3) { grid-column: 3 / span 8; }
.site-nav > #ssg-search-btn { width: 2.75rem; padding: 0; }
.site-nav > #ssg-search-btn span, .site-nav > #ssg-search-btn kbd { display: none; }
}

@media (max-width: 64rem) {
.header-inner { flex-wrap: wrap; padding-block: 0.6rem; }
.brand { margin-inline-end: auto; }
.nav-toggle { display: inline-flex; }
.site-nav { order: 4; display: none; width: 100%; flex-direction: column; align-items: stretch; padding-block: 0.5rem; }
.site-nav[data-open="true"] { display: flex; }
.site-nav a { justify-content: flex-start; }
.site-nav .nav-cta { margin-inline-start: 0; justify-content: center; }
.no-js .nav-toggle { display: none; }
.no-js .site-nav { display: flex; }
.mode-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.split-head, .quote-grid { grid-template-columns: 1fr; }
.service-grid { grid-template-columns: 1fr; }
.service-card { min-height: 0; border-inline-end: 0; border-block-end: 1px solid var(--line); }
.service-card:last-child { border-block-end: 0; }
.metric-grid { grid-template-columns: 1fr 1fr; }
.metric-grid > :nth-child(3) { border-block-start: 1px solid var(--line-soft); }
.metric-grid > :last-child { grid-column: 1 / -1; }
.work-grid { grid-template-columns: 1fr; }
.work-card:nth-child(1), .work-card:nth-child(2), .work-card:nth-child(3) { grid-column: auto; margin-block-start: 0; }
.closing-inner { align-items: flex-start; flex-direction: column; }
.footer-grid { grid-template-columns: 1fr; }
.art-card-b { display: none; }
}

@media (max-width: 28rem) {
.container { width: min(100% - 1.25rem, 88rem); }
.page-grid h1 { font-size: clamp(2.25rem, 10vw, 2.75rem); }
.hero-art { min-height: 23rem; }
.metric-grid { grid-template-columns: 1fr; }
.metric-grid > * { border-block-start: 1px solid var(--line-soft); }
.metric-grid > :first-child { border-block-start: 0; }
.actions { align-items: stretch; flex-direction: column; }
.button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
.brand-mark, .button, .tag, .art-card, .hero-art, .feature-art, .work-visual { border: 2px solid CanvasText; }
.art-halo, .art-object, .art-line, .feature-shape, .work-visual span { forced-color-adjust: none; background: CanvasText; }
}

@media print {
.skip-link, .site-header, .site-footer, #ssg-search-widget, .hero-art, .feature-art, .work-visual, .actions, .closing { display: none !important; }
.page-grid header { position: static; }
body { background: #ffffff; color: #000000; font-size: 11pt; }
h1, h2, h3, p, a { color: #000000; }
.section, .hero { padding-block: 1.5rem; }
a[href]::after { content: " (" attr(href) ")"; overflow-wrap: anywhere; }
}

@media (color-gamut: p3) {
:root,
:root[data-theme="light"] {
  --accent: color(display-p3 0.32 0.15 0.49);
}
:root[data-theme="dark"] {
  --accent: color(display-p3 0.82 0.66 0.96);
}
}

/* The page headline is sized from its own column, not the viewport.
 *
 * `.page-grid` gives the header a 0.65fr track — about 409px at 1440 — while
 * the headline was `clamp(2.25rem, 10vw, 2.75rem)` off the viewport. A single
 * long word ("Recommendation") then rendered 698px wide and ran straight
 * through the prose column beside it: text printed over text, which no
 * contrast or reflow gate can see because nothing overflowed the page. */
.page-grid header { container-type: inline-size; }
.page-grid header h1 {
  font-size: min(var(--step-4), 13cqi);
  overflow-wrap: break-word;
}

/* Consultation photograph: the shell forced 3:2 onto a 16:9 source and a
   narrow override took it to 1.09, showing 61% and then 30%. */
.image-shell img { aspect-ratio: 16 / 9; height: auto; }

/* Bilingual safety net.
   A heading that cannot break pushes its grid past the viewport as soon as
   the translation is longer than the English — which is how Kairo and
   Steward failed 1.4.4 and 1.4.10 once French pages existed. `break-word`
   only acts when a word genuinely does not fit, so it changes nothing for
   copy that already fits. */
h1, h2, h3, h4, p, li, dd, dt, figcaption { overflow-wrap: break-word; }

/* A sticky masthead can cover whatever the keyboard scrolls to, which is
   what WCAG 2.4.11 and 2.4.12 forbid. Reserving its height as scroll
   padding means a focused element always comes to rest below it. */
html { scroll-padding-block-start: 5.5rem; }

@media (max-width: 48rem) {
  html { scroll-padding-block-start: 4.5rem; }
}

/* Language switcher.
   One control on all twenty-two themes: a globe, the current locale code,
   and a panel anchored under the button. It was a bare inline list before,
   positioned differently in every header.

   A <details> disclosure, not a scripted menu. The themes enforce
   `script-src 'self'` and the semantics gate renders every page with
   JavaScript blocked, so anything script-driven would be a dead control in
   the one rendering that has to keep working.

   Colours come from `currentColor` and the two tokens every theme defines,
   so a theme needs no palette of its own for this and dark mode follows the
   header it sits in. The panel is opaque on purpose: the reference design
   blurs the backdrop, but translucent text surfaces are exactly what the
   AAA contrast gate cannot measure. */
.ap-lang { position: relative; }
.ap-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
/* Both spellings: Safari still ships the WebKit pseudo-element. */
.ap-lang-toggle::-webkit-details-marker { display: none; }
.ap-lang-toggle::marker { content: ""; }
.ap-lang-toggle:hover { border-color: currentColor; }
.ap-lang-globe { font-size: 1rem; line-height: 1; }
.ap-lang-current { line-height: 1; font-variant-numeric: tabular-nums; }
/* A closed <details> hides its children through a UA rule that an
   absolutely positioned box escapes: the panel was still laid out, and the
   layout gate caught it overlapping the theme toggle and the nav links on
   every theme. Hiding it explicitly is what actually takes it out of flow. */
.ap-lang:not([open]) .ap-lang-menu { display: none; }
.ap-lang-menu {
  position: absolute;
  top: calc(100% + .375rem);
  /* Anchored to the button's left edge, not its right. The reference puts
     this control last in its header, where opening leftwards is the only
     way it fits; here the search and theme buttons always follow it, so
     there is room to its right and opening left ran off the viewport. */
  left: 0;
  z-index: 60;
  width: max-content;
  min-width: 100%;
  padding: .375rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: .6rem;
  background: var(--surface, var(--bg, #fff));
  box-shadow: 0 8px 28px rgb(0 0 0 / .18);
  /* The toggle inherits the header's colour, which on a theme with a dark
     stage is not the page's. The panel sits on the page surface, so it has
     to reset rather than inherit it. */
  color: var(--ink, CanvasText);
}
.ap-lang-menu-grid { display: grid; gap: .125rem; }
.ap-lang-item {
  display: block;
  min-height: 44px;
  padding: .6rem .75rem;
  border-radius: .35rem;
  color: inherit;
  font-size: .85rem;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.ap-lang-item:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.ap-lang-item[aria-current] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 2px;
}

/* Far enough along a narrow header that opening rightwards would overflow;
   below this width the panel hangs from the button's right edge instead. */
@media (max-width: 30rem) {
  .ap-lang-menu { left: auto; right: 0; }
}

/* A consistent proportional rhythm below every heading level. */
:where(h1, h2, h3, h4, h5, h6) { padding-block-end: 0.35em; }
.site-footer .footer-credit a { display: inline; min-width: 0; min-height: 0; padding: 0; margin: 0; white-space: nowrap; }
.site-footer .footer-brand { color: inherit; }

/* Voxt is the canonical three-state mode control for every theme. */
#mode-toggle.theme-toggle {
  appearance: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #5d6375;
  border-radius: 50%;
  background: #151928;
  color: #ffffff;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
}
#mode-toggle .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#mode-toggle .theme-icon { line-height: 1; }
#mode-toggle .theme-icon::before { content: "🖥️"; font-size: 1.2rem; }
:root[data-theme="light"] #mode-toggle.theme-toggle {
  border-color: #878d9b;
  background: #f3f4f6;
  color: #090a0f;
}
:root[data-theme="light"] #mode-toggle .theme-icon::before { content: "☀️"; }
:root[data-theme="dark"] #mode-toggle .theme-icon::before { content: "🌙"; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) #mode-toggle.theme-toggle {
    border-color: #878d9b;
    background: #f3f4f6;
    color: #090a0f;
  }
}

/* Suppress floating search widget and trigger button */
#ssg-search-widget,
#ssg-search-btn,
#ssg-search-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}