/**
 * ============================================================================
 * IC Studio LLC — Flagship Front-Door Design System (studio.css v7.0)
 * ============================================================================
 * Core Architectural Upgrades (v7.0):
 *   1. Chromatic Brushed Silver, Platinum & Deep Cobalt Dark Mode
 *      (data-theme="dark" #090D16) — eliminates "AI neon cyan/green" while
 *      preserving Crisp Light (#F8FAFC) and Warm Academic Paper (#F7F4EE) 100%.
 *   2. 2D Viewport-Aware Hero Stage (min(vw, svh) + Short-Window Guardrail):
 *      Guarantees 100% above-the-fold fit across BOTH Full-Screen (1440x900)
 *      and Windowed Laptop with Chrome Tabs + macOS Dock (1440x720–780) plus
 *      random resized aspect ratios with zero top gap and zero bottom clipping.
 *   3. 4 Distinct Archive-Grounded Interactive Showcases (Zero Repetitive
 *      Multi-Tab Bars, Zero Fake "SMS Sent" / "Run Simulation" Buttons):
 *      - Card 01: Split Browser + Phone Frame with Live Theme Switcher
 *      - Card 02: Interactive Route Map + Excursion Option Voter & Field Hub
 *      - Card 03: Isometric 3D Digital Twin HUD, Executive Decks & Guides
 *      - Card 04: Modular Business OS, KPI Scorecards & Safe AI Guardrails
 *   4. Mobile (<= 820px) Synchronized 4-Pill Quick-Switcher + 88% Peek-Snap
 *      Horizontal Deck (scroll-snap-type: x mandatory; overscroll-behavior-x:
 *      contain) — cuts mobile vertical scroll fatigue by ~42% without hiding
 *      any cards, while keeping the 2x2 Bento Grid on Desktop.
 *   5. Unified Direct Architect Card & Contact Dock (Single Phone Display +
 *      Inline [Call]/[Text] Pills + [Email]/[Copy] + 3-Tile Handout Strip).
 * ============================================================================
 */

@property --spot-x {
  syntax: '<length-percentage>';
  initial-value: 50%;
  inherits: false;
}
@property --spot-y {
  syntax: '<length-percentage>';
  initial-value: 50%;
  inherits: false;
}

/* ============================================================================
 * 1. THEME TOKENS (DARK CHROMATIC SILVER, CRISP LIGHT, WARM ACADEMIC PAPER)
 * ============================================================================ */
:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (background: linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: #090D16;
  --bg-canvas-alt: #0B0E16;
  --bg-surface: #10141E;
  --bg-elevated: #161B26;
  --bg-glass: rgba(9, 13, 22, 0.88);
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --accent-primary: #F8FAFC;
  --accent-primary-fg: #090D16;
  /* Carbon Obsidian, Smoked Titanium & Brushed Platinum (Restrained Sapphire & Warm Amber) */
  --accent-blue: #E2E8F0;
  --accent-sky: #93C5FD;
  --accent-indigo: #60A5FA;
  --accent-amber: #F59E0B;
  --accent-emerald: #CBD5E1;
  --border-hairline: rgba(226, 232, 240, 0.13);
  --border-strong: rgba(226, 232, 240, 0.25);
  --specular-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
  --shadow-stage: 0 24px 54px -12px rgba(0, 0, 0, 0.72), 0 4px 16px -2px rgba(0, 0, 0, 0.52);
  --shadow-pill: 0 12px 28px -6px rgba(0, 0, 0, 0.68);
  --grid-line: rgba(226, 232, 240, 0.036);
  --spot-glow: rgba(226, 232, 240, 0.075);
  --ambient-band:
    radial-gradient(circle at 14% 18% in oklch, rgba(226, 232, 240, 0.045) 0%, transparent 46%),
    radial-gradient(circle at 86% 42% in oklch, rgba(59, 130, 246, 0.055) 0%, transparent 50%),
    radial-gradient(circle at 48% 92% in oklch, rgba(245, 158, 11, 0.028) 0%, transparent 45%);
  --spring-easing: linear(
    0, 0.402 7.4%, 0.711 15.3%, 0.929 23.7%, 1.008 28.2%, 1.067 33%,
    1.099 36.9%, 1.12 41%, 1.13 45.4%, 1.13 50.1%, 1.111 58.5%,
    1.019 83.2%, 1.004 91.3%, 1
  );
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #F8FAFC;
  --bg-canvas-alt: #F1F5F9;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F1F5F9;
  --bg-glass: rgba(248, 250, 252, 0.88);
  --text-primary: #0F172A;
  --text-secondary: #1E293B;
  --text-muted: #475569;
  --accent-primary: #0F172A;
  --accent-primary-fg: #FFFFFF;
  --accent-blue: #2563EB;
  --accent-sky: #0284C7;
  --accent-indigo: #4F46E5;
  --accent-amber: #D97706;
  --accent-emerald: #059669;
  --border-hairline: rgba(15, 23, 42, 0.12);
  --border-strong: rgba(15, 23, 42, 0.24);
  --specular-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
  --shadow-stage: 0 20px 44px -14px rgba(15, 23, 42, 0.09), 0 4px 12px -2px rgba(15, 23, 42, 0.05);
  --shadow-pill: 0 10px 24px -6px rgba(15, 23, 42, 0.12);
  --grid-line: rgba(2, 132, 199, 0.055);
  --spot-glow: rgba(37, 99, 235, 0.07);
  --ambient-band:
    radial-gradient(circle at 14% 18% in oklch, rgba(37, 99, 235, 0.06) 0%, transparent 48%),
    radial-gradient(circle at 86% 42% in oklch, rgba(2, 132, 199, 0.06) 0%, transparent 52%);
}

html[data-theme="warm"],
html[data-theme="beige"],
html[data-theme="warm_academic_beige"] {
  color-scheme: light;
  --bg-canvas: #F7F4EE;
  --bg-canvas-alt: #EFECE4;
  --bg-surface: #FDFBF7;
  --bg-elevated: #EFECE6;
  --bg-glass: rgba(247, 244, 238, 0.88);
  --text-primary: #1C1917;
  --text-secondary: #292524;
  --text-muted: #57534E;
  --accent-primary: #1C1917;
  --accent-primary-fg: #FDFBF7;
  --accent-blue: #0369A1;
  --accent-sky: #0369A1;
  --accent-indigo: #1D4ED8;
  --accent-amber: #B45309;
  --accent-emerald: #047857;
  --border-hairline: rgba(28, 25, 23, 0.13);
  --border-strong: rgba(28, 25, 23, 0.26);
  --specular-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  --shadow-stage: 0 20px 44px -14px rgba(28, 25, 23, 0.09), 0 4px 12px -2px rgba(28, 25, 23, 0.05);
  --shadow-pill: 0 10px 24px -6px rgba(28, 25, 23, 0.12);
  --grid-line: rgba(3, 105, 161, 0.055);
  --spot-glow: rgba(3, 105, 161, 0.07);
  --ambient-band:
    radial-gradient(circle at 14% 18% in oklch, rgba(3, 105, 161, 0.06) 0%, transparent 48%),
    radial-gradient(circle at 86% 42% in oklch, rgba(180, 83, 9, 0.05) 0%, transparent 52%);
}

/* Forced Colors / High Contrast Fallback (per modern-web-guidance/color) */
@media (forced-colors: active) {
  .bento-stage,
  .process-card,
  .custom-path-card,
  .concierge-panel,
  .direct-contact-card,
  .btn {
    border: 1px solid CanvasText;
  }
}

/* ============================================================================
 * 2. MULTI-GENERATIONAL READING COMFORT SCALES (18px / 19.8px / 21.6px)
 *    Scales root <html> rem units (100% = 16px, 110% = 17.6px, 120% = 19.2px)
 *    AND viewport-fluid clamp() tokens (--fs-scale / --hero-fs-scale) so every
 *    heading, paragraph, pill, workbench, form control, modal, and footer item
 *    scales harmoniously across all devices with zero horizontal overflow.
 * ============================================================================ */
html,
html[data-font-scale="100"] {
  --fs-scale: 1;
  --hero-fs-scale: 1;
  font-size: 100%; /* 16px root -> 1.125rem body = 18px */
  scroll-behavior: smooth;
  overflow-x: clip;
}
html[data-font-scale="110"],
html[data-font-scale="115"] {
  --fs-scale: 1.1;
  --hero-fs-scale: 1.065;
  font-size: 110%; /* 17.6px root -> 1.125rem body = 19.8px */
}
html[data-font-scale="120"],
html[data-font-scale="130"] {
  --fs-scale: 1.2;
  --hero-fs-scale: 1.125;
  font-size: 120%; /* 19.2px root -> 1.125rem body = 21.6px */
}

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

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1.125rem; /* 18px (100%), 19.8px (110%), 21.6px (120%) */
  background-color: var(--bg-canvas);
  background-image: var(--ambient-band);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  text-wrap: balance;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

p, li {
  text-wrap: pretty;
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--accent-primary);
  color: var(--accent-primary-fg);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 16px;
}

.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(18px, 3.5vw, 44px);
}

/* ============================================================================
 * 3. STICKY HEADER, SINGLE-LINE NAV & AUTO-COLLAPSING READING COMFORT PILL
 *    Top bar chrome uses scale-invariant px dimensions so 1150px compact
 *    desktop and 375px mobile viewports never wrap or clip at 110% / 120%.
 * ============================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 65px;
  gap: 13.5px;
  flex-wrap: nowrap;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10.5px;
  text-decoration: none;
  color: var(--text-primary);
  flex-shrink: 0;
}

.brand-seal {
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-seal svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(5.5px, 0.85vw, 14.5px);
  flex-wrap: nowrap;
}
.main-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 9.5px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  text-box: trim-both cap alphabetic;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.main-nav a:hover,
.main-nav a[data-active="true"] {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.main-nav a[data-active="true"] {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.cmd-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 37px;
  padding: 5px 9.5px;
  border-radius: 999px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.cmd-trigger-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding: 5.5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12.2px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

.mobile-nav-drawer {
  display: none;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-strong);
  padding: 14px 20px 18px;
}
.mobile-nav-drawer[data-open="true"] {
  display: block;
}
.mobile-nav-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.mobile-nav-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9.5px 13.5px;
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Auto-Collapsing Reading Comfort Pill */
.comfort-pill-wrapper {
  position: relative;
  flex-shrink: 0;
}
.comfort-pill-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 37px;
  padding: 5.5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comfort-pill-trigger:hover,
html[data-font-scale="110"] .comfort-pill-trigger,
html[data-font-scale="120"] .comfort-pill-trigger {
  border-color: var(--accent-blue);
}

.comfort-drawer {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 296px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-pill);
  display: none;
  z-index: 300;
}
.comfort-pill-wrapper[data-expanded="true"] .comfort-drawer {
  display: block;
}

.comfort-group-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.comfort-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5.5px;
  background: var(--bg-elevated);
  padding: 4px;
  border-radius: 10px;
}
.comfort-segmented button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.comfort-segmented button:hover {
  color: var(--text-primary);
}
.comfort-segmented button[aria-pressed="true"] {
  background: var(--accent-primary);
  color: var(--accent-primary-fg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* Bulletproof Single-Line Buttons (.btn) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.52rem 1.08rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-wrap: nowrap;
  flex-shrink: 0;
  text-box: trim-both cap alphabetic;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.35s var(--spring-easing), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
/* Keep header CTA button scale-invariant so 1150px desktop never clips */
.site-header .header-actions .btn {
  min-height: 39px;
  padding: 8px 16.5px;
  font-size: 13.4px;
  gap: 7px;
}
.btn-primary {
  background: var(--accent-primary);
  color: var(--accent-primary-fg);
}
.btn-primary:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 10px 24px -6px rgba(226, 232, 240, 0.28);
}
.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-blue);
}

/* ============================================================================
 * 4. FULL-VIEWPORT (100svh) 3D VOLUMETRIC HERO STAGE & SEAMLESS DISSOLVE
 *    Owns the full initial screen across BOTH Full-Screen (1440x900) and
 *    Windowed Laptop (1440x740) across 100%, 110%, and 120% font scales.
 * ============================================================================ */
.hero-stage {
  position: relative;
  width: 100%;
  min-height: calc(100svh - 65px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(20px, 2.7svh, 34px);
  padding-bottom: clamp(18px, 2.3svh, 30px);
  overflow: hidden;
}
html[data-font-scale="110"] .hero-stage {
  padding-top: clamp(16px, 2.2svh, 28px);
  padding-bottom: clamp(14px, 1.9svh, 24px);
}
html[data-font-scale="120"] .hero-stage {
  padding-top: clamp(13px, 1.8svh, 22px);
  padding-bottom: clamp(12px, 1.5svh, 19px);
}

.hero-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  background: linear-gradient(to bottom, transparent 0%, var(--bg-canvas) 100%);
  pointer-events: none;
  z-index: 1;
}

#ic-spatial-ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
  touch-action: pan-y;
}

.hero-stage > .container {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: min(55.5rem, 100%);
  margin: 0;
}

.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(0.75rem, calc(0.88vw * var(--hero-fs-scale, 1)), 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-blue);
  margin: clamp(5px, 0.8svh, 10px) 0 0;
  padding: 8px 19px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--specular-top);
}
.hero-overline::before {
  content: "";
  width: 7.5px;
  height: 7.5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 8px var(--accent-blue);
}

.hero-copy-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: clamp(6px, 1.0svh, 13px);
  padding-bottom: 0;
}

.hero-headline {
  font-size: clamp(2.15rem, calc(min(4.12vw, 6.42svh) * var(--hero-fs-scale, 1)), 3.35rem);
  font-weight: 800;
  line-height: 1.095;
  letter-spacing: -0.033em;
  max-width: 22.6ch;
  margin: 0 0 clamp(15px, 1.95svh, 23px);
  color: var(--text-primary);
}
html[data-font-scale="120"] .hero-headline {
  margin-bottom: clamp(12px, 1.55svh, 18px);
}
.hero-headline .sub-tone {
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text-secondary);
  background-image: linear-gradient(
    168deg,
    #F1F5F9 0%,
    #CBD5E1 42%,
    #94A3B8 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html[data-theme="light"] .hero-headline .sub-tone {
  background-image: linear-gradient(
    168deg,
    #475569 0%,
    #334155 52%,
    #64748B 100%
  );
}
html[data-theme="warm"] .hero-headline .sub-tone {
  background-image: linear-gradient(
    168deg,
    #57534E 0%,
    #44403C 52%,
    #78716C 100%
  );
}

.hero-lead {
  font-size: clamp(1.04rem, calc(min(1.38vw, 2.46svh) * var(--hero-fs-scale, 1)), 1.24rem);
  line-height: 1.56;
  color: var(--text-secondary);
  max-width: min(45.2rem, 100%);
  margin: 0;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 0;
  margin-bottom: auto;
}
.hero-cta-row .btn {
  min-height: 52px;
  padding: 12.5px 27px;
  font-size: clamp(0.90rem, calc(1.02vw * var(--hero-fs-scale, 1)), 1.0rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero-cta-row .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 14px 30px -8px rgba(0, 0, 0, 0.42),
    0 0 0 1px var(--border-strong);
}
.hero-cta-row .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 18px 36px -8px rgba(0, 0, 0, 0.52),
    0 0 22px -4px var(--spot-glow);
}
.hero-cta-row .btn-secondary {
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  box-shadow: var(--specular-top), 0 12px 26px -10px rgba(0, 0, 0, 0.28);
}
.hero-cta-row .btn-secondary:hover {
  transform: translateY(-2px);
  background: var(--bg-elevated);
  border-color: var(--accent-blue);
}

.hero-metrics-bar {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.15vw, 30px);
  padding: clamp(16px, 2.0svh, 23px) clamp(20px, 2.35vw, 30px);
  border-radius: 18px;
  background: rgba(9, 13, 22, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  box-shadow: var(--specular-top), 0 18px 38px -14px rgba(0, 0, 0, 0.42);
}
html[data-font-scale="120"] .hero-metrics-bar {
  padding: clamp(13px, 1.6svh, 19px) clamp(18px, 2.1vw, 26px);
}
html[data-theme="light"] .hero-metrics-bar {
  background: rgba(248, 250, 252, 0.76);
}
html[data-theme="warm"] .hero-metrics-bar,
html[data-theme="beige"] .hero-metrics-bar,
html[data-theme="warm_academic_beige"] .hero-metrics-bar {
  background: rgba(247, 244, 238, 0.76);
}
.metric-item {
  display: flex;
  flex-direction: column;
  gap: 4.5px;
  min-width: 0;
}
.hero-metrics-bar .metric-item + .metric-item {
  border-left: 1px solid var(--border-hairline);
  padding-left: clamp(16px, 1.85vw, 26px);
}
.metric-numeral {
  font-size: clamp(0.70rem, calc(0.84vw * var(--hero-fs-scale, 1)), 0.80rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.25;
  color: var(--accent-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-title {
  font-size: clamp(0.98rem, calc(1.18vw * var(--hero-fs-scale, 1)), 1.14rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-primary);
}
.metric-desc {
  font-size: clamp(0.80rem, calc(0.94vw * var(--hero-fs-scale, 1)), 0.90rem);
  color: var(--text-secondary);
  line-height: 1.48;
}

/* Short-Window / Windowed-Laptop-with-Dock Guardrail (<= 810px height on desktop) */
@media (min-width: 861px) and (max-height: 810px) {
  html[data-font-scale="110"],
  html[data-font-scale="115"] {
    --hero-fs-scale: 1.045;
  }
  html[data-font-scale="120"],
  html[data-font-scale="130"] {
    --hero-fs-scale: 1.09;
  }
  .hero-stage {
    min-height: calc(100svh - 65px);
    padding-top: 16px;
    padding-bottom: 14px;
  }
  html[data-font-scale="110"] .hero-stage,
  html[data-font-scale="120"] .hero-stage {
    padding-top: 12px;
    padding-bottom: 11px;
  }
  .hero-stage > .container {
    gap: 0;
  }
  .hero-content {
    margin: 0;
    max-width: min(54.5rem, 100%);
  }
  .hero-overline {
    margin: 4px 0 0;
    padding: 6.5px 16px;
    font-size: calc(12px * var(--hero-fs-scale, 1));
  }
  .hero-copy-stack {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 5px;
    padding-bottom: 0;
  }
  .hero-headline {
    font-size: clamp(1.92rem, calc(min(3.52vw, 5.35svh) * var(--hero-fs-scale, 1)), 2.78rem);
    margin-bottom: 12px;
  }
  .hero-lead {
    font-size: clamp(0.94rem, calc(min(1.20vw, 2.18svh) * var(--hero-fs-scale, 1)), 1.08rem);
    line-height: 1.52;
    max-width: min(46.5rem, 100%);
    margin-bottom: 0;
  }
  .hero-cta-row {
    margin-top: 0;
    margin-bottom: auto;
  }
  .hero-cta-row .btn {
    min-height: 46px;
    padding: 10px 24px;
    font-size: calc(14.5px * var(--hero-fs-scale, 1));
  }
  .hero-metrics-bar {
    padding: 12.5px 18px;
    gap: 16px;
  }
  .metric-numeral {
    font-size: calc(11.3px * var(--hero-fs-scale, 1));
  }
  .metric-title {
    font-size: calc(15px * var(--hero-fs-scale, 1));
  }
  .metric-desc {
    font-size: calc(12px * var(--hero-fs-scale, 1));
    line-height: 1.38;
  }
}

/* ============================================================================
 * 5. ARCHITECTURAL SECTION BANDS, BENTO GRID & MOBILE PEEK-SNAP DECK
 * ============================================================================ */
.section-band {
  position: relative;
  scroll-margin-top: 68px;
  padding-block: clamp(64px, 7vw, 96px);
  border-bottom: 1px solid var(--border-hairline);
  background-image: var(--ambient-band);
  background-size: 100% 100%;
}

.section-band.alt-surface {
  background-color: var(--bg-canvas-alt);
}

.section-header {
  max-width: min(54rem, 100%);
  margin-bottom: clamp(32px, 3.6vw, 45px);
}
.section-overline {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--accent-blue);
  margin-bottom: 8px;
}
.section-title {
  font-size: clamp(1.65rem, calc(2.8vw * var(--fs-scale, 1)), 2.35rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 10.5px;
}
.section-subtitle {
  font-size: 0.96rem;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0;
}

/* Mobile-Only 4-Pill Quick-Switcher Bar & Stepper (Hidden on Desktop > 820px) */
.mobile-bento-nav,
.mobile-bento-controls {
  display: none;
}

/* Symmetric 2x2 Equal-Width Interactive Bento Grid on Desktop (> 820px) */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.55rem;
  align-items: stretch;
}

.bento-stage {
  container: stage-card / inline-size;
  min-inline-size: 0;
  scroll-margin-top: 5.25rem;
  position: relative;
  background:
    radial-gradient(540px circle at var(--spot-x) var(--spot-y), var(--spot-glow), transparent 65%),
    var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  box-shadow: var(--specular-top), var(--shadow-stage);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.95rem;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.bento-stage:hover {
  border-color: var(--accent-blue);
}
.bento-stage.span-7,
.bento-stage.span-5 {
  grid-column: span 1;
}

.stage-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: nowrap;
}
.stage-index {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-blue);
  white-space: nowrap;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-pill {
  font-size: 0.67rem;
  font-weight: 700;
  padding: 0.2rem 0.56rem;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-hairline);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

.stage-heading {
  font-size: clamp(1.18rem, calc(1.55vw * var(--fs-scale, 1)), 1.38rem);
  font-weight: 800;
  line-height: 1.22;
  margin: 0.3rem 0 0.38rem;
}
.stage-copy {
  font-size: 0.88rem;
  line-height: 1.54;
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
}

/* ============================================================================
 * 5B. 4 DISTINCT ARCHIVE-GROUNDED VISUAL SHOWCASE STAGES (v7.0)
 * ============================================================================ */
.stage-workbench {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 0.95rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
  box-shadow: var(--specular-top);
}

.stage-fx-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

/* Card 01 FX: Restrained Platinum & Selective Sapphire Silk Glow */
.stage-workbench.fx-ribbon-glow .stage-fx-backdrop {
  background:
    radial-gradient(circle at 12% 88% var(--in-oklch), rgba(226, 232, 240, 0.09) 0%, rgba(59, 130, 246, 0.07) 38%, transparent 66%),
    radial-gradient(circle at 90% 14% var(--in-oklch), rgba(226, 232, 240, 0.1) 0%, rgba(245, 158, 11, 0.05) 40%, transparent 68%);
}

/* Card 02 FX: Topographic Route Halo & Subtle Coordinate Grid */
.stage-workbench.fx-orbital-rings .stage-fx-backdrop {
  --dot-dist: 1.35rem;
  --dot-rad: 1px;
  --polka-ring: radial-gradient(circle, var(--border-strong) var(--dot-rad), transparent calc(var(--dot-rad) + 0.5px));
  background:
    radial-gradient(circle at 78% 26% var(--in-oklch), rgba(245, 158, 11, 0.08) 0%, rgba(226, 232, 240, 0.06) 42%, transparent 70%),
    var(--polka-ring) 0 0 / var(--dot-dist) var(--dot-dist);
  opacity: 0.85;
}

/* Card 03 FX: Isometric 3D Coordinate Matrix */
.stage-workbench.fx-node-matrix .stage-fx-backdrop {
  --matrix-step: 1.15rem;
  --matrix-dot: radial-gradient(circle, rgba(226, 232, 240, 0.15) 1px, transparent 2px);
  background:
    radial-gradient(circle at 50% 44% var(--in-oklch), rgba(226, 232, 240, 0.09) 0%, rgba(59, 130, 246, 0.07) 46%, transparent 72%),
    var(--matrix-dot) 0 0 / var(--matrix-step) var(--matrix-step);
}

/* Card 04 FX: Precision Sovereign OS Hatch & Platinum Wash */
.stage-workbench.fx-architectural-hatch .stage-fx-backdrop {
  background:
    radial-gradient(circle at 84% 20% var(--in-oklch), rgba(226, 232, 240, 0.09) 0%, rgba(59, 130, 246, 0.06) 42%, transparent 68%),
    repeating-linear-gradient(
      -45deg,
      rgba(226, 232, 240, 0.035) 0 1px,
      transparent 0 11px
    );
}

.workbench-viewport {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.65rem;
  transition: opacity 0.18s ease, transform 0.2s var(--spring-easing);
}
.workbench-viewport[data-switching="true"] {
  opacity: 0.35;
  transform: translateY(3px);
}

/* Compact Lens Bar (Used inside stages for honest, purposeful view switching) */
.stage-lens-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  flex-wrap: wrap;
}
.stage-lens-bar > span.mono {
  font-size: clamp(10px, calc(10.4px * var(--fs-scale, 1)), 11.4px) !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.stage-lens-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3.5px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  flex-wrap: nowrap;
  max-width: 100%;
  min-inline-size: 0;
}
.stage-lens-btn {
  min-height: 28px;
  padding: 4px 8.5px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: clamp(10.6px, calc(11px * var(--fs-scale, 1)), 12px);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-inline-size: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}
.stage-lens-btn:hover {
  color: var(--text-primary);
}
.stage-lens-btn[aria-selected="true"],
.stage-lens-btn[aria-pressed="true"] {
  background: var(--accent-primary);
  color: var(--accent-primary-fg);
}

/* ----------------------------------------------------------------------------
 * CARD 01 SHOWCASE (v7.6): Uncovered 60fps Generative Motion & Architecture Canvas
 * Automatically syncs with global site theme (dark / light / warm)
 * ---------------------------------------------------------------------------- */
.wb1-preview-shell {
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  min-height: 12.6rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  background: var(--bg-canvas);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 14px 32px -10px rgba(0, 0, 0, 0.35);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

#wb1-motion-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.spec-window-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding-bottom: 0.44rem;
  border-bottom: 1px solid var(--border-hairline);
}

.wb1-callout-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.wb1-callout-pill {
  padding: 6px 6px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  font-size: clamp(10px, calc(10.2px * var(--fs-scale, 1)), 10.8px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb1-callout-pill .mini-status-dot {
  margin-right: 0;
  width: 6px;
  height: 6px;
}

/* ----------------------------------------------------------------------------
 * CARD 02 SHOWCASE (v7.6): 2-Mode Satellite + 3D Vector Route & 4-Stop Inspector
 * ---------------------------------------------------------------------------- */
.wb2-sat-stage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 0.55rem;
}
.wb2-sat-map {
  position: relative;
  min-height: 7.45rem;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.26);
  background-color: #0B131E;
  background-image: url('../img/map-alaska-sat.jpg');
  background-size: cover;
  background-position: center 42%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.52rem 0.68rem;
  box-shadow: inset 0 0 42px rgba(6, 10, 18, 0.68);
  transition: background-image 0.25s ease, background-position 0.25s ease;
}
.wb2-sat-map[data-sat-region="business"] {
  background-image:
    radial-gradient(circle at 72% 32%, rgba(96, 165, 250, 0.18), rgba(9, 13, 22, 0.78)),
    url('../img/map-iceland-sat.jpg');
  background-position: center 48%;
}
.wb2-sat-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 11, 18, 0.72) 0%, rgba(8, 11, 18, 0.28) 48%, rgba(8, 11, 18, 0.82) 100%);
  pointer-events: none;
  z-index: 0;
}
.wb2-sat-overlay-top,
.wb2-sat-overlay-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  color: #F8FAFC;
}
.wb2-sat-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.wb2-stop-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.38rem;
}
.wb2-stop-btn {
  min-height: 31px;
  padding: 5px 6px;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: clamp(10.2px, calc(10.6px * var(--fs-scale, 1)), 11.4px);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.wb2-stop-btn:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}
.wb2-stop-btn[aria-pressed="true"] {
  border-color: var(--accent-blue);
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent-blue);
}

.wb2-stop-card {
  border-radius: 10px;
  padding: 0.62rem 0.74rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}
.wb2-stop-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.wb2-stop-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
.wb2-stop-meta-item {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  font-size: clamp(10.8px, calc(11px * var(--fs-scale, 1)), 11.8px);
  line-height: 1.35;
  color: var(--text-secondary);
  min-inline-size: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb2-stop-meta-item strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* Card 02 Mode 2 (v7.9): Full-Width Interactive 3-Module Executive Pass Wallet, Live Agenda & Deliverable Hub */
.wb2-biz-stage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 0.5rem;
}
.wb2-biz-schematic {
  position: relative;
  border-radius: 12px;
  padding: 0.6rem 0.68rem;
  flex: 1;
  background:
    radial-gradient(circle at 50% 42%, rgba(96, 165, 250, 0.20), rgba(9, 13, 22, 0.96)),
    repeating-linear-gradient(0deg, rgba(226, 232, 240, 0.045) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.045) 0 1px, transparent 1px 16px);
  border: 1px solid rgba(226, 232, 240, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.48rem;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px -8px rgba(0, 0, 0, 0.55);
}
.wb2-biz-schematic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  z-index: 2;
}
.wb2-biz-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.48rem;
  z-index: 2;
}
.wb2-biz-mod-card {
  position: relative;
  border-radius: 9px;
  padding: 0.5rem 0.56rem;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #F8FAFC;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.34rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  min-inline-size: 0;
}
.wb2-biz-mod-card:hover {
  border-color: rgba(147, 197, 253, 0.78);
  background: rgba(23, 37, 68, 0.92);
}
.wb2-biz-mod-card[data-active="true"] {
  border-color: #F59E0B;
  background: linear-gradient(155deg, rgba(30, 58, 110, 0.92) 0%, rgba(15, 23, 42, 0.96) 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.55), 0 8px 18px -6px rgba(0, 0, 0, 0.6);
}
.wb2-biz-mod-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.wb2-biz-mod-icon {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wb2-biz-mod-status {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #CBD5E1;
  border: 1px solid rgba(148, 163, 184, 0.3);
  white-space: nowrap;
}
.wb2-biz-mod-card[data-active="true"] .wb2-biz-mod-status {
  background: rgba(245, 158, 11, 0.2);
  color: #FDE68A;
  border-color: rgba(245, 158, 11, 0.65);
}
.wb2-biz-mod-title {
  font-size: clamp(10.8px, calc(11.2px * var(--fs-scale, 1)), 12px);
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb2-biz-mod-sub {
  font-size: clamp(9.8px, calc(10px * var(--fs-scale, 1)), 10.8px);
  color: #CBD5E1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb2-biz-svg {
  width: 100%;
  height: 1.15rem;
  display: block;
  z-index: 1;
}
.wb2-biz-schematic-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.65rem;
  color: #E2E8F0;
  z-index: 2;
}
.wb2-biz-phase-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
.wb2-biz-phase-btn {
  min-height: 31px;
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: clamp(10.4px, calc(10.8px * var(--fs-scale, 1)), 11.6px);
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.wb2-biz-phase-btn:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}
.wb2-biz-phase-btn[aria-pressed="true"] {
  border-color: var(--accent-blue);
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent-blue);
}

/* ----------------------------------------------------------------------------
 * CARD 03 SHOWCASE (v7.9): Full-Width Widescreen 3D Keynote & Brand Stages
 * (3D Volumetric Pitch Deck Stage, 3D Orbital Brand Motion, 3D SOP Playbook)
 * ---------------------------------------------------------------------------- */
[data-wb2-panel][hidden],
[data-wb3-panel][hidden],
[data-wb4-panel][hidden] {
  display: none !important;
}

#wb3-viewport {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.wb3-twin-stage {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 0.72rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 0.6rem;
  min-inline-size: 0;
}
.wb3-schematic-canvas {
  position: relative;
  border-radius: 10px;
  background:
    radial-gradient(circle at 52% 38%, rgba(96, 165, 250, 0.22), rgba(9, 13, 22, 0.96)),
    repeating-linear-gradient(0deg, rgba(226, 232, 240, 0.045) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.045) 0 1px, transparent 1px 16px);
  border: 1px solid rgba(226, 232, 240, 0.34);
  padding: 4px 6px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 176px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px -8px rgba(0, 0, 0, 0.55);
}
.wb3-schematic-canvas svg {
  width: 100%;
  height: 100%;
  min-height: 172px;
  max-height: 224px;
  display: block;
}
.wb3-telemetry-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-inline-size: 0;
}
.wb3-telemetry-row {
  min-height: 52px;
  padding: 8px 8.5px;
  border-radius: 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  font-family: inherit;
  font-size: clamp(10.4px, calc(10.6px * var(--fs-scale, 1)), 11.4px);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-inline-size: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.wb3-telemetry-row > span {
  font-size: clamp(10.4px, calc(10.6px * var(--fs-scale, 1)), 11.4px) !important;
  letter-spacing: -0.015em;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb3-telemetry-row > strong {
  font-size: clamp(9.4px, calc(9.6px * var(--fs-scale, 1)), 10.3px) !important;
  letter-spacing: -0.025em;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb3-telemetry-row:hover {
  border-color: var(--accent-blue);
}
.wb3-telemetry-row[aria-pressed="true"] {
  border-color: var(--accent-blue);
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 1px var(--accent-blue);
}

@keyframes wb3OrbitSpin {
  to {
    stroke-dashoffset: -44;
  }
}
.wb3-orbit-ring {
  stroke-dasharray: 7 4;
  animation: wb3OrbitSpin 3.2s linear infinite;
}

/* ----------------------------------------------------------------------------
 * CARD 04 SHOWCASE (v7.6): Clean Header + 3 Distinct Visual Stages (Custom OS,
 * Live Animated Connected Workflows Node-Graph & Right-Sized Safe AI)
 * ---------------------------------------------------------------------------- */
.wb4-os-window {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 0.72rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 0.55rem;
}
.spec-dashboard-body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.88fr);
  gap: 0.6rem;
  align-items: stretch;
}
.spec-activity-stack {
  display: grid;
  gap: 0.36rem;
  min-inline-size: 0;
}
.spec-activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.38rem 0.52rem;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  font-size: 0.71rem;
  min-inline-size: 0;
}
.spec-kpi-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.35rem;
  min-inline-size: 0;
}
.spec-bars-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 0.22rem;
  height: 2.35rem;
  padding-top: 0.15rem;
}
.spec-bar {
  width: 100%;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(to top var(--in-oklch), var(--accent-indigo), var(--accent-blue));
  transition: height 0.3s var(--spring-easing);
}

/* Card 04 Panel 2: Live Animated Connected Workflows Node-Graph */
.wb4-workflow-graph {
  position: relative;
  padding: 0.55rem 0.35rem;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wf-nodes-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: center;
  z-index: 2;
}
.wf-node-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 0.44rem 0.38rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
  min-inline-size: 0;
}
.wf-node-icon {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--accent-blue);
}
.wf-beam-svg {
  width: 100%;
  height: 1.5rem;
  display: block;
  overflow: visible;
}
@keyframes wfDashFlow {
  to {
    stroke-dashoffset: -28;
  }
}
@keyframes wfNodePulse {
  0%, 100% { r: 3.5px; opacity: 0.95; }
  50% { r: 5px; opacity: 1; }
}
.wf-beam-line {
  stroke: var(--accent-indigo);
  stroke-width: 1.8;
  stroke-dasharray: 5 4;
  animation: wfDashFlow 1.35s linear infinite;
}
.wf-pulse-dot {
  fill: var(--accent-amber);
  animation: wfNodePulse 1.6s ease-in-out infinite;
}

/* Container-Query Responsive Simplification for Narrow Mobile Cards */
@container stage-card (max-width: 380px) {
  .wb2-stop-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wb2-biz-modules-grid,
  .wb2-biz-phase-stack,
  .wb3-telemetry-stack,
  .wb2-stop-meta-grid,
  .wb3-twin-stage,
  .spec-dashboard-body {
    grid-template-columns: 1fr;
  }
  .wf-nodes-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wb1-callout-strip {
    grid-template-columns: 1fr;
  }
}

.mini-status-dot {
  display: inline-block;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--accent-blue);
  margin-right: 0.32rem;
  flex-shrink: 0;
}

.stage-footer-bar {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding-top: 0.72rem;
  border-top: 1px solid var(--border-hairline);
  font-size: 0.77rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.stage-actions-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.stage-link {
  color: var(--accent-blue);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: pointer;
}
.stage-link:hover { text-decoration: underline; }

.arch-drawer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.26rem 0.62rem;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.71rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.arch-drawer-btn:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

/* ============================================================================
 * 5C. STREAMLINED MODULAR ARCHITECTURE BANNER (v7.6)
 * ============================================================================ */
.customizability-strip {
  margin-top: 2.35rem;
  padding: 1.5rem 1.75rem;
  border-radius: 20px;
  background:
    radial-gradient(480px circle at 85% 50%, var(--spot-glow), transparent 70%),
    var(--bg-surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--specular-top), var(--shadow-stage);
}
.customizability-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.modular-pillar-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border-hairline);
}
.modular-pillar-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.modular-pillar-item strong {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--text-primary);
}
.modular-pillar-item span {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============================================================================
 * 6. DECLARATIVE <dialog closedby="any"> WORKBENCH, CARD & PDF MODALS
 * ============================================================================ */
dialog.studio-dialog {
  max-width: min(48rem, calc(100vw - 2rem));
  max-height: calc(100svh - 2.5rem);
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 1.65rem;
  box-shadow: var(--specular-top), var(--shadow-stage);
  overflow-y: auto;
}
dialog.studio-dialog.studio-dialog-card {
  max-width: min(35.5rem, calc(100vw - 1.5rem));
  padding: 1.45rem 1.6rem;
}
dialog.studio-dialog.studio-dialog-pdf {
  max-width: min(56rem, calc(100vw - 1.5rem));
  padding: 1.45rem 1.65rem;
}
dialog.studio-dialog::backdrop {
  background: rgba(9, 13, 22, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border-hairline);
}
.dialog-header > div:first-child {
  min-inline-size: 0;
  flex: 1;
}
.pdf-dialog-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.dialog-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.88rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: var(--specular-top);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.dialog-close-btn:hover {
  border-color: var(--accent-blue);
  background: var(--accent-primary);
  color: var(--accent-primary-fg);
  transform: translateY(-1px);
}
.card-dialog-qr-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  margin-bottom: 0.55rem;
}
.pdf-preview-shell {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.pdf-sheet-card {
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.pdf-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-hairline);
}
.pdf-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.pdf-pillar-box,
.pdf-pillar-item {
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.pdf-pillar-item > span.mono {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--accent-blue);
  letter-spacing: 0.06em;
}
.pdf-pillar-box strong,
.pdf-pillar-item strong {
  display: block;
  font-size: 0.86rem;
  color: var(--text-primary);
}
.pdf-pillar-item p {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
.pdf-guarantees-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-hairline);
}
.pdf-guarantee-chip {
  padding: 0.52rem 0.68rem;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  font-size: 0.72rem;
}
.pdf-guarantee-chip strong {
  display: block;
  font-size: 0.65rem;
  color: var(--accent-amber);
  letter-spacing: 0.05em;
  margin-bottom: 0.12rem;
}
@media (max-width: 640px) {
  .pdf-pillars-grid,
  .pdf-guarantees-strip {
    grid-template-columns: 1fr;
  }
}
.modal-showcase-stage {
  position: relative;
  margin: 0.95rem 0;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--bg-canvas);
  overflow: hidden;
}
#wb1-modal-canvas {
  width: 100%;
  height: 11.5rem;
  display: block;
}
.arch-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.85rem;
  margin: 1rem 0 1.25rem;
}
.arch-spec-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 0.9rem;
}
.arch-spec-box strong {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-blue);
  margin-bottom: 0.3rem;
}
.arch-spec-box p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

/* ============================================================================
 * 7. EDITORIAL 3-STEP PROCESS, CONCIERGE & UNIFIED DIRECT ARCHITECT DOCK
 * ============================================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.85vw, 24px);
}
.process-card {
  background:
    radial-gradient(420px circle at var(--spot-x) var(--spot-y), var(--spot-glow), transparent 65%),
    var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: clamp(20px, 2.1vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  min-inline-size: 0;
  box-shadow: var(--specular-top), var(--shadow-stage);
}
.process-card > div {
  min-inline-size: 0;
}
.process-card .metric-numeral {
  font-size: clamp(10.8px, calc(11.2px * var(--fs-scale, 1)), 12.4px) !important;
  letter-spacing: 0.055em;
  white-space: normal;
  line-height: 1.35;
}
.process-card-tag {
  margin-top: auto;
  padding-top: 0.95rem;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.48rem;
}
.process-card-tag span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: var(--specular-top);
  font-size: clamp(10.8px, calc(11px * var(--fs-scale, 1)), 12.2px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.process-card-tag span:first-child::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 6px var(--accent-blue);
  flex-shrink: 0;
}
.process-card-tag span:last-child {
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-color: var(--border-hairline);
}

.concierge-grid {
  display: grid;
  grid-template-columns: minmax(0, 6.8fr) minmax(0, 5.2fr);
  gap: 1.85rem;
  align-items: start;
}
.concierge-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  padding: clamp(1.45rem, 2.8vw, 2.1rem);
  min-inline-size: 0;
  box-shadow: var(--specular-top), var(--shadow-stage);
}

/* Rounded Frosted-Glass Multi-Select Dropdown Popout (v7.5) */
.concierge-glass-dropdown {
  position: relative;
  margin-bottom: 0.9rem;
}
.concierge-dropdown-trigger {
  width: 100%;
  min-height: 2.95rem;
  padding: 0.58rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  box-shadow: var(--specular-top), 0 8px 20px -8px rgba(0, 0, 0, 0.28);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  text-align: left;
}
.concierge-dropdown-trigger:hover,
.concierge-glass-dropdown[data-open="true"] .concierge-dropdown-trigger {
  border-color: var(--accent-blue);
}
.concierge-dropdown-summary {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-inline-size: 0;
  flex: 1;
}
.concierge-dropdown-summary-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.concierge-dropdown-badge {
  padding: 0.16rem 0.52rem;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  font-size: 0.66rem;
  color: var(--accent-blue);
  white-space: nowrap;
  flex-shrink: 0;
}
.concierge-dropdown-chevron {
  font-size: 0.76rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.concierge-glass-dropdown[data-open="true"] .concierge-dropdown-chevron {
  transform: rotate(180deg);
}

.concierge-dropdown-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 260;
  border-radius: 16px;
  padding: 0.65rem;
  background: var(--bg-glass);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--specular-top), var(--shadow-stage);
  display: none;
  flex-direction: column;
  gap: 0.36rem;
}
.concierge-glass-dropdown[data-open="true"] .concierge-dropdown-menu {
  display: flex;
}

.concierge-dropdown-option,
.topic-chip {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.72rem;
  border-radius: 11px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.concierge-dropdown-option:hover,
.topic-chip:hover {
  border-color: var(--accent-blue);
}
.concierge-dropdown-option[aria-pressed="true"],
.topic-chip[aria-pressed="true"] {
  background: var(--bg-elevated);
  border-color: var(--accent-blue);
  box-shadow: inset 0 0 0 1px var(--accent-blue);
}
.concierge-opt-check {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-canvas);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.14s ease;
}
.concierge-dropdown-option[aria-pressed="true"] .concierge-opt-check,
.topic-chip[aria-pressed="true"] .concierge-opt-check {
  background: var(--accent-primary);
  color: var(--accent-primary-fg);
  border-color: var(--accent-primary);
}
.concierge-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.3rem 0.1rem;
  border-top: 1px solid var(--border-hairline);
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-field { margin-bottom: 1rem; }
.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.92rem;
}
.form-textarea { min-height: 5.6rem; resize: vertical; }

.direct-contact-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  margin-bottom: 0;
  min-inline-size: 0;
  box-shadow: var(--specular-top), var(--shadow-stage);
}

/* Brushed Obsidian-Titanium 3D Architect Credential (#exec-card-3d) */
.exec-card-scene {
  perspective: 1100px;
  width: 100%;
  margin: 0.6rem 0 0.95rem;
}
.exec-card-3d {
  position: relative;
  width: 100%;
  min-height: 13.8rem;
  transform-style: preserve-3d;
  transition: transform 0.65s var(--spring-easing);
  cursor: pointer;
}
.exec-card-3d[data-flipped="true"] {
  transform: rotateY(180deg);
}
.exec-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  padding: 1.2rem;
  background:
    radial-gradient(360px circle at var(--spot-x) var(--spot-y), rgba(248, 250, 252, 0.13), transparent 60%),
    radial-gradient(circle at 88% 16%, rgba(226, 232, 240, 0.1), transparent 52%),
    linear-gradient(145deg, #161B26 0%, #090C12 65%, #111520 100%);
  color: #F8FAFC;
  border: 1px solid rgba(226, 232, 240, 0.32);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.22), 0 18px 38px -10px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.exec-card-back {
  transform: rotateY(180deg);
}
.exec-card-sub {
  font-size: clamp(8.5px, calc(8.7px * var(--fs-scale, 1)), 9.2px);
  color: #CBD5E1;
  letter-spacing: 0.03em;
  line-height: 1.25;
  white-space: nowrap;
}
.exec-card-flip-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: clamp(9.8px, calc(10px * var(--fs-scale, 1)), 10.8px);
  line-height: 1;
  color: #E2E8F0;
  border: 1px solid rgba(226, 232, 240, 0.32);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

/* Unified Direct Contact Rows (Single Phone Display + Inline Action Pills) */
.contact-unified-stack {
  display: grid;
  gap: 0.52rem;
  margin-bottom: 0.72rem;
}
.contact-unified-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.52rem 0.72rem;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  min-inline-size: 0;
}
.contact-row-meta {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-inline-size: 0;
}
.contact-row-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.contact-row-value {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.contact-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2.0rem;
  padding: 0.28rem 0.68rem;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.73rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.contact-action-pill:hover {
  border-color: var(--accent-blue);
  background: var(--accent-primary);
  color: var(--accent-primary-fg);
}

/* 3-Tile Executive Handout Strip */
.handout-dock-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-hairline);
}
.handout-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  padding: 0.35rem 0.45rem;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.handout-tile:hover {
  border-color: var(--accent-blue);
  background: var(--bg-elevated);
}

/* Compatibility Classes for /legal and /card */
.eyebrow-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-blue);
  margin-bottom: 0.75rem;
}
.bento-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 1.65rem;
  box-shadow: var(--shadow-stage);
}
.bento-bullets {
  padding-left: 1.25rem;
  color: var(--text-secondary);
}
.bento-bullets li { margin-bottom: 0.5rem; }

/* ============================================================================
 * 8. TWO-TIER LOCATION STANDARD FOOTER
 * ============================================================================ */
.site-footer {
  padding: 3.5rem 0 2.5rem;
  background: var(--bg-surface);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-hairline);
}
.footer-bottom {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ============================================================================
 * 9. RESPONSIVE BREAKPOINTS & MOBILE PEEK-SNAP CAROUSEL (<= 820px)
 * ============================================================================ */
@media (max-width: 86em) {
  .brand-sub { display: none; }
}

@media (max-width: 68em) {
  .main-nav { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
}

@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .modular-pillar-row {
    grid-template-columns: 1fr;
  }
  .concierge-grid {
    grid-template-columns: 1fr;
  }
  .process-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .hero-stage {
    padding-top: 22px;
    padding-bottom: 26px;
  }
  .hero-stage > .container {
    gap: 0;
  }
  .hero-overline {
    margin: 6px 0 0;
    padding: 8px 16px;
    font-size: 0.74rem;
    line-height: 1.35;
  }
  .hero-copy-stack {
    padding-top: 22px;
    padding-bottom: 22px;
  }
  .hero-headline {
    font-size: clamp(1.88rem, calc(7.0vw * var(--fs-scale, 1)), 2.52rem);
    line-height: 1.13;
    margin-bottom: 15px;
  }
  .hero-lead {
    font-size: clamp(0.98rem, calc(3.7vw * var(--fs-scale, 1)), 1.12rem);
    line-height: 1.58;
  }
  .hero-cta-row {
    margin-top: 0;
    margin-bottom: 22px;
  }
  .hero-metrics-bar {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hero-metrics-bar .metric-item + .metric-item {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border-hairline);
    padding-top: 12px;
  }
}

/* Mobile-Only Synchronized 4-Pill Quick-Switcher + 88vw Peek-Snap Deck */
@media (max-width: 820px) {
  .mobile-bento-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
  }
  .mobile-bento-pill {
    min-height: 33px;
    padding: 4px 3px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.64rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .mobile-bento-pill[aria-selected="true"] {
    background: var(--accent-primary);
    color: var(--accent-primary-fg);
  }

  .bento-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    gap: 14px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .bento-grid::-webkit-scrollbar {
    display: none;
  }
  .bento-grid > .bento-stage {
    flex: 0 0 88%;
    max-width: 88%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .mobile-bento-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
  }
  .mobile-bento-step-btn {
    min-height: 31px;
    padding: 4px 11px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
  }
}

@media (max-width: 768px) {
  .cmd-trigger-btn { display: none; }
  .wb2-stop-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb2-stop-meta-grid,
  .wb2-biz-top-grid,
  .wb3-twin-stage,
  .spec-dashboard-body { grid-template-columns: 1fr; }
  .wf-nodes-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .handout-dock-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hide-xs { display: none; }
  .container { padding-inline: 15px; }
  .brand-link { gap: 6px; }
  .brand-seal { width: 28px; height: 28px; }
  .brand-name { font-size: 12.2px; }
  .header-inner { gap: 5px; }
  .header-actions { gap: 4.5px; }
  .mobile-nav-toggle,
  .comfort-pill-trigger,
  .site-header .header-actions .btn-primary {
    min-height: 32px;
    padding: 4px 8.5px;
    font-size: 11px;
  }
  .comfort-drawer {
    width: min(280px, calc(100vw - 24px));
    right: -12px;
  }
  .hero-overline {
    font-size: clamp(10.5px, calc(2.85vw * var(--fs-scale, 1)), 12.8px);
    letter-spacing: 0.08em;
    padding: 7px 13px;
    gap: 7.5px;
    max-width: 100%;
  }
  .hero-cta-row .btn,
  #concierge-submit-btn {
    max-width: 100%;
    padding-inline: clamp(12px, 3.8vw, 20px);
    font-size: clamp(13px, calc(3.65vw * var(--fs-scale, 1)), 15.6px);
  }
}

/* ============================================================================
 * 10. EXECUTIVE PRINT BRIEF STYLESHEET (@media print)
 * ============================================================================ */
@media print {
  body {
    background: #FFFFFF !important;
    color: #0F172A !important;
    font-size: 11pt !important;
  }
  .site-header,
  #ic-spatial-ribbon,
  .comfort-pill-wrapper,
  .cmd-trigger-btn,
  .mobile-nav-toggle,
  .mobile-bento-nav,
  .mobile-bento-controls {
    display: none !important;
  }
  .hero-stage,
  .section-band {
    padding-block: 1.25rem !important;
    border-bottom: 1px solid #CBD5E1 !important;
    background: #FFFFFF !important;
  }
  .bento-stage,
  .process-card,
  .concierge-panel,
  .direct-contact-card {
    box-shadow: none !important;
    border: 1px solid #94A3B8 !important;
    break-inside: avoid;
  }
}

/* ============================================================================
 * 11. CLEAN VIEWPORT FRAME GUARD (Suppress Third-Party Host HUD Overlays)
 * ============================================================================ */
#nl-badge-frame,
#nl-hud-frame,
iframe[id^="nl-"][title*="Netlify"],
div[data-netlify-deploy-notifications] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}