/* ========================================
   AIGENCY.LTD - DESIGN TOKENS & GLOBAL STYLES
   Deep Navy, Digital Brass & Translucent Emerald
   Cognitive Sustainability Framework
   ======================================== */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Color Palette */
  --color-obsidian: #0B0F21;
  --color-deep-slate: rgba(16, 18, 33, 0.3);
  --color-electric-cyan: #8aaabd;
  --color-digital-teal: #6f8fa5;
  --color-video-green: #6f9f83;
  --color-video-green-light: #9fc6aa;
  --color-video-green-border: rgba(111, 159, 131, 0.34);
  --color-silver: #E2E8F0;
  --color-steel-grey: #94A3B8;
  --color-panel-heading: #AFC1CF;
  --color-insight-heading: #bfd9d7;
  --color-heading-metal: #A18777;
  --gradient-heading-metal: linear-gradient(
    90deg,
    #594538 0%,
    #755C4D 22%,
    #A18777 45%,
    #C9AF9E 72%,
    #E9D3C5 100%
  );

  /* Category Colors */
  --color-tech-bg: rgba(16, 18, 33, 0.42);
  --color-tech-border: rgba(138, 170, 189, 0.18);
  --color-tech-accent: #8aaabd;

  --color-mind-bg: rgba(16, 185, 129, 0.04);
  --color-mind-border: rgba(16, 185, 129, 0.15);
  --color-mind-accent: #10B981;

  --color-training-bg: rgba(139, 92, 246, 0.04);
  --color-training-border: rgba(139, 92, 246, 0.15);
  --color-training-accent: #8B5CF6;

  --color-community-bg: rgba(245, 158, 11, 0.03);
  --color-community-border: rgba(245, 158, 11, 0.15);
  --color-community-accent: #F59E0B;

  /* Warm Earth Complementary Theme */
  --color-warm-bg: rgba(33, 31, 16, 0.5);
  --color-warm-border: rgba(245, 158, 11, 0.2);
  --color-warm-accent: #F59E0B;
  --color-warm-text: #CBD5E1;

  /* Restrained brass-gold counterpoint sampled from the current AiGENCY mark */
  --color-bronze-deep: #211b18;
  --color-bronze: #8f6a52;
  --color-bronze-light: #c59b7a;
  --color-bronze-border: rgba(143, 106, 82, 0.44);
  --gradient-bronze: linear-gradient(90deg, #211b18 0%, #3f3028 55%, #634a3a 100%);
  --gradient-bronze-line: linear-gradient(90deg, #6d503e 0%, #8f6a52 55%, #c59b7a 100%);

  /* Current interaction metal: cool platinum with a restrained champagne warmth.
     Legacy "bronze" class names remain in the HTML for compatibility, but
     buttons and controls use this material rather than the older orange gold. */
  --color-champagne-platinum: #e7ddd4;
  --color-champagne-platinum-bright: #fff8f1;
  --color-champagne-platinum-mid: #cbbdb3;
  --color-champagne-platinum-deep: #776a66;
  --color-champagne-platinum-border: rgba(231, 221, 212, 0.58);
  --color-champagne-platinum-glow: rgba(231, 221, 212, 0.16);
  --gradient-champagne-platinum: linear-gradient(
    135deg,
    rgba(225, 215, 207, 0.26),
    rgba(122, 107, 103, 0.28) 52%,
    rgba(34, 30, 40, 0.74)
  );
  --gradient-champagne-platinum-hover: linear-gradient(
    135deg,
    rgba(244, 236, 229, 0.34),
    rgba(151, 134, 127, 0.34) 52%,
    rgba(43, 37, 48, 0.8)
  );

  /* Gradients */
  --gradient-hermes: linear-gradient(135deg, #111727 0%, #1f332f 58%, #527a64 100%);
  --gradient-outbound: linear-gradient(135deg, rgba(17, 23, 39, 0.96) 0%, rgba(22, 35, 43, 0.88) 58%, rgba(38, 77, 62, 0.78) 100%);

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-headline: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Spacing */
  --grid-gap-desktop: 20px;
  --grid-gap-tablet: 16px;
  --grid-gap-mobile: 12px;
  --header-height: 82px;

  /* Border Radius */
  --radius-card: 20px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
}

/* ---------- HOMEPAGE MYTHIC PATHS: SOLID JEWEL TILES + THREE.JS OBJECTS ---------- */
.homepage-path-card:nth-child(1) {
  --path-surface-rest: #153a31;
  --path-surface-hover: #205242;
  --path-edge: #70a48b;
  --path-edge-dark: #0c271f;
  --path-accent: #b8e0c7;
  --path-shadow: rgba(16, 76, 54, 0.34);
}

.homepage-path-card:nth-child(2) {
  --path-surface-rest: #412f20;
  --path-surface-hover: #594127;
  --path-edge: #c99a5a;
  --path-edge-dark: #2a1b10;
  --path-accent: #f0ce94;
  --path-shadow: rgba(128, 78, 31, 0.32);
}

.homepage-path-card:nth-child(3) {
  --path-surface-rest: #3e1d2a;
  --path-surface-hover: #5a2839;
  --path-edge: #b86e68;
  --path-edge-dark: #2a0e19;
  --path-accent: #ecc0ad;
  --path-shadow: rgba(122, 40, 54, 0.34);
}

.homepage-path-card:nth-child(4) {
  --path-surface-rest: #24395a;
  --path-surface-hover: #314d78;
  --path-edge: #7f9dcc;
  --path-edge-dark: #14253f;
  --path-accent: #c6d8f1;
  --path-shadow: rgba(37, 64, 113, 0.36);
}

.homepage-path-card {
  min-height: 430px;
  padding: clamp(1.15rem, 2.2vw, 1.55rem);
  border: 1px solid var(--path-edge);
  border-radius: 22px;
  background: var(--path-surface-rest);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 5px 0 var(--path-edge-dark), 0 18px 36px var(--path-shadow);
  transition: background-color 380ms ease, border-color 380ms ease, box-shadow 380ms ease, transform 380ms ease;
}

.homepage-path-card::before {
  inset: 8px;
  border-color: color-mix(in srgb, var(--path-edge) 46%, transparent);
  border-radius: 15px;
  box-shadow: none;
}

.homepage-path-card:hover,
.homepage-path-card:focus-visible {
  animation: none;
  background: var(--path-surface-hover);
  border-color: color-mix(in srgb, var(--path-edge) 76%, white 24%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.065), 0 5px 0 var(--path-edge-dark), 0 22px 42px var(--path-shadow);
  transform: translateY(-3px);
}

.homepage-path-card:active {
  animation: none;
  background: var(--path-surface-hover);
  filter: none;
  transform: translateY(1px) scale(0.988);
}

.homepage-path-label {
  z-index: 3;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--path-accent);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-shadow: none;
}

.homepage-path-icon,
.homepage-path-outcome,
.homepage-path-action-symbol {
  display: none;
}

.homepage-path-scene {
  position: absolute;
  z-index: 1;
  top: 2.6rem;
  right: 0.85rem;
  left: 0.85rem;
  display: grid;
  height: 220px;
  place-items: center;
  pointer-events: none;
}

.homepage-path-scene canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.homepage-path-scene-fallback {
  position: relative;
  z-index: 1;
  color: var(--path-accent);
  font-size: 5rem;
  line-height: 1;
  opacity: 0.78;
}

.homepage-path-scene.is-rendered .homepage-path-scene-fallback {
  display: none;
}

.homepage-path-myth {
  z-index: 2;
  margin-top: auto;
  color: var(--path-accent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

.homepage-path-card strong {
  z-index: 2;
  margin: 0.4rem 0 0.32rem;
  color: var(--color-panel-heading);
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
}

.homepage-path-card small {
  z-index: 2;
  min-height: 0;
  margin: 0;
  color: rgba(243, 247, 244, 0.86);
  font-size: 0.8rem;
  line-height: 1.42;
}

.homepage-path-action {
  z-index: 2;
  min-height: 38px;
  margin-top: 0.7rem;
  padding: 0.62rem 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--path-edge) 45%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.homepage-path-action-copy b,
.homepage-path-action-label {
  color: #f0ce94;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-shadow: none;
}

.homepage-path-action-copy small {
  display: none;
}

.homepage-path-action i {
  width: auto;
  height: auto;
  flex-basis: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f0ce94;
  font-size: 1.25rem;
}

.homepage-path-card:hover .homepage-path-action,
.homepage-path-card:focus-visible .homepage-path-action {
  border-color: color-mix(in srgb, #f0ce94 62%, transparent);
  box-shadow: none;
}

.homepage-path-card:hover .homepage-path-action i,
.homepage-path-card:focus-visible .homepage-path-action i {
  background: transparent;
  color: #ffe2a9;
  transform: translate(0.18rem, -0.12rem);
}

@media (max-width: 1100px) {
  .homepage-path-card { min-height: 390px; }
  .homepage-path-scene { height: 190px; }
}

@media (max-width: 640px) {
  .homepage-path-card { min-height: 370px; }
  .homepage-path-scene { top: 2.3rem; height: 182px; }
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-obsidian);
  color: var(--color-silver);
  font-family: var(--font-body);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  color: var(--color-silver);
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 600;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h1 { color: var(--color-heading-metal); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 {
    background-image: var(--gradient-heading-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.hero-jade {
  background: none;
  color: var(--color-insight-heading);
  -webkit-text-fill-color: var(--color-insight-heading);
  text-shadow:
    0 0 0.62rem rgba(191, 217, 215, 0.2),
    0 0 1.7rem rgba(91, 177, 147, 0.12);
}
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p {
  color: var(--color-steel-grey);
  line-height: 1.6;
  max-width: 70ch;
}

a {
  color: var(--color-electric-cyan);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover, a:focus-visible {
  color: var(--color-digital-teal);
  outline: 2px solid var(--color-electric-cyan);
  outline-offset: 2px;
}

/* ---------- HEADER / NAVIGATION ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
}

.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: max-content;
  text-decoration: none;
  cursor: pointer;
}

.logo-img {
  width: 4.2rem;
  height: 4.2rem;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  content: url('../assets/aigency-hermes-logo-winged-2026-08.png');
  filter: brightness(0.96) saturate(0.96) drop-shadow(0 0 0.34rem rgba(197, 142, 95, 0.14));
  transition: filter 220ms ease, transform 220ms ease;
  animation: logoMarkLandingSpin 1100ms cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

/* Reintroduce the site’s directional bronze treatment without putting a
   rectangular wash behind the transparent crest. The mask confines the
   darker left edge and pale right-side reflection to the logo itself. */
.logo::before {
  content: none;
  display: none;
}

.logo::after {
  content: 'AiGENCY';
  display: inline-block;
  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 43%,
      rgba(231, 194, 157, 0.24) 48%,
      transparent 52%,
      transparent 100%
    ),
    var(--gradient-heading-metal),
    linear-gradient(rgba(7, 17, 34, 0.78), rgba(7, 17, 34, 0.78));
  background-size: 300% 100%, 100% 100%, 100% 100%;
  background-position: 100% 0, 0 0, 0 0;
  background-repeat: no-repeat;
  background-clip: text, text, border-box;
  -webkit-background-clip: text, text, border-box;
  -webkit-text-fill-color: transparent;
  color: var(--color-heading-metal);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  font-size: clamp(1.18rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(197, 142, 95, 0.12);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateX(-0.25rem);
  animation:
    logoWordReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) 520ms both,
    logoWordShimmer 2400ms cubic-bezier(0.4, 0, 0.2, 1) 1420ms both;
}

.logo:hover .logo-img,
.logo:focus-visible .logo-img,
.logo:active .logo-img {
  filter:
    brightness(0.98) saturate(0.97)
    drop-shadow(0 0 0.42rem rgba(240, 207, 152, 0.32));
  transform: scale(1.035);
}

.logo:hover::after,
.logo:focus-visible::after,
.logo:active::after {
  text-shadow:
    0 0 0.45rem rgba(240, 207, 152, 0.48),
    0 1px 12px rgba(197, 142, 95, 0.2);
}

/* Touchscreens do not have hover. Keep the logo gently discoverable there,
   then let :active provide the stronger feedback during the tap. */
@media (hover: none), (pointer: coarse) {
  .logo-img {
    filter:
      brightness(0.96) saturate(0.96)
      drop-shadow(0 0 0.34rem rgba(222, 175, 123, 0.16));
  }

  .logo::after {
    text-shadow: 0 0 0.32rem rgba(240, 207, 152, 0.28);
  }
}

/* ---------- AI TALKER ENTRY POINT ---------- */
.ai-talker {
  position: fixed;
  left: 1.25rem;
  bottom: calc(1.35rem + 4px);
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: #ead2b7;
  text-decoration: none;
  cursor: pointer;
  filter: none;
}

/* The Insights index already has a full Arthur card in its desktop layout.
   Keep its floating entry point for the compact mobile header only. */
.insights-page:not(.insight-detail-page) .ai-talker {
  display: none;
}

.ai-talker-seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 3.5rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(129, 214, 170, 0.46);
  border-radius: 1.15rem;
  background:
    linear-gradient(135deg, rgba(41, 126, 92, 0.4), rgba(18, 65, 52, 0.57) 52%, rgba(19, 36, 43, 0.64));
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(224, 255, 238, 0.22),
    inset 0 -12px 22px rgba(4, 26, 20, 0.28),
    inset 0 0 0 1px rgba(196, 255, 220, 0.045),
    0 12px 28px rgba(0, 0, 0, 0.24);
  transition: transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.ai-talker-seal::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -70% -55%;
  border-radius: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 24% 78% at 50% 50%, rgba(204, 255, 225, 0.17), transparent 72%),
    linear-gradient(116deg, transparent 35%, rgba(229, 255, 240, 0.035) 43%, rgba(229, 255, 240, 0.18) 50%, rgba(229, 255, 240, 0.04) 57%, transparent 65%);
  mix-blend-mode: screen;
  transform: translate3d(-58%, 0, 0);
  animation: homeComplianceGlassSweep 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ai-talker-seal svg {
  width: 2.7rem;
  height: 2.7rem;
  overflow: visible;
}

.ai-talker-mark {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--font-headline);
  font-size: 1.52rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1;
  background-image: var(--gradient-heading-metal);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-heading-metal);
  text-shadow: 0 1px 0 rgba(232, 255, 241, 0.16), 0 -1px 1px rgba(4, 26, 20, 0.42);
  transform-origin: center;
  animation: aiTalkerMedallionFloat 8.8s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.ai-talker-seal::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 42% 28%, rgba(185, 255, 211, 0.12), transparent 54%);
  mix-blend-mode: screen;
  opacity: 0.2;
}

.ai-talker-seal-edge {
  fill: none;
  stroke: rgba(240, 207, 152, 0.52);
  stroke-width: 1;
}

.ai-talker-a,
.ai-talker-small-i {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-talker-a {
  stroke: #deaf7b;
  stroke-width: 2.2;
}

.ai-talker-small-i {
  stroke: #fff8e8;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.ai-talker-label {
  display: inline-flex;
  align-items: center;
  min-height: 2.15rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(222, 175, 123, 0.32);
  border-radius: 999px;
  background: rgba(15, 22, 32, 0.86);
  color: #e6c9aa;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ai-talker:hover .ai-talker-seal,
.ai-talker:focus .ai-talker-seal,
.ai-talker:focus-visible .ai-talker-seal,
.ai-talker:active .ai-talker-seal {
  transform: scale(1.035);
  border-color: rgba(153, 232, 187, 0.64);
  background: linear-gradient(135deg, rgba(47, 145, 104, 0.54), rgba(20, 76, 59, 0.68) 52%, rgba(20, 42, 47, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(235, 255, 243, 0.28),
    inset 0 -12px 22px rgba(4, 26, 20, 0.22),
    inset 0 0 0 1px rgba(196, 255, 220, 0.06),
    0 12px 30px rgba(0, 0, 0, 0.28),
    0 0 1rem rgba(91, 183, 151, 0.18);
}

.ai-talker:focus-visible {
  outline: 2px solid rgba(240, 207, 152, 0.78);
  outline-offset: 4px;
  border-radius: 999px;
}

@keyframes aiTalkerMedallionFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1) saturate(1);
  }
  50% {
    transform: translateY(-3px) scale(1.012);
    filter: brightness(1.12) saturate(1.08);
  }
}

@keyframes aiTalkerCoinAura {
  0%, 100% {
    opacity: 0.2;
    transform: translateY(0) scale(0.96);
  }
  50% {
    opacity: 0.34;
    transform: translateY(-2px) scale(1.05);
  }
}

.ai-talker:hover .ai-talker-label,
.ai-talker:focus-visible .ai-talker-label {
  border-color: rgba(240, 207, 152, 0.62);
  color: #f0cf98;
}

.ai-talk-panel {
  position: fixed;
  left: 1.25rem;
  bottom: 5.5rem;
  z-index: 1099;
  display: flex;
  flex-direction: column;
  width: min(23rem, calc(100vw - 2.5rem));
  max-height: min(42rem, calc(100vh - 7.5rem));
  overflow: hidden;
  opacity: 0;
  transform: translate(-0.8rem, 2.2rem) scale(0.14);
  transform-origin: 1.7rem calc(100% + 2.45rem);
  will-change: transform, opacity;
  border: 1px solid rgba(222, 175, 123, 0.42);
  border-radius: 1.1rem;
  background: linear-gradient(145deg, rgba(23, 25, 35, 0.84) 0%, rgba(11, 20, 34, 0.84) 100%);
  backdrop-filter: blur(8px) saturate(0.82);
  -webkit-backdrop-filter: blur(8px) saturate(0.82);
  opacity: 1;
  box-shadow:
    0 1.4rem 3.5rem rgba(0, 0, 0, 0.42),
    0 0 2rem rgba(197, 142, 95, 0.16),
    inset 0 1px 0 rgba(255, 239, 215, 0.1);
}

.ai-talk-panel[hidden] {
  display: none !important;
}

.ai-talk-panel.is-opening {
  animation: aiTalkPanelOpen 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ai-talk-panel.is-closing {
  pointer-events: none;
  animation: aiTalkPanelClose 680ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes aiTalkPanelOpen {
  0% { opacity: 0; transform: translate3d(-0.55rem, 1.35rem, 0) scale3d(0.28, 0.28, 1); }
  58% { opacity: 0.76; transform: translate3d(-0.12rem, 0.22rem, 0) scale3d(0.92, 0.92, 1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
}

@keyframes aiTalkPanelClose {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
  100% { opacity: 0; transform: translate3d(-0.55rem, 1.35rem, 0) scale3d(0.28, 0.28, 1); }
}

.ai-talk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The floating Arthur conversation begins with Arthur himself, rather than a
   generic information bar. Editorial cards retain their own compact header. */
.ai-talk-arthur-stage {
  position: relative;
  display: grid;
  grid-template-columns: 6.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 7.1rem;
  padding: 0.9rem 1rem 0.8rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(222, 175, 123, 0.16);
  background:
    radial-gradient(circle at 13% 22%, rgba(134, 200, 188, 0.18), transparent 34%),
    linear-gradient(112deg, rgba(15, 35, 46, 0.82), rgba(27, 24, 34, 0.64));
}

.ai-talk-arthur-stage::after {
  content: '';
  position: absolute;
  right: -2.8rem;
  bottom: -4rem;
  width: 10rem;
  height: 10rem;
  border: 1px solid rgba(222, 175, 123, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 1.3rem rgba(118, 184, 170, 0.035), 0 0 0 2.7rem rgba(222, 175, 123, 0.025);
  pointer-events: none;
}

.ai-talk-arthur-portrait {
  position: relative;
  z-index: 1;
  width: 6.35rem;
  height: 6.35rem;
  overflow: hidden;
  border: 1px solid rgba(222, 175, 123, 0.58);
  border-radius: 0.55rem;
  background: #101b28;
  box-shadow: 0 0 0 0.24rem rgba(10, 19, 31, 0.76), 0 0 1.5rem rgba(124, 195, 178, 0.22);
}

.ai-talk-arthur-portrait img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  transform: scale(1.45);
  transition: opacity 220ms ease;
}

.ai-talk-arthur-avatar canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Keep Arthur visible even while WebGL starts or if a visitor's browser
   cannot initialise the talking avatar. The live canvas sits above this. */
.ai-talk-arthur-avatar {
  background: #101b28 url('/assets/arthur-ai-intern.png') 50% 16% / cover no-repeat;
}

/* The 2D portrait is a failure fallback only. Showing it during WebGL start-up
   makes two Arthurs appear briefly in the same medallion. */
.ai-talk-arthur-avatar > img {
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
}

.ai-talk-avatar-loading {
  position: absolute;
  z-index: 1;
  right: 0.22rem;
  bottom: 0.28rem;
  left: 0.22rem;
  color: #f2d3aa;
  font: 600 0.42rem var(--font-mono);
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
}

.ai-talk-arthur-avatar.is-avatar-ready img,
.ai-talk-arthur-avatar.is-avatar-ready .ai-talk-avatar-loading {
  opacity: 0;
}

.ai-talk-arthur-avatar.is-avatar-unavailable .ai-talk-avatar-loading {
  display: none;
}

.ai-talk-arthur-avatar.is-avatar-unavailable > img {
  opacity: 1;
}

.ai-talk-arthur-name {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ai-talk-arthur-name .ai-talk-kicker {
  margin-bottom: 0.24rem;
  color: #a8c8bd;
}

.ai-talk-arthur-name h2 {
  color: #f0cf98;
  font-family: var(--font-headline);
  font-size: 1.25rem;
}

.ai-talk-arthur-stage .ai-talk-close {
  position: relative;
  z-index: 2;
  align-self: start;
}

.ai-talk-panel-identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.ai-talk-mini-seal {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  border: 1px solid rgba(222, 175, 123, 0.62);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(222, 175, 123, 0.32), rgba(15, 22, 32, 0.95) 68%);
  color: #fff8e8;
  font-family: Georgia, serif;
  font-size: 1.3rem;
  font-style: italic;
  box-shadow: 0 0 1rem rgba(222, 175, 123, 0.22);
}

.ai-talk-mini-portrait {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  object-fit: cover;
  object-position: 50% 28%;
  border: 1px solid rgba(222, 175, 123, 0.5);
  border-radius: 50%;
  background: #111827;
  box-shadow: 0 0 1rem rgba(222, 175, 123, 0.18);
}

.ai-talk-kicker {
  margin: 0 0 0.12rem;
  color: #b9c9c1;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.ai-talk-panel h2 {
  margin: 0;
  color: #f0cf98;
  font-family: var(--font-headline);
  font-size: 1.08rem;
}

.ai-talk-close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(222, 175, 123, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: #d9e1e7;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.ai-talk-close:hover,
.ai-talk-close:focus-visible {
  border-color: rgba(240, 207, 152, 0.72);
  color: #fff8e8;
}

.ai-talk-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.85rem 1rem 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(159, 198, 170, 0.2);
  border-radius: 0.6rem;
  background: rgba(111, 159, 131, 0.08);
}

.ai-talk-disclosure p {
  margin: 0;
  color: #b9c9c1;
  font-size: 0.68rem;
  line-height: 1.45;
}

.ai-talk-status-dot {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 0.45rem;
  margin-top: 0.22rem;
  border-radius: 50%;
  background: #9fc6aa;
  box-shadow: 0 0 0.5rem rgba(159, 198, 170, 0.65);
}

.ai-talk-messages {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 7.4rem;
  max-height: 16rem;
  padding: 0.9rem 1rem;
  overflow-y: auto;
}

.ai-talk-message {
  max-width: 88%;
  padding: 0.75rem 0.8rem;
  border-radius: 0.8rem 0.8rem 0.8rem 0.2rem;
  background: rgba(222, 175, 123, 0.1);
  border: 1px solid rgba(222, 175, 123, 0.2);
}

.ai-talk-message-label {
  display: block;
  margin-bottom: 0.28rem;
  color: #deaf7b;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ai-talk-message p {
  margin: 0;
  color: #edf1f4;
  font-size: 0.9rem;
  line-height: 1.45;
}

.ai-talk-message-visitor {
  align-self: flex-end;
  border-radius: 0.8rem 0.8rem 0.2rem;
  background: rgba(78, 126, 106, 0.18);
  border-color: rgba(129, 214, 170, 0.26);
}

.ai-talk-message-status {
  padding: 0.45rem 0;
  border: 0;
  background: transparent;
  color: #b9c9c1;
}

.ai-talk-message-status p {
  color: #b9c9c1;
  font-size: 0.74rem;
  font-style: italic;
}

.ai-talk-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ai-talk-prompts button {
  padding: 0.5rem 0.62rem;
  border: 1px solid rgba(222, 175, 123, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #d8c6b5;
  font-size: 0.68rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.ai-talk-prompts button:hover,
.ai-talk-prompts button:focus-visible,
.ai-talk-prompts button.is-selected {
  border-color: rgba(240, 207, 152, 0.72);
  background: rgba(222, 175, 123, 0.14);
  color: #fff8e8;
}

.ai-talk-preview-note {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(11, 15, 25, 0.34);
  color: #aebdc7;
  font-size: 0.68rem;
  line-height: 1.4;
}

.ai-talk-preview-note strong {
  color: #e1c2a1;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ai-talk-composer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1rem 0.65rem;
}

.ai-talk-composer input {
  min-width: 0;
  flex: 1;
  height: 2.55rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(222, 175, 123, 0.24);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.045);
  color: #edf1f4;
  font: inherit;
  font-size: 0.78rem;
}

.ai-talk-composer input::placeholder {
  color: #94a3b8;
}

.ai-talk-mic,
.ai-talk-send {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 2.55rem;
  padding: 0;
  border: 1px solid rgba(222, 175, 123, 0.3);
  border-radius: 0.65rem;
  background: rgba(222, 175, 123, 0.08);
  color: #deaf7b;
}

.ai-talk-mic svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.ai-talk-send {
  font-size: 1.1rem;
  cursor: pointer;
}

.ai-talk-mic:disabled,
.ai-talk-send:disabled,
.ai-talk-composer input:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.ai-talk-human {
  display: block;
  padding: 0 1rem 1rem;
  color: #deaf7b;
  font-size: 0.72rem;
  text-decoration: none;
}

.ai-talk-human:hover,
.ai-talk-human:focus-visible {
  color: #f0cf98;
  text-decoration: underline;
}

@media (max-width: 1120px) {
  .insights-page:not(.insight-detail-page) .ai-talker {
    display: inline-flex;
  }

  .ai-talker {
    top: calc((var(--header-height) - 3.5rem) / 2 + 3px);
    right: auto;
    bottom: auto;
    left: 1.8rem;
  }

  /* A restrained classical pointer: decorative guidance towards the AI coin,
     kept outside the button so it never interferes with the hit area. */
  .ai-talker::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: calc(100% + 0.32rem);
    width: 1px;
    height: 1.75rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(222, 175, 123, 0.5), rgba(222, 175, 123, 0.05));
    box-shadow: 0 0 0.32rem rgba(169, 23, 43, 0.28);
    opacity: 0.48;
    transform-origin: top center;
    animation: aiTalkerArrowDrift 8.5s ease-in-out infinite;
  }

  .ai-talker::after {
    content: '';
    position: absolute;
    left: calc(-1rem - 3px);
    top: calc(100% + 0.12rem);
    width: 0;
    height: 0;
    pointer-events: none;
    border-right: 4px solid transparent;
    border-bottom: 7px solid rgba(222, 175, 123, 0.54);
    border-left: 4px solid transparent;
    filter: drop-shadow(0 0 0.25rem rgba(169, 23, 43, 0.32));
    opacity: 0.48;
    transform-origin: 50% 100%;
    animation: aiTalkerArrowDrift 8.5s ease-in-out infinite;
  }

  .ai-talker-label {
    display: none;
  }

  .ai-talk-panel {
    top: calc(var(--header-height) + 0.7rem);
    right: 0.8rem;
    bottom: auto;
    left: 0.8rem;
    width: auto;
    max-height: calc(100vh - var(--header-height) - 1.4rem);
    transform-origin: 1.7rem 0;
  }
}

@keyframes aiTalkerArrowDrift {
  0%, 22%, 100% { opacity: 0.22; transform: translateY(0); }
  48% { opacity: 0.48; transform: translateY(-0.18rem); }
  62% { opacity: 0.36; transform: translateY(-0.08rem); }
  78% { opacity: 0.2; transform: translateY(0.06rem); }
}

@media (max-width: 600px) {
  .ai-talker-label {
    font-size: 0;
    letter-spacing: 0;
  }

  .ai-talker-label::after {
    content: 'AI CHAT';
    font: 600 0.58rem var(--font-mono);
    letter-spacing: 0.08em;
  }
}

@keyframes logoMarkFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes logoMarkLandingSpin {
  from { opacity: 0; transform: rotate(-18deg) scale(0.86); }
  58% { opacity: 1; transform: rotate(372deg) scale(1.04); }
  82% { transform: rotate(350deg) scale(0.98); }
  to { opacity: 1; transform: rotate(360deg) scale(1); }
}

@keyframes logoWordReveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-0.25rem); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
}

@keyframes logoWordShimmer {
  0% { background-position: 100% 0, 0 0; }
  38% { background-position: 0 0, 0 0; }
  72% { background-position: 100% 0, 0 0; }
  /* Finish on the second character: the lowercase i in AiGENCY. */
  100% { background-position: 64% 0, 0 0; }
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.15vw, 1.45rem);
  list-style: none;
}

.nav-desktop a {
  color: var(--color-silver);
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.5rem 0;
  position: relative;
}

.nav-desktop a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-bronze-line);
  transition: width var(--transition-medium);
}

.nav-desktop a:hover::after,
.nav-desktop a:focus-visible::after,
.nav-desktop a.is-active::after {
  width: 100%;
}

.nav-desktop a.is-active {
  color: var(--color-bronze-light);
}

.nav-desktop a.is-active::after {
  background: var(--gradient-bronze-line);
}

/* Desktop specialist navigation: keep the AI Services catalogue available
   without asking laptop-width headers to display every route at the same level. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown details > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.5rem 0;
  color: var(--color-silver);
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
}

.nav-dropdown details > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown details > summary::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-bronze-line);
  transition: width var(--transition-medium);
}

.nav-dropdown details > summary:hover,
.nav-dropdown details > summary:focus-visible,
.nav-dropdown details[open] > summary,
.nav-dropdown details > summary.is-active {
  color: var(--color-bronze-light);
}

.nav-dropdown details > summary:hover::after,
.nav-dropdown details > summary:focus-visible::after,
.nav-dropdown details[open] > summary::after,
.nav-dropdown details > summary.is-active::after {
  width: 100%;
}

.nav-dropdown-chevron {
  color: currentColor;
  font-size: 0.9em;
  line-height: 1;
  transform: translateY(-0.03em);
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: -0.8rem;
  z-index: 1001;
  display: grid;
  width: min(15.5rem, 28vw);
  gap: 0.2rem;
  padding: 0.55rem;
  border: 1px solid rgba(197, 155, 122, 0.34);
  border-radius: 0.75rem;
  background: rgba(11, 15, 25, 0.98);
  box-shadow: 0 1.2rem 2.5rem rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 238, 212, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav-dropdown-link {
  display: block;
  padding: 0.62rem 0.72rem !important;
  border-radius: 0.45rem;
  color: var(--color-silver) !important;
  font-size: 0.82rem !important;
  line-height: 1.25;
  white-space: nowrap;
}

.nav-dropdown-link::after {
  display: none !important;
}

.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible,
.nav-dropdown-link.is-active {
  background: rgba(63, 48, 39, 0.48);
  color: var(--color-bronze-light) !important;
  outline: none;
}

/* Compact gold Home control at the start of the primary navigation. */
.nav-desktop a.nav-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  transform: translateY(-1px);
  padding: 0.35rem;
  color: #deaf7b;
  background: rgba(63, 48, 39, 0.42);
  border: 1px solid rgba(197, 155, 122, 0.42);
  border-radius: 0.55rem;
}

.nav-desktop a.nav-home::after {
  display: none;
}

.nav-desktop a.nav-home:hover,
.nav-desktop a.nav-home:focus-visible,
.nav-desktop a.nav-home.is-active {
  color: #f0cf98;
  background: rgba(116, 86, 68, 0.52);
  border-color: rgba(222, 175, 123, 0.78);
  outline: 1px solid rgba(222, 175, 123, 0.22);
  outline-offset: 2px;
}

.nav-home-icon {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  transform: translateY(0);
  background: currentColor;
  fill: none;
  stroke: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 12 3l9 5.5'/%3E%3Cpath d='M2.5 9.5h19'/%3E%3Cpath d='M5 10v9M9.7 10v9M14.3 10v9M19 10v9'/%3E%3Cpath d='M3 19.5h18M2.5 21h19'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 12 3l9 5.5'/%3E%3Cpath d='M2.5 9.5h19'/%3E%3Cpath d='M5 10v9M9.7 10v9M14.3 10v9M19 10v9'/%3E%3Cpath d='M3 19.5h18M2.5 21h19'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-home-icon path {
  display: none;
}

.nav-desktop a.nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f0d3ab;
  background:
    radial-gradient(ellipse 24% 95% at 50% 50%, rgba(255, 221, 165, 0.2), transparent 72%) -120% 50% / 220% 100% no-repeat,
    linear-gradient(135deg, rgba(185, 111, 46, 0.42), rgba(102, 52, 22, 0.58) 52%, rgba(42, 31, 35, 0.68));
  border: 1px solid rgba(234, 170, 98, 0.5);
  border-radius: 9px;
  padding: 0.5rem 0.9rem;
  margin-top: -0.15rem;
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 238, 212, 0.2), inset 0 -7px 12px rgba(38, 18, 8, 0.18), 0 8px 20px rgba(0, 0, 0, 0.22);
  animation: navStartHereGlow 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes navStartHereGlow {
  0%, 18% { background-position: -120% 50%, 0 0; }
  48% { background-position: 8% 50%, 0 0; }
  62% { background-position: 58% 50%, 0 0; }
  78%, 100% { background-position: 120% 50%, 0 0; }
}

.nav-desktop a.nav-cta::after {
  content: '↗';
  position: static;
  display: inline;
  width: auto;
  height: auto;
  margin-left: 0.4rem;
  background: none;
  transition: none;
}

.nav-desktop a.nav-cta:hover,
.nav-desktop a.nav-cta:focus-visible {
  color: #ffe2b9;
  background: linear-gradient(135deg, rgba(211, 131, 57, 0.56), rgba(123, 64, 25, 0.7) 52%, rgba(51, 35, 37, 0.76));
  border-color: rgba(247, 190, 113, 0.76);
  box-shadow: 0 10px 24px rgba(143, 89, 42, 0.18), inset 0 1px 0 rgba(255, 240, 216, 0.26);
  outline: 1px solid rgba(234, 170, 98, 0.28);
  outline-offset: 2px;
}

/* Mobile Navigation */
.nav-toggle {
  display: none;
  position: relative;
  flex-direction: column;
  gap: 5px;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, rgba(151, 42, 57, 0.4), rgba(72, 17, 31, 0.55) 52%, rgba(31, 22, 36, 0.62));
  border: 1px solid rgba(225, 132, 137, 0.46);
  border-radius: 1.15rem;
  cursor: pointer;
  padding: 8px;
  min-width: 3.5rem;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 231, 229, 0.22), inset 0 -12px 22px rgba(27, 6, 16, 0.26), inset 0 0 0 1px rgba(255, 207, 205, 0.05), 0 12px 28px rgba(0, 0, 0, 0.24), 0 0 0.75rem rgba(169, 23, 43, 0.12);
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.nav-toggle span {
  position: relative;
  z-index: 1;
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-silver);
  transition: var(--transition-fast);
}

.nav-toggle::before {
  content: '';
  position: absolute;
  inset: -70% -55%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 24% 78% at 50% 50%, rgba(255, 225, 215, 0.2), transparent 72%),
    linear-gradient(116deg, transparent 35%, rgba(255, 242, 239, 0.04) 43%, rgba(255, 242, 239, 0.2) 50%, rgba(255, 242, 239, 0.045) 57%, transparent 65%);
  mix-blend-mode: screen;
  transform: translate3d(-58%, 0, 0);
  animation: homeHealthGlassSweep 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.nav-mobile {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(11, 15, 25, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 2rem;
  list-style: none;
  flex-direction: column;
  gap: 1rem;
}

.nav-mobile.active {
  display: flex;
}

.nav-mobile a {
  display: block;
  font-size: 1.25rem;
  color: var(--color-silver);
  padding: 1rem;
  min-height: 48px;
  border-radius: var(--radius-card);
  transition: background var(--transition-fast);
}

.nav-mobile a:hover,
.nav-mobile a:focus-visible {
  background: var(--color-deep-slate);
  outline: none;
}

.nav-mobile a.is-active {
  color: var(--color-bronze-light);
  background: linear-gradient(90deg, rgba(63, 48, 39, 0.3), rgba(143, 106, 82, 0.12));
  border: 1px solid var(--color-bronze-border);
}

.nav-mobile a.nav-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  min-width: 3rem;
  padding: 0.75rem;
  color: #deaf7b;
  background: rgba(63, 48, 39, 0.42);
  border: 1px solid rgba(197, 155, 122, 0.42);
}

.nav-mobile .nav-home-icon {
  transform: translateY(1px);
}

.nav-mobile a.nav-home:hover,
.nav-mobile a.nav-home:focus-visible,
.nav-mobile a.nav-home.is-active {
  color: #f0cf98;
  border-color: rgba(222, 175, 123, 0.78);
}

.nav-mobile a.nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f0d3ab;
  background:
    radial-gradient(ellipse 24% 95% at 50% 50%, rgba(255, 221, 165, 0.2), transparent 72%) -120% 50% / 220% 100% no-repeat,
    linear-gradient(135deg, rgba(185, 111, 46, 0.42), rgba(102, 52, 22, 0.58) 52%, rgba(42, 31, 35, 0.68));
  border: 1px solid rgba(234, 170, 98, 0.5);
  border-radius: 9px;
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 238, 212, 0.2), inset 0 -7px 12px rgba(38, 18, 8, 0.18), 0 8px 20px rgba(0, 0, 0, 0.22);
  animation: navStartHereGlow 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.nav-mobile a.nav-cta::after {
  content: ' ↗';
}

.nav-mobile-section-label {
  margin: 0.35rem 0 -0.4rem;
  padding: 0.5rem 1rem 0;
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.nav-mobile-ai-service a {
  min-height: 0;
  padding: 0.72rem 1rem 0.72rem 2rem;
  border-left: 1px solid rgba(201, 175, 158, 0.3);
  border-radius: 0 0.65rem 0.65rem 0;
  color: var(--color-steel-grey);
  font-size: 1.05rem;
}

.nav-mobile-ai-service.nav-mobile-service-overview a {
  padding-left: 1rem;
  border-left: 0;
  border-radius: var(--radius-card);
  color: var(--color-silver);
  font-size: 1.18rem;
  font-weight: 600;
}

/* ---------- MAIN LAYOUT ---------- */
.main {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem);
}

/* ---------- BENTO GRID ---------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap-desktop);
  grid-auto-rows: minmax(180px, auto);
}

.bento-card {
  background: var(--color-deep-slate);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.03), 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}

.bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(159, 198, 170, 0.28);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(111, 159, 131, 0.02);
}

/* ---------- SCROLL-LED BENTO CHOREOGRAPHY ---------- */
.motion-reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition:
    opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* A single top-edge glint gives each card a spatial landing point. */
.bento-card.motion-reveal {
  position: relative;
}

.bento-card.motion-reveal::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 8%;
  width: 84%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(197, 155, 122, 0.82), rgba(159, 198, 170, 0.72), transparent);
  transform: scaleX(0);
  transform-origin: left center;
}

.bento-card.motion-reveal.is-visible::before {
  animation: motionBorderLight 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--motion-delay, 0ms) both;
}

.motion-label {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
  transition-delay: calc(var(--motion-delay, 0ms) + 80ms);
}

.motion-reveal.is-visible .motion-label {
  opacity: 1;
  transform: translateY(0);
}

.motion-icon,
.motion-icon path,
.motion-icon circle,
.motion-icon rect,
.motion-icon line,
.motion-icon polyline {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
}

.motion-reveal.is-visible .motion-icon,
.motion-reveal.is-visible .motion-icon path,
.motion-reveal.is-visible .motion-icon circle,
.motion-reveal.is-visible .motion-icon rect,
.motion-reveal.is-visible .motion-icon line,
.motion-reveal.is-visible .motion-icon polyline {
  animation: motionIconDraw 500ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--motion-delay, 0ms) + 60ms) both;
}

@keyframes motionBorderLight {
  from { transform: scaleX(0); opacity: 0; }
  35% { opacity: 1; }
  to { transform: scaleX(1); opacity: 0.42; }
}

@keyframes motionIconDraw {
  from { stroke-dashoffset: 180; opacity: 0.25; }
  to { stroke-dashoffset: 0; opacity: 0.92; }
}

.bento-card h3 {
  margin-bottom: 0.75rem;
  color: var(--color-silver);
}

.bento-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-steel-grey);
}

.bento-card h2 {
  margin-bottom: 0.9rem;
}

/* ---------- SYSTEMS IN MOTION WORKFLOW ---------- */
.workflow-card {
  gap: 1.5rem;
  overflow: hidden;
}

.workflow-heading {
  max-width: 58ch;
}

.workflow-heading h2 {
  margin-top: 0.35rem;
  margin-bottom: 0.55rem;
  font-size: clamp(1.65rem, 3vw, 2.65rem);
}

.workflow-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin: 0;
  padding: 2.35rem 0 0;
  list-style: none;
}

.workflow-steps::before {
  content: '';
  position: absolute;
  top: 0.72rem;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, rgba(197, 155, 122, 0.2), rgba(159, 198, 170, 0.72), rgba(197, 155, 122, 0.2));
}

.workflow-steps::after {
  content: '';
  position: absolute;
  top: 0.52rem;
  left: 7%;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-bronze-light);
  box-shadow: 0 0 0 5px rgba(197, 155, 122, 0.1), 0 0 18px rgba(197, 155, 122, 0.55);
  opacity: 0;
}

.workflow-card.is-visible .workflow-steps::after {
  animation: workflowPulse 5.5s ease-in-out 650ms infinite;
}

.workflow-step {
  position: relative;
  z-index: 1;
  min-height: 150px;
  padding: 1.15rem;
  border: 1px solid rgba(197, 155, 122, 0.18);
  border-radius: 12px;
  background: rgba(8, 14, 25, 0.34);
  opacity: 1;
  transform: translateY(0);
}

.workflow-step::before {
  content: '';
  position: absolute;
  top: -1.65rem;
  left: 1.55rem;
  width: 1px;
  height: 1.65rem;
  background: linear-gradient(180deg, rgba(159, 198, 170, 0.7), rgba(197, 155, 122, 0.22));
}

.workflow-step:not(:last-child)::after {
  content: '›';
  position: absolute;
  top: -1.03rem;
  right: -0.55rem;
  z-index: 2;
  color: var(--color-video-green-light);
  font-family: var(--font-headline);
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.7;
}

.motion-reveal.workflow-card .workflow-step {
  opacity: 0;
  transform: translateY(12px);
}

.motion-reveal.workflow-card.is-visible .workflow-step {
  animation: workflowNodeIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.workflow-card.is-visible .workflow-step:nth-child(1) { animation-delay: 120ms; }
.workflow-card.is-visible .workflow-step:nth-child(2) { animation-delay: 210ms; }
.workflow-card.is-visible .workflow-step:nth-child(3) { animation-delay: 300ms; }
.workflow-card.is-visible .workflow-step:nth-child(4) { animation-delay: 390ms; }

.workflow-card.is-visible .workflow-step-number {
  animation: workflowNodePulse 5.5s ease-in-out 650ms infinite;
}

.workflow-card.is-visible .workflow-step:nth-child(2) .workflow-step-number { animation-delay: 1.95s; }
.workflow-card.is-visible .workflow-step:nth-child(3) .workflow-step-number { animation-delay: 3.25s; }
.workflow-card.is-visible .workflow-step:nth-child(4) .workflow-step-number { animation-delay: 4.55s; }

.workflow-step-number,
.workflow-step-kicker {
  display: block;
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.workflow-step-number {
  position: relative;
  z-index: 2;
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: 0.85rem;
  padding-top: 0.38rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--color-obsidian);
  text-align: center;
  font-size: 0.55rem;
}

.workflow-step-kicker {
  margin-bottom: 0.4rem;
  color: var(--color-video-green-light);
  font-size: 0.62rem;
}

.workflow-step strong {
  display: block;
  color: var(--color-silver);
  font-family: var(--font-headline);
  font-size: 1rem;
  line-height: 1.2;
}

.workflow-step small {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-steel-grey);
  font-size: 0.78rem;
  line-height: 1.45;
}

@keyframes workflowNodeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes workflowPulse {
  0% { left: 7%; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 93%; opacity: 0; }
}

@keyframes workflowNodePulse {
  0%, 12%, 100% { box-shadow: none; }
  5% { box-shadow: 0 0 0 5px rgba(197, 155, 122, 0.16), 0 0 18px rgba(197, 155, 122, 0.55); }
}

.card-detail,
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-bronze-light) !important;
}

.article-body {
  justify-content: flex-start;
  gap: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.portfolio-section {
  overflow: hidden;
}

.portfolio-carousel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.portfolio-carousel-heading h2 {
  margin: 0 !important;
}

.portfolio-sound-toggle,
.portfolio-carousel-control {
  border: 1px solid rgba(197, 155, 122, 0.42);
  border-radius: 999px;
  background: rgba(7, 12, 22, 0.52);
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.portfolio-sound-toggle {
  padding: 0.58rem 0.78rem;
  font-size: 0.66rem;
  white-space: nowrap;
}

.portfolio-sound-toggle:hover,
.portfolio-sound-toggle:focus-visible,
.portfolio-carousel-control:hover,
.portfolio-carousel-control:focus-visible {
  border-color: var(--color-bronze-light);
  background: rgba(197, 155, 122, 0.14);
  color: #fff4dd;
}

.portfolio-carousel {
  position: relative;
  margin-top: 0.35rem;
  user-select: none;
}

.portfolio-stage {
  position: relative;
  height: clamp(18rem, 31vw, 26rem);
  margin: 0.2rem -1rem 0;
  perspective: 1100px;
  perspective-origin: 50% 47%;
  touch-action: pan-y;
  cursor: grab;
}

.portfolio-stage::before,
.portfolio-stage::after {
  content: '';
  position: absolute;
  left: 50%;
  z-index: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.portfolio-stage::before {
  top: -7%;
  width: min(78%, 46rem);
  height: 48%;
  background: radial-gradient(ellipse at 50% 18%, rgba(237, 204, 150, 0.18), rgba(197, 155, 122, 0.055) 34%, transparent 70%);
  filter: blur(13px);
}

.portfolio-stage::after {
  bottom: 1.4rem;
  width: min(55%, 31rem);
  height: 20%;
  background: linear-gradient(180deg, rgba(231, 210, 173, 0.1), rgba(90, 120, 139, 0.035) 38%, transparent 82%);
  filter: blur(8px);
  opacity: 0.76;
  transform: translateX(-50%) perspective(12rem) rotateX(62deg);
  transform-origin: top;
}

.portfolio-stage.is-dragging {
  cursor: grabbing;
}

.portfolio-section .portfolio-billboard {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 6;
  width: min(78%, 34rem);
  margin: 0;
  color: #efcda1;
  font-family: var(--font-headline);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 0.12rem 0.65rem rgba(0, 0, 0, 0.78);
  transform: translate(-50%, 0.7rem);
  transition: opacity 1800ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 1800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.portfolio-billboard.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  animation: portfolio-billboard-reveal 2300ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes portfolio-billboard-reveal {
  0% {
    opacity: 0;
    transform: translate(-50%, 0.7rem);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.portfolio-tile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(17rem, 43vw, 36rem);
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid rgba(197, 155, 122, 0.34);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 28% 20%, rgba(197, 155, 122, 0.12), transparent 29%),
    linear-gradient(145deg, rgba(17, 28, 42, 0.86), rgba(6, 12, 22, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1.5rem 3rem rgba(0, 0, 0, 0.32);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  outline-offset: 0.45rem;
  text-decoration: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    transform 680ms cubic-bezier(0.22, 0.9, 0.28, 1),
    border-radius 680ms cubic-bezier(0.22, 0.9, 0.28, 1),
    opacity 440ms ease,
    filter 680ms ease,
    box-shadow 680ms ease;
}

.portfolio-tile img {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: clamp(0.45rem, 0.9vw, 0.75rem);
  object-fit: contain;
  background: #0b1220;
  filter: saturate(0.86) contrast(0.96);
  transition: filter 680ms ease, transform 680ms ease;
}

.portfolio-tile::before,
.portfolio-tile::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.portfolio-tile::before {
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 242, 211, 0.09), transparent 34%, rgba(7, 12, 22, 0.25) 72%);
}

.portfolio-tile::after {
  top: 10%;
  right: 12%;
  bottom: 10%;
  width: 1px;
  z-index: 4;
  background: linear-gradient(180deg, transparent, rgba(225, 195, 147, 0.4), transparent);
  opacity: 0.45;
}

.portfolio-tile[data-position="front"] {
  z-index: 4;
  opacity: 1;
  filter: brightness(1.04) saturate(0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 1.4rem 2.3rem rgba(0, 0, 0, 0.3), 0 2.9rem 3.7rem rgba(20, 36, 50, 0.19);
  transform: translate3d(-50%, -50%, 95px) rotateY(0deg) scale(1);
}

.portfolio-tile[data-position="previous"] {
  z-index: 3;
  opacity: 0.66;
  border-radius: 2.5rem 1rem 1rem 2.5rem;
  filter: brightness(0.66) saturate(0.62);
  transform: translate3d(-125%, -50%, -115px) rotateY(58deg) scale(0.82);
}

.portfolio-tile[data-position="next"] {
  z-index: 3;
  opacity: 0.66;
  border-radius: 1rem 2.5rem 2.5rem 1rem;
  filter: brightness(0.66) saturate(0.62);
  transform: translate3d(25%, -50%, -115px) rotateY(-58deg) scale(0.82);
}

.portfolio-tile[data-position="back"] {
  z-index: 1;
  opacity: 0.18;
  border-radius: 50%;
  filter: brightness(0.38) saturate(0.4);
  transform: translate3d(-50%, -50%, -270px) rotateY(180deg) scale(0.58);
}

.portfolio-tile[data-position="previous-far"] {
  z-index: 2;
  opacity: 0.18;
  filter: brightness(0.42) saturate(0.42);
  pointer-events: none;
  transform: translate3d(-168%, -50%, -250px) rotateY(69deg) scale(0.6);
}

.portfolio-tile[data-position="next-far"] {
  z-index: 2;
  opacity: 0.18;
  filter: brightness(0.42) saturate(0.42);
  pointer-events: none;
  transform: translate3d(68%, -50%, -250px) rotateY(-69deg) scale(0.6);
}

.portfolio-tile[data-position="hidden"] {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, -360px) scale(0.45);
}

.portfolio-tile[data-position="front"] img {
  filter: saturate(0.98) contrast(1);
}

.portfolio-tile-overlay {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  gap: 0.28rem;
  width: min(70%, 25rem);
  max-width: 28rem;
  padding: clamp(0.8rem, 1.5vw, 1.15rem) clamp(0.95rem, 2vw, 1.45rem);
  background: rgba(5, 10, 17, 0.42);
  color: #f0d6aa;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 0.12rem 0.48rem rgba(0, 0, 0, 0.82);
  transform: translate(-50%, calc(-50% + 0.7rem)) scale(0.97);
  transition: opacity 2200ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 2200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.portfolio-tile-kicker {
  color: #d9aa75;
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 0.86vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.portfolio-tile-title {
  font-family: var(--font-headline);
  font-size: clamp(1rem, 2.15vw, 1.72rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #f0d6aa;
}

.portfolio-tile.is-active .portfolio-tile-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: portfolio-title-reveal 2600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes portfolio-title-reveal {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 0.85rem)) scale(0.98);
  }

  72% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.portfolio-carousel.is-turning .portfolio-tile[data-position="front"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2rem 3.8rem rgba(0, 0, 0, 0.42), 0 0 2rem rgba(197, 155, 122, 0.08);
}

.portfolio-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: -0.7rem;
  position: relative;
  z-index: 5;
}

.portfolio-carousel-controls p {
  margin: 0;
  color: rgba(224, 232, 238, 0.62);
  font-size: 0.86rem;
  text-align: center;
}

.portfolio-carousel-control {
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
}

.portfolio-demo-open {
  overflow: hidden;
}

.portfolio-demo-window {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(0.65rem, 2vw, 1.5rem);
  background: rgba(3, 6, 14, 0.8);
  backdrop-filter: blur(12px);
}

.portfolio-demo-window[hidden] {
  display: none;
}

.portfolio-demo-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1320px, 100%);
  height: min(900px, calc(100vh - clamp(1.3rem, 4vw, 3rem)));
  overflow: hidden;
  border: 1px solid rgba(225, 195, 147, 0.48);
  border-radius: 1.15rem;
  background: #0b1020;
  box-shadow: 0 2.4rem 7rem rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.portfolio-demo-window-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.8rem;
  padding: 0.65rem 0.75rem 0.65rem 1.1rem;
  border-bottom: 1px solid rgba(225, 195, 147, 0.28);
  background: linear-gradient(105deg, #111b2a, #241827 58%, #101a2a);
}

.portfolio-demo-window-kicker {
  margin: 0;
  color: rgba(235, 213, 178, 0.72);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.portfolio-demo-window-bar h3 {
  margin: 0;
  color: #fff4dd;
  font-family: var(--font-headline);
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  font-weight: 600;
}

.portfolio-demo-close {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border: 1px solid rgba(242, 204, 143, 0.68);
  border-radius: 50%;
  color: #fff6e6;
  background: rgba(73, 38, 51, 0.88);
  cursor: pointer;
  font: 400 1.75rem/1 var(--font-body);
}

.portfolio-demo-close:hover,
.portfolio-demo-close:focus-visible {
  outline: none;
  border-color: #fff0cb;
  background: #703949;
}

.portfolio-demo-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 800px) {
  .portfolio-carousel-heading {
    align-items: flex-start;
  }

  .portfolio-stage {
    height: 17.5rem;
    margin-inline: -0.35rem;
  }

  .portfolio-billboard {
    top: 0;
    width: 82%;
  }

  .portfolio-tile {
    width: min(69vw, 20rem);
  }

  .portfolio-tile[data-position="previous"] {
    transform: translate3d(-108%, -50%, -105px) rotateY(54deg) scale(0.72);
  }

  .portfolio-tile[data-position="next"] {
    transform: translate3d(8%, -50%, -105px) rotateY(-54deg) scale(0.72);
  }

  .portfolio-carousel-controls p {
    font-size: 0.78rem;
  }

  .portfolio-demo-window {
    padding: 0;
  }

  .portfolio-demo-dialog {
    width: 100%;
    height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .portfolio-demo-window-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 3.45rem;
    padding-left: 0.85rem;
  }

  .portfolio-demo-window-kicker {
    display: none;
  }
}
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-tile,
  .portfolio-sound-toggle,
  .portfolio-carousel-control {
    transition: none;
  }
}

.sample-project-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.sample-project-list article {
  padding: 0;
  border: 1px solid rgba(197, 155, 122, 0.2);
  border-radius: 10px;
  background: rgba(8, 14, 25, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sample-project-media,
.design-card-media {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: rgba(7, 12, 22, 0.72);
}

.sample-project-media {
  aspect-ratio: 1 / 1;
  border-bottom: 1px solid rgba(197, 155, 122, 0.2);
}

.sample-project-media::after,
.design-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 46%, rgba(7, 12, 22, 0.54) 100%);
}

.sample-project-media img,
.design-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(0.96);
  transition: transform 420ms ease, filter 420ms ease;
}

.sample-project-card:hover .sample-project-media img,
.sample-project-card:focus-within .sample-project-media img,
.warm-theme:hover .design-card-media img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1);
}

.sample-project-media figcaption,
.design-card-media figcaption {
  position: absolute;
  z-index: 1;
  right: 0.75rem;
  bottom: 0.65rem;
  color: rgba(240, 207, 152, 0.88);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sample-project-copy {
  padding: 1rem;
}

.sample-project-list article > .sample-project-copy > span {
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sample-project-list h3 {
  margin: 0.55rem 0;
  font-size: 1.1rem;
}

.sample-project-list p {
  font-size: 0.85rem;
}

.design-card-media {
  aspect-ratio: 16 / 8;
  margin: calc(clamp(1.25rem, 2.2vw, 2rem) * -1) calc(clamp(1.25rem, 2.2vw, 2rem) * -1) 1.25rem;
  border-bottom: 1px solid rgba(197, 155, 122, 0.2);
}

.design-card-media img {
  opacity: 0.86;
}

@media (max-width: 800px) {
  .sample-project-list {
    grid-template-columns: 1fr;
  }

  .design-card-media {
    margin-inline: -1.25rem;
  }
}

/* Design page-specific hierarchy: compact cards, readable headings, no forced poster-sized tiles. */
.design-page .bento-grid {
  gap: 16px;
  align-items: stretch;
}

.design-page .bento-card {
  min-height: 0;
  padding: clamp(1.25rem, 2.2vw, 2rem);
}

.design-page .bento-card h2 {
  max-width: 18ch;
  margin: 0.35rem 0 0.9rem;
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.design-page .bento-card h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.15;
}

.design-page > .page-intro .design-intro-eyebrow {
  color: var(--color-panel-heading);
  text-shadow: 0 0 0.55rem rgba(175, 193, 207, 0.14);
}

/* The small route label at the top of each main page shares the soft
   blue-grey of the homepage's principal heading. */
.page-intro > .eyebrow {
  color: var(--color-panel-heading) !important;
  text-shadow: 0 0 0.55rem rgba(175, 193, 207, 0.14);
  text-align: center;
}

/* Article 50 and AI Search use custom hero layouts rather than .page-intro.
   Their top route labels belong to the same calm, centred system. */
.scan-product-copy > .eyebrow,
.ai-search-hero-copy > .eyebrow {
  color: var(--color-panel-heading) !important;
  text-align: center;
  text-shadow: 0 0 0.55rem rgba(175, 193, 207, 0.14);
}

.design-page .bento-card p {
  max-width: 52ch;
}

.service-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  fill: none;
  stroke: var(--color-bronze-light);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  opacity: 0.92;
}

.service-icon + .eyebrow {
  margin-top: 0.1rem;
}

/* Artwork is used as a calm, literal anchor for the three Design offers.
   The surrounding page carries the text, so these renders stay free of
   generated lettering and remain useful at card scale. */
.service-card-art {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  margin: -0.35rem 0 1.2rem;
  border: 1px solid rgba(197, 155, 122, 0.24);
  border-radius: 0.85rem;
  background: #0c0f1e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0.8rem 1.8rem rgba(0, 0, 0, 0.18);
  object-fit: cover;
}

.generated-wide-art {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #0c0f1e;
}

.generated-wide-art img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 34rem;
  object-fit: cover;
}

.generated-wide-art figcaption,
.aria-showcase-visual figcaption,
.hermes-bridge-visual figcaption {
  position: absolute;
  right: 0.9rem;
  bottom: 0.8rem;
  z-index: 1;
  padding: 0.28rem 0.46rem;
  border: 1px solid rgba(216, 242, 221, 0.22);
  border-radius: 999px;
  background: rgba(5, 11, 20, 0.72);
  color: rgba(231, 238, 240, 0.74);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}

.design-page .community-theme .service-icon {
  stroke: var(--color-video-green-light);
}

.design-page .hero-theme .service-icon {
  stroke: var(--color-electric-cyan);
}

.design-page .design-offer-card {
  min-height: 280px;
}

.design-page .design-capability-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.design-page .design-capability-card .design-card-media {
  flex: 0 0 auto;
}

.design-page .design-capability-card .card-detail {
  margin-top: auto;
  padding-top: 1rem;
}

/* A quiet landing for the Design page: jade-white information, rose-gold routes. */
.design-page + .footer {
  position: relative;
  border-top-color: rgba(104, 157, 136, 0.38);
  color: rgba(207, 226, 219, 0.76);
  background: linear-gradient(180deg, rgba(13, 48, 43, 0.14), rgba(10, 16, 29, 0) 72%);
}

.design-page + .footer::before {
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(13rem, 28vw);
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(226, 178, 126, 0.82), transparent);
  box-shadow: 0 0 0.75rem rgba(226, 178, 126, 0.2);
  transform: translateX(-50%);
}

.design-page + .footer > p:not(.ai-visual-disclosure) {
  color: rgba(207, 226, 219, 0.8);
}

.design-page + .footer .ai-visual-disclosure {
  color: rgba(192, 221, 210, 0.62);
}

.design-page + .footer a {
  color: #d7a778;
  text-shadow: 0 0.08rem 0.6rem rgba(183, 116, 70, 0.15);
}

.design-page + .footer a:hover,
.design-page + .footer a:focus-visible {
  color: #f0c999;
}

.design-page .design-capability-card:hover .design-card-media img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1);
}

.service-page-feature::before {
  background: linear-gradient(90deg, rgba(11, 15, 33, 0.94) 0%, rgba(11, 15, 33, 0.86) 43%, rgba(11, 15, 33, 0.35) 70%, rgba(11, 15, 33, 0.14) 100%), linear-gradient(180deg, rgba(11, 15, 33, 0.08), rgba(11, 15, 33, 0.55));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.service-page-feature-copy {
  width: min(48%, 38rem);
  max-width: none;
  min-height: 18rem;
}

.service-page-feature-image {
  inset: 0 0 0 43%;
  width: 64%;
  height: 100%;
  opacity: 0.72;
  filter: saturate(0.92) contrast(1.02);
  object-position: 58% center;
}

.design-feature-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 1.15rem;
}

.design-feature-signals span {
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.design-feature-signals span::before {
  content: '— ';
  color: rgba(159, 198, 170, 0.78);
}

.design-principles-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4rem);
  overflow: hidden;
}

.design-principles-intro h2 {
  max-width: 14ch !important;
  margin-bottom: 0.9rem !important;
}

.design-principles-intro > p:last-child {
  max-width: 42ch;
  margin-bottom: 0;
}

.design-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 0.25rem;
}

.design-principles-grid article {
  min-width: 0;
  padding: 0.35rem clamp(1rem, 2vw, 1.65rem) 0;
  border-left: 1px solid rgba(197, 155, 122, 0.27);
}

.design-principles-grid article:first-child {
  padding-left: 0;
  border-left: 0;
}

.design-principles-grid span {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

.design-principles-grid h3 {
  margin: 0 0 0.55rem;
  color: var(--color-silver);
  font-family: var(--font-headline);
}

.design-principles-grid p {
  margin: 0;
  color: var(--color-steel-grey);
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (max-width: 800px) {
  .service-page-feature-copy {
    width: min(100%, 36rem);
    min-height: 20rem;
  }

  .service-page-feature-image {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.42;
  }

  .service-page-feature::before {
    background: linear-gradient(90deg, rgba(11, 15, 33, 0.92), rgba(11, 15, 33, 0.72)), linear-gradient(180deg, rgba(11, 15, 33, 0.12), rgba(11, 15, 33, 0.72));
  }

  .design-principles-panel {
    grid-template-columns: 1fr;
  }

  .design-principles-grid {
    gap: 1rem;
  }
}

@media (max-width: 560px) {
  .design-principles-grid {
    grid-template-columns: 1fr;
  }

  .design-principles-grid article,
  .design-principles-grid article:first-child {
    padding: 1rem 0 0;
    border-top: 1px solid rgba(197, 155, 122, 0.27);
    border-left: 0;
  }
}

.design-page .span-4 {
  min-height: 280px;
}

.design-page .span-8 {
  min-height: 300px;
}

.design-page .span-12 {
  min-height: 190px;
}

.design-page .sample-project-list article {
  min-height: 150px;
}

/* The header becomes compact at 1120px. Match the Design page's layout to
   that range so a tablet or split window never keeps the desktop's 12-column
   tracks and squeezes cards into unreadable slivers. */
@media (min-width: 801px) and (max-width: 1120px) {
  .design-page .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .design-page .bento-grid > .span-4,
  .design-page .bento-grid > .design-offer-card {
    grid-column: span 1;
  }

  .design-page .bento-grid > .span-8,
  .design-page .bento-grid > .span-12 {
    grid-column: 1 / -1;
  }

  .design-page .bento-card,
  .design-page .sample-project-card {
    min-width: 0;
  }

  .design-page .sample-project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .design-page .bento-card h2 {
    max-width: none;
    font-size: 1.75rem;
  }

  .design-page .span-4,
  .design-page .design-offer-card,
  .design-page .span-8,
  .design-page .span-12 {
    min-height: 0;
  }
}

.article-body ul,
.bento-card ul {
  color: var(--color-steel-grey);
  padding-left: 1.25rem;
}

.article-body li,
.bento-card li {
  margin-bottom: 0.65rem;
}

.quote {
  color: var(--color-bronze-light) !important;
  font-family: var(--font-headline);
  font-size: 1.35rem !important;
  font-style: italic;
  line-height: 1.35 !important;
}

/* Bento Grid Spans */
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* Keep bento cards readable on narrow screens instead of leaving span-4
   cards as thin one-third-width columns. */
@media (max-width: 800px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-grid > .span-4,
  .bento-grid > .span-3,
  .bento-grid > .span-5,
  .bento-grid > .span-6,
  .bento-grid > .span-7,
  .bento-grid > .span-8,
  .bento-grid > .span-12 {
    grid-column: 1 / -1;
  }
}

/* ---------- CARD CATEGORY THEMES ---------- */

/* A. Web & App Design Cards (Creative Design Page) */
.bento-card.tech-theme {
  background: var(--color-tech-bg);
  border-color: var(--color-tech-border);
}

.bento-card.tech-theme:hover {
  border-color: rgba(0, 242, 254, 0.3);
  box-shadow: 0 8px 32px rgba(0, 242, 254, 0.1);
}

.bento-card.tech-theme .icon {
  stroke: var(--color-tech-accent);
}

.bento-card.tech-theme h3 {
  color: var(--color-silver);
}

/* B. Mind, Science & Authoritative Cards (About Page) */
.bento-card.mind-theme {
  background: var(--color-mind-bg);
  border-color: var(--color-mind-border);
}

.bento-card.mind-theme:hover {
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08);
}

.bento-card.mind-theme .icon {
  stroke: var(--color-mind-accent);
}

.bento-card.mind-theme h3 {
  color: var(--color-silver);
}

/* C. Neuro-Inclusive Training Cards (Contact/Training Page) */
.bento-card.training-theme {
  background: var(--color-training-bg);
  border-color: var(--color-training-border);
}

.bento-card.training-theme:hover {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.08);
}

.bento-card.training-theme .icon {
  stroke: var(--color-training-accent);
}

.bento-card.training-theme h3 {
  color: var(--color-silver);
}

/* D. Community Social Impact Cards (About Page - Charity) */
.bento-card.community-theme {
  background: var(--color-community-bg);
  border-color: var(--color-community-border);
}

.bento-card.community-theme:hover {
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.08);
}

.bento-card.community-theme .icon {
  stroke: var(--color-community-accent);
}

.bento-card.community-theme h3,
.bento-card.community-theme h4 {
  color: var(--color-silver);
}

.about-community-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.about-community-card h2 {
  max-width: 18ch;
  margin: 0.35rem 0 0.9rem;
  color: var(--color-silver);
  font-size: clamp(1.65rem, 3vw, 2.55rem);
}

.about-community-card p:not(.eyebrow) {
  max-width: 68ch;
  color: var(--color-warm-text);
  font-size: 1.02rem;
}

.about-community-card p + p {
  margin-top: 0.8rem;
}

.community-focus-panel {
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 0.9rem;
  background: rgba(33, 31, 16, 0.38);
}

.community-focus-list {
  display: grid;
  gap: 0.7rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.community-focus-list li {
  position: relative;
  padding-left: 1.15rem;
  color: #d7d9d0;
  font-size: 0.9rem;
}

.community-focus-list li::before {
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--color-community-accent);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.32);
  content: '';
}

/* Keep the icon language tied to the brighter mark across every tile. */
.bento-card .icon,
.icon {
  stroke: var(--color-bronze-light);
}

/* E. Hero Sections & Health Diagnostic (Homepage) */
.bento-card.hero-theme {
  background: var(--color-deep-slate);
  border-color: rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.bento-card.hero-theme:hover {
  border-color: rgba(159, 198, 170, 0.28);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(111, 159, 131, 0.02);
}

/* Bronze counterpoint for the primary health-check journey */
.bento-card.bronze-theme {
  background: linear-gradient(90deg, rgba(45, 32, 28, 0.48), rgba(22, 31, 48, 0.34));
  border-color: var(--color-bronze-border);
}

.bento-card.bronze-theme:hover {
  border-color: rgba(197, 155, 122, 0.55);
  box-shadow: inset 0 1px 1px rgba(255, 232, 206, 0.04), 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(143, 106, 82, 0.04);
}

/* ---------- BRONZE ACCENT CARD VARIANT ---------- */
.bento-card.bronze-accent {
  background: rgba(33, 31, 16, 0.35);
  border-color: rgba(180, 160, 110, 0.22);
}

.bento-card.bronze-accent:hover {
  border-color: rgba(180, 160, 110, 0.42);
  box-shadow: inset 0 1px 1px rgba(255, 232, 206, 0.04), 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(180, 160, 110, 0.03);
}

.bento-card.bronze-accent h3 {
  color: #F8FAFC;
}

.bento-card.bronze-accent p {
  color: #CBD5E1;
}

/* ---------- ABOUT PAGE COMPOSITION ---------- */
/* Keep the About bento content-led so a short card never creates a poster-sized void. */
.about-page .bento-grid {
  grid-auto-rows: auto;
  align-items: stretch;
}

.about-page .bento-card {
  min-height: 0;
}

.about-page .about-portrait-frame {
  min-height: 400px;
}

.about-page .about-connect-card {
  background:
    radial-gradient(circle at 88% 12%, rgba(159, 198, 170, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(17, 28, 38, 0.96), rgba(17, 23, 39, 0.9));
  border-color: rgba(159, 198, 170, 0.25);
  justify-content: space-between;
}

.about-connect-card h3 {
  max-width: 22ch;
  margin-top: 0.35rem;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
}

.about-connect-card > div:first-child > p:last-child {
  max-width: 62ch;
}

.about-connect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.about-connect-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.65rem 0.95rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.about-connect-actions a:hover,
.about-connect-actions a:focus-visible {
  transform: translateY(-2px);
}

.about-connect-primary {
  color: #dff3e7;
  background: linear-gradient(135deg, rgba(40, 126, 92, 0.46), rgba(15, 66, 51, 0.64) 52%, rgba(18, 35, 43, 0.72));
  border: 1px solid rgba(129, 214, 170, 0.48);
  box-shadow: inset 0 1px 0 rgba(225, 255, 237, 0.2), inset 0 -7px 12px rgba(4, 27, 20, 0.18), 0 8px 18px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

.about-connect-primary:hover,
.about-connect-primary:focus-visible {
  color: #edfff3;
  background: linear-gradient(135deg, rgba(49, 150, 107, 0.56), rgba(18, 80, 61, 0.7) 52%, rgba(20, 43, 49, 0.76));
  border-color: rgba(153, 232, 187, 0.72);
}

.about-connect-secondary {
  color: #cbd8f2;
  background: linear-gradient(135deg, rgba(59, 91, 159, 0.44), rgba(30, 50, 105, 0.64) 52%, rgba(24, 31, 53, 0.72));
  border: 1px solid rgba(142, 174, 235, 0.46);
  box-shadow: inset 0 1px 0 rgba(225, 237, 255, 0.2), inset 0 -7px 12px rgba(8, 15, 43, 0.2), 0 8px 18px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

.about-connect-secondary:hover,
.about-connect-secondary:focus-visible {
  color: #e1e9ff;
  border-color: rgba(171, 198, 250, 0.7);
  background: linear-gradient(135deg, rgba(76, 114, 194, 0.54), rgba(38, 64, 133, 0.7) 52%, rgba(28, 39, 67, 0.76));
}

/* ---------- ARTHUR AI INTERN PROFILE ---------- */
.arthur-profile-portrait-wrap {
  display: flex;
  position: relative;
  min-height: 400px;
  height: 100%;
  align-self: stretch;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(197, 155, 122, 0.34);
  border-radius: calc(var(--radius-card) - 4px);
  background: radial-gradient(circle at 50% 16%, rgba(197, 155, 122, 0.18), transparent 58%), rgba(9, 17, 29, 0.7);
}

.arthur-profile-portrait {
  display: block;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  object-fit: cover;
  object-position: center 23%;
  filter: saturate(0.92) contrast(1.02);
}

.arthur-profile-caption {
  padding: 0.8rem 0.95rem 0.95rem;
  color: #c6d4d7;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.arthur-profile-copy {
  position: relative;
  overflow: hidden;
  align-self: stretch;
  max-width: none;
  padding: clamp(0.5rem, 1.5vw, 1.25rem) clamp(0.35rem, 1.5vw, 1.25rem) clamp(0.5rem, 1.5vw, 1.25rem) 0;
  background:
    radial-gradient(circle at 94% 8%, rgba(111, 159, 131, 0.14), transparent 36%),
    linear-gradient(135deg, rgba(17, 28, 38, 0.96), rgba(17, 23, 39, 0.94));
  border-color: rgba(159, 198, 170, 0.3);
}

.arthur-profile-copy h2 {
  margin: 0.35rem 0 0.2rem;
  background-image: var(--gradient-heading-metal);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-heading-metal);
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.04em;
}

.arthur-profile-role {
  margin-bottom: 1.2rem;
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.arthur-profile-copy > p:not(.eyebrow):not(.arthur-profile-role):not(.arthur-profile-boundary) {
  color: #c4d0d6;
}

.arthur-profile-principles {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.arthur-profile-principles div {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  border-left: 2px solid rgba(159, 198, 170, 0.55);
  background: rgba(18, 37, 43, 0.42);
}

.arthur-profile-principles strong {
  color: #d4e3df;
  font-size: 0.92rem;
}

.arthur-profile-principles span {
  color: #aebfc5;
  font-size: 0.88rem;
}

.arthur-profile-boundary {
  margin-top: 1.35rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(197, 155, 122, 0.24);
  border-radius: 0.8rem;
  background: rgba(42, 31, 28, 0.38);
  color: #c5cfd3;
  font-size: 0.88rem;
}

.arthur-hitl-panel,
.founder-hitl-panel {
  margin-top: 1.35rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(197, 155, 122, 0.42);
  border-left: 3px solid var(--color-bronze-light);
  border-radius: 0.8rem;
  background:
    linear-gradient(90deg, rgba(63, 48, 39, 0.54), rgba(17, 37, 40, 0.4)),
    rgba(12, 20, 32, 0.5);
}

.arthur-hitl-panel h3,
.founder-hitl-panel h3 {
  margin: 0.3rem 0 0.45rem;
  color: #e0b57e;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
}

.arthur-hitl-panel p:last-child,
.founder-hitl-panel p:last-child {
  color: #c4d0d6;
  font-size: 0.88rem;
}

/* Shared technical/editorial language for both human and AI profiles. */
.founder-profile-copy {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 94% 8%, rgba(197, 155, 122, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(33, 31, 16, 0.78), rgba(17, 23, 39, 0.94));
  border-color: rgba(197, 155, 122, 0.36);
}

.founder-profile-copy::before,
.arthur-profile-copy::before {
  content: '';
  position: absolute;
  top: 1.25rem;
  right: 1.35rem;
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 155, 122, 0.72));
  opacity: 0.72;
}

.founder-profile-copy::after,
.arthur-profile-copy::after {
  content: '';
  position: absolute;
  top: 1.25rem;
  right: 1.15rem;
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid rgba(159, 198, 170, 0.82);
  background: rgba(17, 37, 40, 0.85);
  box-shadow: 0 0 12px rgba(159, 198, 170, 0.24);
}

.founder-profile-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.35rem;
}

.founder-profile-signals span {
  padding: 0.36rem 0.55rem;
  border: 1px solid rgba(197, 155, 122, 0.3);
  border-radius: 999px;
  color: #d3ad80;
  background: rgba(42, 31, 28, 0.38);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
}

.founder-profile-portrait-frame {
  position: relative;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(159, 198, 170, 0.2) 50%, transparent 50.3%),
    radial-gradient(circle at 50% 18%, rgba(197, 155, 122, 0.2), transparent 58%),
    var(--color-deep-slate);
}

.founder-profile-portrait-frame::after {
  content: 'HUMAN OWNER';
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(197, 155, 122, 0.42);
  border-radius: 0.35rem;
  color: #d3ad80;
  background: rgba(9, 17, 29, 0.74);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

@media (max-width: 800px) {
  .arthur-profile-portrait-wrap {
    min-height: 360px;
    order: 1;
  }

  .arthur-profile-copy {
    padding: 0.25rem 0.25rem 0.5rem;
    order: 2;
  }
}

.about-social-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid rgba(197, 155, 122, 0.2);
  border-radius: var(--radius-card);
  background: linear-gradient(90deg, rgba(197, 155, 122, 0.07), rgba(159, 198, 170, 0.06));
}

.about-social-strip .eyebrow {
  flex: 0 0 auto;
  margin: 0;
  color: var(--color-bronze-light);
}

.about-social-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.about-social-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.15rem;
  padding: 0.35rem 0.7rem 0.35rem 0.4rem;
  border: 1px solid rgba(159, 198, 170, 0.2);
  border-radius: 999px;
  color: var(--color-silver);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: rgba(8, 14, 25, 0.26);
}

.about-social-mark b {
  display: inline-grid;
  width: 1.4rem;
  height: 1.4rem;
  place-items: center;
  border: 1px solid rgba(197, 155, 122, 0.45);
  border-radius: 50%;
  color: var(--color-bronze-light);
  font-family: var(--font-headline);
  font-size: 0.72rem;
  line-height: 1;
}

.about-social-glyph {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0.23rem;
  border: 1px solid rgba(197, 155, 122, 0.45);
  border-radius: 50%;
  fill: var(--color-bronze-light);
}

@media (max-width: 800px) {
  .about-social-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .about-social-list {
    justify-content: flex-start;
  }
}

@media (max-width: 800px) {
  .about-page .about-portrait-frame {
    min-height: 360px;
  }

  .about-community-card {
    grid-template-columns: 1fr;
  }

  .about-community-card h2 {
    max-width: none;
  }

  .about-page .about-connect-card {
    grid-column: 1 / -1;
  }
}

/* AI transparency tile: a distinct blue-green glass surface for trust and safety. */
.bento-card.transparency-theme {
  background:
    radial-gradient(circle at 86% 12%, rgba(104, 170, 157, 0.2), transparent 42%),
    linear-gradient(145deg, rgba(31, 69, 76, 0.62), rgba(14, 28, 47, 0.82));
  border-color: rgba(126, 184, 178, 0.48);
}

.bento-card.transparency-theme h3 {
  color: #c4ddd5;
}

.bento-card.transparency-theme p {
  color: #b7c8ce;
}

.bento-card.transparency-theme:hover {
  border-color: rgba(166, 216, 195, 0.74);
  box-shadow: inset 0 1px 1px rgba(225, 246, 238, 0.08), 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 26px rgba(82, 157, 139, 0.14);
}

.bento-card-link {
  color: inherit;
  text-decoration: none;
}

.bento-card-link:hover,
.bento-card-link:focus-visible {
  color: inherit;
  outline: none;
}

/* Homepage service layer: three distinct offers inside the bento system. */
.homepage-services {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.homepage-quick-card {
  min-height: 420px;
  background:
    radial-gradient(circle at 82% 12%, rgba(111, 159, 131, 0.13), transparent 42%),
    linear-gradient(145deg, rgba(18, 34, 39, 0.82), rgba(14, 22, 38, 0.9));
  border-color: rgba(111, 159, 131, 0.3);
}

.homepage-quick-card h2 {
  max-width: 10ch;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.05;
}

.homepage-quick-card .btn-primary {
  align-self: flex-start;
  margin-top: auto;
}

.home-check-teaser {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
}

.home-check-teaser h2 {
  max-width: 14ch;
  margin: 0.35rem 0 0.5rem;
}

.home-check-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.home-check-signals span {
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(197, 155, 122, 0.28);
  border-radius: 999px;
  color: #e4d3c6;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

.aria-proof-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.35rem, 3vw, 2.2rem);
  border-color: rgba(159, 198, 170, 0.28);
  background: linear-gradient(135deg, rgba(23, 37, 44, 0.9), rgba(15, 24, 42, 0.94));
}

.aria-proof-card h2 {
  margin: 0.45rem 0 0.7rem;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.aria-proof-card p:not(.eyebrow) {
  max-width: 65ch;
}

.aria-proof-card .hero-actions {
  margin: 0;
}

.homepage-ai-orientation {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin: clamp(2.5rem, 6vw, 5rem) 0;
  padding: clamp(1rem, 2vw, 1.75rem) clamp(0.25rem, 1vw, 0.75rem);
}

.orientation-heading h2 {
  max-width: 20ch;
  margin: 0.45rem 0 1rem;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.06;
}

.orientation-heading > p:not(.eyebrow) {
  max-width: 58ch;
  color: #b9c7d2;
  line-height: 1.7;
}

.orientation-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.orientation-signals article {
  min-height: 210px;
  padding: 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(27, 37, 51, 0.7), rgba(12, 20, 34, 0.72));
}

.orientation-signals span {
  display: block;
  margin-bottom: 2.8rem;
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.orientation-signals strong,
.orientation-signals small {
  display: block;
}

.orientation-signals strong {
  color: #edf3f5;
  font-size: 1rem;
  line-height: 1.3;
}

.orientation-signals small {
  margin-top: 0.65rem;
  color: #9eacb9;
  line-height: 1.55;
}

/* A quiet full-width bridge introduces the transparency and website-review journey. */
.transparency-bridge-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 7vw, 6rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background:
    radial-gradient(circle at 14% 20%, rgba(197, 155, 122, 0.12), transparent 38%),
    linear-gradient(120deg, rgba(31, 29, 39, 0.86), rgba(15, 24, 42, 0.92));
  border-color: rgba(197, 155, 122, 0.28);
}

.transparency-bridge-card h2 {
  max-width: 24ch;
  margin: 0.45rem 0 0.75rem;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.08;
}

.transparency-bridge-card p:not(.eyebrow) {
  max-width: 65ch;
  margin: 0;
  color: #cbd5df;
  line-height: 1.6;
}

.transparency-bridge-card .btn-primary {
  flex: 0 0 auto;
}

.transparency-bridge-copy {
  min-width: 0;
}

.transparency-bridge-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.transparency-bridge-signals span {
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(197, 155, 122, 0.2);
  border-radius: 9px;
  background: rgba(8, 14, 25, 0.3);
  color: #b9c7d2;
  font-size: 0.74rem;
}

.transparency-bridge-signals strong {
  display: block;
  margin-bottom: 0.15rem;
  color: #e5c2a0;
  font-family: var(--font-mono);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
}

.transparency-bridge-action {
  display: grid;
  flex: 0 0 min(270px, 28%);
  gap: 0.8rem;
  justify-items: center;
  text-align: center;
}

.transparency-bridge-action > small {
  color: #9eacb9;
  font-size: 0.72rem;
}

.transparency-check-card {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background:
    radial-gradient(circle at 86% 14%, rgba(111, 159, 131, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(22, 43, 45, 0.78), rgba(12, 20, 35, 0.9));
}

.transparency-check-card .workflow-heading {
  max-width: 66ch;
}

.transparency-check-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(159, 198, 170, 0.16);
}

.transparency-check-action .card-detail {
  max-width: 60ch;
  margin: 0;
}

.article-50-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 8.25rem;
  height: 8.25rem;
  border: 1px solid rgba(197, 155, 122, 0.34);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 155, 122, 0.16), rgba(8, 14, 25, 0.22) 62%);
  box-shadow: 0 0 0 12px rgba(197, 155, 122, 0.03), 0 0 44px rgba(197, 155, 122, 0.09);
}

.article-50-orbit::before {
  content: '';
  position: absolute;
  inset: 0.7rem;
  border: 1px dashed rgba(159, 198, 170, 0.28);
  border-radius: inherit;
}

.article-50-orbit b,
.article-50-orbit small {
  position: absolute;
  z-index: 1;
}

.article-50-orbit b {
  color: #efd0b2;
  font-family: var(--font-headline);
  font-size: 2.55rem;
}

.article-50-orbit small {
  bottom: 1.25rem;
  color: #a9babf;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.16em;
}

.safety-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  background:
    radial-gradient(circle at 86% 18%, rgba(159, 198, 170, 0.1), transparent 34%),
    linear-gradient(120deg, rgba(25, 34, 47, 0.92), rgba(15, 24, 42, 0.94));
  border-color: rgba(159, 198, 170, 0.24);
}

.safety-card-copy h2 {
  max-width: 18ch;
  margin: 0.45rem 0 0.8rem;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.08;
}

.safety-card-copy p:not(.eyebrow) {
  max-width: 58ch;
  margin: 0;
  color: #cbd5df;
}

.safety-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.safety-card-list li {
  min-height: 8.5rem;
  padding: 1rem;
  border: 1px solid rgba(159, 198, 170, 0.18);
  border-radius: 12px;
  background: rgba(8, 14, 25, 0.28);
}

.safety-card-list strong,
.safety-card-list span {
  display: block;
}

.safety-card-list strong {
  color: #e2c5a7;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.safety-card-list span {
  margin-top: 0.55rem;
  color: #b9c7d2;
  font-size: 0.9rem;
  line-height: 1.45;
}

.scan-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  min-height: 560px;
  padding: clamp(3rem, 8vw, 7rem) 0;
}

.scan-hero h1 {
  max-width: 12.5ch;
  margin: 0.55rem 0 1.35rem;
  color: var(--color-bronze-light);
  font-size: clamp(2.75rem, 5.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.scan-hero-copy > p:not(.eyebrow) {
  max-width: 62ch;
  color: #c0cbd4;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.65;
}

.scan-hero-intake {
  grid-column: 1 / -1;
  max-width: none;
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid rgba(197, 155, 122, 0.34);
  border-radius: 1.15rem;
  background:
    linear-gradient(145deg, rgba(82, 61, 52, 0.58), rgba(24, 34, 43, 0.72) 58%, rgba(31, 65, 57, 0.46));
  box-shadow:
    inset 0 1px 0 rgba(255, 225, 202, 0.14),
    inset 0 -12px 24px rgba(3, 8, 15, 0.25),
    0 16px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.scan-hero-intake .eyebrow {
  margin-bottom: 0.45rem;
}

.scan-hero-intake h2 {
  max-width: 23ch;
  margin: 0;
  color: #f0d2b7;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.08;
}

.scan-hero-intake .scan-intake-form {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.8rem;
  max-width: none;
  margin-top: 1.15rem;
}

.scan-hero-intake .scan-intake-form .form-group {
  min-width: 0;
}

.scan-hero-intake .scan-intake-form .btn-primary {
  min-height: 3.2rem;
  white-space: nowrap;
}

.scan-hero-intake .scan-legal-note {
  margin-top: 0.9rem;
}

@media (max-width: 1100px) {
  .scan-page .scan-reset-card,
  .scan-page .scan-checks-card {
    grid-column: 1 / -1;
  }

  .scan-page .scan-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .scan-page .scan-hero-visual {
    margin-top: 1rem;
  }

  .scan-hero-intake .scan-intake-form {
    grid-template-columns: 1fr;
  }

  .scan-hero-intake .scan-intake-form .btn-primary {
    width: 100%;
  }
}

.scan-hero-visual {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
}

.scan-compliance-image {
  display: block;
  width: min(100%, 360px);
  border: 1px solid rgba(197, 155, 122, 0.28);
  border-radius: 16px;
  opacity: 0.78;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.scan-article-badge {
  display: grid;
  place-items: center;
  width: clamp(12rem, 23vw, 18rem);
  aspect-ratio: 1;
  border: 1px solid rgba(197, 155, 122, 0.45);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(197, 155, 122, 0.17), transparent 58%),
    linear-gradient(145deg, rgba(27, 31, 45, 0.92), rgba(12, 20, 34, 0.96));
  box-shadow: 0 0 0 18px rgba(197, 155, 122, 0.025), 0 28px 80px rgba(0, 0, 0, 0.35);
}

.scan-article-badge span,
.scan-article-badge small {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
}

.scan-article-badge span {
  align-self: end;
  color: #c7d5d8;
  font-size: 0.64rem;
}

.scan-article-badge strong {
  color: #efd0b2;
  font-family: var(--font-headline);
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: 0.85;
}

.scan-article-badge small {
  align-self: start;
  color: #9fbca8;
  font-size: 0.56rem;
}

.scan-hero-path {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #aebcc5;
  font-size: 0.68rem;
  text-align: center;
}

.scan-hero-path i {
  width: 1.8rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(197, 155, 122, 0.25), rgba(159, 198, 170, 0.7));
}

.scan-plain-english {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: clamp(3rem, 8vw, 7rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid rgba(159, 198, 170, 0.22);
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, rgba(17, 32, 39, 0.72), rgba(12, 20, 34, 0.62));
}

.scan-plain-heading h2 {
  max-width: 17ch;
  margin-top: 0.45rem;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.08;
}

.scan-plain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.scan-plain-grid article {
  min-height: 210px;
  padding: 1rem;
  border-left: 1px solid rgba(197, 155, 122, 0.28);
}

.scan-plain-grid span {
  display: block;
  margin-bottom: 2.5rem;
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.scan-plain-grid strong {
  color: #edf3f5;
  line-height: 1.3;
}

.scan-plain-grid p {
  margin-top: 0.65rem;
  color: #9eacb9;
  font-size: 0.86rem;
  line-height: 1.55;
}

.scan-intake-card {
  background:
    radial-gradient(circle at 10% 10%, rgba(197, 155, 122, 0.14), transparent 36%),
    linear-gradient(140deg, rgba(34, 27, 34, 0.95), rgba(15, 24, 42, 0.96));
  border-color: rgba(197, 155, 122, 0.36);
}

.scan-intake-card h2,
.scan-reset-card h2,
.scan-checks-card h2 {
  max-width: 24ch;
  margin: 0.45rem 0 0.85rem;
  line-height: 1.08;
}

.scan-intake-card > p:not(.eyebrow),
.scan-reset-card > p:not(.eyebrow) {
  max-width: 68ch;
  color: #cbd5df;
  line-height: 1.6;
}

.scan-intake-form {
  max-width: 58ch;
  margin-top: 1.6rem;
}

.scan-intake-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.6rem 0 1.4rem;
}

.scan-intake-signals span {
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(197, 155, 122, 0.24);
  border-radius: 999px;
  color: #c5d0d8;
  font-size: 0.72rem;
}

.scan-intake-form small,
.scan-legal-note,
.card-detail {
  color: #aab8c7;
  line-height: 1.55;
}

.scan-intake-form small {
  display: block;
  font-size: 0.8rem;
}

.scan-legal-note {
  max-width: 68ch;
  margin-top: 1.25rem;
  font-size: 0.82rem;
}

.scan-reset-card {
  background:
    radial-gradient(circle at 86% 12%, rgba(111, 159, 131, 0.14), transparent 42%),
    linear-gradient(145deg, rgba(18, 34, 39, 0.88), rgba(14, 22, 38, 0.94));
  border-color: rgba(111, 159, 131, 0.3);
}

.scan-reset-card .btn-primary {
  align-self: flex-start;
  margin-top: auto;
}

.scan-report-preview {
  display: grid;
  gap: 0.55rem;
  margin: 0.5rem 0 1.6rem;
  padding: 1rem;
  border: 1px solid rgba(159, 198, 170, 0.2);
  border-radius: 12px;
  background: rgba(7, 15, 26, 0.34);
}

.scan-report-line {
  display: block;
  width: 62%;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(196, 210, 216, 0.18);
}

.scan-report-line.is-long {
  width: 86%;
}

.scan-report-score {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0.6rem 0;
}

.scan-report-score strong {
  color: #efd0b2;
  font-family: var(--font-headline);
  font-size: 3.4rem;
  line-height: 1;
}

.scan-report-score small {
  color: #a8b7c0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- ARTICLE 50 OPERATIONAL DASHBOARD ---------- */
.scan-page {
  --scan-parallax: 0px;
  background:
    radial-gradient(circle at 72% 18%, rgba(53, 84, 80, 0.12), transparent 32%),
    radial-gradient(circle at 18% 52%, rgba(127, 82, 57, 0.1), transparent 34%),
    var(--color-obsidian);
}

.scan-page .header,
.scan-page .main,
.scan-page .footer {
  position: relative;
  z-index: 2;
}

/* Keep the primary navigation readable above the compliance page's dark
   parallax treatment, including browsers that apply their own colour filter. */
.scan-page .header {
  z-index: 1000;
  background: rgba(11, 15, 25, 0.96);
}

.scan-page .nav-desktop a,
.scan-page .nav-mobile a {
  color: #E2E8F0 !important;
}

.scan-page .nav-desktop a.is-active,
.scan-page .nav-mobile a.is-active {
  color: #F0C6A1 !important;
}

.scan-parallax-scene {
  position: fixed;
  z-index: 0;
  inset: -8vh -4vw;
  overflow: hidden;
  pointer-events: none;
}

.scan-parallax-scene video {
  position: absolute;
  inset: -8% 0 auto;
  width: 100%;
  height: 122%;
  object-fit: cover;
  opacity: 0.12;
  filter: saturate(0.72) contrast(1.15) brightness(0.58);
  transform: translate3d(0, var(--scan-parallax), 0) scale(1.1);
  transform-origin: center top;
  will-change: transform;
}

.scan-parallax-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 13, 27, 0.54), rgba(8, 13, 27, 0.94) 76%),
    radial-gradient(circle at 72% 18%, rgba(8, 13, 27, 0.18), rgba(8, 13, 27, 0.78) 62%);
}

.scan-parallax-grid {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(160, 198, 170, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 198, 170, 0.14) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, #000, transparent 72%);
}

.scan-page .scan-hero,
.scan-page .scan-article50-check,
.scan-page .scan-plain-english,
.scan-page .scan-intake-card,
.scan-page .scan-article50-intake,
.scan-page .scan-reset-card,
.scan-page .scan-checks-card,
.scan-page .article-body {
  position: relative;
  overflow: hidden;
  border-color: rgba(170, 195, 199, 0.2);
  background:
    linear-gradient(145deg, rgba(27, 34, 47, 0.78), rgba(10, 18, 32, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(3, 7, 15, 0.85),
    0 22px 60px rgba(0, 0, 0, 0.34),
    0 2px 10px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.scan-page .scan-hero::before,
.scan-page .scan-article50-check::before,
.scan-page .scan-plain-english::before,
.scan-page .scan-intake-card::before,
.scan-page .scan-article50-intake::before,
.scan-page .scan-reset-card::before,
.scan-page .scan-checks-card::before,
.scan-page .article-body::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: calc(var(--radius-card) - 2px);
  pointer-events: none;
}

.scan-page .scan-hero > *,
.scan-page .scan-article50-check > *,
.scan-page .scan-plain-english > *,
.scan-page .scan-intake-card > *,
.scan-page .scan-article50-intake > *,
.scan-page .scan-reset-card > *,
.scan-page .scan-checks-card > *,
.scan-page .article-body > * {
  position: relative;
  z-index: 1;
}

.scan-page .scan-hero {
  min-height: 620px;
  margin: 2.75rem 0 clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid rgba(197, 155, 122, 0.32);
  border-radius: calc(var(--radius-card) + 4px);
  background:
    linear-gradient(112deg, rgba(38, 30, 35, 0.74), rgba(14, 23, 39, 0.68) 54%, rgba(18, 37, 39, 0.73)),
    rgba(10, 18, 32, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 223, 190, 0.14),
    inset 0 -20px 60px rgba(0, 0, 0, 0.18),
    0 30px 90px rgba(0, 0, 0, 0.38);
}

.scan-page .scan-article50-check {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  margin-bottom: 2rem;
  padding: clamp(1.8rem, 4vw, 3.25rem);
  border-color: rgba(159, 198, 170, 0.32);
  background:
    linear-gradient(120deg, rgba(17, 35, 42, 0.86), rgba(12, 21, 36, 0.82) 58%, rgba(41, 31, 36, 0.78));
}

.scan-article50-heading h2 {
  max-width: 19ch;
  margin: 0.45rem 0 0.8rem;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1.06;
}

.scan-article50-heading > p:not(.eyebrow) {
  max-width: 58ch;
  color: #b9c9d3;
  line-height: 1.6;
}

.scan-article50-timeline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(197, 155, 122, 0.22);
  border-radius: 0.9rem;
  background: rgba(8, 16, 28, 0.4);
}

.scan-article50-timeline div {
  display: grid;
  gap: 0.16rem;
}

.scan-article50-timeline span,
.scan-article50-timeline small {
  color: #c99a75;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.scan-article50-timeline strong {
  color: #d7e2e7;
  font-size: 0.93rem;
}

.scan-article50-timeline small {
  color: #8ea6b1;
  letter-spacing: 0.02em;
  text-transform: none;
}

.scan-article50-timeline i {
  width: 2.2rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(197, 155, 122, 0.7), rgba(159, 198, 170, 0.7));
}

.scan-article50-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.scan-article50-grid .scan-article50-choice {
  position: relative;
  min-height: 170px;
  padding: 1rem;
  border: 1px solid var(--tile-border);
  border-radius: 0.8rem;
  background: var(--tile-background);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -14px 24px rgba(3, 8, 15, 0.18),
    0 12px 25px var(--tile-shadow);
}

.scan-article50-grid .scan-article50-choice::before {
  content: '';
  position: absolute;
  top: 0;
  right: 1rem;
  left: 1rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--tile-accent), transparent);
  opacity: 0.8;
}

.scan-article50-grid .scan-article50-choice:not(:last-child)::after {
  display: none;
  content: '→';
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -1.05rem;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--tile-border);
  border-radius: 50%;
  background: #101a2b;
  color: var(--tile-accent);
  font-size: 0.75rem;
  line-height: 1.2rem;
  text-align: center;
  transform: translateY(-50%);
}

.scan-article50-grid .scan-article50-choice:nth-child(1) {
  --tile-accent: #9fc6aa;
  --tile-border: rgba(159, 198, 170, 0.56);
  --tile-shadow: rgba(42, 108, 84, 0.24);
  --tile-background: linear-gradient(145deg, rgba(37, 83, 71, 0.86), rgba(12, 42, 42, 0.92));
}

.scan-article50-grid .scan-article50-choice:nth-child(2) {
  --tile-accent: #e1b273;
  --tile-border: rgba(225, 178, 115, 0.58);
  --tile-shadow: rgba(135, 89, 39, 0.26);
  --tile-background: linear-gradient(145deg, rgba(105, 77, 39, 0.86), rgba(43, 36, 29, 0.93));
}

.scan-article50-grid .scan-article50-choice:nth-child(3) {
  --tile-accent: #d39a83;
  --tile-border: rgba(211, 154, 131, 0.58);
  --tile-shadow: rgba(119, 62, 55, 0.26);
  --tile-background: linear-gradient(145deg, rgba(101, 59, 51, 0.86), rgba(44, 29, 36, 0.93));
}

.scan-article50-grid .scan-article50-choice:nth-child(4) {
  --tile-accent: #9db7d4;
  --tile-border: rgba(157, 183, 212, 0.58);
  --tile-shadow: rgba(57, 83, 125, 0.28);
  --tile-background: linear-gradient(145deg, rgba(53, 77, 109, 0.88), rgba(21, 35, 59, 0.94));
}

.scan-article50-grid span {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--tile-accent);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.scan-article50-grid strong {
  display: block;
  color: #c4d2da;
  font-size: 1rem;
  line-height: 1.28;
}

.scan-article50-grid small {
  display: block;
  margin-top: 0.55rem;
  color: rgba(232, 240, 241, 0.78);
  font-size: 0.82rem;
  line-height: 1.5;
}

.scan-article50-choice > i {
  position: absolute;
  right: 0.85rem;
  bottom: 0.8rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--tile-border);
  border-radius: 50%;
  color: var(--tile-accent);
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.scan-article50-choice:hover,
.scan-article50-choice:focus-visible {
  transform: translateY(-3px);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 30px var(--tile-shadow);
}

.scan-article50-choice.is-selected {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 2px var(--tile-accent),
    0 18px 34px var(--tile-shadow);
}

.scan-article50-choice.is-selected > i {
  background: var(--tile-accent);
  color: #101a2b;
  transform: rotate(45deg);
}

.scan-article50-result {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(197, 155, 122, 0.35);
  border-radius: 0.9rem;
  background: linear-gradient(105deg, rgba(67, 48, 46, 0.68), rgba(16, 30, 42, 0.76));
}

.scan-article50-result[hidden] {
  display: none;
}

.scan-article50-result .eyebrow {
  margin-bottom: 0.25rem;
  color: #d4a57d;
}

.scan-article50-result h3 {
  margin: 0;
  color: #c4d2da;
  font-size: 1.15rem;
}

.scan-article50-result p:not(.eyebrow) {
  max-width: 70ch;
  margin-top: 0.3rem;
  color: #aebfc8;
  font-size: 0.88rem;
  line-height: 1.5;
}

.scan-source-note {
  grid-column: 1 / -1;
  margin: 0.1rem 0 0;
  color: #879aa7;
  font-size: 0.76rem;
  line-height: 1.55;
}

.scan-source-note a {
  color: #d2a27b;
  text-decoration-color: rgba(210, 162, 123, 0.38);
  text-underline-offset: 0.16em;
}

.scan-page .scan-article50-intake {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  border-color: rgba(197, 155, 122, 0.34);
  background:
    linear-gradient(112deg, rgba(58, 40, 39, 0.7), rgba(18, 28, 43, 0.78) 56%, rgba(20, 43, 43, 0.68));
}

.scan-article50-intake > p:not(.eyebrow) {
  max-width: 68ch;
  margin-top: 0.65rem;
  color: #c2d0d7;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .scan-page .scan-article50-check {
    grid-template-columns: 1fr;
  }

  .scan-article50-timeline {
    justify-content: flex-start;
  }

  .scan-article50-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) {
  .scan-article50-grid .scan-article50-choice:not(:last-child)::after {
    display: block;
  }
}

@media (max-width: 600px) {
  .scan-article50-result {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .scan-article50-grid {
    grid-template-columns: 1fr;
  }

  .scan-article50-timeline {
    align-items: flex-start;
    flex-direction: column;
  }

  .scan-article50-timeline i {
    width: 1px;
    height: 1.25rem;
    margin-left: 0.35rem;
    background: linear-gradient(180deg, rgba(197, 155, 122, 0.7), rgba(159, 198, 170, 0.7));
  }
}

.scan-page .scan-hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 32rem;
  height: 32rem;
  right: -8rem;
  top: -9rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 159, 131, 0.16), transparent 68%);
  pointer-events: none;
}

.scan-article-badge {
  position: relative;
  border-color: rgba(232, 188, 147, 0.55);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 228, 202, 0.14), transparent 25%),
    linear-gradient(145deg, rgba(47, 51, 65, 0.92), rgba(11, 21, 34, 0.96));
  box-shadow:
    inset 6px 6px 18px rgba(255, 255, 255, 0.045),
    inset -10px -12px 24px rgba(0, 0, 0, 0.45),
    0 0 0 12px rgba(12, 20, 34, 0.62),
    0 0 0 13px rgba(197, 155, 122, 0.13),
    0 28px 55px rgba(0, 0, 0, 0.5);
}

.scan-article-badge::before,
.scan-article-badge::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.scan-article-badge::before {
  inset: 1rem;
  border: 1px dashed rgba(159, 198, 170, 0.34);
}

.scan-article-badge::after {
  inset: 2rem;
  border: 1px solid rgba(197, 155, 122, 0.16);
  box-shadow: inset 0 0 28px rgba(197, 155, 122, 0.08);
}

.scan-system-status,
.scan-console-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.scan-system-status span,
.scan-console-bar span {
  padding: 0.42rem 0.58rem;
  border: 1px solid rgba(151, 177, 188, 0.18);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(47, 57, 71, 0.42), rgba(8, 15, 26, 0.44));
  color: #9eacb9;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.scan-system-status i,
.scan-console-bar i {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: #9fc6aa;
  box-shadow: 0 0 10px rgba(159, 198, 170, 0.8);
}

.scan-hero-guide {
  max-width: 62ch;
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(197, 155, 122, 0.2);
  border-radius: 0.85rem;
  background: linear-gradient(105deg, rgba(64, 48, 48, 0.42), rgba(17, 29, 43, 0.48));
}

.scan-hero-guide .eyebrow {
  margin-bottom: 0.35rem;
  color: #d4a57d;
}

.scan-hero-guide p {
  margin: 0;
  color: #b9c9d3;
  font-size: 0.9rem;
  line-height: 1.55;
}

.scan-info-rail {
  display: flex;
  align-items: center;
  max-width: 62ch;
  margin-top: 0.85rem;
  border: 1px solid rgba(159, 198, 170, 0.22);
  border-radius: 0.85rem;
  background: rgba(9, 18, 31, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.scan-info-rail-label {
  flex: 0 0 auto;
  padding: 0.7rem 0.8rem;
  border-right: 1px solid rgba(159, 198, 170, 0.18);
  color: #9fc6aa;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scan-info-rail-window {
  min-width: 0;
  overflow: hidden;
  outline: none;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.scan-info-rail-window:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(197, 155, 122, 0.72);
}

.scan-info-rail-track {
  display: flex;
  width: max-content;
  animation: scanInfoRail 30s linear infinite;
}

.scan-info-rail-window:hover .scan-info-rail-track,
.scan-info-rail-window:focus-within .scan-info-rail-track {
  animation-play-state: paused;
}

.scan-info-rail-sequence {
  display: flex;
  gap: 1.25rem;
  padding: 0.7rem 1.25rem;
}

.scan-info-rail-sequence span {
  position: relative;
  white-space: nowrap;
  color: #c5d1d8;
  font-size: 0.78rem;
}

.scan-info-rail-sequence span::before {
  content: '✦';
  margin-right: 0.5rem;
  color: #d4a57d;
  font-size: 0.62rem;
}

@keyframes scanInfoRail {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .scan-info-rail-track {
    animation: none;
  }

  .scan-info-rail-window {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

.scan-plain-english {
  border-color: rgba(159, 198, 170, 0.3);
  background:
    linear-gradient(135deg, rgba(18, 38, 43, 0.74), rgba(10, 19, 33, 0.78));
}

.scan-plain-grid article {
  position: relative;
  padding: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(36, 48, 61, 0.52), rgba(8, 15, 27, 0.5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.58),
    0 10px 24px rgba(0, 0, 0, 0.2);
}

.scan-plain-grid article::after {
  content: '';
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 0.7rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(197, 155, 122, 0.72), transparent);
  opacity: 0.5;
}

.scan-intake-card {
  border-color: rgba(197, 155, 122, 0.34) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(197, 155, 122, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(35, 29, 39, 0.84), rgba(12, 19, 34, 0.86)) !important;
}

.scan-console-bar {
  justify-content: flex-start;
  margin: -0.45rem 0 1.6rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(197, 155, 122, 0.14);
}

.scan-intake-form {
  margin-top: 1.7rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(172, 190, 199, 0.15);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(4, 10, 20, 0.52), rgba(31, 37, 50, 0.42));
  box-shadow:
    inset 6px 7px 18px rgba(0, 0, 0, 0.34),
    inset -1px -1px 0 rgba(255, 255, 255, 0.04),
    0 12px 25px rgba(0, 0, 0, 0.18);
}

.scan-page .scan-intake-form input {
  border-color: rgba(166, 185, 195, 0.18);
  background:
    linear-gradient(180deg, rgba(5, 11, 22, 0.72), rgba(26, 31, 45, 0.74));
  box-shadow:
    inset 4px 5px 10px rgba(0, 0, 0, 0.38),
    inset -1px -1px 0 rgba(255, 255, 255, 0.04);
}

.scan-page .scan-intake-form input:focus {
  border-color: rgba(159, 198, 170, 0.66);
  box-shadow:
    inset 4px 5px 10px rgba(0, 0, 0, 0.34),
    0 0 0 3px rgba(159, 198, 170, 0.09),
    0 0 22px rgba(159, 198, 170, 0.08);
}

.scan-page .scan-intake-form .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 216, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.22),
    0 0 20px rgba(197, 155, 122, 0.06);
}

.scan-reset-card {
  border-color: rgba(111, 159, 131, 0.34) !important;
  background:
    radial-gradient(circle at 78% 4%, rgba(111, 159, 131, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(18, 43, 45, 0.84), rgba(9, 18, 31, 0.9)) !important;
}

.scan-report-preview {
  border-color: rgba(159, 198, 170, 0.25);
  background:
    linear-gradient(145deg, rgba(5, 13, 23, 0.72), rgba(22, 34, 43, 0.64));
  box-shadow:
    inset 5px 6px 14px rgba(0, 0, 0, 0.42),
    inset -1px -1px 0 rgba(255, 255, 255, 0.045),
    0 12px 26px rgba(0, 0, 0, 0.2);
}

.scan-report-line {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

.scan-page .workflow-step {
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(37, 48, 60, 0.48), rgba(7, 14, 25, 0.52));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 12px 26px rgba(0, 0, 0, 0.2);
}

.scan-checks-card {
  margin-top: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(135deg, rgba(23, 34, 43, 0.92), rgba(14, 22, 38, 0.95));
  border-color: rgba(159, 198, 170, 0.28);
}

.scan-checks-grid {
  margin-top: 1.5rem;
}

.scan-deliverables {
  display: grid;
  gap: 0.7rem;
  margin: 1.2rem 0 1.5rem;
  padding-left: 1.2rem;
  color: #d7e2e7;
}

.scan-deliverables li::marker {
  color: var(--color-bronze-light);
}

.homepage-section-heading {
  padding: 0.35rem 0.25rem;
}

.homepage-section-heading h2 {
  max-width: 18ch;
  margin-top: 0.3rem;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
}

.homepage-blog-section {
  margin-top: 2rem;
}

.homepage-section-tray {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(0.85rem, 1.8vw, 1.35rem);
  border: 1px solid rgba(181, 141, 108, 0.23);
  border-radius: clamp(24px, 3vw, 32px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 22%),
    linear-gradient(180deg, rgba(30, 31, 43, 0.92), rgba(12, 20, 33, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 209, 0.045),
    inset 0 -24px 50px rgba(5, 9, 18, 0.22),
    0 18px 46px rgba(0, 0, 0, 0.2);
}

.homepage-section-tray::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.reviews-tray::before {
  background:
    radial-gradient(circle at 8% 4%, rgba(171, 112, 79, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(50, 36, 39, 0.26), rgba(16, 24, 39, 0.06) 46%);
}

.insights-tray {
  border-color: rgba(116, 154, 139, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 24%),
    linear-gradient(180deg, rgba(18, 38, 42, 0.92), rgba(11, 20, 34, 0.98));
}

.insights-tray::before {
  background:
    radial-gradient(circle at 88% 8%, rgba(111, 159, 131, 0.12), transparent 34%),
    radial-gradient(circle at 10% 92%, rgba(156, 108, 92, 0.08), transparent 30%);
}

.section-tray-header {
  min-height: 0;
  padding: clamp(1.5rem, 3vw, 2.35rem);
  border-color: rgba(194, 151, 114, 0.2);
  border-radius: calc(var(--radius-card) - 4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 205, 0.04),
    inset 0 -10px 24px rgba(5, 8, 15, 0.14);
}

.section-tray-header:hover {
  transform: none;
  border-color: rgba(194, 151, 114, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 205, 0.05),
    inset 0 -10px 24px rgba(5, 8, 15, 0.14);
}

.reviews-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(circle at 86% 14%, rgba(198, 154, 111, 0.1), transparent 31%),
    linear-gradient(135deg, rgba(47, 36, 40, 0.9), rgba(25, 30, 43, 0.94));
}

.reviews-header-copy {
  min-width: 0;
}

.google-review-link {
  display: grid;
  gap: 0.85rem;
  width: min(23rem, 100%);
  padding: 1rem;
  border: 1px solid rgba(197, 155, 122, 0.3);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 46%),
    rgba(10, 16, 27, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 210, 0.05),
    0 4px 0 rgba(73, 51, 40, 0.46);
  color: #d5b79f;
  transition: border-color 300ms ease, background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.google-review-link:hover,
.google-review-link:focus-visible {
  border-color: rgba(217, 177, 143, 0.5);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 46%),
    rgba(41, 31, 34, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 210, 0.07),
    0 3px 0 rgba(91, 61, 46, 0.52),
    0 0 22px rgba(197, 155, 122, 0.08);
  color: #e0c3aa;
  transform: translateY(1px);
}

.google-review-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
}

.google-brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.48rem;
}

.google-review-mark {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid rgba(223, 227, 235, 0.9);
  border-radius: 50%;
  background: #f8f9fa;
  color: #4285f4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.google-wordmark {
  display: flex;
  align-items: baseline;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.06em;
}

.google-wordmark i {
  font-style: normal;
}

.google-wordmark i:nth-child(1),
.google-wordmark i:nth-child(4) {
  color: #4285f4;
}

.google-wordmark i:nth-child(2),
.google-wordmark i:nth-child(6) {
  color: #ea4335;
}

.google-wordmark i:nth-child(3) {
  color: #fbbc05;
}

.google-wordmark i:nth-child(5) {
  color: #34a853;
}

.google-review-label {
  display: grid;
  gap: 0.12rem;
}

.google-review-label small {
  color: #a98770;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
}

.google-review-label strong {
  color: #d5c5b9;
  font-size: 0.9rem;
  line-height: 1.25;
}

.google-review-stars {
  color: #d0a36f;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0 12px rgba(208, 163, 111, 0.18);
}

.google-review-snippets {
  display: grid;
  gap: 0.38rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(197, 155, 122, 0.16);
  border-radius: 10px;
  background: rgba(7, 12, 21, 0.34);
}

.google-review-snippets > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.google-review-snippets q {
  overflow: hidden;
  color: #bfc9d0;
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.google-review-snippets small {
  flex: 0 0 auto;
  color: #a98770;
  font-family: var(--font-mono);
  font-size: 0.56rem;
}

.google-review-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #d5b79f;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.google-review-arrow {
  color: #c59b7a;
  font-size: 1.05rem;
}

.insights-header {
  background:
    radial-gradient(circle at 84% 12%, rgba(111, 159, 131, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(28, 45, 46, 0.94), rgba(24, 31, 44, 0.95));
}

.section-tray-header h2 {
  color: #c9b9ad !important;
}

.insights-header h2 {
  color: #b9cad4 !important;
}

.section-tray-header p:not(.eyebrow) {
  color: #aeb8c1;
}

@media (max-width: 760px) {
  .reviews-header {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .google-review-link {
    width: 100%;
  }

  .google-review-top {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .google-review-stars {
    grid-column: 1 / -1;
  }
}

.resources-grid {
  margin-top: 2rem;
}

/* ---------- INSIGHTS EDITORIAL SYSTEM ---------- */
.insights-editorial-grid {
  margin-top: 2rem;
}

.insights-page-intro {
  max-width: 760px;
}

.insights-gold-subtitle {
  margin: 0.25rem 0 0;
  color: #bfd9d7 !important;
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1.45vw, 1rem) !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.insights-intro-copy {
  max-width: 60ch;
  margin: 1rem auto 0;
  color: #f1f4f2;
}

.insights-lead-grid {
  margin-top: 0;
}

.insights-section-heading {
  grid-column: span 12;
  max-width: 52rem;
  padding: 0.5rem 0 0.15rem;
}

.insights-section-heading h2 {
  margin: 0.25rem 0 0.55rem;
  color: var(--color-silver);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}

.insights-section-heading p:not(.eyebrow) {
  margin: 0;
  color: var(--color-steel-grey);
}

.insight-card {
  min-height: 19rem;
  overflow: hidden;
  padding: 0;
}

.insight-card--lead {
  min-height: 27rem;
}

.insight-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.insight-card-body h2,
.insight-card-body h3 {
  max-width: 22ch;
  margin: 0.35rem 0 0.8rem;
}

.insight-card-body > p:not(.eyebrow) {
  max-width: 60ch;
}

.insight-card-body .btn-primary {
  margin-top: auto;
}

.insight-card-media {
  position: relative;
  overflow: hidden;
  min-height: 11.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 13, 22, 0.45);
}

.insight-card--lead .insight-card-media {
  min-height: 15.5rem;
}

.insight-detail-media {
  position: relative;
  overflow: hidden;
}

.ai-image-frame {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}

.ai-image-frame > img,
.ai-image-frame > picture > img {
  display: block;
}

.insight-image-disclosure {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  z-index: 2;
  padding: 0.46rem 0.8rem;
  border: 1px solid rgba(235, 190, 136, 0.78);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(9, 17, 30, 0.94), rgba(35, 20, 34, 0.92));
  color: #f2c995;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1.15;
  white-space: nowrap;
  text-transform: uppercase;
  box-shadow: 0 0.65rem 1.5rem rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 244, 222, 0.1);
  transform: translateX(-50%);
}

.insight-card-media img,
.insight-card-image,
.insight-detail-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.insight-detail-page [hidden] {
  display: none !important;
}

.insight-audio-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: -0.25rem 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(170, 187, 200, 0.18);
}

.insight-audio-button,
.insight-download-button,
.insight-page-button,
.insight-chat-send {
  border: 1px solid rgba(159, 198, 170, 0.48);
  border-radius: 999px;
  background: rgba(30, 74, 55, 0.52);
  color: var(--color-silver);
  cursor: pointer;
  font: 600 0.76rem var(--font-mono);
  letter-spacing: 0.03em;
  padding: 0.65rem 0.9rem;
}

.insight-audio-button:hover,
.insight-audio-button:focus-visible,
.insight-download-button:hover,
.insight-download-button:focus-visible,
.insight-page-button:hover:not(:disabled),
.insight-page-button:focus-visible,
.insight-chat-send:hover,
.insight-chat-send:focus-visible {
  background: rgba(53, 112, 80, 0.72);
  outline: 2px solid var(--color-video-green-light);
  outline-offset: 2px;
}

.insight-audio-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.insight-download-button {
  border: 1px solid rgba(222, 175, 123, 0.52);
  border-radius: 999px;
  background: rgba(79, 47, 45, 0.52);
  color: var(--color-silver);
  cursor: pointer;
  font: 600 0.76rem var(--font-mono);
  letter-spacing: 0.03em;
  padding: 0.65rem 0.9rem;
}

.insight-audio-bar p {
  font-size: 0.75rem;
}

.insight-chat-limit {
  color: var(--color-bronze-light) !important;
  font: 600 0.68rem var(--font-mono) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insight-previous-date {
  color: var(--color-bronze-light);
  font: 600 0.63rem var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.insight-previous-title {
  color: var(--color-silver);
  font-size: 0.86rem;
  line-height: 1.35;
}

.insight-detail-rail {
  align-self: start;
  display: grid;
  gap: 1rem;
}

.insight-transparency-pill {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.7rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.1rem 0 0;
  padding: 0.52rem 0.72rem 0.52rem 0.58rem;
  border: 1px solid rgba(226, 169, 110, 0.38);
  border-radius: 999px;
  background: linear-gradient(105deg, rgba(93, 55, 55, 0.56), rgba(20, 30, 43, 0.74));
  box-shadow: inset 0 1px 0 rgba(255, 244, 229, 0.05);
}

.insight-transparency-pill-label {
  flex: 0 0 auto;
  padding: 0.25rem 0.43rem;
  border: 1px solid rgba(236, 194, 137, 0.45);
  border-radius: 999px;
  color: #f1c995;
  font: 700 0.56rem var(--font-mono);
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.insight-transparency-pill p {
  flex: 1 1 28rem;
  margin: 0;
  color: #cdd6e0;
  font-size: 0.76rem;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .insight-transparency-pill {
    align-items: flex-start;
    border-radius: 1rem;
  }

  .insight-transparency-pill p {
    flex-basis: 100%;
  }
}

/* This is deliberately not .ai-talk-panel. That class belongs to the animated
   floating popup; the editorial cards use the same Arthur visual language,
   without inheriting popup positioning or animation state. */
.insight-messenger,
.insights-index-messenger {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-color: rgba(222, 175, 123, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 215, 0.13),
    0 0 2.4rem rgba(197, 142, 95, 0.2),
    0 0 5.25rem rgba(38, 183, 201, 0.09);
  animation: arthurMessengerGlow 3.8s ease-in-out infinite;
}

.insight-messenger:hover,
.insight-messenger:focus-within,
.insights-index-messenger:hover,
.insights-index-messenger:focus-within {
  border-color: rgba(240, 207, 152, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 215, 0.18),
    0 0 3.1rem rgba(197, 142, 95, 0.3),
    0 0 6.2rem rgba(38, 183, 201, 0.15);
}

@keyframes arthurMessengerGlow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 239, 215, 0.13),
      0 0 2.4rem rgba(197, 142, 95, 0.2),
      0 0 5.25rem rgba(38, 183, 201, 0.09);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 239, 215, 0.17),
      0 0 2.9rem rgba(197, 142, 95, 0.27),
      0 0 6rem rgba(38, 183, 201, 0.135);
  }
}

.insight-messenger .ai-talk-panel-head,
.insights-index-messenger .ai-talk-panel-head {
  padding: 1rem 1rem 0.8rem;
}

.insight-messenger .ai-talk-arthur-stage,
.insights-index-messenger .ai-talk-arthur-stage {
  grid-template-columns: 5.15rem minmax(0, 1fr);
  min-height: 6.1rem;
  padding: 0.8rem 1rem;
}

.insight-messenger .ai-talk-arthur-portrait,
.insights-index-messenger .ai-talk-arthur-portrait {
  width: 5.15rem;
  height: 5.15rem;
}

.insight-messenger h2,
.insights-index-messenger h2 {
  margin: 0;
  color: #f0cf98;
  font-family: var(--font-headline);
  font-size: 1.08rem;
  line-height: 1.15;
}

.insight-messenger .ai-talk-messages,
.insights-index-messenger .ai-talk-messages {
  min-height: 6.35rem;
  max-height: 14rem;
  padding-block: 0.8rem;
}

.insight-messenger .ai-talk-composer,
.insights-index-messenger .ai-talk-composer {
  padding-top: 0.65rem;
}

.insight-messenger .insight-chat-limit,
.insights-index-messenger .insight-chat-limit {
  margin: 0;
  padding: 0 1rem 1rem;
}

.insights-chat-history {
  display: grid;
  gap: 0.7rem;
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid rgba(170, 187, 200, 0.16);
  background: rgba(5, 10, 18, 0.18);
}

.insights-chat-history > div {
  display: grid;
  gap: 0.55rem;
}

.insights-chat-history-item {
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(222, 175, 123, 0.16);
  border-radius: 0.65rem;
  background: rgba(222, 175, 123, 0.055);
}

.insights-chat-history-item p {
  margin: 0;
}

.insights-chat-history-note {
  margin: -0.3rem 0 0 !important;
  color: var(--color-steel-grey);
  font-size: 0.68rem;
  line-height: 1.35;
}

.insights-chat-history-item.is-example {
  border-style: dashed;
  background: rgba(38, 183, 201, 0.035);
}

.insights-chat-history-item.is-example::before {
  content: 'EXAMPLE CHAT';
  color: var(--color-bronze-light);
  font: 600 0.55rem var(--font-mono);
  letter-spacing: 0.09em;
}

.insights-chat-history-question {
  color: var(--color-silver);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.insights-chat-history-answer {
  color: var(--color-steel-grey);
  font-size: 0.72rem;
  line-height: 1.42;
}

.insight-previous-stack {
  display: grid;
  gap: 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(170, 187, 200, 0.18);
}

.insight-previous-stack > div {
  display: grid;
  gap: 0.75rem;
  max-height: min(58vh, 42rem);
  overflow-y: auto;
  padding-right: 0.35rem;
  scrollbar-color: rgba(222, 175, 123, 0.62) rgba(8, 13, 22, 0.5);
  scrollbar-width: thin;
}

.insight-previous-tile {
  display: grid;
  min-height: 0;
  gap: 0.55rem;
  padding: 1.2rem;
  text-decoration: none;
}

.insight-previous-tile:hover,
.insight-previous-tile:focus-visible {
  border-color: rgba(222, 175, 123, 0.62);
  outline: none;
}

.insight-previous-title {
  color: var(--color-silver);
  font-family: var(--font-headline);
  font-size: 1.08rem;
  line-height: 1.28;
}

.insight-previous-excerpt {
  color: var(--color-steel-grey);
  font-size: 0.8rem;
  line-height: 1.48;
}

.insight-previous-tile:first-child {
  border-color: rgba(222, 175, 123, 0.42);
  background: linear-gradient(135deg, rgba(53, 43, 40, 0.72), rgba(15, 22, 32, 0.95));
}

.insight-previous-tile:first-child .insight-previous-title {
  font-size: 1.18rem;
}

.insight-return-row {
  display: flex;
  justify-content: flex-end;
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(170, 187, 200, 0.14);
}

.insight-return-row .btn-primary {
  min-width: 11rem;
}

.insight-card-media img {
  aspect-ratio: 16 / 8;
}

.insight-card-image {
  aspect-ratio: 16 / 8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.insight-card--lead .insight-card-media img {
  aspect-ratio: 16 / 7;
}

.insight-card--lead .insight-card-body {
  min-height: 17rem;
}

.insight-card--empty {
  border-style: dashed;
}

.insight-card--empty h2 {
  color: var(--color-silver);
}

.insights-library {
  margin-top: clamp(4rem, 9vw, 7rem);
}

.insights-library-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.75rem 0 1.25rem;
}

.insights-library-year {
  display: inline-flex;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(170, 187, 200, 0.22);
  border-radius: 999px;
  color: var(--color-steel-grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.insights-library-year:hover,
.insights-library-year:focus-visible,
.insights-library-year.is-active {
  border-color: rgba(197, 155, 122, 0.75);
  background: rgba(197, 155, 122, 0.12);
  color: var(--color-silver);
}

.insights-library-grid {
  margin-top: 0;
}

.insights-library-grid .insight-card {
  min-height: 18rem;
}

.insight-card--library .insight-card-body {
  padding: clamp(1.2rem, 2vw, 1.5rem);
}

.insight-card--library h3 {
  font-size: clamp(1.12rem, 1.55vw, 1.38rem);
}

.insight-card--library .eyebrow {
  font-size: 0.66rem;
}

.insights-library-empty {
  margin: 1rem 0 0;
  color: var(--color-steel-grey);
}

.insights-library-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

.insights-page-link {
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.insights-page-link:hover,
.insights-page-link:focus-visible {
  color: var(--color-silver);
}

.insights-page-link.is-disabled {
  cursor: default;
  opacity: 0.38;
}

.insights-page-status {
  margin: 0;
  color: var(--color-steel-grey);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insights-library-archive {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.insight-detail-image {
  max-height: min(48vw, 34rem);
  margin: -0.25rem 0 2rem;
  border-radius: calc(var(--radius-card) - 0.4rem);
  object-fit: cover;
}

.insight-detail-media .insight-detail-image {
  margin: -0.25rem 0 2rem;
}

.insight-detail-copy {
  display: grid;
  gap: 1.1rem;
  min-height: 26rem;
}

.insight-detail-copy h2,
.insight-detail-copy h3 {
  margin-top: 1.25rem;
}

.insight-detail-copy p,
.insight-detail-copy li {
  max-width: 72ch;
  font-size: 1rem;
}

.insight-detail-copy code {
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  background: rgba(197, 155, 122, 0.13);
  color: var(--color-silver);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.insight-reading-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(170, 187, 200, 0.18);
}

.insight-page-button {
  justify-self: start;
}

.insight-page-button:last-child {
  justify-self: end;
}

.insight-page-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.insight-reading-page-status {
  margin: 0;
  color: var(--color-steel-grey);
  font: 600 0.7rem var(--font-mono);
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

.insight-detail-aside {
  align-self: start;
  gap: 1rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.insight-detail-error {
  max-width: 46rem;
  margin: 2rem auto;
  gap: 1rem;
}

@media (max-width: 800px) {
  .insights-section-heading {
    grid-column: 1 / -1;
  }

  .insight-card--lead {
    min-height: 0;
  }

  .insight-card--lead .insight-card-media img {
    aspect-ratio: 16 / 9;
  }
}

.homepage-blog-card {
  min-height: 245px;
  display: flex;
  flex-direction: column;
}

.homepage-blog-card h3 {
  max-width: 16ch;
  margin-top: 0.35rem;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.08;
}

.homepage-blog-card .service-link {
  margin-top: auto;
}

.homepage-faq-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 2rem;
  margin-top: 2rem;
  background: linear-gradient(135deg, rgba(20, 39, 43, 0.88), rgba(15, 26, 41, 0.92));
  border-color: rgba(111, 159, 131, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(210, 232, 219, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.13);
}

.homepage-faq-bridge .eyebrow,
.homepage-faq-bridge h2,
.homepage-faq-bridge p {
  grid-column: 1;
}

.homepage-faq-bridge h2 {
  margin: 0;
}

.homepage-faq-bridge .btn-primary {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.homepage-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0.7rem;
  border: 1px solid rgba(125, 151, 166, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(rgba(132, 158, 175, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 158, 175, 0.025) 1px, transparent 1px),
    rgba(5, 10, 19, 0.34);
  background-size: 24px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    inset 0 20px 48px rgba(0, 0, 0, 0.15);
}

.service-card {
  --service-edge: #647c9d;
  --service-edge-dark: #2e405b;
  --service-accent: #b8c8de;
  --service-glow: rgba(73, 96, 133, 0.24);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 430px;
  padding: clamp(1.15rem, 2vw, 1.55rem);
  border: 1px solid color-mix(in srgb, var(--service-edge) 68%, white 7%);
  border-radius: 19px;
  justify-content: flex-start;
  gap: 0;
  background:
    radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--service-glow) 58%, transparent), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 32%),
    linear-gradient(150deg, #141d2d 0%, #0c1523 54%, #080f1a 100%);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.055),
    inset -7px -9px 16px rgba(2, 7, 14, 0.38),
    0 3px 0 var(--service-edge-dark),
    0 16px 32px var(--service-glow);
  color: #f2f4f1;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.service-card::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 13px;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.025);
  pointer-events: none;
}

.service-card::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 1.4rem;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, var(--service-edge), transparent);
  box-shadow: 0 0 14px var(--service-glow);
  pointer-events: none;
}

.service-card > * {
  position: relative;
  z-index: 1;
}

.service-card:hover,
.service-card:focus-visible {
  border-color: var(--service-edge);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.07),
    inset -7px -9px 16px rgba(2, 7, 14, 0.34),
    0 5px 0 var(--service-edge-dark),
    0 22px 42px var(--service-glow);
  outline: none;
  transform: translateY(-3px);
}

.service-card:active {
  box-shadow:
    inset 3px 4px 8px rgba(1, 5, 11, 0.34),
    0 1px 0 var(--service-edge-dark),
    0 10px 22px var(--service-glow);
  transform: translateY(2px);
}

.service-card-personal {
  --service-edge: #657d9f;
  --service-edge-dark: #30435e;
  --service-accent: #b9cae1;
  --service-glow: rgba(64, 91, 132, 0.25);
}

.service-card-charity {
  --service-edge: #5d8c76;
  --service-edge-dark: #29483a;
  --service-accent: #abd4bd;
  --service-glow: rgba(49, 110, 81, 0.24);
}

.service-card-business {
  --service-edge: #a37453;
  --service-edge-dark: #573b2c;
  --service-accent: #e0b994;
  --service-glow: rgba(126, 77, 47, 0.24);
}

.service-card-label {
  align-self: flex-start;
  padding: 0.44rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--service-edge) 58%, transparent);
  border-radius: 7px;
  background: rgba(4, 9, 17, 0.4);
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.25),
    inset -1px -1px 0 rgba(255, 255, 255, 0.03);
  color: var(--service-accent);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.service-card-instrument {
  position: relative;
  overflow: hidden;
  display: grid;
  width: 100%;
  height: 128px;
  margin-top: 1rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--service-edge) 40%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(rgba(147, 177, 192, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147, 177, 192, 0.035) 1px, transparent 1px),
    radial-gradient(circle at center, var(--service-glow), transparent 52%),
    rgba(3, 8, 16, 0.48);
  background-size: 16px 16px, 16px 16px, auto, auto;
  box-shadow:
    inset 4px 5px 12px rgba(0, 0, 0, 0.28),
    inset -1px -1px 0 rgba(255, 255, 255, 0.025);
}

.service-card-instrument b {
  position: absolute;
  right: 0.65rem;
  bottom: 0.52rem;
  color: color-mix(in srgb, var(--service-accent) 78%, transparent);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.service-instrument-orbit,
.service-oversight-ring {
  position: absolute;
  width: 76px;
  height: 76px;
  border: 1px solid color-mix(in srgb, var(--service-edge) 58%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--service-glow);
}

.service-instrument-orbit::before,
.service-instrument-orbit::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.service-instrument-orbit::before {
  inset: 10px;
  border: 1px dashed color-mix(in srgb, var(--service-accent) 50%, transparent);
  animation: serviceInstrumentTurn 10s linear infinite;
}

.service-instrument-orbit::after {
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--service-accent);
  box-shadow: 0 0 10px var(--service-accent);
}

.service-instrument-core {
  width: 28px;
  height: 28px;
  border: 1px solid var(--service-edge);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--service-accent), var(--service-edge-dark) 58%, #0a111e 62%);
  box-shadow: 0 0 18px var(--service-glow);
  animation: serviceCorePulse 2.8s ease-in-out infinite;
}

.service-signal-bars {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  display: flex;
  height: 24px;
  align-items: flex-end;
  gap: 3px;
}

.service-signal-bars i {
  display: block;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--service-accent);
  box-shadow: 0 0 6px var(--service-glow);
  animation: serviceSignalBar 1.4s ease-in-out infinite;
}

.service-signal-bars i:nth-child(2) { animation-delay: -0.7s; }
.service-signal-bars i:nth-child(3) { animation-delay: -0.2s; }
.service-signal-bars i:nth-child(4) { animation-delay: -1s; }
.service-signal-bars i:nth-child(5) { animation-delay: -0.45s; }

.service-oversight-ring {
  animation: serviceInstrumentTurn 12s linear infinite reverse;
}

.service-oversight-ring::before,
.service-oversight-ring::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--service-edge), transparent);
  transform: translate(-50%, -50%) rotate(45deg);
}

.service-oversight-ring::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.service-oversight-human {
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--service-edge);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--service-edge), var(--service-edge-dark));
  box-shadow: 0 0 16px var(--service-glow);
  color: #f4f6f2;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.service-oversight-node {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  border: 1px solid var(--service-accent);
  border-radius: 50%;
  background: #0b1421;
  box-shadow: 0 0 9px var(--service-accent);
  animation: serviceNodePulse 2.4s ease-in-out infinite;
}

.service-oversight-node-a { top: 20px; left: calc(50% - 4px); }
.service-oversight-node-b { right: calc(50% - 42px); bottom: 27px; animation-delay: -0.8s; }
.service-oversight-node-c { bottom: 27px; left: calc(50% - 42px); animation-delay: -1.6s; }

.service-workflow-track {
  position: absolute;
  top: 50%;
  left: 16%;
  width: 68%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--service-edge) 12%, var(--service-edge) 88%, transparent);
  box-shadow: 0 0 10px var(--service-glow);
}

.service-workflow-node {
  position: absolute;
  top: calc(50% - 15px);
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 1px solid var(--service-edge);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent),
    linear-gradient(150deg, var(--service-edge), var(--service-edge-dark));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 0 var(--service-edge-dark),
    0 0 12px var(--service-glow);
}

.service-workflow-node::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 3px;
  background: var(--service-accent);
  opacity: 0.75;
}

.service-workflow-node-a { left: 16%; }
.service-workflow-node-b { left: calc(50% - 15px); }
.service-workflow-node-c { right: 16%; }

.service-workflow-signal {
  position: absolute;
  top: calc(50% - 4px);
  left: 17%;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f2d2af;
  box-shadow: 0 0 12px #d6a77d;
  animation: serviceSignalTravel 3.2s ease-in-out infinite;
}

.service-card-copy {
  display: block;
  padding: 0 0.2rem;
}

.service-card h3 {
  min-height: 2.3em;
  margin-top: 1.15rem;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.15;
}

.service-card p {
  max-width: 34ch;
  margin-top: 0.6rem;
  color: rgba(226, 232, 235, 0.78);
  font-size: 0.91rem;
  line-height: 1.55;
}

.service-link {
  margin-top: auto;
  color: #d7b18d;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.service-link span {
  display: inline-block;
  margin-left: 0.3rem;
  transition: transform var(--transition-fast);
}

.service-card:hover .service-link span,
.service-card:focus-visible .service-link span {
  transform: translateX(3px);
}

.service-card .service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding: 0.72rem 0.78rem 0.68rem 0.88rem;
  border: 1px solid color-mix(in srgb, var(--service-edge) 70%, white 4%);
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 42%),
    color-mix(in srgb, var(--service-edge-dark) 62%, transparent);
  backdrop-filter: blur(10px) saturate(1.22);
  -webkit-backdrop-filter: blur(10px) saturate(1.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -6px 11px rgba(2, 7, 14, 0.18),
    0 7px 14px rgba(0, 0, 0, 0.18);
  gap: 0.6rem;
  color: #f0cfa7;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.service-card .service-link span {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--service-edge) 65%, white 7%);
  border-radius: 50%;
  background: rgba(3, 8, 16, 0.22);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.service-card:hover .service-link,
.service-card:focus-visible .service-link {
  border-color: color-mix(in srgb, var(--service-edge) 72%, white 14%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -6px 11px rgba(2, 7, 14, 0.16),
    0 8px 16px rgba(0, 0, 0, 0.2);
}

@keyframes serviceInstrumentTurn {
  to { transform: rotate(360deg); }
}

@keyframes serviceCorePulse {
  0%, 100% { transform: scale(0.92); filter: brightness(0.9); }
  50% { transform: scale(1.08); filter: brightness(1.18); }
}

@keyframes serviceSignalBar {
  0%, 100% { height: 7px; opacity: 0.5; }
  50% { height: 23px; opacity: 1; }
}

@keyframes serviceNodePulse {
  0%, 100% { opacity: 0.48; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes serviceSignalTravel {
  0% { left: 17%; opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { left: calc(83% - 8px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .service-instrument-orbit::before,
  .service-instrument-core,
  .service-signal-bars i,
  .service-oversight-ring,
  .service-oversight-node,
  .service-workflow-signal {
    animation: none;
  }
}

@media (max-width: 800px) {
  .homepage-service-grid {
    grid-template-columns: 1fr;
    padding: 0.55rem;
  }

  .service-card {
    min-height: 400px;
  }
}

/* Hero Video Background */
.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: #0b0f21;
}

.hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
}

.video-overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(11, 15, 25, 0.12) 0%, rgba(11, 15, 25, 0.72) 100%);
}

.hero-theme > .hero-video-wrapper .hero-bg-video {
  opacity: 0.05;
}

.bento-card.hero-theme > *:not(.hero-video-wrapper) {
  position: relative;
  z-index: 2;
}

/* Hero Layout: text left, video right */
.hero-layout {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  height: 100%;
}

.hero-content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Homepage hero: a more editorial hierarchy while retaining the bento surface. */
.homepage-hero {
  min-height: clamp(460px, 58vh, 680px);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(circle at 8% 10%, rgba(197, 155, 122, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(17, 23, 39, 0.94), rgba(16, 31, 38, 0.78) 58%, rgba(35, 57, 48, 0.72));
  border-color: rgba(197, 155, 122, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 235, 215, 0.11), 0 24px 60px rgba(0, 0, 0, 0.28);
}

.homepage-hero .hero-content {
  max-width: 720px;
  padding: clamp(0.5rem, 2vw, 1.5rem) 0;
}

.homepage-hero h1 {
  max-width: 12ch;
  margin: 0.55rem 0 1.1rem;
  font-size: clamp(2.45rem, 5.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hero-kicker {
  color: var(--color-panel-heading) !important;
  font-family: var(--font-mono);
  font-size: 0.72rem !important;
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
}

.homepage-hero .hero-subheadline {
  max-width: 48ch;
  color: #e4e8ed;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.45;
}

.homepage-hero .hero-detail {
  max-width: 58ch;
  margin-top: 0.85rem;
  color: #b9c7cd;
}

/* ARIA showcase: a product-level story between the hero and the diagnostic. */
.aria-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(circle at 88% 16%, rgba(111, 159, 131, 0.2), transparent 38%),
    linear-gradient(135deg, rgba(26, 39, 49, 0.96), rgba(15, 24, 42, 0.96));
  border-color: rgba(159, 198, 170, 0.34);
  box-shadow: inset 0 1px 0 rgba(213, 235, 218, 0.1), 0 20px 50px rgba(0, 0, 0, 0.24);
}

.aria-showcase h2 {
  max-width: 18ch;
  margin: 0.45rem 0 1rem;
  font-size: clamp(1.9rem, 3.5vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.aria-showcase-lead {
  margin-bottom: 0.8rem;
  color: var(--color-silver) !important;
  font-family: var(--font-headline);
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
  line-height: 1.35 !important;
}

.aria-showcase-copy > p:not(.eyebrow) {
  max-width: 67ch;
  color: #c5d0d2;
  font-size: 1.02rem;
  line-height: 1.65;
}

.aria-showcase-visual {
  position: relative;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(159, 198, 170, 0.24);
  border-radius: 1rem;
  background: #0c0f1e;
}

.aria-showcase-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
}

.aria-showcase-note {
  margin-top: 0.8rem;
  color: var(--color-video-green-light) !important;
  font-size: 0.88rem !important;
}

/* Reusable pre-interaction disclosure pattern for public AI agent cards. */
.aria-bento-card {
  isolation: isolate;
}

.aria-bento-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.aria-bento-mark,
.aria-disclosure-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid rgba(216, 242, 221, 0.72);
  border-radius: 0.45rem;
  background: rgba(216, 242, 221, 0.1);
  color: #e6f8e9;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0;
}

.aria-transparency-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  max-width: 72ch;
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(216, 242, 221, 0.38);
  border-radius: 0.8rem;
  background: rgba(4, 12, 22, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.aria-transparency-notice p {
  margin: 0 !important;
  color: #e6edf0 !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
}

.aria-transparency-notice strong {
  color: #f5fbf6;
}

.aria-stack {
  position: relative;
  display: grid;
  gap: 0.65rem;
  align-self: stretch;
  align-content: center;
  padding: 1rem 1rem 1rem 1.8rem;
  border-left: 1px solid rgba(159, 198, 170, 0.25);
}

.aria-stack::before {
  content: '';
  position: absolute;
  top: 1.15rem;
  bottom: 1.15rem;
  left: 0.72rem;
  width: 1px;
  background: linear-gradient(180deg, var(--color-bronze-light), rgba(159, 198, 170, 0.25), var(--color-video-green-light));
  transform-origin: top center;
  animation: ariaStackTrace 4.8s ease-in-out infinite;
}

.aria-stack::after {
  content: '';
  position: absolute;
  top: 1.15rem;
  left: 0.5rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #d8f2dd;
  box-shadow: 0 0 0 4px rgba(159, 198, 170, 0.12), 0 0 18px rgba(159, 198, 170, 0.85);
  animation: ariaSignalTravel 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.aria-stack span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(197, 155, 122, 0.24);
  border-radius: 10px;
  background: rgba(8, 14, 25, 0.3);
  color: var(--color-silver);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: ariaStackPulse 4.8s ease-in-out infinite;
}

.aria-stack span:nth-child(1) { animation-delay: 0s; }
.aria-stack span:nth-child(2) { animation-delay: 0.8s; }
.aria-stack span:nth-child(3) { animation-delay: 1.6s; }
.aria-stack span:nth-child(4) { animation-delay: 2.4s; }
.aria-stack span:nth-child(5) { animation-delay: 3.2s; }

.aria-stack span::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.65rem;
  border-radius: 50%;
  background: var(--color-video-green-light);
  box-shadow: 0 0 12px rgba(159, 198, 170, 0.65);
}

@keyframes ariaStackPulse {
  0%, 100% { border-color: rgba(197, 155, 122, 0.24); box-shadow: none; transform: translateX(0); }
  10%, 24% { border-color: rgba(159, 198, 170, 0.72); box-shadow: 0 0 20px rgba(159, 198, 170, 0.12); transform: translateX(0.2rem); }
  34% { border-color: rgba(197, 155, 122, 0.24); box-shadow: none; transform: translateX(0); }
}

@keyframes ariaStackTrace {
  0%, 100% { opacity: 0.42; transform: scaleY(0.72); }
  50% { opacity: 0.95; transform: scaleY(1); }
}

@keyframes ariaSignalTravel {
  0% { top: 1.15rem; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 1.6rem); opacity: 0; }
}

.hero-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.35rem;
}

.hero-proof span {
  padding: 0.38rem 0.65rem;
  border: 1px solid rgba(159, 198, 170, 0.3);
  border-radius: 999px;
  background: rgba(7, 17, 27, 0.28);
  color: #c7d8ce;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}

.hero-video-full {
  flex: 1 1 50%;
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-video-full .hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .hero-layout {
    flex-direction: column;
  }

  .homepage-ai-orientation,
  .scan-hero,
  .scan-plain-english {
    grid-template-columns: 1fr;
  }

  .homepage-ai-orientation {
    gap: 1.5rem;
    margin: 3rem 0;
  }

  .orientation-signals,
  .scan-plain-grid {
    grid-template-columns: 1fr;
  }

  .orientation-signals article,
  .scan-plain-grid article {
    min-height: 0;
  }

  .orientation-signals span,
  .scan-plain-grid span {
    margin-bottom: 1.25rem;
  }

  .transparency-bridge-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 3rem;
  }

  .transparency-bridge-action {
    width: 100%;
    justify-items: start;
    text-align: left;
  }

  .article-50-orbit {
    width: 7rem;
    height: 7rem;
  }

  .scan-hero {
    min-height: auto;
    padding: 3.5rem 0;
  }

  .scan-hero h1 {
    max-width: 16ch;
    font-size: clamp(2.45rem, 11vw, 3.9rem);
    line-height: 1.04;
  }

  .scan-hero-visual {
    margin-top: 1rem;
  }

  .scan-hero-intake .scan-intake-form {
    grid-template-columns: 1fr;
  }

  .scan-hero-intake .scan-intake-form .btn-primary {
    width: 100%;
  }

  .scan-article-badge {
    width: 12rem;
  }

  .scan-hero-path {
    flex-wrap: wrap;
    justify-content: center;
  }

  .scan-plain-english {
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .scan-plain-grid article {
    border-top: 1px solid rgba(197, 155, 122, 0.22);
    border-left: 0;
  }

  .scan-checks-card {
    margin-top: 2.5rem;
  }

  .aria-showcase {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .aria-proof-card {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .aria-showcase h2 {
    max-width: none;
  }

  .aria-transparency-notice {
    margin-top: 1rem;
  }

  .aria-stack {
    border-top: 1px solid rgba(159, 198, 170, 0.25);
    border-left: 0;
    padding: 1.25rem 0 0 1.8rem;
  }

  .hero-video-full {
    min-height: 280px;
  }

  .homepage-hero h1 {
    max-width: 14ch;
    font-size: clamp(2.35rem, 11vw, 3.6rem);
  }

  .homepage-hero .hero-content {
    padding-bottom: 0;
  }
}

/* G. Warm Earth Complementary Theme */
.bento-card.warm-theme {
  background: var(--color-warm-bg);
  border-color: var(--color-warm-border);
}

.bento-card.warm-theme:hover {
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.1);
}

.bento-card.warm-theme .icon {
  stroke: var(--color-warm-accent);
}

.bento-card.warm-theme h3,
.bento-card.warm-theme h4 {
  color: var(--color-silver);
}

.bento-card.warm-theme p {
  color: var(--color-warm-text);
}

/* F. Hermes Outbound Gateway */
.bento-card.outbound-theme {
  background:
    radial-gradient(circle at 91% 91%, rgba(46, 166, 115, 0.34) 0%, rgba(31, 107, 78, 0.16) 26%, transparent 58%),
    linear-gradient(135deg, rgba(17, 23, 39, 0.96) 0%, rgba(19, 31, 42, 0.9) 58%, rgba(23, 49, 45, 0.86) 100%);
  border: 1px solid var(--color-video-green-border);
  box-shadow: inset 0 1px 0 rgba(213, 180, 139, 0.16), 0 18px 48px rgba(0, 0, 0, 0.24);
  position: relative;
  isolation: isolate;
}

.bento-card.outbound-theme::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-card) - 1px);
  pointer-events: none;
  background: linear-gradient(135deg, rgba(197, 155, 122, 0.1), transparent 28%, transparent 72%, rgba(111, 159, 131, 0.11));
  mix-blend-mode: screen;
  z-index: -1;
}

.bento-card.outbound-theme:hover {
  border-color: rgba(159, 198, 170, 0.58);
  box-shadow: inset 0 1px 0 rgba(213, 180, 139, 0.2), 0 18px 52px rgba(44, 137, 96, 0.18);
  transform: translateY(-4px);
}

/* ---------- SERVICES PAGE: OFFER ARCHITECTURE ---------- */
.services-page,
.health-check-page,
.design-page,
.visibility-page,
.transparency-page,
.compliance-page,
.about-page {
  position: relative;
  isolation: isolate;
}

.services-page::before,
.services-page::after,
.health-check-page::before,
.health-check-page::after,
.design-page::before,
.design-page::after,
.visibility-page::before,
.visibility-page::after,
.transparency-page::before,
.transparency-page::after,
.compliance-page::before,
.compliance-page::after,
.about-page::before,
.about-page::after {
  position: fixed;
  z-index: -2;
  inset: 0;
  content: '';
  pointer-events: none;
}

.services-page::before,
.health-check-page::before,
.design-page::before,
.visibility-page::before,
.transparency-page::before,
.compliance-page::before,
.about-page::before {
  background: var(--page-wallpaper-image) center / cover no-repeat;
  filter: blur(3px) saturate(0.68);
  opacity: 0.22;
  transform: translate3d(0, var(--page-wallpaper-y, 0px), 0) scale(1.04);
  will-change: transform;
}

.services-page::after,
.health-check-page::after,
.design-page::after,
.visibility-page::after,
.transparency-page::after,
.compliance-page::after,
.about-page::after {
  z-index: -1;
  background: rgba(7, 12, 27, 0.72);
}

.services-page { --page-wallpaper-image: url('../assets/services-overview-web.jpg'); --page-parallax-distance: -180px; }
.health-check-page { --page-wallpaper-image: url('../assets/ai-business-audit-web.jpg'); --page-parallax-distance: -120px; }
.design-page { --page-wallpaper-image: url('../assets/digital-products-web.jpg'); --page-parallax-distance: -220px; }
.visibility-page { --page-wallpaper-image: url('../assets/seo-geo-web.jpg'); --page-parallax-distance: -150px; }
.transparency-page { --page-wallpaper-image: url('../assets/responsible-ai-web.jpg'); --page-parallax-distance: -125px; }
.compliance-page { --page-wallpaper-image: url('../assets/compliance-check-web.jpg'); --page-parallax-distance: -105px; }
.about-page { --page-wallpaper-image: url('../assets/spare-wall-web.jpg'); --page-parallax-distance: -140px; }

.services-page::before { opacity: 0.34; }
.services-page::after { background: rgba(7, 12, 27, 0.68); }

.services-page .page-intro {
  max-width: 960px;
}

.services-page .page-intro h1 {
  max-width: 17ch;
}

.services-intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.services-grid {
  grid-auto-rows: auto;
}

.bento-card.services-journey-card {
  position: relative;
  min-height: 0;
  isolation: isolate;
  overflow: hidden;
  background: rgba(10, 15, 29, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(0.78);
  backdrop-filter: blur(16px) saturate(0.78);
}

.services-journey-top {
  position: relative;
  z-index: 1;
  display: block;
}

.services-journey-card::before,
.service-page-feature::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 15, 33, 0.91) 0%, rgba(11, 15, 33, 0.76) 46%, rgba(11, 15, 33, 0.66) 100%), linear-gradient(180deg, rgba(11, 15, 33, 0.36), rgba(11, 15, 33, 0.88));
  -webkit-backdrop-filter: blur(5px) saturate(0.72);
  backdrop-filter: blur(5px) saturate(0.72);
}

.services-group {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.services-group-heading {
  max-width: 62ch;
  padding: 0.4rem 0.25rem 0;
}

.services-group-heading h2 {
  margin: 0.35rem 0 0.55rem;
  color: var(--color-bronze-light);
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
}

.services-group-heading p:last-child {
  margin: 0;
  color: var(--color-steel-grey);
}

.services-offer-grid {
  display: grid;
  gap: var(--grid-gap-desktop);
}

.services-offer-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.services-offer-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-offer-card {
  min-height: 0;
  gap: 1.3rem;
  overflow: hidden;
}

.service-offer-card .service-offer-copy {
  flex: 1;
}

.service-offer-card h3 {
  margin: 0.28rem 0 0.72rem;
  color: var(--color-silver);
  font-family: var(--font-headline);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.12;
}

.service-offer-card .card-detail {
  margin-top: 0.8rem;
  font-size: 0.84rem;
  color: var(--color-warm-text);
}

.service-offer-card > .btn-primary {
  align-self: flex-start;
}

.service-offer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.service-text-link {
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.service-text-link:hover,
.service-text-link:focus-visible {
  color: var(--color-silver);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

/* These are deliberate visual placeholders until the commissioned artwork arrives.
   Each panel can later receive a .service-art-image without changing the layout. */
.service-art {
  position: relative;
  min-height: 154px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(159, 198, 170, 0.16);
  border-radius: calc(var(--radius-card) - 4px);
  background-color: #101827;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.16);
}

.service-art::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: '';
  opacity: 0.82;
  background-image: linear-gradient(rgba(159, 198, 170, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(159, 198, 170, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(135deg, #000, transparent 78%);
}

.service-art::after {
  position: absolute;
  inset: -35%;
  z-index: -1;
  content: '';
  background: radial-gradient(circle at 24% 22%, rgba(159, 198, 170, 0.25), transparent 26%), radial-gradient(circle at 78% 82%, rgba(197, 155, 122, 0.22), transparent 28%);
  transform: rotate(-10deg);
}

.service-art-caption {
  position: absolute;
  right: 1rem;
  bottom: 0.85rem;
  color: rgba(226, 232, 240, 0.64);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.service-art-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 154px;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  filter: saturate(0.88) contrast(0.98);
}

.service-art-image + .service-art-caption {
  z-index: 2;
  padding: 0.22rem 0.45rem;
  border: 1px solid rgba(159, 198, 170, 0.2);
  border-radius: 999px;
  background: rgba(11, 15, 33, 0.6);
  backdrop-filter: blur(8px);
}

.service-art-disclosure,
.service-page-feature-disclosure,
.ai-image-disclosure {
  position: absolute;
  z-index: 3;
  display: inline-block;
  padding: 0.25rem 0.42rem;
  border: 1px solid rgba(226, 232, 240, 0.25);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.78);
  background: rgba(9, 17, 29, 0.72);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-art-disclosure {
  top: 0.75rem;
  right: 0.75rem;
}

.ai-image-disclosure {
  top: 0.8rem;
  left: 0.8rem;
}

.service-art-core,
.service-art-human-gate,
.service-art-ai-core,
.service-art-hermes-core,
.service-art-node,
.service-art-screen,
.service-art-window,
.service-art-search-ring,
.service-art-boundary,
.service-art-orbit,
.service-art-hermes-orbit,
.service-art-line,
.service-art-route,
.service-art-gate,
.service-art-signal,
.service-art-gridline {
  position: absolute;
  display: block;
}

.service-art-core,
.service-art-human-gate,
.service-art-ai-core,
.service-art-hermes-core {
  display: grid;
  place-items: center;
  border: 1px solid rgba(197, 155, 122, 0.64);
  border-radius: 50%;
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  box-shadow: 0 0 30px rgba(197, 155, 122, 0.15), inset 0 0 18px rgba(159, 198, 170, 0.1);
}

.service-art-core { top: 48px; left: 50%; width: 64px; height: 64px; transform: translateX(-50%); background: rgba(17, 35, 39, 0.74); }
.service-art-orbit { top: 28px; left: 50%; width: 110px; height: 104px; border: 1px solid rgba(159, 198, 170, 0.34); border-radius: 50%; transform: translateX(-50%) rotate(18deg); }
.service-art-orbit-two { width: 160px; height: 70px; border-color: rgba(197, 155, 122, 0.34); transform: translateX(-50%) rotate(-28deg); }

.service-art-window { top: 30px; left: 13%; width: 74%; height: 88px; border: 1px solid rgba(159, 198, 170, 0.34); border-radius: 12px; background: linear-gradient(135deg, rgba(111, 159, 131, 0.18), rgba(17, 23, 39, 0.36)); transform: perspective(240px) rotateX(5deg) rotateY(-12deg); }
.service-art-line { left: 24%; height: 2px; border-radius: 2px; background: var(--color-bronze-light); box-shadow: 0 0 12px rgba(197, 155, 122, 0.48); transform: rotate(-8deg); }
.service-art-line-one { top: 68px; width: 42%; }
.service-art-line-two { top: 88px; width: 28%; background: var(--color-video-green-light); }

.service-art-screen { border: 1px solid rgba(159, 198, 170, 0.46); border-radius: 8px; background: linear-gradient(135deg, rgba(111, 159, 131, 0.26), rgba(17, 23, 39, 0.74)); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2); }
.service-art-screen-one { top: 30px; left: 17%; width: 52%; height: 88px; transform: rotate(-7deg); }
.service-art-screen-two { top: 48px; right: 15%; width: 28%; height: 70px; border-color: rgba(197, 155, 122, 0.5); transform: rotate(8deg); }
.service-art-gridline { top: 76px; left: 27%; width: 38%; height: 1px; background: var(--color-bronze-light); box-shadow: 0 14px 0 rgba(159, 198, 170, 0.7), 0 28px 0 rgba(159, 198, 170, 0.34); transform: rotate(-7deg); }

.service-art-node { z-index: 1; width: 34px; height: 34px; border: 1px solid rgba(159, 198, 170, 0.52); border-radius: 50%; color: var(--color-video-green-light); font-family: var(--font-mono); font-size: 0.72rem; line-height: 32px; text-align: center; background: rgba(17, 35, 39, 0.88); }
.service-art-node-one { top: 38px; left: 12%; }
.service-art-node-two { top: 88px; left: 44%; border-color: rgba(197, 155, 122, 0.66); color: var(--color-bronze-light); }
.service-art-node-three { top: 32px; right: 12%; }
.service-art-route { top: 55px; left: 20%; width: 60%; height: 50px; border-top: 1px solid rgba(159, 198, 170, 0.58); border-bottom: 1px solid rgba(159, 198, 170, 0.2); transform: skewY(18deg); }
.service-art-gate { top: 74px; left: 49%; width: 2px; height: 38px; background: var(--color-bronze-light); box-shadow: 0 0 16px rgba(197, 155, 122, 0.65); }

.service-art-search-ring { top: 30px; left: 21%; width: 102px; height: 102px; border: 1px solid rgba(159, 198, 170, 0.58); border-radius: 50%; box-shadow: 0 0 0 14px rgba(159, 198, 170, 0.05), 0 0 0 28px rgba(197, 155, 122, 0.04); }
.service-art-search-ring::after { position: absolute; right: -25px; bottom: -16px; width: 44px; height: 2px; content: ''; background: var(--color-bronze-light); transform: rotate(45deg); box-shadow: 0 0 14px rgba(197, 155, 122, 0.55); }
.service-art-signal { right: 18%; width: 20%; height: 3px; border-radius: 3px; background: var(--color-video-green-light); box-shadow: 0 0 12px rgba(159, 198, 170, 0.5); }
.service-art-signal-one { top: 50px; }
.service-art-signal-two { top: 75px; width: 30%; background: var(--color-bronze-light); }
.service-art-signal-three { top: 100px; width: 24%; }

.service-art-boundary { top: 28px; left: 23%; width: 54%; height: 98px; border: 1px solid rgba(159, 198, 170, 0.48); border-radius: 18px; background: linear-gradient(90deg, rgba(111, 159, 131, 0.16), transparent 48%, rgba(197, 155, 122, 0.13)); transform: perspective(240px) rotateY(-18deg); }
.service-art-human-gate { top: 62px; left: 24%; width: 48px; height: 48px; color: var(--color-bronze-light); background: rgba(33, 27, 24, 0.76); }
.service-art-ai-core { top: 58px; right: 22%; width: 56px; height: 56px; border-color: rgba(159, 198, 170, 0.58); color: var(--color-video-green-light); background: rgba(17, 35, 39, 0.8); }

.service-art-hermes { background: linear-gradient(135deg, rgba(17, 23, 39, 0.98), rgba(24, 55, 48, 0.9)); border-color: rgba(159, 198, 170, 0.28); }
.service-art-hermes-core { top: 44px; left: 50%; width: 70px; height: 70px; transform: translateX(-50%); color: #d7e2e7; border-color: rgba(159, 198, 170, 0.58); background: rgba(20, 49, 43, 0.7); font-family: var(--font-headline); font-size: 1.65rem; }
.service-art-hermes-orbit { top: 27px; left: 50%; width: 160px; height: 104px; border: 1px solid rgba(159, 198, 170, 0.38); border-radius: 50%; transform: translateX(-50%) rotate(20deg); }
.service-art-hermes-orbit-two { width: 110px; height: 145px; border-color: rgba(197, 155, 122, 0.35); transform: translateX(-50%) rotate(-26deg); }

.services-audience-card,
.services-skills-card {
  min-height: 0;
  gap: 1.35rem;
}

.services-audience-card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.services-audience-card h2,
.services-skills-card h2 {
  margin: 0.35rem 0 0.55rem;
}

.services-audience-card p:last-child,
.services-skills-copy p:last-child {
  max-width: 62ch;
  margin-bottom: 0;
}

.services-skills-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr) auto;
  align-items: center;
}

.services-skill-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.services-skill-list span {
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(159, 198, 170, 0.24);
  border-radius: 999px;
  color: var(--color-video-green-light);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.services-principle-card {
  min-height: 0;
}

/* ---------- SERVICE-PAGE FEATURE ARTWORK ---------- */
.service-page-feature {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.service-page-feature-copy {
  position: relative;
  z-index: 2;
  max-width: 58ch;
  min-height: 300px;
  padding: clamp(0.5rem, 2vw, 1rem) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-page-feature-copy h2 {
  margin: 0.35rem 0 0.7rem;
}

.service-page-feature-copy p:last-child {
  margin-bottom: 0;
}

.service-page-feature-image {
  position: absolute;
  z-index: -2;
  inset: -8% -4%;
  display: block;
  width: 108%;
  height: 116%;
  max-height: none;
  object-fit: cover;
  opacity: 0.25;
  filter: saturate(0.82) contrast(0.94);
  will-change: transform;
  transform: translate3d(0, var(--service-parallax, 0px), 0) scale(1.07);
  transition: transform 120ms linear;
}

.service-page-feature-image--contain {
  object-fit: cover;
}

.service-page-feature-disclosure {
  right: 1rem;
  bottom: 1rem;
}

.hermes-reference-image {
  display: block;
  width: min(100%, 560px);
  margin: 1.25rem auto 0;
  border: 1px solid rgba(159, 198, 170, 0.24);
  border-radius: calc(var(--radius-card) - 4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

@media (max-width: 980px) {
  .services-offer-grid-three,
  .services-skills-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-skills-copy {
    grid-column: 1 / -1;
  }

  .services-skill-list {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .services-intro-actions,
  .services-intro-actions .btn-primary,
  .services-audience-card,
  .services-audience-card .btn-primary,
  .services-offer-grid-two,
  .services-offer-grid-three,
  .services-skills-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .services-intro-actions .btn-primary,
  .services-audience-card .btn-primary,
  .service-offer-card > .btn-primary {
    width: 100%;
    text-align: center;
  }

  .services-audience-card {
    gap: 1.25rem;
  }

  .services-skill-list {
    justify-content: flex-start;
  }

  .service-art {
    min-height: 138px;
  }

  .service-art-image {
    min-height: 138px;
  }

  /* Keep feature artwork atmospheric but static on smaller screens. */
  .service-page-feature-image {
    will-change: auto;
    inset: -8% 0;
    width: 100%;
    transform: scale(1.04);
    transition: none;
  }

  .service-page-feature {
    min-height: 330px;
  }

  .service-page-feature-image {
    max-height: none;
  }
}

/* ---------- SHARED SECONDARY-SURFACE TYPOGRAPHY ---------- */
/*
   Primary page headlines retain their brighter hierarchy. Headings inside
   panels use the quieter hero steel-blue so dense pages do not become walls
   of white.
*/
.bento-card h2,
.bento-card h3,
.bento-card h4,
.workflow-step strong,
.orientation-signals strong,
.scan-plain-grid strong,
.transparency-result-grid strong,
.quiz-option-copy strong,
.homepage-path-card strong {
  color: var(--color-panel-heading) !important;
}

.bento-card.outbound-theme h3,
.bento-card.outbound-theme p {
  color: var(--color-silver);
  font-weight: 400;
}

.bento-card.outbound-theme .btn-primary {
  background: rgba(8, 14, 31, 0.88);
  border: 1px solid rgba(197, 155, 122, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--color-bronze-light);
}

/* ---------- BUTTONS ---------- */
.btn-primary {
  display: inline-block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0.9rem 1.5rem;
  background: linear-gradient(135deg, rgba(40, 126, 92, 0.44), rgba(15, 66, 51, 0.62) 52%, rgba(18, 35, 43, 0.7));
  color: #dff3e7;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid rgba(129, 214, 170, 0.44);
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  text-align: center;
  min-height: 48px;
  line-height: 1.2;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(225, 255, 237, 0.18), inset 0 -8px 16px rgba(4, 27, 20, 0.2), 0 8px 22px rgba(0, 0, 0, 0.24);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 7px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%);
  opacity: 0.72;
  z-index: -1;
}

.btn-primary::after {
  display: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: linear-gradient(135deg, rgba(49, 150, 107, 0.56), rgba(18, 80, 61, 0.7) 52%, rgba(20, 43, 49, 0.76));
  color: #edfff3;
  border-color: rgba(153, 232, 187, 0.7);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(47, 112, 84, 0.2), inset 0 1px 0 rgba(231, 239, 246, 0.14);
  outline: 1px solid rgba(159, 198, 170, 0.36);
  outline-offset: 2px;
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary.btn-bronze {
  background: linear-gradient(135deg, rgba(185, 111, 46, 0.46), rgba(102, 52, 22, 0.64) 52%, rgba(42, 31, 35, 0.72));
  color: #f0d3ab;
  border-color: rgba(234, 170, 98, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 238, 212, 0.2), inset 0 -8px 16px rgba(38, 18, 8, 0.2), 0 8px 22px rgba(0, 0, 0, 0.24);
}

.btn-primary.btn-bronze:hover,
.btn-primary.btn-bronze:focus-visible {
  background: linear-gradient(135deg, rgba(211, 131, 57, 0.56), rgba(123, 64, 25, 0.7) 52%, rgba(51, 35, 37, 0.76));
  color: #ffe2b9;
  border-color: rgba(247, 190, 113, 0.76);
  box-shadow: 0 10px 24px rgba(143, 89, 42, 0.18), inset 0 1px 0 rgba(255, 240, 216, 0.26);
  outline: 1px solid rgba(234, 170, 98, 0.28);
}

/* Homepage CTAs: two restrained jewel-glass choices beneath the metal hero. */
.btn-primary.home-health-cta {
  display: inline-flex;
  position: relative;
  min-width: min(100%, 25rem);
  min-height: 6.8rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.15rem 2rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(184, 74, 96, 0.58);
  border-radius: 1.15rem;
  background:
    linear-gradient(135deg, rgba(91, 18, 35, 0.72), rgba(56, 10, 25, 0.82) 52%, rgba(27, 12, 28, 0.86));
  color: rgba(245, 215, 202, 0.96);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 218, 222, 0.12),
    inset 0 -12px 22px rgba(27, 6, 16, 0.26),
    inset 0 0 0 1px rgba(255, 207, 205, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.24);
  text-shadow: 0 1px 2px rgba(25, 5, 13, 0.44);
  filter: none;
}

.home-health-cta::before {
  content: '';
  position: absolute;
  inset: -70% -55%;
  z-index: 0;
  border-radius: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 24% 78% at 50% 50%, rgba(255, 225, 215, 0.08), transparent 72%),
    linear-gradient(116deg, transparent 35%, rgba(255, 242, 239, 0.018) 43%, rgba(255, 242, 239, 0.08) 50%, rgba(255, 242, 239, 0.02) 57%, transparent 65%);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 223, 0.055),
    inset 0 -1px 0 rgba(26, 14, 14, 0.3);
  mix-blend-mode: screen;
  transform: translate3d(-58%, 0, 0);
  animation: homeHealthGlassSweep 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.home-health-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.1;
  background: radial-gradient(circle at 42% 28%, rgba(255, 191, 190, 0.1), transparent 54%);
  mix-blend-mode: screen;
}

.home-health-cta-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-headline);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 650;
  letter-spacing: 0.008em;
  text-transform: none;
  background-image: linear-gradient(
    90deg,
    #b7797e 0%,
    #c99194 22%,
    #dfaaa6 45%,
    #efc3b8 72%,
    #ffe0d0 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-heading-metal);
  opacity: 1;
  mix-blend-mode: normal;
  text-shadow: 0 1px 0 rgba(255, 242, 235, 0.16), 0 -1px 1px rgba(31, 6, 16, 0.42);
}

.btn-primary.home-health-cta:hover,
.btn-primary.home-health-cta:focus-visible {
  color: rgba(255, 231, 219, 0.94);
  border-color: rgba(238, 151, 157, 0.64);
  background:
    linear-gradient(135deg, rgba(112, 23, 43, 0.78), rgba(65, 11, 29, 0.86) 52%, rgba(30, 12, 32, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 235, 0.28),
    inset 0 -12px 22px rgba(27, 6, 16, 0.22),
    0 12px 30px rgba(0, 0, 0, 0.28);
  outline: none;
}

@keyframes homeHealthGlassSweep {
  0%, 18% { transform: translate3d(-74%, 0, 0); opacity: 0; }
  38% { transform: translate3d(-18%, 0, 0); opacity: 0.06; }
  58% { transform: translate3d(36%, 0, 0); opacity: 0.08; }
  78%, 100% { transform: translate3d(76%, 0, 0); opacity: 0; }
}

.home-health-cta:active {
  transform: translateY(1px) scale(0.995);
  box-shadow:
    inset 0 2px 4px rgba(16, 8, 8, 0.42),
    inset 0 -1px 0 rgba(255, 225, 202, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

/* Emerald companion jewel. */
.btn-primary.home-compliance-cta {
  display: inline-flex;
  position: relative;
  min-width: min(100%, 25rem);
  min-height: 6.8rem;
  align-items: center;
  justify-content: center;
  padding: 1.15rem 2rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(129, 214, 170, 0.38) !important;
  border-radius: 1.15rem;
  background: linear-gradient(135deg, rgba(32, 96, 72, 0.3), rgba(17, 57, 46, 0.46) 52%, rgba(17, 31, 39, 0.56)) !important;
  color: rgba(211, 243, 224, 0.92) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(224, 255, 238, 0.12),
    inset 0 -12px 22px rgba(4, 26, 20, 0.28),
    inset 0 0 0 1px rgba(196, 255, 220, 0.045),
    0 12px 28px rgba(0, 0, 0, 0.24);
  filter: none;
}

.home-compliance-cta::before {
  content: '';
  position: absolute;
  inset: -70% -55%;
  z-index: 0;
  border-radius: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 24% 78% at 50% 50%, rgba(204, 255, 225, 0.08), transparent 72%),
    linear-gradient(116deg, transparent 35%, rgba(229, 255, 240, 0.018) 43%, rgba(229, 255, 240, 0.08) 50%, rgba(229, 255, 240, 0.02) 57%, transparent 65%);
  box-shadow:
    inset 0 1px 0 rgba(229, 255, 238, 0.05),
    inset 0 -1px 0 rgba(7, 22, 19, 0.3);
  mix-blend-mode: screen;
  transform: translate3d(-58%, 0, 0);
  animation: homeComplianceGlassSweep 8.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.home-compliance-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.1;
  background: radial-gradient(circle at 42% 28%, rgba(185, 255, 211, 0.08), transparent 54%);
  mix-blend-mode: screen;
}

.home-compliance-cta-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-headline);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 650;
  letter-spacing: 0.008em;
  text-transform: none;
  background-image: linear-gradient(
    90deg,
    #594538 0%,
    #755C4D 22%,
    #A18777 45%,
    #C9AF9E 72%,
    #E9D3C5 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-heading-metal);
  opacity: 1;
  mix-blend-mode: normal;
  text-shadow: 0 1px 0 rgba(232, 255, 241, 0.16), 0 -1px 1px rgba(4, 26, 20, 0.42);
}

.btn-primary.home-compliance-cta:hover,
.btn-primary.home-compliance-cta:focus-visible {
  border-color: rgba(153, 232, 187, 0.64) !important;
  background: linear-gradient(135deg, rgba(47, 145, 104, 0.54), rgba(20, 76, 59, 0.68) 52%, rgba(20, 42, 47, 0.72)) !important;
  color: rgba(224, 248, 232, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(235, 255, 243, 0.28),
    inset 0 -12px 22px rgba(4, 26, 20, 0.22),
    0 12px 30px rgba(0, 0, 0, 0.28);
  outline: none;
}

@keyframes homeComplianceGlassSweep {
  0%, 18% { transform: translate3d(-74%, 0, 0); opacity: 0; }
  38% { transform: translate3d(-18%, 0, 0); opacity: 0.07; }
  58% { transform: translate3d(36%, 0, 0); opacity: 0.09; }
  78%, 100% { transform: translate3d(76%, 0, 0); opacity: 0; }
}

@media (max-width: 768px) {
  .home-health-cta,
  .home-compliance-cta {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-health-cta::before,
  .home-compliance-cta::before {
    animation: none;
  }
}

.btn-secondary {
  background: linear-gradient(135deg, rgba(59, 91, 159, 0.44), rgba(30, 50, 105, 0.64) 52%, rgba(24, 31, 53, 0.72)) !important;
  color: #cbd8f2 !important;
  border: 1px solid rgba(142, 174, 235, 0.46) !important;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: linear-gradient(135deg, rgba(76, 114, 194, 0.54), rgba(38, 64, 133, 0.7) 52%, rgba(28, 39, 67, 0.76)) !important;
  color: #e1e9ff !important;
  border-color: rgba(171, 198, 250, 0.7) !important;
}

/* ---------- VIDEO PALETTE ACCENTS ----------
   Emerald is reserved for interaction, diagnostics and the outbound gateway;
   brass remains the primary brand and CTA language. */
.bento-card.outbound-theme {
  background:
    radial-gradient(circle at 91% 91%, rgba(46, 166, 115, 0.34) 0%, rgba(31, 107, 78, 0.16) 26%, transparent 58%),
    linear-gradient(135deg, rgba(17, 23, 39, 0.96) 0%, rgba(19, 31, 42, 0.9) 58%, rgba(23, 49, 45, 0.86) 100%);
  border-color: var(--color-video-green-border);
  box-shadow: inset 0 1px 0 rgba(213, 180, 139, 0.16), 0 18px 48px rgba(0, 0, 0, 0.24);
}

.bento-card.outbound-theme:hover {
  box-shadow: inset 0 1px 0 rgba(213, 180, 139, 0.2), 0 18px 52px rgba(44, 137, 96, 0.18);
}

.bento-card.outbound-theme .btn-primary {
  color: var(--color-bronze-light);
}

.quiz-option:hover,
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-video-green);
}

.quiz-option input[type="radio"] {
  accent-color: var(--color-video-green);
}

.results-item-value,
.pricing-card h3 {
  color: var(--color-video-green-light);
}

.pricing-card {
  background: linear-gradient(135deg, rgba(24, 32, 50, 0.72), rgba(20, 44, 43, 0.42));
  border-color: var(--color-video-green-border);
}

.footer a,
.cookie-btn:hover,
.cookie-btn:focus-visible {
  color: var(--color-bronze-light);
}

.cookie-btn:hover,
.cookie-btn:focus-visible {
  border-color: var(--color-video-green);
}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--grid-gap-tablet);
  }

  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 3; }
  .span-6 { grid-column: span 3; }
  .span-8 { grid-column: span 3; }
  .span-12 { grid-column: 1 / -1; }
}

@media (max-width: 1120px) {
  /* In the collapsed navigation, make the crest and wordmark one centred
     brand lockup while keeping the menu control anchored at the right. */
  :root {
    /* Keep the original one-piece header; the name stays beneath the crest
       but above the existing full-width lower edge. */
    --header-height: 118px;
  }

  .header {
    justify-content: flex-end;
    position: sticky;
    isolation: isolate;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .header .logo,
  .header nav {
    z-index: 2;
  }

  /* The travelling lights are always behind the crest and both header
     controls. They may be seen only in the open space around the controls. */
  .ai-talker {
    z-index: 1101;
  }

  /* Two momentary arrival pulses: they leave the crest once, travel to the
     two controls, then disappear completely. They are intentionally not
     lines, dividers, or a looping treatment. */
  .header::before,
  .header::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: calc((var(--header-height) - 1.22rem) / 2 - 0.4rem);
    width: 1.22rem;
    height: 1.22rem;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle,
      rgba(255, 241, 205, 0.78) 0%,
      rgba(238, 195, 126, 0.58) 13%,
      rgba(222, 175, 123, 0.22) 33%,
      rgba(222, 175, 123, 0.06) 49%,
      transparent 72%);
    filter: drop-shadow(0 0 0.24rem rgba(240, 207, 152, 0.38));
    will-change: left, right, opacity, transform;
  }

  .header::before {
    left: calc(50% - 0.61rem);
    animation: headerCrestPulseToAi 900ms cubic-bezier(0.25, 0.8, 0.25, 1) 80ms both;
  }

  .header::after {
    right: calc(50% - 0.61rem);
    animation: headerCrestPulseToMenu 900ms cubic-bezier(0.25, 0.8, 0.25, 1) 80ms both;
  }

  .header .logo {
    position: absolute;
    left: 50%;
    top: calc(50% - 7px);
    transform: translate(-50%, calc(-50% + 35px));
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
  }

  .header .logo-img {
    width: calc(4.25rem + 10px);
    height: calc(4.25rem + 10px);
    scale: 1.12;
    position: relative;
    top: -10px;
  }

  .header .logo-img {
    visibility: visible;
  }

  .header .logo::before {
    content: none;
    display: none;
  }

  .header .logo::after {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding-top: 0;
    border-top: 0;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-align: center;
    white-space: normal;
    top: 5px;
    padding: 0.22rem 0.7rem 0.28rem;
    border: 1px solid rgba(119, 148, 181, 0.28);
    border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(211, 225, 240, 0.08), 0 5px 18px rgba(1, 6, 16, 0.28);
    opacity: 1;
    clip-path: none;
    transform: none;
    animation:
      logoWordReveal 900ms cubic-bezier(0.22, 1, 0.36, 1) 520ms both,
      logoWordShimmer 2400ms cubic-bezier(0.4, 0, 0.2, 1) 1420ms both;
  }

  /* The old decorative pointer read as a stray arrow beside the AI control. */
  .ai-talker::before,
  .ai-talker::after {
    content: none;
    display: none;
    animation: none;
  }

  .nav-toggle span {
    background: linear-gradient(90deg, #594538 0%, #755C4D 22%, #A18777 45%, #C9AF9E 72%, #E9D3C5 100%);
    box-shadow: 0 0 8px rgba(201, 175, 158, 0.16);
  }

  .ai-talker-seal,
  .nav-toggle {
    opacity: 0;
    animation: headerControlIconReveal 280ms ease-out 780ms both;
  }

  .nav-toggle:hover span,
  .nav-toggle:focus-visible span {
    background: linear-gradient(90deg, #755C4D 0%, #A18777 38%, #C9AF9E 70%, #E9D3C5 100%);
    box-shadow: 0 0 10px rgba(233, 211, 197, 0.28);
  }

  .nav-toggle:hover,
  .nav-toggle:focus-visible {
    background: linear-gradient(135deg, rgba(167, 47, 65, 0.54), rgba(81, 19, 35, 0.68) 52%, rgba(37, 24, 40, 0.72));
    border-color: rgba(238, 151, 157, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 238, 235, 0.28), inset 0 -8px 14px rgba(27, 6, 16, 0.22), 0 0.75rem 1.55rem rgba(0, 0, 0, 0.24);
  }

  .nav-desktop {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }
}

@keyframes headerCrestPulseToAi {
  0% { left: calc(50% - 0.61rem); opacity: 0; transform: scale(0.42); }
  16% { opacity: 0.68; transform: scale(1); }
  72% { opacity: 0.5; transform: scale(0.8); }
  100% { left: calc(1.8rem + (3.5rem - 1.22rem) / 2); opacity: 0; transform: scale(0.28); }
}

@keyframes headerCrestPulseToMenu {
  0% { right: calc(50% - 0.61rem); opacity: 0; transform: scale(0.42); }
  16% { opacity: 0.68; transform: scale(1); }
  72% { opacity: 0.5; transform: scale(0.8); }
  100% { right: calc(1.5rem + (3.5rem - 1.22rem) / 2); opacity: 0; transform: scale(0.28); }
}

@keyframes headerControlIconReveal {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  58% {
    opacity: 0.62;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .page-intro {
    margin-bottom: 2.5rem;
    padding-inline: 0;
  }

  .page-intro h1,
  .page-intro .insight-detail-status-title {
    max-width: 17ch;
    font-size: clamp(2.35rem, 10vw, 3.5rem);
    line-height: 1.08;
  }

  .page-intro .subtitle {
    font-size: 1.08rem;
  }

  .about-page .mind-theme h1 {
    max-width: 16ch;
    font-size: clamp(2rem, 8.5vw, 3rem);
  }

  .nav-desktop {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap-mobile);
  }

  .span-3,
  .span-4,
  .span-6,
  .span-8 {
    grid-column: span 4;
  }

  .span-12 { grid-column: 1 / -1; }

  .results-grid {
    grid-template-columns: 1fr;
  }

  .safety-card {
    grid-template-columns: 1fr;
  }

  .safety-card-list {
    grid-template-columns: 1fr;
  }
}

/* Once the mobile navigation is active, stack bento cards before they become
   narrower than the reading width. This also prevents implicit grid tracks
   from clipping span-4 cards at small tablet/in-app-browser widths. */
@media (max-width: 600px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }

  .span-3,
  .span-4,
  .span-6,
  .span-8,
  .span-12 {
    grid-column: span 1;
  }
}

/* ---------- BENTO CARD VARIANTS ---------- */
.bento-card.gradient {
  background: var(--gradient-hermes);
  color: var(--color-obsidian);
}

.bento-card.gradient h3,
.bento-card.gradient p {
  color: var(--color-obsidian);
}

/* ---------- QUIZ STYLES ---------- */
.quiz-container {
  background: var(--color-deep-slate);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.quiz-screen {
  display: none;
  flex: 1;
  flex-direction: column;
  gap: 1.5rem;
}

.quiz-screen.active {
  display: flex;
  animation: quizScreenIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.quiz-intro-screen {
  display: none;
  flex: 1;
  flex-direction: column;
  gap: 1.25rem;
}

.quiz-intro-screen.active {
  display: flex;
}

@keyframes quizScreenIn {
  from { opacity: 0; transform: translateX(18px) scale(0.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.quiz-container-10 {
  overflow: hidden;
}

.quiz-instrument {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  min-height: 100%;
}

.quiz-rail {
  position: relative;
  padding: 0.25rem 0 0.5rem 1rem;
}

.quiz-rail::before {
  content: '';
  position: absolute;
  top: 2.4rem;
  bottom: 2.5rem;
  left: 0.2rem;
  width: 1px;
  background: linear-gradient(var(--color-bronze-light), rgba(197, 155, 122, 0.08));
}

.quiz-rail ol {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
}

.quiz-rail-step {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.45rem;
  align-items: center;
  min-height: 1.85rem;
  color: rgba(148, 163, 184, 0.48);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  transition: color 280ms ease, transform 280ms ease;
}

.quiz-rail-step::before {
  content: '';
  position: absolute;
  left: -1rem;
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid rgba(197, 155, 122, 0.45);
  border-radius: 50%;
  background: var(--color-obsidian);
  transition: background 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

.quiz-rail-step strong {
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-rail-step.is-complete,
.quiz-rail-step.is-current {
  color: var(--color-bronze-light);
}

.quiz-rail-step.is-current {
  transform: translateX(0.25rem);
}

.quiz-rail-step.is-complete::before {
  background: var(--color-video-green-light);
  border-color: var(--color-video-green-light);
}

.quiz-rail-step.is-current::before {
  background: var(--color-bronze-light);
  border-color: var(--color-bronze-light);
  box-shadow: 0 0 0 4px rgba(197, 155, 122, 0.12), 0 0 16px rgba(197, 155, 122, 0.42);
  transform: scale(1.15);
}

.quiz-rail-note {
  font-size: 0.78rem !important;
  line-height: 1.45;
}

.quiz-stage {
  min-width: 0;
}

.quiz-title {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.quiz-question {
  font-size: 1.1rem;
  color: var(--color-silver);
  margin-bottom: 1rem;
  font-weight: 500;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quiz-option {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 48px;
}

.quiz-option:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-electric-cyan);
  transform: translateX(4px);
}

.bronze-theme .quiz-option:hover {
  border-color: var(--color-bronze);
}

.quiz-option input[type="radio"] {
  margin-right: 0.75rem;
  accent-color: var(--color-electric-cyan);
  cursor: pointer;
}

.bronze-theme .quiz-option input[type="radio"] {
  accent-color: var(--color-bronze);
}

.quiz-option.is-selected {
  background: linear-gradient(90deg, rgba(79, 59, 47, 0.55), rgba(143, 106, 82, 0.16));
  border-color: var(--color-bronze-light);
  box-shadow: 0 0 0 1px rgba(197, 155, 122, 0.12), 0 8px 24px rgba(143, 106, 82, 0.1);
  transform: translateX(6px);
}

.quiz-option span:not(.quiz-option-mark) {
  display: block;
}

.quiz-option small {
  display: block;
  margin-top: 0.3rem;
  color: var(--color-steel-grey);
  font-size: 0.85em;
}

.quiz-option-mark {
  margin-left: auto;
  color: var(--color-bronze-light);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.quiz-option.is-selected .quiz-option-mark {
  opacity: 1;
  transform: scale(1);
}

.quiz-reward {
  min-height: 1.5rem;
  color: var(--color-bronze-light) !important;
  font-size: 0.9rem !important;
}

.reward-pop {
  animation: rewardPop 0.4s ease both;
}

@keyframes rewardPop {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}

.quiz-next:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.quiz-option label {
  cursor: pointer;
  color: var(--color-silver);
  flex: 1;
}

.quiz-nav {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  gap: 1rem;
}

.quiz-progress {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.quiz-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.quiz-progress-percent {
  color: var(--color-steel-grey);
}

.quiz-progress-track {
  width: 100%;
  height: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.quiz-progress-fill {
  height: 100%;
  min-width: 4%;
  background: var(--gradient-bronze-line);
  border-radius: inherit;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.quiz-progress-dot {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  transition: background var(--transition-fast);
}

.quiz-progress-dot.active {
  background: var(--gradient-hermes);
}

.bronze-theme .quiz-progress-dot.active {
  background: var(--gradient-bronze-line);
}

/* ---------- RESULTS RING ---------- */
.results-container {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.results-container.active {
  display: flex;
}

.results-overview {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  width: 100%;
}

.results-summary-copy {
  padding: 1rem 1.15rem;
  border-left: 1px solid rgba(197, 155, 122, 0.34);
  background: linear-gradient(90deg, rgba(197, 155, 122, 0.08), transparent);
}

.results-summary-copy p:last-child {
  font-size: 0.95rem;
}

.results-ring {
  position: relative;
  width: 200px;
  height: 200px;
}

.results-ring svg {
  transform: rotate(-90deg);
}

.results-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 8;
}

.results-ring-fill {
  fill: none;
  stroke: var(--color-bronze-light);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 565;
  stroke-dashoffset: 565;
  transition: stroke-dashoffset 1.5s ease;
}

.results-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.results-score-value {
  font-size: 3rem;
  font-weight: 700;
  background: var(--gradient-hermes);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.results-score-label {
  font-size: 0.85rem;
  color: var(--color-steel-grey);
  margin-top: 0.25rem;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
}

.results-item {
  text-align: left;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}

.results-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.results-item-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-electric-cyan);
}

.results-item-label {
  font-size: 0.85rem;
  color: var(--color-steel-grey);
  margin-top: 0.25rem;
}

.results-item-meter {
  height: 6px;
  margin-top: 0.8rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.results-item-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-bronze-line);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.results-item-outcome {
  margin-top: 0.75rem;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

.results-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.quiz-share-status {
  min-height: 1.25rem;
  color: var(--color-video-green-light) !important;
  font-family: var(--font-mono);
  font-size: 0.72rem !important;
  text-align: center;
}

/* ---------- PRICING CARD ---------- */
.pricing-card {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.15), rgba(79, 172, 254, 0.15));
  border: 1px solid rgba(0, 242, 254, 0.3);
}

.pricing-card h3 {
  color: var(--color-electric-cyan);
  margin-bottom: 1rem;
}

.pricing-card p {
  color: var(--color-silver);
}

/* ---------- PULSE ANIMATION ---------- */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 242, 254, 0.6);
  }
}

.pulse-glow {
  animation: pulse 3s ease-in-out infinite;
}

/* ---------- COOKIE BAR ---------- */
.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(11, 15, 25, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1.25rem clamp(1rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  transform: translateY(100%);
  transition: transform var(--transition-medium);
}

.cookie-bar.visible {
  transform: translateY(0);
}

.cookie-bar p {
  flex: 1;
  min-width: 250px;
  margin: 0;
  font-size: 0.95rem;
}

.cookie-buttons {
  display: flex;
  gap: 0.75rem;
}

.cookie-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  border: 1px solid rgba(225, 132, 137, 0.42);
  background: linear-gradient(135deg, rgba(151, 42, 57, 0.4), rgba(72, 17, 31, 0.56) 52%, rgba(31, 22, 36, 0.64));
  color: #f3d4cc;
  cursor: pointer;
  font-size: 0.95rem;
  min-height: 44px;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  backdrop-filter: blur(10px) saturate(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
  box-shadow: inset 0 1px 0 rgba(255, 231, 229, 0.16), inset 0 -6px 10px rgba(27, 6, 16, 0.16);
}

.cookie-btn:hover,
.cookie-btn:focus-visible {
  border-color: rgba(238, 151, 157, 0.68);
  color: #ffe4dc;
  transform: translateY(-1px);
}

.cookie-btn.accept {
  background: linear-gradient(135deg, rgba(40, 126, 92, 0.48), rgba(15, 66, 51, 0.66) 52%, rgba(18, 35, 43, 0.74));
  color: #e8fff0;
  border: 1px solid rgba(129, 214, 170, 0.5);
  font-weight: 600;
}

/* ---------- CONTACT FORM ---------- */
.contact-channel-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.8fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: var(--grid-gap-desktop);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid rgba(159, 198, 170, 0.24);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 90% 12%, rgba(159, 198, 170, 0.12), transparent 35%),
    linear-gradient(135deg, rgba(17, 28, 38, 0.96), rgba(17, 23, 39, 0.92));
}

.contact-channel-strip h2 {
  margin: 0.35rem 0 0.7rem;
}

.contact-channel-strip p:not(.eyebrow) {
  max-width: 62ch;
  color: #c6d4d7;
}

.contact-channel-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}

.contact-channel-list a {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(197, 155, 122, 0.3);
  border-radius: 999px;
  background: rgba(8, 14, 25, 0.3);
  color: var(--color-silver);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.contact-channel-list a:hover,
.contact-channel-list a:focus-visible {
  border-color: rgba(240, 207, 152, 0.7);
  color: #f0cf98;
}

.contact-map-link {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  margin-top: 1.75rem;
  padding: 1rem;
  border: 1px solid rgba(159, 198, 170, 0.32);
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 14%, rgba(159, 198, 170, 0.15), transparent 42%),
    rgba(8, 18, 27, 0.46);
  color: var(--color-silver);
  text-decoration: none;
}

.contact-map-link:hover,
.contact-map-link:focus-visible {
  border-color: rgba(240, 207, 152, 0.65);
  color: #f0cf98;
}

.contact-map-link strong {
  color: #d6e3df;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  line-height: 1.25;
}

.contact-map-link small {
  color: #b8c8ca;
  font-size: 0.8rem;
}

.contact-map-kicker {
  color: #d3aa83;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.08em;
}

@media (max-width: 800px) {
  .contact-channel-strip {
    grid-template-columns: 1fr;
  }

  .contact-channel-list {
    justify-content: flex-start;
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  color: var(--color-silver);
  font-weight: 500;
  font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--color-silver);
  font-family: var(--font-body);
  font-size: 1rem;
  min-height: 48px;
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-electric-cyan);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

/* ---------- PAGE INTRO ---------- */
.page-intro {
  max-width: 1040px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding-inline: clamp(0rem, 2vw, 1.5rem);
  text-align: center;
}

.page-intro h1,
.page-intro .insight-detail-status-title {
  max-width: 20ch;
  margin: 0.55rem auto 1.1rem;
  font-size: clamp(2.65rem, 5.2vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.page-intro .subtitle {
  font-size: 1.25rem;
  color: var(--color-steel-grey);
  max-width: 66ch;
  margin-inline: auto;
  line-height: 1.6;
}

/* Inner pages use a calm, centred arrival point. The homepage has its own
   split hero and should keep that more directional composition. */
.services-page .page-intro {
  max-width: 1120px;
}

.services-page .page-intro h1 {
  max-width: 19ch;
}

.services-intro-actions {
  justify-content: center;
}

/* The About page introduces the person and the proposition side by side, so
   its heading needs to be compact enough to sit comfortably in the card. */
.about-page .mind-theme h1 {
  max-width: 18ch;
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 4vw, 3.65rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* ---------- ABOUT PORTRAIT ---------- */
.about-portrait-frame {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(0.85rem, 1.8vw, 1.25rem);
  overflow: hidden;
  background: radial-gradient(circle at 50% 18%, rgba(197, 155, 122, 0.18), transparent 58%), var(--color-deep-slate);
  border-color: rgba(197, 155, 122, 0.3);
}

.about-portrait {
  display: block;
  width: min(100%, 32rem);
  max-width: 100%;
  height: auto;
  max-height: none;
  flex: 0 1 auto;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: calc(var(--radius-card) - 1px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), 0 0 28px rgba(197, 155, 122, 0.08);
  filter: saturate(0.9) contrast(1.02);
}

.founder-profile-portrait-frame .founder-hitl-panel {
  position: relative;
  z-index: 1;
  width: min(92%, 27rem);
  margin: 1rem 0 0;
  align-self: center;
}

.founder-profile-portrait-frame::after {
  display: none;
}


/* ---------- FOOTER ---------- */
.footer {
  margin-top: 4rem;
  padding: 2rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  color: var(--color-steel-grey);
  font-size: 0.9rem;
}

.footer > p {
  width: min(100%, 70ch);
  margin-inline: auto;
}

.footer .ai-visual-disclosure {
  margin-top: 0.75rem;
  color: #8f9da8;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.035em;
}

.footer a {
  color: var(--color-electric-cyan);
  margin: 0 0.5rem;
}

.footer-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.8rem;
  margin: 1.25rem 0;
  width: 100%;
}

.footer-links a {
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .homepage-faq-bridge {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .homepage-faq-bridge .btn-primary {
    width: 100%;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    padding: 0.15rem 0.25rem 0.5rem;
  }
}

.footer-meta {
  margin-top: 1rem;
}

/* ---------- ICONS ---------- */
.icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  stroke: var(--color-bronze-light);
  stroke-width: 1.5;
  fill: none;
}

/* ---------- RESPONSIVE ADJUSTMENTS ---------- */
@media (max-width: 768px) {
  .transparency-check-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .quiz-nav {
    flex-direction: column;
  }

  .workflow-steps {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding: 0.25rem 0 0;
  }

  .workflow-steps::before {
    top: 1.35rem;
    right: auto;
    bottom: 1.35rem;
    left: 1.55rem;
    width: 1px;
    height: auto;
  }

  .workflow-steps::after {
    display: none;
  }

  .workflow-step {
    min-height: 0;
    padding: 1rem 1rem 1rem 3.15rem;
  }

  .workflow-step::before,
  .workflow-step:not(:last-child)::after {
    display: none;
  }

  .workflow-step-number {
    position: absolute;
    top: 1rem;
    left: 1rem;
    margin: 0;
  }

  .quiz-instrument {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .quiz-rail {
    padding: 0;
  }

  .quiz-rail::before {
    top: 2.35rem;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--color-bronze-light), rgba(197, 155, 122, 0.08));
  }

  .quiz-rail ol {
    flex-direction: row;
    gap: 0.4rem;
    margin: 1.25rem 0 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .quiz-rail ol::-webkit-scrollbar {
    display: none;
  }

  .quiz-rail-step {
    display: block;
    min-width: 1.5rem;
    min-height: 1.5rem;
    text-align: center;
  }

  .quiz-rail-step strong,
  .quiz-rail-note {
    display: none;
  }

  .quiz-rail-step::before {
    top: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .quiz-rail-step.is-current {
    transform: none;
  }

  .quiz-rail-step.is-current::before {
    transform: translateX(-50%) scale(1.15);
  }

  .results-overview {
    grid-template-columns: 1fr;
  }

  .results-summary-copy {
    border-top: 1px solid rgba(197, 155, 122, 0.34);
    border-left: 0;
  }

  .results-grid {
    grid-template-columns: 1fr;
  }

  .cookie-bar {
    flex-direction: column;
    text-align: center;
  }

  .cookie-buttons {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- HEALTH CHECK REDESIGN ---------- */
#ai-health-check {
  position: relative;
  overflow: hidden;
  border-color: rgba(197, 155, 122, 0.46);
  background:
    radial-gradient(circle at 12% 12%, rgba(197, 155, 122, 0.12), transparent 28%),
    radial-gradient(circle at 88% 84%, rgba(111, 159, 131, 0.1), transparent 34%),
    linear-gradient(140deg, rgba(37, 29, 32, 0.82), rgba(14, 21, 38, 0.94) 58%, rgba(17, 39, 37, 0.7));
  box-shadow: inset 0 1px 0 rgba(255, 230, 201, 0.12), 0 20px 60px rgba(0, 0, 0, 0.24);
}

#ai-health-check::before {
  content: '';
  position: absolute;
  top: 0.45rem;
  right: 10%;
  left: 10%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(197, 155, 122, 0.72), rgba(159, 198, 170, 0.5), transparent);
}

.quiz-instrument.is-intro .quiz-rail {
  display: none;
}

.quiz-instrument.is-intro .quiz-stage {
  grid-column: 1 / -1;
}

.quiz-instrument.is-intro .quiz-intro-screen.active {
  display: grid;
  grid-template-columns: minmax(250px, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  min-height: 500px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid rgba(197, 155, 122, 0.3);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(28, 25, 34, 0.78), rgba(15, 23, 41, 0.84));
  box-shadow: inset 0 1px 0 rgba(255, 230, 201, 0.08), 0 18px 42px rgba(0, 0, 0, 0.2);
}

.quiz-intro-visual {
  position: relative;
  display: grid;
  gap: 0.9rem;
  align-content: center;
  min-width: 0;
}

.quiz-visual-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.12;
  border: 1px solid rgba(197, 155, 122, 0.58);
  border-radius: 22px;
  background: #0b0f21;
  box-shadow: inset 0 1px 0 rgba(255, 230, 201, 0.18), 0 18px 38px rgba(0, 0, 0, 0.34), 0 0 32px rgba(197, 155, 122, 0.08);
  transform: perspective(1000px) rotateY(4deg) rotateX(1deg);
}

.quiz-visual-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11, 15, 33, 0.04), rgba(11, 15, 33, 0.16) 52%, rgba(11, 15, 33, 0.62));
  pointer-events: none;
}

.quiz-visual-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  opacity: 0.88;
  transform: scale(1.06);
}

.quiz-visual-glow {
  position: absolute;
  z-index: 1;
  right: 18%;
  bottom: 18%;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid rgba(197, 155, 122, 0.72);
  border-radius: 30% 50% 38% 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 224, 177, 0.96), rgba(197, 155, 122, 0.42) 14%, rgba(111, 159, 131, 0.2) 48%, rgba(11, 15, 33, 0.12) 70%);
  box-shadow: 0 0 0 9px rgba(197, 155, 122, 0.08), 0 0 30px rgba(197, 155, 122, 0.42);
  transform: rotate(14deg);
}

.quiz-visual-node {
  position: absolute;
  z-index: 2;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid rgba(159, 198, 170, 0.92);
  border-radius: 50%;
  background: var(--color-video-green-light);
  box-shadow: 0 0 0 5px rgba(159, 198, 170, 0.1), 0 0 18px rgba(159, 198, 170, 0.56);
}

.quiz-visual-node-one { top: 23%; right: 13%; }
.quiz-visual-node-two { bottom: 25%; left: 18%; background: var(--color-bronze-light); border-color: var(--color-bronze-light); box-shadow: 0 0 0 5px rgba(197, 155, 122, 0.1), 0 0 18px rgba(197, 155, 122, 0.52); }

.quiz-visual-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.2rem;
}

.quiz-visual-caption span,
.quiz-intro-reassurance span {
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quiz-visual-caption strong {
  color: var(--color-video-green-light);
  font-family: var(--font-headline);
  font-size: 0.95rem;
}

.quiz-intro-copy {
  min-width: 0;
}

.quiz-intro-copy .quiz-title {
  max-width: 15ch;
  margin: 0.5rem 0 1rem;
  color: #eef2f4;
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.quiz-intro-copy .quiz-question {
  max-width: 50ch;
  margin-bottom: 1.1rem;
  color: #b9c7d2;
  font-size: 1rem;
}

.quiz-intro-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.2rem;
}

.quiz-simple-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: -0.55rem 0 1rem;
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.quiz-simple-benefits span + span::before {
  content: '•';
  margin-right: 1rem;
  color: rgba(197, 155, 122, 0.62);
}

.quiz-click-prompt {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: -0.35rem 0 0.65rem;
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quiz-click-arrow {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border: 1px solid rgba(197, 155, 122, 0.45);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  animation: quizArrowPulse 1.8s ease-in-out infinite;
}

@keyframes quizArrowPulse {
  0%, 100% { opacity: 0.5; transform: translateY(-2px); }
  50% { opacity: 1; transform: translateY(3px); box-shadow: 0 0 18px rgba(197, 155, 122, 0.2); }
}

.quiz-intro-reassurance span {
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(197, 155, 122, 0.26);
  border-radius: 999px;
  background: rgba(197, 155, 122, 0.06);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.quiz-intro-copy .quiz-options {
  gap: 0.7rem;
}

.quiz-intro-copy .quiz-option {
  min-height: 176px;
  align-items: flex-start;
  padding: 1.25rem 1.15rem 1rem;
  border-color: rgba(138, 170, 189, 0.24);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 35%),
    linear-gradient(145deg, #222c3b, #151e2e 62%, #101a29);
  box-shadow: inset 0 1px 0 rgba(255, 230, 201, 0.06), 0 10px 22px rgba(0, 0, 0, 0.16);
  position: relative;
  overflow: hidden;
}

.quiz-intro-copy .quiz-path-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.quiz-intro-copy .quiz-path-option::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--path-accent);
  box-shadow: 0 0 18px var(--path-glow);
}

.quiz-path-personal {
  --path-accent: #c59b7a;
  --path-glow: rgba(197, 155, 122, 0.35);
}

.quiz-path-business {
  --path-accent: #7f9fbe;
  --path-glow: rgba(127, 159, 190, 0.35);
}

.quiz-path-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid !important;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--path-accent) 55%, transparent);
  border-radius: 50%;
  color: var(--path-accent);
  font-size: 1.1rem;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--path-accent) 8%, transparent);
}

.quiz-path-eyebrow {
  margin-bottom: 0.35rem;
  color: var(--path-accent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quiz-path-get {
  display: grid !important;
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(138, 170, 189, 0.16);
  border-radius: 8px;
  background: rgba(7, 13, 23, 0.38);
}

.quiz-path-get em {
  color: var(--path-accent);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-style: normal;
  letter-spacing: 0.1em;
}

.quiz-path-get > span {
  color: #becad2;
  font-size: 0.74rem;
  line-height: 1.35;
}

/* Keep the two entry choices compact; colour is the differentiator. */
.quiz-intro-copy .quiz-path-option {
  min-height: 70px;
  align-items: center;
  padding: 1rem 1.1rem;
}

.quiz-intro-copy .quiz-path-option .quiz-path-icon,
.quiz-intro-copy .quiz-path-option .quiz-path-eyebrow,
.quiz-intro-copy .quiz-path-option .quiz-path-get {
  display: none !important;
}

.quiz-intro-copy .quiz-path-personal {
  border-color: rgba(197, 155, 122, 0.48);
  background: linear-gradient(108deg, rgba(91, 63, 49, 0.78), rgba(20, 30, 48, 0.82) 72%, rgba(52, 40, 35, 0.62));
}

.quiz-intro-copy .quiz-path-business {
  border-color: rgba(127, 159, 190, 0.48);
  background: linear-gradient(108deg, rgba(53, 75, 101, 0.78), rgba(20, 30, 48, 0.82) 72%, rgba(34, 52, 75, 0.62));
}

.quiz-intro-copy .quiz-option:hover,
.quiz-intro-copy .quiz-option.is-selected {
  transform: translateY(-2px);
  border-color: rgba(197, 155, 122, 0.76);
}

.quiz-intro-copy .quiz-option.is-selected {
  background: linear-gradient(108deg, color-mix(in srgb, var(--path-accent) 27%, #1b2433), rgba(35, 45, 54, 0.86) 70%, color-mix(in srgb, var(--path-accent) 20%, #122131));
  border-color: color-mix(in srgb, var(--path-accent) 70%, white 5%);
}

.quiz-intro-copy .quiz-nav {
  margin-top: 1.2rem;
}

.quiz-intro-copy .quiz-start-btn {
  min-height: 50px;
  padding-inline: 1.2rem;
  box-shadow: 0 12px 28px rgba(143, 106, 82, 0.2), inset 0 1px 0 rgba(255, 230, 201, 0.16);
}

.quiz-intro-copy .quiz-agent-demo {
  min-height: 50px;
  padding-inline: 1rem;
  border-color: rgba(138, 170, 189, 0.28);
  color: var(--color-panel-heading);
}

@media (max-width: 768px) {
  .quiz-instrument.is-intro .quiz-intro-screen.active {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    min-height: 0;
  }

  .quiz-visual-frame {
    aspect-ratio: 1.4;
    transform: none;
  }

  .quiz-intro-copy .quiz-title {
    max-width: 16ch;
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
}

/* ---------- AI READINESS INSTRUMENT V3 ---------- */
.health-check-page-intro {
  margin-bottom: clamp(1.25rem, 3vw, 2.4rem);
}

.health-check-page-intro h1 {
  margin-bottom: 0.75rem;
}

.health-check-page-intro .subtitle {
  max-width: 760px;
}

#ai-health-check {
  isolation: isolate;
  padding: clamp(0.7rem, 1.4vw, 1rem);
  background:
    radial-gradient(circle at 78% 18%, rgba(115, 161, 139, 0.13), transparent 26rem),
    radial-gradient(circle at 18% 85%, rgba(198, 139, 95, 0.13), transparent 24rem),
    #090f20;
}

#ai-health-check::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.22;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(159, 198, 170, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 198, 170, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

#ai-health-check .quiz-container {
  min-height: 640px;
  overflow: hidden;
  border: 1px solid rgba(204, 156, 119, 0.31);
  background:
    linear-gradient(135deg, rgba(22, 29, 47, 0.94), rgba(10, 16, 33, 0.97) 58%, rgba(17, 43, 38, 0.85));
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 206, 0.13),
    inset 0 0 80px rgba(103, 147, 128, 0.04),
    0 24px 70px rgba(0, 0, 0, 0.34);
}

#ai-health-check .quiz-instrument {
  grid-template-columns: minmax(155px, 0.27fr) minmax(0, 1fr);
}

#ai-health-check .quiz-stage,
#ai-health-check .quiz-screen {
  min-height: 100%;
}

#ai-health-check .quiz-screen.active {
  animation: instrumentScreenIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes instrumentScreenIn {
  from { opacity: 0; transform: translate3d(32px, 0, 0) rotateY(-2deg); filter: blur(7px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0); filter: blur(0); }
}

#ai-health-check .quiz-rail {
  margin: -0.25rem 0;
  padding: 1rem 0.65rem 1rem 1.2rem;
  border-right: 1px solid rgba(169, 205, 186, 0.1);
  background: linear-gradient(90deg, rgba(91, 121, 111, 0.035), transparent);
}

#ai-health-check .quiz-rail::before {
  top: 4.25rem;
  bottom: 4.35rem;
  background: linear-gradient(rgba(205, 157, 119, 0.15), #cf9d79 48%, rgba(123, 175, 149, 0.2));
  box-shadow: 0 0 18px rgba(197, 155, 122, 0.15);
}

#ai-health-check .quiz-rail-step {
  border-radius: 7px;
  padding: 0.18rem 0.3rem;
}

#ai-health-check .quiz-rail-step.is-current {
  background: linear-gradient(90deg, rgba(201, 153, 115, 0.12), transparent);
}

.quiz-question-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(215px, 0.68fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  flex: 1;
  align-items: stretch;
}

.quiz-question-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(0.25rem, 1.5vw, 1rem) 0;
}

.quiz-question-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  color: rgba(171, 190, 199, 0.55);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quiz-category-chip {
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(160, 205, 179, 0.3);
  border-radius: 999px;
  color: #a7cbb8;
  background: rgba(103, 147, 128, 0.08);
}

#ai-health-check .quiz-screen .quiz-title {
  max-width: 19ch;
  margin: 0.1rem 0 0.65rem;
  color: #f0eee9;
  font-size: clamp(1.85rem, 3.1vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

#ai-health-check .quiz-screen .quiz-question {
  max-width: 62ch;
  color: #bec9d1;
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  line-height: 1.55;
}

#ai-health-check .quiz-options {
  counter-reset: quizOption;
  gap: 0.62rem;
}

#ai-health-check .quiz-option {
  position: relative;
  gap: 0.8rem;
  overflow: hidden;
  padding: 0.92rem 1rem;
  border-color: rgba(171, 196, 186, 0.16);
  border-radius: 11px;
  background:
    linear-gradient(105deg, rgba(32, 42, 61, 0.9), rgba(20, 31, 49, 0.86) 62%, rgba(28, 61, 52, 0.46));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transform: translateZ(0);
  transition:
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 300ms ease;
}

#ai-health-check .quiz-option::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 35%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 219, 184, 0.12), transparent);
  transform: skewX(-18deg);
}

#ai-health-check .quiz-option:hover {
  border-color: rgba(203, 158, 121, 0.56);
  background:
    linear-gradient(105deg, rgba(49, 48, 59, 0.95), rgba(27, 39, 54, 0.92) 62%, rgba(36, 76, 62, 0.6));
  box-shadow: inset 0 1px 0 rgba(255, 230, 201, 0.1), 0 12px 30px rgba(0, 0, 0, 0.2);
  transform: translate3d(7px, -1px, 0);
}

#ai-health-check .quiz-option:hover::before {
  opacity: 1;
  animation: optionSweep 900ms ease both;
}

#ai-health-check .quiz-option.is-selected {
  border-color: rgba(230, 175, 130, 0.88);
  background:
    radial-gradient(circle at 85% 50%, rgba(111, 171, 141, 0.19), transparent 30%),
    linear-gradient(105deg, rgba(89, 60, 48, 0.8), rgba(36, 43, 53, 0.92) 64%, rgba(30, 79, 61, 0.72));
  box-shadow:
    inset 3px 0 0 #d5a17a,
    inset 0 1px 0 rgba(255, 230, 201, 0.16),
    0 15px 35px rgba(0, 0, 0, 0.23),
    0 0 32px rgba(121, 168, 145, 0.08);
  transform: translate3d(9px, 0, 0);
}

@keyframes optionSweep {
  from { left: -45%; }
  to { left: 125%; }
}

#ai-health-check .quiz-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.quiz-option-index {
  flex: 0 0 auto;
  color: rgba(203, 158, 121, 0.62);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.quiz-option-copy {
  flex: 1;
  color: #e7e9e8;
  font-size: 0.92rem;
  line-height: 1.38;
}

.quiz-option-copy strong {
  display: block;
  font-family: var(--font-headline);
  font-size: 1rem;
}

#ai-health-check .quiz-option-mark {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(205, 157, 119, 0.5);
  border-radius: 7px;
  background: rgba(205, 157, 119, 0.1);
  box-shadow: 0 0 18px rgba(205, 157, 119, 0.24);
}

.quiz-live-core {
  --signal-strength: 0;
  position: relative;
  display: grid;
  min-height: 420px;
  overflow: hidden;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(172, 204, 190, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(191, 147, 111, calc(0.09 + var(--signal-strength) * 0.13)), transparent 23%),
    linear-gradient(rgba(138, 184, 160, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 184, 160, 0.045) 1px, transparent 1px),
    linear-gradient(145deg, rgba(27, 41, 58, 0.9), rgba(10, 17, 31, 0.92));
  background-size: auto, 28px 28px, 28px 28px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 55px rgba(66, 114, 94, 0.08);
}

.quiz-live-core::before,
.quiz-live-core::after {
  content: '';
  position: absolute;
  width: 65%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(207, 159, 121, 0.64), transparent);
}

.quiz-live-core::before { top: 24%; transform: rotate(28deg); }
.quiz-live-core::after { bottom: 26%; transform: rotate(-28deg); }

.quiz-core-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: rgba(167, 203, 184, 0.72);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.quiz-core-gem {
  position: relative;
  z-index: 3;
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 1px solid rgba(244, 193, 149, 0.74);
  border-radius: 28%;
  color: #f4d4b8;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 224, 184, 0.92), rgba(201, 146, 105, 0.45) 12%, rgba(93, 119, 105, 0.26) 48%, rgba(11, 19, 34, 0.82) 72%);
  box-shadow:
    0 0 0 11px rgba(201, 151, 111, 0.055),
    0 0 calc(22px + var(--signal-strength) * 38px) rgba(223, 164, 115, calc(0.25 + var(--signal-strength) * 0.35)),
    inset 0 1px 0 rgba(255, 236, 213, 0.45);
  transform: rotate(45deg) scale(calc(0.92 + var(--signal-strength) * 0.08));
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 500ms ease;
}

.quiz-core-gem span {
  transform: rotate(-45deg);
}

.quiz-core-orbit {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(155, 199, 176, 0.24);
  border-radius: 50%;
}

.quiz-core-orbit::after {
  content: '';
  position: absolute;
  top: 8%;
  left: 17%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dba477;
  box-shadow: 0 0 16px #dba477;
}

.quiz-core-orbit-a {
  width: 190px;
  height: 190px;
  animation: coreOrbit 12s linear infinite;
}

.quiz-core-orbit-b {
  width: 245px;
  height: 130px;
  transform: rotate(-28deg);
  animation: coreOrbitB 16s linear infinite;
}

@keyframes coreOrbit { to { transform: rotate(360deg); } }
@keyframes coreOrbitB { to { transform: rotate(332deg); } }

.quiz-core-readout {
  position: absolute;
  right: 1rem;
  bottom: 2.8rem;
  left: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.65rem;
  align-items: center;
  color: rgba(186, 205, 198, 0.55);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
}

.quiz-core-readout i {
  position: relative;
  overflow: hidden;
  height: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}

.quiz-core-readout i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #78a58d, #d7a079);
  transform: scaleX(var(--signal-strength));
  transform-origin: left;
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

.quiz-core-status {
  position: absolute;
  right: 1rem;
  bottom: 0.9rem;
  color: #d5a17a;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.quiz-live-core.is-locked {
  animation: coreLock 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes coreLock {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}

#ai-health-check .quiz-instrument.is-intro .quiz-intro-screen.active {
  min-height: 580px;
  padding: clamp(1rem, 2.5vw, 2.2rem);
  border-color: rgba(205, 157, 119, 0.31);
  background:
    radial-gradient(circle at 84% 10%, rgba(111, 159, 131, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(30, 34, 48, 0.84), rgba(10, 17, 34, 0.94));
}

#ai-health-check .quiz-visual-frame {
  aspect-ratio: 1.18;
  transform: perspective(1100px) rotateY(5deg) rotateX(2deg);
  animation: visualFloat 7s ease-in-out infinite;
}

@keyframes visualFloat {
  0%, 100% { transform: perspective(1100px) rotateY(5deg) rotateX(2deg) translateY(0); }
  50% { transform: perspective(1100px) rotateY(2deg) rotateX(0deg) translateY(-7px); }
}

.quiz-visual-grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(177, 219, 196, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177, 219, 196, 0.16) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(135deg, black, transparent 70%);
}

.quiz-visual-scan {
  position: absolute;
  z-index: 4;
  right: 0;
  left: 0;
  height: 16%;
  border-top: 1px solid rgba(236, 183, 139, 0.7);
  background: linear-gradient(to bottom, rgba(236, 183, 139, 0.11), transparent);
  filter: drop-shadow(0 0 8px rgba(236, 183, 139, 0.48));
  animation: diagnosticScan 4.8s ease-in-out infinite;
}

@keyframes diagnosticScan {
  0%, 8% { top: -18%; opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 0.8; }
  100% { top: 102%; opacity: 0; }
}

.quiz-visual-node {
  animation: visualNodePulse 2.6s ease-in-out infinite;
}

.quiz-visual-node-two { animation-delay: -0.8s; }
.quiz-visual-node-three {
  top: 48%;
  left: 48%;
  background: #e0ad82;
  border-color: #e0ad82;
  animation-delay: -1.5s;
}

@keyframes visualNodePulse {
  0%, 100% { transform: scale(0.82); opacity: 0.55; }
  50% { transform: scale(1.28); opacity: 1; }
}

.quiz-visual-console {
  position: absolute;
  z-index: 5;
  right: 0.8rem;
  bottom: 0.8rem;
  display: grid;
  min-width: 145px;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  padding: 0.7rem;
  border: 1px solid rgba(198, 222, 208, 0.24);
  border-radius: 10px;
  color: #abcab8;
  background: rgba(8, 17, 29, 0.72);
  backdrop-filter: blur(11px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.quiz-visual-console span,
.quiz-visual-console strong {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.09em;
}

.quiz-visual-console strong { color: #e0ad82; }
.quiz-visual-console i {
  height: 3px;
  border-radius: 10px;
  background: linear-gradient(90deg, #79a98e, #d9a57c);
  animation: consoleSignal 1.8s ease-in-out infinite alternate;
  transform-origin: left;
}
.quiz-visual-console i:nth-of-type(2) { animation-delay: -0.7s; }
.quiz-visual-console i:nth-of-type(3) { animation-delay: -1.2s; }

@keyframes consoleSignal {
  from { transform: scaleX(0.25); opacity: 0.4; }
  to { transform: scaleX(1); opacity: 1; }
}

#ai-health-check .quiz-intro-copy .quiz-title {
  max-width: 13ch;
}

#ai-health-check .quiz-intro-copy .quiz-title em {
  color: #d5a17a;
  font-style: normal;
  text-shadow: 0 0 28px rgba(213, 161, 122, 0.18);
}

.quiz-path-prompt {
  max-width: 27ch;
  align-self: center;
  color: rgba(178, 198, 190, 0.58);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#ai-health-check .quiz-start-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

#ai-health-check .quiz-progress-track {
  height: 2px;
  overflow: visible;
  background: rgba(255, 255, 255, 0.07);
}

#ai-health-check .quiz-progress-fill {
  position: relative;
  box-shadow: 0 0 12px rgba(208, 158, 120, 0.44);
}

#ai-health-check .quiz-progress-fill::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid #e0ab80;
  border-radius: 50%;
  background: #111a2c;
  box-shadow: 0 0 0 5px rgba(224, 171, 128, 0.08), 0 0 15px rgba(224, 171, 128, 0.5);
  transform: translateY(-50%);
}

#ai-health-check .results-container.active {
  position: relative;
  animation: resultsAssemble 850ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes resultsAssemble {
  from { opacity: 0; transform: scale(0.94); filter: blur(10px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

.results-kicker {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.8rem;
  color: rgba(170, 205, 187, 0.7);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
}

.results-kicker i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, #79a98e, rgba(217, 165, 124, 0.2));
}

#ai-health-check .results-ring {
  filter: drop-shadow(0 0 20px rgba(209, 159, 120, 0.18));
}

.results-orbit {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(127, 174, 150, 0.22);
  border-radius: 50%;
  animation: resultOrbit 13s linear infinite;
}

.results-orbit::after {
  content: '';
  position: absolute;
  top: 12%;
  left: 15%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dca67a;
  box-shadow: 0 0 13px #dca67a;
}

.results-orbit-b {
  inset: 18px -22px;
  transform: rotate(52deg);
  animation-direction: reverse;
  animation-duration: 17s;
}

@keyframes resultOrbit { to { transform: rotate(360deg); } }

#ai-health-check .results-item {
  position: relative;
  overflow: hidden;
  padding: 1.15rem;
  border: 1px solid rgba(161, 195, 181, 0.15);
  background:
    radial-gradient(circle at 90% 10%, rgba(117, 165, 142, 0.11), transparent 30%),
    linear-gradient(145deg, rgba(34, 43, 58, 0.9), rgba(14, 23, 39, 0.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 26px rgba(0,0,0,0.18);
}

#ai-health-check .results-item-value {
  color: #dca67c;
}

@media (max-width: 980px) {
  .quiz-question-layout {
    grid-template-columns: 1fr;
  }

  .quiz-live-core {
    min-height: 190px;
  }

  .quiz-core-orbit-a { width: 125px; height: 125px; }
  .quiz-core-orbit-b { width: 165px; height: 85px; }
  .quiz-core-gem { width: 62px; height: 62px; border-radius: 25%; }
  .quiz-core-readout { max-width: 210px; }
}

@media (max-width: 768px) {
  #ai-health-check .quiz-container {
    min-height: 0;
    padding: 0.8rem;
  }

  #ai-health-check .quiz-instrument {
    grid-template-columns: 1fr;
  }

  #ai-health-check .quiz-rail {
    padding: 0.25rem 0 0.65rem;
    border-right: 0;
    border-bottom: 1px solid rgba(169, 205, 186, 0.1);
  }

  #ai-health-check .quiz-instrument.is-intro .quiz-intro-screen.active {
    padding: 0.75rem;
  }

  #ai-health-check .quiz-visual-frame {
    aspect-ratio: 1.38;
    transform: none;
    animation: none;
  }

  .quiz-question-layout {
    gap: 0.8rem;
  }

  #ai-health-check .quiz-screen .quiz-title {
    font-size: clamp(1.75rem, 9vw, 2.45rem);
  }

  #ai-health-check .quiz-option,
  #ai-health-check .quiz-option:hover,
  #ai-health-check .quiz-option.is-selected {
    transform: none;
  }

  .quiz-live-core {
    min-height: 170px;
  }

  .quiz-core-readout,
  .quiz-core-label {
    display: none;
  }

  .quiz-core-status {
    bottom: 0.65rem;
  }

  .quiz-path-prompt {
    max-width: none;
  }
}

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

  .scan-parallax-scene video {
    display: none;
  }
}

/* The AI seal is a header control, not a moving decorative coin. */
@media (prefers-reduced-motion: reduce) {
  .ai-talker-mark,
  .ai-talker-seal::before {
    animation: none !important;
  }

  .home-health-cta::before {
    animation: homeHealthGlassSweep 10.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  }

  .home-compliance-cta::before {
    animation: homeComplianceGlassSweep 10.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  }
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-electric-cyan);
  outline-offset: 2px;
}
.reviews-section {
  margin-top: 2rem;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 230px;
}

.testimonial-rating {
  display: flex;
  min-height: 1.8rem;
  align-items: center;
  gap: 0.52rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(197, 155, 122, 0.14);
}

.testimonial-google-mark {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #f8f9fa;
  color: #4285f4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
}

.testimonial-stars {
  color: #d0a36f;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  line-height: 1;
  text-shadow: 0 0 12px rgba(208, 163, 111, 0.18);
}

.testimonial-platform {
  margin-left: auto;
  color: #a98770;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.testimonial-card blockquote {
  flex: 1;
  margin: 1.15rem 0 0;
  color: rgba(238, 232, 221, 0.92);
  font-size: 1.05rem;
  line-height: 1.7;
}

.testimonial-card figcaption {
  margin-top: 1.5rem;
  color: var(--color-bronze-light, #d9b58f);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* ---------- HERMES AGENTS BRIDGE ---------- */
.hermes-bridge-page .page-intro {
  max-width: 980px;
}

.hermes-bridge-page .page-intro .subtitle {
  max-width: 78ch;
}

.hermes-bridge-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  min-height: 460px;
}

.hermes-bridge-copy {
  min-width: 0;
}

.hermes-bridge-copy h2 {
  max-width: 17ch;
  margin: 0.35rem 0 1rem;
}

.hermes-bridge-copy > p:not(.eyebrow):not(.hermes-domain-note) {
  max-width: 62ch;
  color: #cbd5df;
}

.hermes-bridge-copy .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.hermes-domain-note {
  margin-top: 1rem;
  color: rgba(183, 201, 216, 0.78);
  font-size: 0.86rem;
}

.hermes-domain-note strong {
  color: var(--color-video-green-light);
  font-weight: 600;
}

.hermes-bridge-visual {
  position: relative;
  width: min(100%, 680px);
  justify-self: end;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(159, 198, 170, 0.24);
  border-radius: 1rem;
  background: #0c0f1e;
  box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.25);
}

.hermes-bridge-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hermes-agent-orbit {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, rgba(111, 159, 131, 0.18), transparent 24%), radial-gradient(circle at 50% 50%, rgba(24, 48, 55, 0.6), rgba(9, 17, 31, 0.08) 64%);
  box-shadow: inset 0 0 0 1px rgba(159, 198, 170, 0.14), 0 0 70px rgba(111, 159, 131, 0.1);
}

.hermes-agent-orbit-ring {
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(159, 198, 170, 0.32);
  border-radius: 50%;
  transform: rotate(-18deg) skewX(-12deg);
}

.hermes-agent-orbit-ring-two {
  inset: 25% 6%;
  border-color: rgba(183, 201, 216, 0.24);
  transform: rotate(58deg) skewX(14deg);
}

.hermes-agent-orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  border: 1px solid rgba(197, 155, 122, 0.58);
  border-radius: 28% 50% 38% 50%;
  background: linear-gradient(145deg, rgba(86, 71, 62, 0.8), rgba(24, 40, 47, 0.94));
  box-shadow: 0 0 0 10px rgba(111, 159, 131, 0.06), 0 18px 38px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%) rotate(12deg);
}

.hermes-agent-orbit-core span {
  color: #e2c9b1;
  font-family: var(--font-headline);
  font-size: 3rem;
  line-height: 1;
  transform: rotate(-12deg);
}

.hermes-agent-node {
  position: absolute;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(159, 198, 170, 0.3);
  border-radius: 999px;
  background: rgba(10, 19, 32, 0.72);
  color: var(--color-video-green-light);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.hermes-agent-node-memory { top: 18%; left: 3%; }
.hermes-agent-node-skills { top: 12%; right: 2%; color: #b7c9d8; border-color: rgba(183, 201, 216, 0.28); }
.hermes-agent-node-human { right: 8%; bottom: 16%; color: var(--color-bronze-light); border-color: rgba(197, 155, 122, 0.32); }

.hermes-bridge-layers {
  padding: clamp(1.5rem, 4vw, 3rem);
}

.hermes-layer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.hermes-layer {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(159, 198, 170, 0.18);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(25, 46, 50, 0.62), rgba(11, 20, 34, 0.82));
}

.hermes-layer-product {
  border-color: rgba(197, 155, 122, 0.26);
  background: linear-gradient(145deg, rgba(54, 44, 43, 0.64), rgba(15, 25, 38, 0.86));
}

.hermes-layer h3 {
  margin: 0.3rem 0 0.75rem;
  color: var(--color-silver);
}

.hermes-layer p:not(.eyebrow) {
  color: #cbd5df;
}

.hermes-layer .service-link {
  margin-top: auto;
  padding-top: 1.5rem;
}

.hermes-bridge-cta {
  padding: clamp(1.5rem, 4vw, 3rem);
}

.hermes-bridge-cta h2 {
  max-width: 22ch;
  margin: 0.35rem 0 0.75rem;
}

.hermes-bridge-cta p:not(.eyebrow) {
  max-width: 62ch;
  color: #d1d9df;
}

.hermes-bridge-cta .btn-primary {
  margin-top: 1.25rem;
}

@media (max-width: 760px) {
  .hermes-bridge-hero {
    grid-template-columns: 1fr;
  }

  .hermes-agent-orbit {
    width: min(82vw, 320px);
  }

  .aria-showcase-visual img {
    min-height: 0;
  }

  .hermes-bridge-visual {
    width: 100%;
    justify-self: stretch;
  }

  .hermes-layer-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- AGENCY FUNNEL: CLEAR PATHS, NOT EXTRA MENU ITEMS ---------- */
.homepage-paths {
  margin: clamp(3rem, 7vw, 6rem) 0;
}

.homepage-paths .homepage-section-heading {
  max-width: 760px;
  margin-bottom: 1.5rem;
}

.homepage-paths .homepage-section-heading h2 {
  max-width: none;
}

.homepage-path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.homepage-path-card:nth-child(1) {
  --path-edge: #5f8f79;
  --path-edge-dark: #294a3d;
  --path-accent: #a9d2bc;
  --path-surface-start: #183d35;
  --path-surface-end: #102a27;
  --path-shadow: rgba(36, 100, 73, 0.24);
  --path-jewel-start: #206048;
  --path-jewel-mid: #123d32;
  --path-jewel-end: #0b2924;
  --path-jewel-border: rgba(129, 214, 170, 0.48);
  --path-jewel-light: rgba(225, 255, 237, 0.2);
  --path-jewel-shadow: rgba(4, 27, 20, 0.2);
}

.homepage-path-card:nth-child(2) {
  --path-edge: #c39a5d;
  --path-edge-dark: #6c4f2e;
  --path-accent: #f0d29b;
  --path-surface-start: #463524;
  --path-surface-end: #2b211a;
  --path-shadow: rgba(161, 113, 47, 0.28);
  --path-jewel-start: #8b5330;
  --path-jewel-mid: #65391f;
  --path-jewel-end: #3d231b;
  --path-jewel-border: rgba(234, 170, 98, 0.5);
  --path-jewel-light: rgba(255, 238, 212, 0.2);
  --path-jewel-shadow: rgba(38, 18, 8, 0.2);
}

.homepage-path-card:nth-child(3) {
  --path-edge: #9b6757;
  --path-edge-dark: #57372f;
  --path-accent: #ddb5a8;
  --path-surface-start: #40202b;
  --path-surface-end: #28141e;
  --path-shadow: rgba(115, 61, 50, 0.24);
  --path-jewel-start: #741b35;
  --path-jewel-mid: #4d1024;
  --path-jewel-end: #2d0c1c;
  --path-jewel-border: rgba(225, 132, 137, 0.46);
  --path-jewel-light: rgba(255, 231, 229, 0.22);
  --path-jewel-shadow: rgba(27, 6, 16, 0.2);
}

.homepage-path-card:nth-child(4) {
  --path-edge: #657da0;
  --path-edge-dark: #33455f;
  --path-accent: #b9c9e0;
  --path-surface-start: #263a5b;
  --path-surface-end: #18243d;
  --path-shadow: rgba(41, 58, 91, 0.28);
  --path-jewel-start: #36568f;
  --path-jewel-mid: #233e73;
  --path-jewel-end: #17264b;
  --path-jewel-border: rgba(142, 174, 235, 0.46);
  --path-jewel-light: rgba(225, 237, 255, 0.2);
  --path-jewel-shadow: rgba(8, 15, 43, 0.22);
}

.homepage-path-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  padding: clamp(1.15rem, 2.5vw, 1.65rem);
  border: 1px solid color-mix(in srgb, var(--path-edge) 72%, white 8%);
  border-radius: 20px;
  background: linear-gradient(150deg, var(--path-surface-start), var(--path-surface-end));
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, 0.06),
    inset -8px -10px 18px rgba(3, 7, 14, 0.42),
    0 5px 0 var(--path-edge-dark),
    0 18px 38px var(--path-shadow);
  color: #f1f3ef;
  transform-origin: center;
  transition: border-color 420ms ease, box-shadow 520ms ease, filter 280ms ease;
}

.homepage-path-card::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--path-edge) 35%, transparent);
  border-radius: 14px;
  box-shadow: none;
  pointer-events: none;
}

.homepage-path-card::after {
  content: none;
}

.homepage-path-card > * {
  position: relative;
  z-index: 1;
}

.homepage-path-card:hover,
.homepage-path-card:focus-visible {
  animation: homepagePathCardEngage 1050ms cubic-bezier(0.2, 0.72, 0.2, 1) 1 both;
  border-color: var(--path-edge);
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, 0.08),
    inset -8px -10px 18px rgba(3, 7, 14, 0.38),
    0 5px 0 var(--path-edge-dark),
    0 22px 44px var(--path-shadow);
  outline: none;
}

.homepage-path-card:active {
  animation: none;
  box-shadow:
    inset 3px 4px 9px rgba(3, 7, 14, 0.35),
    inset -2px -2px 0 rgba(255, 255, 255, 0.035),
    0 2px 0 var(--path-edge-dark),
    0 12px 26px var(--path-shadow);
  filter: brightness(1.08);
  transform: scale(0.972);
}

@keyframes homepagePathCardEngage {
  0% { transform: scale(1); }
  38% { transform: scale(0.982); }
  72% { transform: scale(1.008); }
  100% { transform: scale(1); }
}

.homepage-path-label {
  align-self: flex-start;
  max-width: calc(100% - 3.35rem);
  padding: 0.48rem 0.66rem;
  border: 1px solid color-mix(in srgb, var(--path-edge) 60%, transparent);
  border-radius: 8px;
  background: #111b25;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--path-accent);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 8px var(--path-shadow);
}

.homepage-path-icon {
  position: absolute;
  isolation: isolate;
  top: 1.05rem;
  right: 1.05rem;
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--path-edge) 68%, white 7%);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 46%),
    rgba(4, 10, 19, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -4px 8px rgba(0, 0, 0, 0.22),
    0 2px 0 var(--path-edge-dark),
    0 0 14px var(--path-shadow);
  color: var(--path-accent);
  transition: border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.homepage-path-icon::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--path-accent) 42%, transparent) 0%,
    color-mix(in srgb, var(--path-edge) 20%, transparent) 32%,
    transparent 70%
  );
  filter: blur(4px);
  opacity: 0;
  pointer-events: none;
}

.homepage-path-icon::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px dashed color-mix(in srgb, var(--path-edge) 38%, transparent);
  border-radius: 50%;
  opacity: 0.48;
}

.homepage-path-icon svg {
  width: 1.18rem;
  height: 1.18rem;
  filter: drop-shadow(0 0 5px var(--path-shadow));
  transform-origin: center;
}

.homepage-path-card:hover .homepage-path-icon svg,
.homepage-path-card:focus-visible .homepage-path-icon svg {
  animation: homepagePathIconSpin 780ms cubic-bezier(0.22, 0.72, 0.2, 1) 1 both;
}

.homepage-path-card:hover .homepage-path-icon,
.homepage-path-card:focus-visible .homepage-path-icon {
  border-color: var(--path-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -4px 8px rgba(0, 0, 0, 0.16),
    0 2px 0 var(--path-edge-dark),
    0 0 12px var(--path-accent),
    0 0 32px var(--path-shadow);
  color: #ffffff;
}

.homepage-path-card:hover .homepage-path-icon::before,
.homepage-path-card:focus-visible .homepage-path-icon::before {
  animation: homepagePathLightIgnite 920ms ease-out 1 both;
}

@keyframes homepagePathIconSpin {
  0% { transform: rotate(0deg) scale(0.92); }
  72% { transform: rotate(390deg) scale(1.08); }
  88% { transform: rotate(350deg) scale(0.98); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes homepagePathLightIgnite {
  0% { opacity: 0; transform: scale(0.45); }
  38% { opacity: 1; transform: scale(1.12); }
  68% { opacity: 0.5; transform: scale(0.96); }
  100% { opacity: 0.68; transform: scale(1); }
}

@keyframes homepagePathIconTap {
  0% { transform: rotate(0deg) scale(0.92); }
  65% { transform: rotate(28deg) scale(1.12); }
  100% { transform: rotate(18deg) scale(1.04); }
}

@media (hover: none) and (pointer: coarse) {
  .homepage-path-card:hover {
    animation: none;
  }

  .homepage-path-card:active {
    border-color: var(--path-edge);
    box-shadow:
      inset 4px 5px 11px rgba(3, 7, 14, 0.38),
      inset -1px -1px 0 rgba(255, 255, 255, 0.035),
      0 1px 0 var(--path-edge-dark),
      0 8px 22px var(--path-shadow);
    transform: scale(0.965);
  }

  .homepage-path-card:hover .homepage-path-icon svg {
    animation: none;
  }

  .homepage-path-card:active .homepage-path-icon svg {
    animation: homepagePathIconTap 420ms ease-out 1 both;
  }

  .homepage-path-card:active .homepage-path-icon {
    border-color: var(--path-edge);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 0 12px var(--path-accent),
      0 0 28px var(--path-shadow);
    color: #ffffff;
  }
}

.homepage-path-card strong {
  margin: 1.6rem 0 0.7rem;
  color: var(--color-panel-heading);
  font-family: var(--font-headline);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.2;
}

.homepage-path-card small {
  min-height: 5em;
  color: rgba(241, 243, 239, 0.82);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.55;
}

.homepage-path-outcome {
  display: block;
  margin-top: 1.25rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--path-edge) 28%, transparent);
  border-radius: 10px;
  background: #0b1420;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: rgba(241, 243, 239, 0.88);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
}

.homepage-path-outcome b {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--path-accent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.homepage-path-action {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding: 0.9rem 1rem 0.85rem 1.08rem;
  border: 1px solid var(--path-jewel-border);
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--path-jewel-start), var(--path-jewel-mid) 52%, var(--path-jewel-end));
  box-shadow:
    inset 0 1px 0 var(--path-jewel-light),
    inset 0 -12px 22px var(--path-jewel-shadow),
    0 10px 22px rgba(0, 0, 0, 0.2);
}

.homepage-path-action::before {
  content: none;
}

.homepage-path-action-label {
  position: relative;
  z-index: 1;
  color: #f0d0a6;
  font-family: var(--font-headline);
  font-size: clamp(0.98rem, 1.3vw, 1.15rem);
  font-weight: 650;
  letter-spacing: 0.008em;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255, 239, 215, 0.16), 0 -1px 1px rgba(5, 8, 18, 0.48);
}

.homepage-path-action i {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  border: 1px solid var(--path-jewel-border);
  border-radius: 50%;
  background: rgba(5, 12, 25, 0.42);
  box-shadow: inset 0 1px 0 var(--path-jewel-light);
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: normal;
  color: #f0d0a6;
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.homepage-path-card:hover .homepage-path-action i,
.homepage-path-card:focus-visible .homepage-path-action i {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transform: translateX(0.2rem);
}

.homepage-path-card:hover .homepage-path-action,
.homepage-path-card:focus-visible .homepage-path-action {
  border-color: color-mix(in srgb, var(--path-jewel-border) 82%, white 18%);
  box-shadow:
    inset 0 1px 0 var(--path-jewel-light),
    inset 0 -12px 22px var(--path-jewel-shadow),
    0 12px 25px rgba(0, 0, 0, 0.24);
}

.homepage-agents-card,
.homepage-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.homepage-agents-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-bottom: clamp(1.2rem, 2.4vw, 1.75rem);
}

.homepage-agents-card h2,
.homepage-final-cta h2 {
  max-width: 24ch;
  margin: 0.35rem 0 0.75rem;
  line-height: 1.08;
}

.homepage-agents-card p:not(.eyebrow),
.homepage-final-cta p:not(.eyebrow) {
  max-width: 68ch;
}

.homepage-agents-card .btn-primary {
  flex: 0 0 auto;
}

.agent-job-rail {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(7, minmax(2.25rem, 1fr));
  gap: clamp(0.45rem, 1.2vw, 0.9rem);
  width: 100%;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  padding: clamp(1rem, 1.8vw, 1.35rem) 0 0;
  border-top: 1px solid rgba(238, 247, 246, 0.2);
  list-style: none;
}

.agent-job-rail li {
  width: 100%;
  max-width: 3.4rem;
  justify-self: center;
}

.agent-job-rail a {
  display: grid;
  width: 100%;
  min-height: 2.85rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(240, 251, 248, 0.5);
  border-radius: 0.78rem;
  background:
    linear-gradient(145deg, rgba(244, 255, 252, 0.14), transparent 48%),
    rgba(5, 15, 24, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -10px 18px rgba(2, 8, 15, 0.2),
    0 6px 16px rgba(0, 0, 0, 0.16);
  color: #f7fbfa;
  text-decoration: none;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.agent-job-rail a:hover,
.agent-job-rail a:focus-visible {
  border-color: rgba(255, 255, 255, 0.86);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 48%),
    rgba(16, 49, 54, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 1rem rgba(196, 248, 237, 0.15);
  outline: none;
  transform: translateY(-2px);
}

.agent-job-rail svg {
  width: clamp(1.25rem, 2vw, 1.5rem);
  height: clamp(1.25rem, 2vw, 1.5rem);
  filter: drop-shadow(0 0 0.44rem rgba(244, 255, 252, 0.28));
}

.homepage-final-cta {
  margin-top: 2rem;
  border-color: rgba(197, 155, 122, 0.34);
  background:
    radial-gradient(circle at 92% 18%, rgba(159, 198, 170, 0.13), transparent 32%),
    linear-gradient(135deg, rgba(56, 42, 42, 0.86), rgba(14, 24, 39, 0.94));
}

.transparency-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.transparency-result-grid article {
  min-height: 170px;
  padding: 1.1rem;
  border: 1px solid rgba(174, 190, 199, 0.16);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(35, 44, 56, 0.54), rgba(7, 14, 25, 0.52));
}

.transparency-result-grid article::before {
  content: '';
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  margin-bottom: 1.6rem;
  border-radius: 50%;
  background: #9fc6aa;
  box-shadow: 0 0 12px rgba(159, 198, 170, 0.62);
}

.transparency-result-grid article[data-result="missing"]::before {
  background: #9eacb9;
  box-shadow: 0 0 12px rgba(158, 172, 185, 0.45);
}

.transparency-result-grid article[data-result="gap"]::before {
  background: #d8ab7f;
  box-shadow: 0 0 12px rgba(216, 171, 127, 0.55);
}

.transparency-result-grid article[data-result="confirm"]::before {
  background: #b7c9d8;
  box-shadow: 0 0 12px rgba(183, 201, 216, 0.5);
}

.transparency-result-grid strong {
  color: #edf3f5;
  font-family: var(--font-headline);
}

.transparency-result-grid p {
  margin-top: 0.55rem;
  color: #aebcc7;
  font-size: 0.86rem;
  line-height: 1.55;
}

.ai-search-expert-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  border-color: rgba(159, 198, 170, 0.3);
  background:
    radial-gradient(circle at 86% 16%, rgba(111, 159, 131, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(20, 39, 43, 0.94), rgba(13, 21, 36, 0.97));
}

.ai-search-expert-card h2 {
  max-width: 21ch;
  margin: 0.35rem 0 0.85rem;
}

.ai-search-expert-card p:not(.eyebrow) {
  max-width: 68ch;
  color: #cbd5df;
}

.ai-search-expert-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.ai-search-expert-signals span {
  display: grid;
  min-height: 5.5rem;
  place-items: center;
  padding: 0.8rem;
  border: 1px solid rgba(159, 198, 170, 0.2);
  border-radius: 10px;
  background: rgba(7, 15, 26, 0.42);
  color: #b9d8c1;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-align: center;
}

.scan-hero-intake .scan-intake-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 1050px) {
  .homepage-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .homepage-path-grid,
  .transparency-result-grid {
    grid-template-columns: 1fr;
  }

  .homepage-path-card {
    min-height: 0;
  }

  .homepage-path-card small {
    min-height: 0;
  }

  .homepage-agents-card,
  .homepage-final-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .homepage-agents-card {
    grid-template-columns: 1fr;
  }

  .homepage-agents-card .btn-primary {
    width: 100%;
  }

  .homepage-final-cta .hero-actions,
  .homepage-final-cta .btn-primary {
    width: 100%;
  }

  .scan-hero-intake .scan-intake-form {
    grid-template-columns: 1fr;
  }

.ai-search-expert-card,
  .ai-search-expert-signals {
    grid-template-columns: 1fr;
  }
}

/* ---------- HOMEPAGE INSIGHTS: A LIGHTER EDITORIAL SHELF ---------- */
.homepage-blog-card {
  --insight-edge: #9c6c5c;
  --insight-edge-soft: rgba(156, 108, 92, 0.28);
  --insight-wash: rgba(156, 108, 92, 0.12);
  --insight-heading: #d1b1a3;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--insight-edge-soft);
  background:
    radial-gradient(circle at 88% 10%, var(--insight-wash), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%),
    linear-gradient(145deg, #222a37, #171e2c 58%, #141a27);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -8px 18px rgba(4, 8, 15, 0.19),
    0 10px 24px rgba(0, 0, 0, 0.16);
  transition: border-color 360ms ease, box-shadow 420ms ease, filter 420ms ease;
}

.homepage-blog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.5rem;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg, var(--insight-tile-border), transparent);
  opacity: 0.72;
}

.homepage-insight-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Hero-themed Insights have an older direct-child rule for video heroes.
   Keep this post cover as a background layer, just like every other tile. */
.homepage-blog-card.hero-theme > .homepage-insight-media {
  position: absolute;
  z-index: 0;
}

.homepage-insight-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) contrast(1.08) brightness(0.78);
  opacity: 0.72;
  transform: scale(1.035);
}

.homepage-insight-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 11, 20, 0.06) 0%, rgba(5, 11, 20, 0.2) 46%, rgba(5, 11, 20, 0.72) 100%),
    color-mix(in srgb, var(--insight-tile-surface) 82%, rgba(6, 11, 20, 0.74));
}

.homepage-blog-card > :not(.homepage-insight-media) {
  position: relative;
  z-index: 1;
}

.homepage-insight-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 100%;
}

.homepage-insight-body .eyebrow {
  margin: 0;
  color: var(--insight-tile-kicker);
  font-size: 0.67rem;
  letter-spacing: 0.12em;
}

.homepage-insight-body h3 {
  max-width: 25ch;
  margin: 0.72rem 0 0.78rem;
  font-size: clamp(1.3rem, 1.7vw, 1.68rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.homepage-insight-body > p:not(.eyebrow) {
  display: -webkit-box;
  max-width: 49ch;
  margin: 0;
  overflow: hidden;
  color: var(--insight-tile-copy);
  font-size: clamp(0.96rem, 1.14vw, 1.08rem);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.homepage-insight-body .service-link {
  margin-top: auto;
}

/* At the two-column breakpoint, let the third current Insight complete the
   shelf instead of leaving an empty half-row beside it. */
@media (min-width: 801px) and (max-width: 1024px) {
  .homepage-blog-section > [data-homepage-insight-slot]:last-child {
    grid-column: 1 / -1;
  }
}

.homepage-blog-card:hover,
.homepage-blog-card:focus-within {
  border-color: color-mix(in srgb, var(--insight-tile-border) 82%, white 18%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    inset 0 -8px 18px rgba(4, 8, 15, 0.17),
    0 14px 30px rgba(0, 0, 0, 0.2),
    0 0 24px var(--insight-tile-light);
  filter: brightness(1.035);
}

.homepage-blog-card h3 {
  color: var(--insight-tile-heading) !important;
}

.homepage-blog-card > p:not(.eyebrow) {
  color: var(--insight-tile-copy);
}

.homepage-blog-card .service-link {
  align-self: flex-start;
  padding: 0.56rem 0.72rem;
  border: 1px solid var(--insight-tile-border);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 48%),
    rgba(9, 14, 23, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 2px 0 color-mix(in srgb, var(--insight-tile-border) 35%, #111827);
  color: color-mix(in srgb, var(--insight-tile-heading) 84%, white 8%);
  transition: border-color 280ms ease, background 280ms ease, transform 280ms ease;
}

.homepage-blog-card .service-link:hover,
.homepage-blog-card .service-link:focus-visible {
  border-color: color-mix(in srgb, var(--insight-tile-border) 72%, transparent);
  background: color-mix(in srgb, var(--insight-tile-surface) 36%, rgba(9, 14, 23, 0.42));
  color: var(--insight-tile-heading);
  outline: none;
  transform: translateY(-1px);
}

/* ---------- ARTICLE 50 SITE SCAN ---------- */
.scan-product-main {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 5.5rem) 0 clamp(3.5rem, 8vw, 7rem);
}

.scan-product-hero,
.scan-product-body,
.scan-sample-report,
.scan-product-footer {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(174, 137, 100, 0.28);
  border-radius: 26px;
  box-shadow: 0 18px 52px rgba(1, 4, 14, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.scan-product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  min-height: 500px;
  padding: clamp(2rem, 5vw, 5.25rem);
  background:
    radial-gradient(circle at 98% 8%, rgba(169, 117, 98, 0.2), transparent 32%),
    radial-gradient(circle at 10% 98%, rgba(49, 104, 83, 0.22), transparent 37%),
    linear-gradient(103deg, rgba(13, 29, 37, 0.96), rgba(15, 18, 32, 0.94) 58%, rgba(35, 27, 30, 0.93));
}

.scan-product-hero::before,
.scan-product-body::before,
.scan-sample-report::before,
.scan-product-footer::before {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  opacity: 0.7;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.055), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.025));
}

.scan-product-copy,
.scan-score-card,
.scan-product-heading,
.scan-accordion,
.scan-sample-copy,
.scan-report-sheet,
.scan-product-footer > * {
  position: relative;
  z-index: 1;
}

.scan-product-copy .eyebrow,
.scan-product-heading .eyebrow,
.scan-sample-copy .eyebrow,
.scan-product-footer .eyebrow {
  color: #d4a67d;
}

.scan-product-copy h1 {
  max-width: 10ch;
  margin-top: 0.5rem;
  font-size: clamp(3rem, 6vw, 5.7rem);
  line-height: 1.03;
}

.scan-product-release {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.15rem 0 -0.12rem;
  color: #9fcdb5;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.scan-product-release::before {
  content: '';
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 999px;
  background: #9fcdb5;
  box-shadow: 0 0 0 0.25rem rgba(159, 205, 181, 0.09);
}

.scan-product-copy h1 span {
  color: #9fcdb5;
  background: none;
  -webkit-text-fill-color: #9fcdb5;
}

.scan-product-lede {
  margin-top: 1.45rem;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: #bed0db;
}

.scan-product-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.6rem 0;
}

.scan-product-signals span,
.scan-product-note,
.scan-score-kicker,
.scan-report-sheet-head,
.scan-accordion summary span,
.scan-accordion summary em {
  font-family: var(--font-mono);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.scan-product-signals span {
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(185, 154, 117, 0.36);
  border-radius: 999px;
  background: rgba(8, 14, 25, 0.42);
  color: #d8c1a8;
  font-size: 0.72rem;
}

.scan-product-form {
  max-width: 690px;
  margin-top: 1.7rem;
}

.scan-entry-panel {
  padding: 1rem;
  border: 1px solid rgba(168, 204, 182, 0.42);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(111, 171, 139, 0.12), transparent 42%),
    rgba(4, 13, 23, 0.6);
  box-shadow: inset 0 1px 0 rgba(231, 255, 239, 0.07), 0 0 0 1px rgba(35, 73, 65, 0.14);
}

.scan-entry-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 2.55rem;
  margin-bottom: 0.15rem;
}

.scan-entry-status {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  color: #b8dfc6;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.scan-entry-status i {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: #9fcdb5;
  box-shadow: 0 0 0 0 rgba(159, 205, 181, 0.5);
  animation: scan-entry-pulse 2.2s ease-out infinite;
}

.scan-entry-pointer {
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  margin: -0.3rem 0.1rem 0 0;
  border: 1px solid rgba(212, 166, 125, 0.46);
  border-radius: 999px;
  background: rgba(32, 22, 25, 0.65);
  color: #e2b286;
  font-family: var(--font-mono);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.2);
  animation: scan-entry-point 1.9s ease-in-out infinite;
}

.scan-entry-pointer b { font-size: 1.12rem; line-height: 1; }

.scan-entry-panel label { margin-bottom: 0.55rem; }

.scan-entry-panel .scan-product-input-row {
  position: relative;
}

.scan-entry-panel .scan-product-input-row::before {
  content: '';
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  top: -0.55rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159, 205, 181, 0.85), transparent);
  opacity: 0.7;
}

.scan-entry-panel input {
  border-color: rgba(166, 202, 186, 0.58);
  background: rgba(3, 12, 20, 0.76);
  color: #d8e7e5;
  -webkit-text-fill-color: #d8e7e5;
}

.scan-entry-panel input::placeholder {
  color: #a0bac0;
  -webkit-text-fill-color: #a0bac0;
  opacity: 1;
}

.scan-entry-panel input:focus {
  border-color: #c5e6cf;
  box-shadow: 0 0 0 3px rgba(159, 205, 181, 0.14);
}

.scan-entry-panel .btn-primary:not(:disabled) {
  border: 1px solid rgba(221, 171, 124, 0.68);
  background: linear-gradient(130deg, rgba(130, 78, 58, 0.98), rgba(88, 53, 45, 0.95));
  color: #ffe0c3;
}

.scan-entry-panel .btn-primary:disabled {
  cursor: wait;
  opacity: 0.78;
}

.scan-entry-availability {
  margin: 0.72rem 0 0;
  color: #9fb4bc;
  font-size: 0.78rem;
  line-height: 1.45;
}

.scan-entry-safety {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.52rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.scan-entry-safety li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.43rem;
  padding: 0.62rem;
  border: 1px solid rgba(147, 182, 170, 0.18);
  border-radius: 10px;
  background: rgba(8, 22, 30, 0.38);
}

.scan-entry-safety span {
  grid-row: span 2;
  color: #98c8aa;
  font-weight: 800;
}

.scan-entry-safety strong {
  color: #d1dfdf;
  font-size: 0.7rem;
  line-height: 1.2;
}

.scan-entry-safety small {
  display: block;
  margin-top: 0.15rem;
  color: #91a8b1;
  font-size: 0.67rem;
  line-height: 1.3;
}

.scan-entry-panel.is-running .scan-entry-pointer {
  animation-duration: 0.8s;
  color: #c4e7ce;
  border-color: rgba(159, 205, 181, 0.7);
}

.article50-scan-result {
  margin-top: 1rem;
  border: 1px solid rgba(147, 182, 170, 0.27);
  border-radius: 12px;
  background: rgba(3, 12, 20, 0.55);
  overflow: hidden;
}

.article50-result-progress,
.article50-result-error {
  display: flex;
  align-items: flex-start;
  gap: 0.72rem;
  padding: 1rem;
}

.article50-result-progress strong,
.article50-result-error strong,
.article50-result-heading strong {
  display: block;
  color: #e2eeee;
  font-size: 0.9rem;
}

.article50-result-progress p,
.article50-result-error p,
.article50-result-heading p {
  margin: 0.23rem 0 0;
  color: #9cb2ba;
  font-size: 0.75rem;
  line-height: 1.45;
}

.article50-result-spinner {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  margin-top: 0.18rem;
  border: 2px solid rgba(159, 205, 181, 0.2);
  border-top-color: #a9d9b9;
  border-radius: 999px;
  animation: article50-spin 0.85s linear infinite;
}

.article50-result-error {
  border-left: 3px solid #c88871;
  background: rgba(105, 53, 45, 0.22);
}

.article50-result-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.92rem 1rem;
  border-bottom: 1px solid rgba(147, 182, 170, 0.18);
  background: linear-gradient(130deg, rgba(111, 171, 139, 0.13), transparent 64%);
}

.article50-result-kicker {
  display: block;
  margin-bottom: 0.32rem;
  color: #9fcdb5;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.article50-result-score {
  flex: 0 0 auto;
  padding: 0.38rem 0.48rem;
  border: 1px solid rgba(159, 205, 181, 0.36);
  border-radius: 7px;
  color: #c2dfca;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.article50-result-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(147, 182, 170, 0.15);
}

.article50-result-summary span {
  padding: 0.28rem 0.42rem;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.61rem;
  letter-spacing: 0.04em;
}

.article50-result-summary .is-found,
.article50-result-status.is-found { color: #b9e2c5; background: rgba(58, 129, 89, 0.18); }
.article50-result-summary .is-not_found,
.article50-result-status.is-not_found { color: #efc3a1; background: rgba(159, 92, 56, 0.2); }
.article50-result-summary .is-confirm,
.article50-result-status.is-confirm { color: #c5d0e2; background: rgba(92, 112, 156, 0.2); }

.article50-result-checks {
  display: grid;
  gap: 0.38rem;
  padding: 0.72rem;
}

.article50-result-check {
  border: 1px solid rgba(147, 182, 170, 0.16);
  border-radius: 8px;
  background: rgba(8, 22, 30, 0.34);
}

.article50-result-check summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.48rem;
  padding: 0.57rem 0.62rem;
  cursor: pointer;
  list-style: none;
}

.article50-result-check summary::-webkit-details-marker { display: none; }

.article50-result-status {
  padding: 0.18rem 0.25rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.article50-result-check summary strong { color: #d3e0e0; font-size: 0.7rem; line-height: 1.3; }
.article50-result-check summary small { color: #8399a2; font-family: var(--font-mono); font-size: 0.55rem; }

.article50-result-check-body {
  padding: 0 0.65rem 0.65rem;
  color: #9bb0b7;
  font-size: 0.7rem;
  line-height: 1.46;
}

.article50-result-check-body p { margin: 0.15rem 0 0; }

.article50-result-evidence {
  margin: 0.6rem 0 0;
  padding: 0.52rem 0.58rem;
  border-left: 2px solid rgba(159, 205, 181, 0.57);
  background: rgba(12, 31, 37, 0.55);
  color: #b8c8c8;
  font-size: 0.67rem;
}

.article50-result-evidence a { color: #b8dfc6; text-decoration: none; }
.article50-result-next { color: #d5b092; }

.article50-result-warnings {
  margin: 0 0.72rem 0.72rem;
  padding: 0.65rem 0.72rem;
  border: 1px solid rgba(208, 160, 114, 0.25);
  border-radius: 8px;
  background: rgba(69, 45, 32, 0.22);
  color: #cdb79f;
  font-size: 0.68rem;
  line-height: 1.45;
}

.article50-result-warnings strong { display: block; font-size: 0.67rem; }
.article50-result-warnings ul { margin: 0.3rem 0 0; padding-left: 1rem; }

.article50-result-limitation {
  margin: 0;
  padding: 0.68rem 0.85rem;
  border-top: 1px solid rgba(147, 182, 170, 0.16);
  color: #8499a2;
  font-size: 0.65rem;
  line-height: 1.45;
}

@keyframes article50-spin { to { transform: rotate(360deg); } }

@keyframes scan-entry-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(159, 205, 181, 0.38); }
  55% { box-shadow: 0 0 0 0.38rem rgba(159, 205, 181, 0); }
}

@keyframes scan-entry-point {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.28rem); }
}

.scan-product-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: #d5e0e6;
  font-size: 0.9rem;
  font-weight: 600;
}

.scan-product-input-row {
  display: flex;
  gap: 0.65rem;
}

.scan-product-input-row input {
  min-width: 0;
  flex: 1;
  min-height: 3.45rem;
  padding: 0 1rem;
  border: 1px solid rgba(157, 184, 193, 0.38);
  border-radius: 11px;
  background: rgba(3, 9, 19, 0.52);
  color: #e4edf1;
  font: inherit;
}

.scan-product-input-row input::placeholder { color: #8296a3; }

.scan-product-input-row input:focus {
  outline: none;
  border-color: #9fcdb5;
  box-shadow: 0 0 0 3px rgba(117, 178, 143, 0.16);
}

.scan-product-input-row .btn-primary {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.scan-product-note {
  margin-top: 0.8rem;
  color: #8ca4b0;
  font-size: 0.68rem;
}

.scan-product-coverage {
  max-width: 45rem;
  margin: 0.72rem 0 0;
  color: #a8bdc6;
  font-size: 0.88rem;
  line-height: 1.55;
}

.scan-product-coverage strong {
  color: #d6b28c;
  font-weight: 600;
}

.scan-product-actions,
.scan-sample-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
}

.scan-product-actions a,
.scan-sample-actions > a:not(.btn-primary) {
  color: #b8d1dc;
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-color: rgba(184, 209, 220, 0.35);
  text-underline-offset: 0.25em;
}

.scan-score-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.65rem, 3vw, 2.5rem);
  border: 1px solid rgba(211, 163, 113, 0.4);
  border-radius: 20px;
  background:
    radial-gradient(circle at 70% 24%, rgba(222, 175, 123, 0.13), transparent 34%),
    linear-gradient(155deg, rgba(28, 32, 43, 0.92), rgba(8, 16, 27, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 243, 225, 0.08), 0 12px 28px rgba(0, 0, 0, 0.18);
}

.scan-score-kicker { color: #c79670; font-size: 0.7rem; }

.scan-score-card > strong {
  display: block;
  margin: 0.2rem 0 -0.4rem;
  color: #e0b184;
  font-family: var(--font-headline);
  font-size: clamp(5rem, 11vw, 7.5rem);
  line-height: 1;
}

.scan-score-label { color: #c9d7de; font-weight: 600; }

.scan-score-list {
  display: grid;
  gap: 0.65rem;
  margin: 1.8rem 0 1.45rem;
  color: #b6c5cc;
  font-size: 0.9rem;
}

.scan-score-list span { display: flex; align-items: center; gap: 0.6rem; }
.scan-score-list i { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: #9ac6ac; box-shadow: 0 0 12px rgba(154, 198, 172, 0.6); }
.scan-score-card p { color: #8299a5; font-size: 0.78rem; }

.scan-product-body {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: 1.2rem;
  padding: clamp(2rem, 5vw, 4.75rem);
  background:
    radial-gradient(circle at 2% 4%, rgba(55, 122, 97, 0.16), transparent 30%),
    linear-gradient(105deg, rgba(10, 25, 31, 0.94), rgba(13, 18, 33, 0.97) 58%, rgba(36, 27, 30, 0.86));
}

.scan-product-heading { align-self: start; }
.scan-product-heading h2,
.scan-sample-copy h2,
.scan-product-footer h2 { margin: 0.45rem 0 1rem; color: #c2d4df; }
.scan-product-heading p:not(.eyebrow), .scan-sample-copy p:not(.eyebrow), .scan-product-footer p:not(.eyebrow) { color: #a9bbc5; }

.scan-report-key {
  margin-top: clamp(2rem, 5vw, 4.75rem);
  padding: 1.2rem;
  border: 1px solid rgba(118, 151, 142, 0.35);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(89, 142, 119, 0.15), transparent 34%),
    linear-gradient(145deg, rgba(12, 31, 35, 0.78), rgba(10, 16, 29, 0.7));
  box-shadow: inset 0 1px 0 rgba(222, 242, 232, 0.045), 0 12px 26px rgba(0, 0, 0, 0.14);
}

.scan-report-key .eyebrow { margin-bottom: 0.5rem; font-size: 0.68rem; }
.scan-report-key h3 { margin-bottom: 1.2rem; color: #c1d6de; font-size: 1.2rem; line-height: 1.25; }

.scan-report-key-row {
  display: grid;
  grid-template-columns: 4.85rem minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(189, 211, 220, 0.1);
}

.scan-report-key-row > span {
  align-self: start;
  padding: 0.26rem 0.38rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.scan-report-key-row p { color: #adbec7 !important; font-size: 0.79rem; line-height: 1.45; }
.scan-report-key-row.is-found > span { color: #9fcfb2; }
.scan-report-key-row.is-gap > span { color: #d9aa78; }
.scan-report-key-row.is-confirm > span { color: #aac3da; }
.scan-report-key small { display: block; margin-top: 0.65rem; color: #8199a4; font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.05em; text-transform: uppercase; }

.scan-accordion { display: grid; gap: 0.75rem; }

.scan-accordion details {
  overflow: hidden;
  border: 1px solid var(--scan-accent-edge, rgba(143, 106, 82, 0.38));
  border-radius: 14px;
  background: linear-gradient(105deg, var(--scan-accent-wash, rgba(143, 106, 82, 0.12)), rgba(8, 15, 27, 0.66) 44%);
}

.scan-accordion details:nth-child(1) { --scan-accent-edge: rgba(101, 158, 127, 0.45); --scan-accent-wash: rgba(54, 119, 91, 0.18); }
.scan-accordion details:nth-child(2) { --scan-accent-edge: rgba(196, 151, 87, 0.48); --scan-accent-wash: rgba(138, 94, 40, 0.2); }
.scan-accordion details:nth-child(3) { --scan-accent-edge: rgba(174, 119, 95, 0.45); --scan-accent-wash: rgba(126, 63, 52, 0.18); }
.scan-accordion details:nth-child(4) { --scan-accent-edge: rgba(120, 146, 181, 0.45); --scan-accent-wash: rgba(58, 83, 125, 0.18); }
.scan-accordion details:nth-child(5) { --scan-accent-edge: rgba(118, 151, 142, 0.44); --scan-accent-wash: rgba(48, 99, 86, 0.16); }

.scan-accordion summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  min-height: 4.4rem;
  padding: 0.95rem 1.05rem;
  color: #d6e0e7;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.scan-accordion summary::-webkit-details-marker { display: none; }
.scan-accordion summary::after { content: '+'; color: #d6ad83; font: 1.25rem/1 var(--font-mono); }
.scan-accordion details[open] summary::after { content: '−'; }
.scan-accordion summary span { color: #d09b73; font-size: 0.7rem; }
.scan-accordion summary em { color: #95aab7; font-size: 0.68rem; font-style: normal; }

.scan-accordion details > div {
  padding: 0 1.05rem 1.15rem;
  border-top: 1px solid rgba(189, 211, 220, 0.08);
}

.scan-accordion details p { padding-top: 0.85rem; color: #aabcc6; font-size: 0.92rem; }
.scan-accordion ul { display: grid; gap: 0.35rem; margin: 0.75rem 0 0 1.1rem; color: #c4d1d8; font-size: 0.86rem; }
.scan-accordion code { color: #d6b78e; font-family: var(--font-mono); }

.scan-sample-report {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(310px, 0.7fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
  margin-top: 1.2rem;
  padding: clamp(2rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 96% 90%, rgba(116, 151, 137, 0.19), transparent 34%),
    linear-gradient(104deg, rgba(36, 26, 29, 0.94), rgba(14, 17, 31, 0.96) 54%, rgba(12, 35, 39, 0.94));
}

.scan-report-sheet {
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(208, 182, 150, 0.54);
  border-radius: 17px;
  background: linear-gradient(145deg, #e0ddd3, #c9d1d0 100%);
  color: #14212b;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.scan-report-sheet-head { display: flex; justify-content: space-between; color: #5f5449; font-size: 0.68rem; }
.scan-report-sheet-head small { color: #7c6858; }
.scan-report-summary { display: flex; align-items: baseline; gap: 0.6rem; margin: 1.55rem 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(27, 43, 51, 0.2); }
.scan-report-summary strong { font-family: var(--font-headline); font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1; color: #284c48; }
.scan-report-summary span { color: #42545a; font-weight: 600; }
.scan-report-row { display: grid; grid-template-columns: 4.9rem minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid rgba(27, 43, 51, 0.14); font-size: 0.78rem; }
.scan-report-row span { color: #59666a; font-family: var(--font-mono); font-size: 0.68rem; }
.scan-report-row strong { color: #24343b; }
.scan-report-row em { padding: 0.25rem 0.45rem; border-radius: 999px; color: #263831; font-size: 0.68rem; font-style: normal; font-weight: 700; }
.scan-report-row.is-pass em { background: #a3cfb4; }
.scan-report-row.is-gap em { background: #e1bc88; }
.scan-report-row.is-human em { background: #bdc8d2; }
.scan-report-sheet > p { margin-top: 1.1rem; color: #526268; font-size: 0.77rem; }

.scan-product-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem 2rem;
  align-items: center;
  margin-top: 1.2rem;
  padding: clamp(1.7rem, 4vw, 3rem) clamp(1.7rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 94% 50%, rgba(118, 167, 142, 0.18), transparent 27%),
    linear-gradient(105deg, rgba(14, 35, 37, 0.96), rgba(14, 20, 32, 0.96));
}

.scan-product-footer h2 { font-size: clamp(1.55rem, 3vw, 2.45rem); }
.scan-product-footer .btn-primary { white-space: nowrap; }
.scan-product-footer small { grid-column: 1 / -1; color: #859da6; font-size: 0.76rem; }

@media (max-width: 900px) {
  .scan-product-hero,
  .scan-product-body,
  .scan-sample-report { grid-template-columns: 1fr; }
  .scan-score-card { min-height: 330px; }
  .scan-product-copy h1 { max-width: 12ch; }
  .scan-report-key { margin-top: 2rem; }
}

@media (max-width: 720px) {
  .scan-entry-safety { grid-template-columns: 1fr; }
  .article50-result-heading { display: block; }
  .article50-result-score { display: inline-block; margin-top: 0.65rem; }
  .article50-result-check summary { grid-template-columns: auto minmax(0, 1fr); }
  .article50-result-check summary small { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-entry-status i,
  .scan-entry-pointer,
  .article50-result-spinner { animation: none; }
}

@media (max-width: 620px) {
  .scan-product-main { width: min(100% - 1rem, 1180px); padding-top: 1rem; }
  .scan-product-hero,
  .scan-product-body,
  .scan-sample-report,
  .scan-product-footer { border-radius: 18px; }
  .scan-product-hero { min-height: 0; }
  .scan-product-input-row { flex-direction: column; }
  .scan-product-input-row .btn-primary { width: 100%; }
  .scan-product-footer { grid-template-columns: 1fr; }
  .scan-product-footer .btn-primary { width: 100%; text-align: center; }
  .scan-accordion summary { grid-template-columns: auto minmax(0, 1fr); }
  .scan-accordion summary em { grid-column: 2; }
  .scan-accordion summary::after { grid-column: 3; grid-row: 1; }
  .scan-report-row { grid-template-columns: 3.65rem minmax(0, 1fr); }
  .scan-report-row em { grid-column: 2; justify-self: start; }
}

/* ---------- AI SEARCH VISIBILITY CHECK ---------- */
.ai-search-page { background: #0b1020; }
.ai-search-product-main { position: relative; z-index: 1; width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 5vw, 5.5rem) 0 clamp(3.5rem, 8vw, 7rem); }
.ai-search-hero, .ai-visibility-check, .ai-search-checks, .ai-search-evidence-section, .ai-search-limits, .ai-search-pricing { position: relative; overflow: hidden; border: 1px solid rgba(154, 130, 101, 0.28); border-radius: 26px; box-shadow: 0 18px 52px rgba(1, 4, 14, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.ai-search-hero::before, .ai-visibility-check::before, .ai-search-checks::before, .ai-search-evidence-section::before, .ai-search-limits::before, .ai-search-pricing::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.055), transparent 18%, transparent 82%, rgba(255,255,255,.02)); }

.ai-search-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); min-height: 520px; background: linear-gradient(105deg, rgba(16, 27, 38, .97), rgba(14, 19, 34, .94) 52%, rgba(44, 31, 29, .92)); }
.ai-search-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 5rem); }
.ai-search-hero-copy .eyebrow, .ai-visibility-check .eyebrow, .ai-search-checks .eyebrow, .ai-search-evidence-section .eyebrow, .ai-search-limits .eyebrow, .ai-search-pricing .eyebrow { color: #d4a67d; }
.ai-search-hero h1 { max-width: 15ch; margin: .5rem 0 1.2rem; font-size: clamp(2.85rem, 5.3vw, 5rem); line-height: 1.02; }
.ai-search-lede { max-width: 56ch; color: #c0d0da; font-size: clamp(1.04rem, 1.6vw, 1.22rem); }
.ai-search-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .95rem 1.25rem; margin-top: 1.7rem; }
.ai-search-text-cta { display: inline-flex; align-items: center; min-height: 3rem; padding: .7rem 1rem; border: 1px solid rgba(234, 170, 98, .48); border-radius: 10px; background: linear-gradient(135deg, rgba(185, 111, 46, .42), rgba(102, 52, 22, .6) 52%, rgba(42, 31, 35, .68)); box-shadow: inset 0 1px 0 rgba(255, 238, 212, .18), inset 0 -7px 12px rgba(38, 18, 8, .16); color: #f0d3ab; font-size: .88rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(10px) saturate(1.18); -webkit-backdrop-filter: blur(10px) saturate(1.18); }
.ai-search-text-cta:hover, .ai-search-text-cta:focus-visible { border-color: rgba(247, 190, 113, .74); background: linear-gradient(135deg, rgba(211, 131, 57, .52), rgba(123, 64, 25, .68) 52%, rgba(51, 35, 37, .74)); color: #ffe2b9; }
.ai-search-text-cta span { margin-left: .45rem; color: #ffd9a7; font-family: var(--font-mono); font-size: .76rem; }
.ai-search-trust-line { margin-top: 1.55rem; color: #9cafbb; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.ai-search-hero-visual { position: relative; min-height: 520px; overflow: hidden; border-left: 1px solid rgba(190, 160, 126, .2); }
.ai-search-hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 20, 33, .74), transparent 45%), linear-gradient(0deg, rgba(8, 15, 27, .58), transparent 55%); }
.ai-search-hero-visual img { width: 100%; height: 100%; object-fit: cover; opacity: .73; filter: saturate(.82) contrast(.94); }
.ai-search-hero-readout { position: absolute; z-index: 1; right: clamp(1.2rem, 4vw, 3rem); bottom: clamp(1.2rem, 5vw, 3rem); display: grid; gap: .35rem; min-width: min(19rem, calc(100% - 2.4rem)); padding: 1rem 1.1rem; border: 1px solid rgba(174, 205, 190, .4); border-radius: 13px; background: rgba(8, 18, 28, .72); box-shadow: inset 0 1px 0 rgba(235, 255, 246, .08), 0 12px 28px rgba(0,0,0,.24); }
.ai-search-hero-readout span, .ai-search-hero-readout small { color: #9fc9af; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; }
.ai-search-hero-readout strong { color: #d7e3e7; font-family: var(--font-headline); font-size: 1.2rem; }
.ai-search-hero-readout i { width: 100%; height: 2px; background: linear-gradient(90deg, #78aa8c, #d3a474, #728ca9); }

.ai-search-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.ai-search-pillar { position: relative; min-height: 280px; padding: 1.7rem; overflow: hidden; border: 1px solid var(--pillar-edge); border-radius: 19px; background: radial-gradient(circle at 88% 10%, var(--pillar-glow), transparent 38%), linear-gradient(145deg, var(--pillar-start), #0b1321 72%); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 30px rgba(0,0,0,.18); }
.ai-search-pillar::before { content: ''; position: absolute; top: 0; left: 1.35rem; width: 34%; height: 2px; background: var(--pillar-top); }
.ai-search-pillar > span { display: block; margin-bottom: 1.35rem; color: var(--pillar-number); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; }
.ai-search-pillar .eyebrow { color: var(--pillar-number); font-size: .68rem; }
.ai-search-pillar h2 { margin: .45rem 0 .8rem; color: var(--pillar-heading) !important; font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.12; }
.ai-search-pillar p:not(.eyebrow) { color: #b4c2ca; font-size: .95rem; }
.ai-search-pillar.is-bronze { --pillar-edge: rgba(189, 142, 86, .44); --pillar-glow: rgba(164, 111, 62, .18); --pillar-start: #2b2525; --pillar-top: #bf8d60; --pillar-number: #deb17e; --pillar-heading: #dec39b; }
.ai-search-pillar.is-jade { --pillar-edge: rgba(103, 158, 127, .44); --pillar-glow: rgba(57, 126, 94, .19); --pillar-start: #132b2d; --pillar-top: #7caa8c; --pillar-number: #a5d0b0; --pillar-heading: #b9d4c3; }
.ai-search-pillar.is-steel { --pillar-edge: rgba(112, 145, 181, .44); --pillar-glow: rgba(64, 97, 142, .2); --pillar-start: #19263a; --pillar-top: #87a9ce; --pillar-number: #b7cce1; --pillar-heading: #c2d2e3; }

.ai-visibility-check { display: grid; grid-template-columns: minmax(250px, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 6vw, 5rem); margin-top: 1.2rem; padding: clamp(2rem, 5vw, 4.25rem); background: radial-gradient(circle at 6% 6%, rgba(48, 116, 91, .2), transparent 31%), radial-gradient(circle at 96% 94%, rgba(174, 120, 83, .15), transparent 31%), linear-gradient(105deg, rgba(10, 28, 34, .96), rgba(14, 20, 34, .97)); }
.ai-check-copy, .ai-visibility-form, .ai-scan-progress, .ai-scan-result, .ai-scan-error, .ai-search-checks > *, .ai-search-evidence-section > *, .ai-search-limits > *, .ai-search-pricing > * { position: relative; z-index: 1; }
.ai-check-copy h2, .ai-search-checks h2, .ai-search-evidence-section h2, .ai-search-limits h2, .ai-search-pricing h2 { margin: .45rem 0 1rem; color: #c2d4df; }
.ai-check-copy p:not(.eyebrow) { color: #adc0c8; }
.ai-check-signals { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.ai-check-signals span { padding: .35rem .56rem; border: 1px solid rgba(161, 202, 181, .35); border-radius: 999px; color: #add0ba; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; }
.ai-visibility-form { align-self: center; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid rgba(193, 157, 115, .4); border-radius: 18px; background: rgba(5, 13, 24, .62); box-shadow: inset 0 1px 0 rgba(255,232,207,.06); }
.scanner-coming-soon-panel { display: flex; flex-direction: column; justify-content: center; gap: .65rem; min-height: 10rem; }
.scanner-coming-soon-panel p { margin: 0; }
.scanner-coming-soon-kicker { color: #d4a67d; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.scanner-coming-soon-panel p:last-child { color: #aec1c8; max-width: 34ch; }
.ai-visibility-form > label:first-child { display: block; margin-bottom: .55rem; color: #d2e0e6; font-weight: 600; }
.ai-visibility-input-row { display: flex; gap: .7rem; }
.ai-visibility-input-row input { flex: 1; min-width: 0; min-height: 3.25rem; padding: 0 1rem; border: 1px solid rgba(157,184,193,.42); border-radius: 10px; background: rgba(7,14,26,.84); color: #e4eef2; font: inherit; }
.ai-visibility-input-row input:focus { outline: none; border-color: #9fcdb5; box-shadow: 0 0 0 3px rgba(117,178,143,.16); }
.ai-visibility-input-row .btn-primary { flex: 0 0 auto; border: 0; cursor: pointer; }
.ai-crawl-option { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1rem; color: #c6d3da; cursor: pointer; }
.ai-crawl-option input { width: 1rem; height: 1rem; margin-top: .22rem; accent-color: #8ebf9d; }
.ai-crawl-option b { display: block; font-size: .88rem; }
.ai-crawl-option small { display: block; margin-top: .16rem; color: #8fa3af; font-size: .76rem; line-height: 1.4; }
.ai-visibility-note { margin-top: .85rem; color: #8ba1aa; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; }
.ai-scan-progress, .ai-scan-result, .ai-scan-error { grid-column: 1 / -1; }
.ai-scan-progress { padding: 1rem 1.2rem; border: 1px solid rgba(129, 176, 148, .3); border-radius: 12px; background: rgba(6, 17, 27, .62); color: #b9d7c4; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.ai-scan-progress > div { height: 3px; margin-top: .7rem; overflow: hidden; border-radius: 999px; background: rgba(182, 210, 199, .14); }
.ai-scan-progress i { display: block; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #79ae91, #e1af78, #84a9cc); animation: aiSearchProgress 1.35s ease-in-out infinite; }
@keyframes aiSearchProgress { 0%,100% { transform: translateX(-105%); } 55% { transform: translateX(265%); } }
.ai-scan-result { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid rgba(128, 177, 151, .44); border-radius: 17px; background: linear-gradient(135deg, rgba(18, 45, 43, .93), rgba(11, 18, 32, .96)); }
.ai-scan-result h3 { margin-top: .35rem; color: #d6e2e7; font-size: clamp(1.3rem, 2.5vw, 2rem); }
.ai-scan-result h3 em { display: block; margin-top: .2rem; color: #abc1cb; font-size: .87rem; font-style: normal; font-weight: 500; }
.ai-scan-result h3 em b { color: #a9d0b4; font-family: var(--font-mono); }
.ai-scan-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 1.25rem 0; }
.ai-scan-category { padding: .78rem; border: 1px solid rgba(184, 204, 216, .15); border-radius: 10px; background: rgba(4, 11, 21, .46); }
.ai-scan-category strong { display: block; color: #d2dee3; font-size: .8rem; line-height: 1.3; }
.ai-scan-category span { display: block; margin-top: .22rem; color: #a6b9c3; font-family: var(--font-mono); font-size: .66rem; }
.ai-scan-category.is-pass { border-color: rgba(124, 188, 147, .36); }.ai-scan-category.is-warn { border-color: rgba(214, 170, 113, .36); }.ai-scan-category.is-gap { border-color: rgba(180, 121, 102, .38); }
.ai-scan-result-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }.ai-scan-result-actions > a:not(.btn-primary) { color: #c4d4dd; font-size: .85rem; text-decoration: underline; text-decoration-color: rgba(196,212,221,.34); text-underline-offset: .25em; }.ai-scan-result-limit { margin-top: 1rem; color: #92a9b2; font-size: .77rem; }
.ai-scan-error { padding: .9rem 1.05rem; border: 1px solid rgba(197, 128, 103, .48); border-radius: 10px; background: rgba(74, 37, 34, .4); color: #e4c2b1; }

.ai-search-checks { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 6vw, 6rem); margin-top: 1.2rem; padding: clamp(2rem, 5vw, 4.75rem); background: radial-gradient(circle at 3% 6%, rgba(65, 124, 91, .17), transparent 30%), linear-gradient(105deg, rgba(9, 27, 31, .96), rgba(14, 19, 34, .97) 58%, rgba(39, 28, 30, .9)); }
.ai-search-checks-heading { align-self: start; }.ai-search-checks-heading > p:not(.eyebrow) { color: #adbec7; }
.ai-search-evidence-key { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }.ai-search-evidence-key span { padding: .32rem .54rem; border-radius: 999px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; }.ai-search-evidence-key .is-pass { color: #a5d4b6; border: 1px solid rgba(135,193,157,.4); }.ai-search-evidence-key .is-gap { color: #e2b489; border: 1px solid rgba(217,168,113,.4); }.ai-search-evidence-key .is-confirm { color: #b6cbe0; border: 1px solid rgba(143,174,207,.4); }
.ai-search-accordion { display: grid; gap: .72rem; }.ai-search-accordion details { overflow: hidden; border: 1px solid var(--search-check-edge); border-radius: 14px; background: linear-gradient(105deg, var(--search-check-wash), rgba(8,15,27,.66) 48%); }.ai-search-accordion details:nth-child(1) { --search-check-edge: rgba(104,158,126,.45); --search-check-wash: rgba(50,115,87,.18); }.ai-search-accordion details:nth-child(2) { --search-check-edge: rgba(198,152,88,.46); --search-check-wash: rgba(137,92,41,.19); }.ai-search-accordion details:nth-child(3) { --search-check-edge: rgba(113,145,181,.45); --search-check-wash: rgba(57,83,125,.19); }.ai-search-accordion details:nth-child(4) { --search-check-edge: rgba(174,119,95,.46); --search-check-wash: rgba(125,62,51,.19); }.ai-search-accordion details:nth-child(5) { --search-check-edge: rgba(129,158,167,.42); --search-check-wash: rgba(59,90,104,.17); }.ai-search-accordion details:nth-child(6) { --search-check-edge: rgba(117,151,142,.44); --search-check-wash: rgba(48,99,86,.16); }
.ai-search-accordion summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; min-height: 4.35rem; padding: .95rem 1.05rem; color: #d6e0e7; cursor: pointer; font-weight: 600; list-style: none; }.ai-search-accordion summary::-webkit-details-marker { display: none; }.ai-search-accordion summary::after { content: '+'; color: #d6ad83; font: 1.25rem/1 var(--font-mono); }.ai-search-accordion details[open] summary::after { content: '−'; }.ai-search-accordion summary span, .ai-search-accordion summary em { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .075em; text-transform: uppercase; }.ai-search-accordion summary span { color: #d09b73; }.ai-search-accordion summary em { color: #95aab7; font-style: normal; }
.ai-search-accordion details > div { padding: 0 1.05rem 1.15rem; border-top: 1px solid rgba(189,211,220,.08); }.ai-search-accordion details p { padding-top: .85rem; color: #aabcc6; font-size: .92rem; }.ai-search-accordion ul { display: grid; gap: .35rem; margin: .75rem 0 0 1.1rem; color: #c4d1d8; font-size: .86rem; }.ai-search-accordion code { color: #d6b78e; font-family: var(--font-mono); }

.ai-search-evidence-section { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-top: 1.2rem; padding: clamp(2rem, 5vw, 4.75rem); background: radial-gradient(circle at 92% 15%, rgba(169,117,98,.18), transparent 32%), linear-gradient(105deg, rgba(36,27,30,.95), rgba(14,19,33,.97) 56%, rgba(11,34,37,.95)); }.ai-search-evidence-copy p:not(.eyebrow), .ai-search-limits p:not(.eyebrow), .ai-search-pricing-heading p:not(.eyebrow) { color: #adbec7; }.ai-search-evidence-copy > a { display: inline-block; margin-top: 1.25rem; color: #d5c3aa; text-decoration: underline; text-underline-offset: .28em; }.ai-search-evidence-copy > a span { color: #9fcdb5; }.ai-search-evidence-list { display: grid; gap: .75rem; }.ai-search-evidence-list > div { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: .1rem .75rem; padding: 1rem; border: 1px solid rgba(185,154,117,.25); border-radius: 12px; background: rgba(5,12,23,.46); }.ai-search-evidence-list span { grid-row: span 2; color: #d2a276; font-family: var(--font-mono); font-size: .75rem; }.ai-search-evidence-list strong { color: #d4dfe4; }.ai-search-evidence-list p { color: #9fb2bd; font-size: .85rem; }
.ai-search-limits { display: grid; grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr); gap: 1.5rem 4rem; align-items: start; margin-top: 1.2rem; padding: clamp(2rem, 5vw, 4rem); background: linear-gradient(105deg, rgba(42,29,31,.94), rgba(16,19,33,.98)); }.ai-search-limits ul { display: grid; gap: .55rem; margin: .2rem 0 0 1.15rem; color: #bdc9d1; }.ai-search-limits > p { grid-column: 2; color: #d0a476 !important; font-size: .9rem; }
.ai-search-pricing { margin-top: 1.2rem; padding: clamp(2rem, 5vw, 4.75rem); background: radial-gradient(circle at 4% 100%, rgba(63,131,100,.18), transparent 30%), linear-gradient(105deg, rgba(9,27,31,.96), rgba(13,19,34,.98) 56%, rgba(37,28,30,.91)); }.ai-search-pricing-heading { max-width: 680px; }.ai-search-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }.ai-price-card { display: flex; min-height: 270px; flex-direction: column; padding: 1.45rem; border: 1px solid var(--price-edge); border-radius: 16px; background: radial-gradient(circle at 90% 9%, var(--price-glow), transparent 33%), linear-gradient(145deg, var(--price-start), rgba(8,14,25,.82) 72%); }.ai-price-card h3 { margin: .55rem 0 .75rem; color: var(--price-heading); font-size: 1.35rem; line-height: 1.15; }.ai-price-card p:not(.eyebrow) { color: #b4c1c9; font-size: .9rem; }.ai-price-card a { margin-top: auto; padding-top: 1.25rem; color: var(--price-heading); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }.ai-price-card a span { float: right; font-size: 1rem; }.ai-price-card.is-free { --price-edge: rgba(106,165,132,.45); --price-glow: rgba(56,125,92,.18); --price-start: #132d2c; --price-heading: #b9d7c2; }.ai-price-card.is-report { --price-edge: rgba(197,152,88,.48); --price-glow: rgba(145,97,45,.18); --price-start: #31271f; --price-heading: #dfc092; }.ai-price-card.is-audit { --price-edge: rgba(119,151,184,.47); --price-glow: rgba(59,89,130,.18); --price-start: #19273b; --price-heading: #c0d2e5; }.ai-search-retainer { margin-top: 1rem; color: #9eafb9; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .045em; text-align: center; text-transform: uppercase; }

@media (max-width: 940px) { .ai-search-hero, .ai-visibility-check, .ai-search-checks, .ai-search-evidence-section, .ai-search-limits { grid-template-columns: 1fr; }.ai-search-hero-visual { min-height: 330px; border-top: 1px solid rgba(190,160,126,.2); border-left: 0; }.ai-search-limits > p { grid-column: auto; }.ai-search-pillars, .ai-search-pricing-grid { grid-template-columns: 1fr; }.ai-search-pillar { min-height: 0; }.ai-scan-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .ai-search-product-main { width: min(100% - 1rem, 1180px); padding-top: 1rem; }.ai-search-hero, .ai-visibility-check, .ai-search-checks, .ai-search-evidence-section, .ai-search-limits, .ai-search-pricing { border-radius: 18px; }.ai-search-hero-copy { padding: 2rem 1.35rem; }.ai-search-hero h1 { font-size: clamp(2.75rem, 14vw, 4.2rem); }.ai-search-hero-actions, .ai-visibility-input-row { flex-direction: column; align-items: stretch; }.ai-visibility-input-row .btn-primary { width: 100%; }.ai-search-hero-actions .btn-primary { width: 100%; }.ai-search-text-cta { text-align: center; }.ai-scan-category-grid { grid-template-columns: 1fr; }.ai-search-accordion summary { grid-template-columns: auto minmax(0,1fr); }.ai-search-accordion summary em { grid-column: 2; }.ai-search-accordion summary::after { grid-column: 3; grid-row: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-scan-progress i { animation: none; transform: translateX(0); } }

/* Local AI Search: geographic/entity evidence belongs beside the scanner, not as keyword stuffing. */
.ai-local-search { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 6vw, 5rem); overflow: hidden; margin-bottom: 1.2rem; padding: clamp(2rem, 5vw, 4.25rem); border: 1px solid rgba(102, 158, 126, .38); border-radius: 23px; background: radial-gradient(circle at 6% 94%, rgba(52, 125, 93, .22), transparent 34%), radial-gradient(circle at 94% 8%, rgba(184, 138, 84, .15), transparent 30%), linear-gradient(105deg, rgba(10, 32, 36, .96), rgba(14, 20, 34, .98)); box-shadow: inset 0 1px 0 rgba(237,255,243,.05), 0 18px 44px rgba(0,0,0,.22); }
.ai-local-search::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.045), transparent 22%, transparent 80%, rgba(255,255,255,.018)); }
.ai-local-search-copy, .ai-local-search-signals { position: relative; z-index: 1; }.ai-local-search-copy .eyebrow { color: #a8cfb4; }.ai-local-search h2 { margin: .45rem 0 1rem; color: #c4d8df; }.ai-local-search-copy p:not(.eyebrow) { color: #aec1c8; }.ai-local-search-copy .btn-primary { margin-top: 1.35rem; }
.ai-local-search-signals { display: grid; gap: .72rem; }.ai-local-search-signals > div { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: .15rem .75rem; padding: .95rem 1rem; border: 1px solid rgba(139,191,163,.24); border-radius: 12px; background: rgba(5,15,25,.46); }.ai-local-search-signals span { grid-row: span 2; color: #a6d1b5; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; }.ai-local-search-signals strong { color: #d0dee2; font-size: .94rem; }.ai-local-search-signals p { color: #9fb5bd; font-size: .8rem; line-height: 1.45; }
.ai-url-helper { margin: -.18rem 0 .62rem; color: #91a8b3; font-size: .78rem; }.ai-local-option { margin-top: .8rem; }
.ai-price-card h3 { margin-top: 0; }.ai-price-card h3 span { display: block; margin-bottom: .45rem; color: var(--price-price); font-family: var(--font-mono); font-size: 1.55rem; letter-spacing: -.04em; }.ai-price-card.is-free { --price-price: #9fcdb1; }.ai-price-card.is-report { --price-price: #e2b578; }.ai-price-card.is-audit { --price-price: #aec6e2; }
@media (max-width: 940px) { .ai-local-search { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .logo-img { animation: logoMarkFadeIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}

/* ---------- TRAINING COURSE CATALOGUE ----------
   The training page uses colour as a learning aid: each route has a quiet
   colour field, while the existing dark cards remain available for detail. */
.training-page .training-pathways,
.training-page .course-catalogue {
  grid-column: 1 / -1;
}

.training-pathways {
  padding: clamp(1rem, 2vw, 1.5rem) 0;
}

.training-pathways-intro,
.course-catalogue-heading {
  max-width: 64ch;
  margin-bottom: 1.35rem;
}

.training-pathways-intro h2,
.course-catalogue-heading h2 {
  margin: .45rem 0 .65rem;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

.training-pathways-intro > p:not(.eyebrow),
.course-catalogue-heading > p:not(.eyebrow) {
  color: var(--color-steel-grey);
}

.training-route-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.training-route {
  display: flex;
  min-height: 205px;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.35rem;
  border: 1px solid var(--route-edge);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(6,12,20,.46), rgba(6,11,20,.22)),
    radial-gradient(circle at 86% 10%, var(--route-wash), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.065), transparent 34%),
    var(--route-image) center / cover no-repeat;
  color: #f1f3ef;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.06),
    inset -8px -10px 18px rgba(3,7,14,.42),
    0 5px 0 var(--route-edge-dark),
    0 18px 38px var(--route-shadow);
  text-decoration: none;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.training-route:hover,
.training-route:focus-visible {
  color: #ffffff;
  transform: translateY(-4px);
  border-color: var(--route-edge);
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.08),
    inset -8px -10px 18px rgba(3,7,14,.38),
    0 5px 0 var(--route-edge-dark),
    0 22px 44px var(--route-shadow);
  outline: none;
}

.training-route-number,
.course-number,
.course-status,
.course-kicker {
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.training-route-number {
  color: var(--route-accent);
  font-size: .72rem;
}

.training-route h3,
.training-route p {
  color: #d5e0e6 !important;
}

.training-route h3 {
  margin: 1.5rem 0 .45rem;
  font-size: 1.3rem;
}

.training-route p {
  font-size: .88rem;
  line-height: 1.48;
}

.training-route--learn { --route-edge: #5f8f79; --route-edge-dark: #294a3d; --route-accent: #a9d2bc; --route-wash: rgba(72,126,99,.22); --route-shadow: rgba(36,100,73,.24); --route-image: url('../assets/generated/training-route-learn-basics-v1.jpg'); }
.training-route--safe { --route-edge: #c39a5d; --route-edge-dark: #6c4f2e; --route-accent: #f0d29b; --route-wash: rgba(190,143,70,.22); --route-shadow: rgba(161,113,47,.28); --route-image: url('../assets/generated/training-route-use-safely-v1.jpg'); }
.training-route--build { --route-edge: #9b6757; --route-edge-dark: #57372f; --route-accent: #ddb5a8; --route-wash: rgba(137,78,62,.2); --route-shadow: rgba(115,61,50,.24); --route-image: url('../assets/generated/training-route-build-assistant-v1.jpg'); }
.training-route--support { --route-edge: #657da0; --route-edge-dark: #33455f; --route-accent: #b9c9e0; --route-wash: rgba(71,94,132,.24); --route-shadow: rgba(41,58,91,.28); --route-image: url('../assets/generated/training-route-work-with-us-v1.jpg'); }

.course-catalogue {
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid rgba(197,155,122,.22);
  border-radius: 22px;
  background: radial-gradient(circle at 94% 8%, rgba(199,166,112,.12), transparent 28%), linear-gradient(120deg, rgba(26,25,29,.92), rgba(13,22,34,.96));
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.course-card {
  display: flex;
  min-height: 365px;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.35rem;
  overflow: hidden;
  border: 1px solid var(--course-edge);
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 10%, var(--course-wash), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.065), transparent 34%),
    linear-gradient(150deg, #1b2435 0%, #111a2a 52%, #0b111f 100%);
  color: #f1f3ef;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.06),
    inset -8px -10px 18px rgba(3,7,14,.42),
    0 5px 0 var(--course-edge-dark),
    0 18px 38px var(--course-shadow);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.course-card:hover {
  transform: translateY(-4px);
  border-color: var(--course-edge);
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.08),
    inset -8px -10px 18px rgba(3,7,14,.38),
    0 5px 0 var(--course-edge-dark),
    0 22px 44px var(--course-shadow);
}

.course-card-top,
.course-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.course-number,
.course-status,
.course-kicker,
.course-card h3,
.course-card p,
.course-card li,
.course-card-footer {
  color: #d5e0e6 !important;
}

.course-number,
.course-status,
.course-kicker {
  font-size: .65rem;
}

.course-status {
  padding: .28rem .48rem;
  border: 1px solid color-mix(in srgb, var(--course-edge) 60%, transparent);
  border-radius: 8px;
  background: rgba(6,12,22,.42);
  white-space: nowrap;
}

.course-kicker {
  margin-bottom: .48rem;
  font-weight: 700;
  color: var(--course-accent) !important;
  opacity: 1;
}

.course-card h3 {
  margin-bottom: .65rem;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.12;
}

.course-card p {
  font-size: .9rem;
  line-height: 1.52;
}

.course-outcomes {
  display: grid;
  gap: .35rem;
  margin: 1rem 0 0 1.1rem;
  font-size: .82rem;
  line-height: 1.4;
}

.course-card-footer {
  border: 1px solid color-mix(in srgb, var(--course-edge) 78%, white 5%);
  border-radius: 10px;
  padding: .76rem .82rem .72rem .9rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.085), transparent 42%),
    linear-gradient(150deg, var(--course-key-start), var(--course-key-end));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -5px 10px rgba(4,8,15,.22),
    0 3px 0 var(--course-edge-dark),
    0 8px 15px rgba(0,0,0,.18);
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.course-card--basics { --course-edge: #5f8f79; --course-edge-dark: #294a3d; --course-accent: #a9d2bc; --course-wash: rgba(72,126,99,.22); --course-key-start: #315f4d; --course-key-end: #23473b; --course-shadow: rgba(36,100,73,.24); }
.course-card--safe { --course-edge: #c39a5d; --course-edge-dark: #6c4f2e; --course-accent: #f0d29b; --course-wash: rgba(190,143,70,.22); --course-key-start: #93693d; --course-key-end: #674828; --course-shadow: rgba(161,113,47,.28); }
.course-card--work { --course-edge: #9b6757; --course-edge-dark: #57372f; --course-accent: #ddb5a8; --course-wash: rgba(137,78,62,.2); --course-key-start: #70483d; --course-key-end: #4d302b; --course-shadow: rgba(115,61,50,.24); }
.course-card--assistant { --course-edge: #657da0; --course-edge-dark: #33455f; --course-accent: #b9c9e0; --course-wash: rgba(71,94,132,.24); --course-key-start: #405873; --course-key-end: #2c3f5b; --course-shadow: rgba(41,58,91,.28); }
.course-card--agents { --course-edge: #6b927d; --course-edge-dark: #315443; --course-accent: #b7d6c2; --course-wash: rgba(69,126,95,.2); --course-key-start: #3d6b55; --course-key-end: #294b3c; --course-shadow: rgba(45,102,76,.25); }

.course-placeholder-note {
  margin: 1.2rem 0 0;
  color: var(--color-steel-grey);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.training-learning-check,
.training-delivery-card {
  min-height: 285px;
}

.learning-question-list {
  display: grid;
  gap: .45rem;
  margin: .85rem 0 0 1.1rem;
  color: var(--color-silver);
  font-size: .9rem;
}

.training-delivery-card p:not(.eyebrow) {
  margin-bottom: 1.25rem;
}

/* Small, clearly disclosed human scenes support the training offer without
   turning the page into a gallery. */
.training-photo-card::after {
  content: "";
  display: block;
  clear: both;
}

.training-corner-photo {
  float: right;
  width: min(46%, 21rem);
  margin: 0 0 1rem 1.15rem;
}

.training-corner-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(232, 216, 197, .25);
  border-radius: 14px;
}

.training-corner-photo figcaption {
  margin-top: .45rem;
  color: var(--color-steel-grey);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-align: right;
}

@media (max-width: 1000px) {
  .training-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .training-route-grid,
  .course-grid { grid-template-columns: 1fr; }
  .course-catalogue { padding: 1.2rem; }
  .course-card { min-height: 0; }
  .course-card-footer { align-items: flex-start; flex-direction: column; }
  .training-corner-photo {
    float: none;
    width: 100%;
    margin: 0 0 1rem;
  }
}

/* ---------- AI SERVICES CATALOGUE ---------- */
.services-catalogue-grid {
  gap: clamp(1.5rem, 3vw, 3rem);
}

.services-catalogue-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

.services-catalogue-lead h2 {
  max-width: 13ch;
  margin: .5rem 0 .85rem;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.02;
}

.services-catalogue-lead p:not(.eyebrow) {
  max-width: 58ch;
  color: var(--color-silver);
}

.services-catalogue-principles {
  display: grid;
  gap: .65rem;
  align-content: end;
}

.services-catalogue-principles span {
  display: block;
  padding: .85rem 1rem;
  border: 1px solid rgba(220, 183, 143, .28);
  border-radius: .55rem;
  color: #f0d1ae;
  background: rgba(8, 14, 26, .32);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.services-catalogue-section {
  padding-top: .5rem;
}

.services-catalogue-heading {
  max-width: 66ch;
  margin-bottom: 1.25rem;
}

.services-catalogue-heading h2 {
  margin: .4rem 0 .65rem;
  font-size: clamp(1.7rem, 3vw, 2.65rem);
}

.services-catalogue-heading p:last-child {
  color: var(--color-silver);
}

.services-catalogue-grid-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.service-catalogue-card {
  display: flex;
  min-height: 310px;
  flex-direction: column;
  padding: clamp(1.2rem, 2.5vw, 1.65rem);
  border: 1px solid rgba(170, 194, 201, .24);
  border-radius: 1rem;
  color: var(--color-silver);
  background: linear-gradient(145deg, rgba(25, 38, 54, .96), rgba(10, 16, 29, .95));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .035);
  text-decoration: none;
  transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
}

.service-catalogue-card:hover,
.service-catalogue-card:focus-visible {
  border-color: rgba(232, 197, 157, .68);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
  outline: none;
  transform: translateY(-4px);
}

.service-catalogue-card-green { background: linear-gradient(145deg, rgba(18, 55, 49, .96), rgba(9, 24, 29, .98)); }
.service-catalogue-card-bronze { background: linear-gradient(145deg, rgba(65, 43, 33, .96), rgba(25, 18, 21, .98)); }
.service-catalogue-card-blue { background: linear-gradient(145deg, rgba(28, 48, 73, .96), rgba(11, 18, 32, .98)); }
.service-catalogue-card-warm { background: linear-gradient(145deg, rgba(60, 43, 37, .96), rgba(25, 19, 25, .98)); }
.service-catalogue-card-purple { background: linear-gradient(145deg, rgba(45, 38, 70, .96), rgba(17, 17, 34, .98)); }
.service-catalogue-card-slate { background: linear-gradient(145deg, rgba(38, 53, 65, .96), rgba(13, 21, 31, .98)); }
.service-catalogue-card-teal { background: linear-gradient(145deg, rgba(18, 58, 62, .96), rgba(8, 25, 35, .98)); }
.service-catalogue-card-navy { background: linear-gradient(145deg, rgba(25, 39, 65, .98), rgba(9, 15, 29, .98)); }

.service-catalogue-number {
  color: var(--color-bronze-light);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .09em;
}

.service-catalogue-label {
  display: block;
  margin-top: 1rem;
  color: rgba(222, 237, 239, .68);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
}

.service-catalogue-card h3 {
  margin: .55rem 0 .7rem;
  color: #f0f4f1;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.08;
}

.service-catalogue-card p {
  max-width: 42ch;
  color: rgba(220, 231, 232, .78);
  font-size: .92rem;
  line-height: 1.55;
}

.service-catalogue-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.35rem;
  color: #f0c895;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.service-catalogue-link span {
  font-size: 1rem;
  transition: transform var(--transition-fast);
}

.service-catalogue-card:hover .service-catalogue-link span,
.service-catalogue-card:focus-visible .service-catalogue-link span {
  transform: translate(3px, -3px);
}

.services-catalogue-related {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
  gap: 2rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.services-catalogue-related h2 {
  margin: .45rem 0 .7rem;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.services-catalogue-related p:not(.eyebrow) {
  max-width: 58ch;
  color: var(--color-silver);
}

.services-related-links {
  display: grid;
  gap: .7rem;
}

.services-related-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  border: 1px solid rgba(197, 155, 122, .3);
  border-radius: .55rem;
  color: var(--color-bronze-light);
  background: rgba(8, 14, 26, .25);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .045em;
  text-decoration: none;
  text-transform: uppercase;
}

.services-related-links a:hover,
.services-related-links a:focus-visible {
  border-color: rgba(232, 197, 157, .68);
  color: #fff1dc;
  outline: none;
}

@media (max-width: 960px) {
  .services-catalogue-grid-inner,
  .services-catalogue-grid-inner-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-catalogue-related { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .services-catalogue-lead { grid-template-columns: 1fr; }
  .services-catalogue-grid-inner,
  .services-catalogue-grid-inner-three { grid-template-columns: 1fr; }
  .service-catalogue-card { min-height: 270px; }
  .services-intro-actions { align-items: stretch; flex-direction: column; }
  .services-intro-actions .btn-primary { width: 100%; }
}

/* Creative Design overview: make the feature a readable split surface, not a faint backdrop. */
.design-page .service-page-feature::before {
  background: linear-gradient(90deg, rgba(11, 15, 33, 0.96) 0%, rgba(11, 15, 33, 0.88) 43%, rgba(11, 15, 33, 0.35) 70%, rgba(11, 15, 33, 0.12) 100%), linear-gradient(180deg, rgba(11, 15, 33, 0.06), rgba(11, 15, 33, 0.5));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.design-page .service-page-feature-copy {
  width: min(48%, 38rem);
  max-width: none;
  min-height: 18rem;
}

.design-page .service-page-feature-image {
  inset: 0 0 0 43%;
  width: 64%;
  height: 100%;
  opacity: 0.72;
  filter: saturate(0.92) contrast(1.02);
  object-position: 58% center;
}

@media (max-width: 800px) {
  .design-page .service-page-feature-copy {
    width: min(100%, 36rem);
    min-height: 20rem;
  }

  .design-page .service-page-feature-image {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.42;
  }

  .design-page .service-page-feature::before {
    background: linear-gradient(90deg, rgba(11, 15, 33, 0.92), rgba(11, 15, 33, 0.72)), linear-gradient(180deg, rgba(11, 15, 33, 0.12), rgba(11, 15, 33, 0.72));
  }
}

/* Creative Design material system: midnight structure, jewel glass and champagne hardware. */
.design-page .design-intro-object {
  border-color: rgba(205, 165, 122, 0.52);
  background:
    radial-gradient(ellipse at 88% 18%, rgba(45, 70, 104, 0.32), transparent 40%),
    linear-gradient(135deg, rgba(11, 15, 33, 0.96), rgba(16, 21, 40, 0.84));
  box-shadow: inset 0 1px 0 rgba(232, 205, 168, 0.1), inset 0 -1.1rem 2.8rem rgba(13, 48, 43, 0.09), 0 1.35rem 3.4rem rgba(3, 7, 18, 0.24);
}

.design-page .design-intro-object::after {
  position: absolute;
  z-index: 0;
  top: 13%;
  right: 4%;
  width: 34%;
  height: 74%;
  content: '';
  pointer-events: none;
  border: 1px solid rgba(168, 202, 183, 0.22);
  border-radius: 1.1rem;
  background: linear-gradient(145deg, rgba(18, 62, 54, 0.32), rgba(36, 59, 90, 0.12));
  box-shadow: inset 0 1px 0 rgba(217, 238, 224, 0.1), 0 0 2.6rem rgba(38, 95, 80, 0.12);
  transform: skewX(-5deg);
}

.design-page .design-offer-card,
.design-page .design-capability-card,
.design-page .design-portfolio-chamber,
.design-page .design-principles-glass {
  isolation: isolate;
}

.design-page .design-offer-card {
  overflow: hidden;
  border-color: rgba(205, 165, 122, 0.38);
  background: linear-gradient(155deg, rgba(12, 17, 31, 0.94), rgba(14, 18, 31, 0.86));
  box-shadow: inset 0 1px 0 rgba(239, 212, 173, 0.06), 0 0.9rem 2.2rem rgba(1, 6, 17, 0.14);
}

.design-page .design-offer-card > * {
  position: relative;
  z-index: 1;
}

.design-page .design-offer-card::before {
  position: absolute;
  z-index: 0;
  right: 0.55rem;
  bottom: 0.6rem;
  left: 0.55rem;
  height: 47%;
  content: '';
  pointer-events: none;
  border: 1px solid var(--glass-rim);
  border-radius: 0.9rem;
  background: radial-gradient(ellipse at 50% 100%, var(--glass-glow), transparent 70%), linear-gradient(145deg, var(--glass-fill-a), var(--glass-fill-b));
  box-shadow: inset 0 1px 0 rgba(236, 247, 240, 0.08), inset 0 -1.1rem 1.8rem rgba(2, 8, 16, 0.14), 0 0 1.8rem var(--glass-glow);
}

.design-page .design-offer-card .service-card-art {
  border-color: var(--glass-rim);
  box-shadow: inset 0 1px 0 rgba(246, 232, 207, 0.08), 0 0.85rem 1.8rem rgba(0, 0, 0, 0.18), 0 0 1.25rem var(--glass-glow);
}

.design-page .design-glass-jade {
  --glass-rim: rgba(104, 168, 145, 0.44);
  --glass-fill-a: rgba(13, 48, 43, 0.52);
  --glass-fill-b: rgba(18, 62, 54, 0.16);
  --glass-glow: rgba(36, 95, 80, 0.2);
}

.design-page .design-glass-amber {
  --glass-rim: rgba(207, 137, 82, 0.43);
  --glass-fill-a: rgba(99, 45, 30, 0.5);
  --glass-fill-b: rgba(158, 80, 52, 0.15);
  --glass-glow: rgba(190, 96, 57, 0.17);
}

.design-page .design-glass-plum {
  --glass-rim: rgba(162, 75, 104, 0.43);
  --glass-fill-a: rgba(53, 16, 32, 0.55);
  --glass-fill-b: rgba(100, 30, 53, 0.15);
  --glass-glow: rgba(122, 41, 65, 0.17);
}

.design-page .design-glass-sapphire {
  --glass-rim: rgba(93, 134, 177, 0.43);
  --glass-fill-a: rgba(36, 59, 90, 0.54);
  --glass-fill-b: rgba(70, 106, 143, 0.14);
  --glass-glow: rgba(70, 106, 143, 0.16);
}

.design-page .design-portfolio-chamber {
  border-color: rgba(205, 165, 122, 0.52);
  background:
    radial-gradient(ellipse at 12% 18%, rgba(77, 23, 44, 0.34), transparent 42%),
    radial-gradient(ellipse at 87% 85%, rgba(44, 70, 104, 0.3), transparent 46%),
    linear-gradient(145deg, rgba(28, 12, 31, 0.78), rgba(12, 18, 34, 0.92));
  box-shadow: inset 0 1px 0 rgba(235, 203, 160, 0.1), inset 0 0 4.5rem rgba(39, 12, 31, 0.18), 0 1.5rem 3.8rem rgba(3, 5, 18, 0.26);
}

.design-page .design-portfolio-chamber::before {
  position: absolute;
  z-index: 0;
  inset: 1rem;
  content: '';
  pointer-events: none;
  border: 1px solid rgba(174, 94, 118, 0.22);
  border-radius: calc(var(--radius-card) - 0.55rem);
  background: linear-gradient(130deg, rgba(77, 23, 44, 0.1), transparent 42%, rgba(44, 70, 104, 0.12));
}

.design-page .design-portfolio-chamber > * {
  position: relative;
  z-index: 1;
}

.design-page .bento-grid > .design-colour-strip {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1.2fr 0.92fr 1fr;
  gap: 0.22rem;
  min-height: 0;
  height: 1rem;
  margin: 0.15rem 0;
  padding: 0.16rem;
  overflow: hidden;
  border: 1px solid rgba(205, 165, 122, 0.44);
  border-radius: 999px;
  background: rgba(8, 13, 26, 0.72);
  box-shadow: inset 0 1px 0 rgba(241, 216, 180, 0.1), 0 0.55rem 1.4rem rgba(0, 0, 0, 0.14);
}

.design-page .design-colour-strip span {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
}

.design-page .design-colour-strip span::after {
  position: absolute;
  top: -110%;
  right: 18%;
  width: 1px;
  height: 320%;
  content: '';
  background: rgba(220, 189, 143, 0.85);
  box-shadow: 0 0 0.5rem rgba(220, 189, 143, 0.36);
  transform: rotate(25deg);
}

.design-page .design-colour-strip span:nth-child(1) { background: linear-gradient(90deg, rgba(18, 62, 54, 0.78), rgba(36, 95, 80, 0.35)); }
.design-page .design-colour-strip span:nth-child(2) { background: linear-gradient(90deg, rgba(77, 23, 44, 0.74), rgba(122, 41, 65, 0.34)); }
.design-page .design-colour-strip span:nth-child(3) { background: linear-gradient(90deg, rgba(36, 59, 90, 0.74), rgba(70, 106, 143, 0.32)); }

.design-page .design-capability-card {
  overflow: visible;
  border-color: rgba(205, 165, 122, 0.42);
  background: linear-gradient(155deg, rgba(12, 17, 31, 0.95), rgba(14, 18, 31, 0.9));
  box-shadow: inset 0 1px 0 rgba(239, 212, 173, 0.06), 0 1rem 2.3rem rgba(2, 6, 16, 0.16);
}

.design-page .design-capability-card > * {
  position: relative;
  z-index: 1;
}

.design-page .design-capability-card::before {
  position: absolute;
  z-index: 0;
  top: 2.35rem;
  right: -0.52rem;
  bottom: -0.5rem;
  left: -0.52rem;
  content: '';
  pointer-events: none;
  border: 1px solid var(--shelf-rim);
  border-radius: calc(var(--radius-card) - 0.15rem);
  background: linear-gradient(145deg, var(--shelf-fill-a), var(--shelf-fill-b));
  box-shadow: inset 0 1px 0 rgba(239, 243, 237, 0.09), 0 0.8rem 1.8rem var(--shelf-glow);
}

.design-page .design-capability-card .design-card-media {
  border-color: var(--shelf-rim);
  box-shadow: 0 0 1.2rem var(--shelf-glow);
}

.design-page .design-capability-amber {
  --shelf-rim: rgba(201, 138, 82, 0.44);
  --shelf-fill-a: rgba(99, 45, 30, 0.32);
  --shelf-fill-b: rgba(12, 17, 31, 0.18);
  --shelf-glow: rgba(190, 96, 57, 0.14);
}

.design-page .design-capability-jade {
  --shelf-rim: rgba(91, 153, 131, 0.44);
  --shelf-fill-a: rgba(13, 48, 43, 0.34);
  --shelf-fill-b: rgba(12, 17, 31, 0.18);
  --shelf-glow: rgba(36, 95, 80, 0.14);
}

.design-page .design-capability-plum {
  --shelf-rim: rgba(162, 75, 104, 0.43);
  --shelf-fill-a: rgba(77, 23, 44, 0.34);
  --shelf-fill-b: rgba(12, 17, 31, 0.18);
  --shelf-glow: rgba(122, 41, 65, 0.14);
}

.design-page .design-principles-glass {
  border-color: rgba(118, 163, 143, 0.48);
  background:
    radial-gradient(ellipse at 82% 15%, rgba(36, 59, 90, 0.34), transparent 44%),
    radial-gradient(ellipse at 11% 100%, rgba(18, 62, 54, 0.44), transparent 50%),
    linear-gradient(145deg, rgba(13, 48, 43, 0.64), rgba(16, 25, 43, 0.92));
  box-shadow: inset 0 1px 0 rgba(220, 238, 223, 0.1), inset 0 -1.6rem 3.2rem rgba(4, 15, 23, 0.18), 0 1.2rem 3rem rgba(3, 7, 18, 0.2);
}

.design-page .design-principles-glass .design-principles-grid article {
  border-color: rgba(218, 184, 138, 0.38);
}

/* Design-page chapter markers: structural wayfinding, not another set of cards. */
.design-page .bento-grid {
  grid-auto-rows: auto;
}

.design-page .design-chapter {
  position: relative;
  display: flex;
  grid-column: 1 / -1;
  min-height: 0;
  padding: 0;
  color: var(--color-bronze-light);
}

.design-page .design-chapter-label {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.9rem;
  margin: 0;
  color: #d9a979;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.115em;
  line-height: 1.2;
  text-transform: uppercase;
}

.design-page .design-chapter-label::after {
  width: clamp(3.5rem, 10vw, 9rem);
  height: 1px;
  content: '';
  background: linear-gradient(90deg, rgba(218, 169, 121, 0.72), rgba(218, 169, 121, 0.08));
}

.design-page .design-chapter-support {
  margin: 0;
  color: rgba(205, 216, 229, 0.68);
  font-size: 0.84rem;
  line-height: 1.5;
}

.design-page .design-chapter-what {
  align-items: baseline;
  gap: 1rem;
  margin: 0.15rem 0 0.35rem;
}

.design-page .design-chapter-delivery {
  display: block;
  padding: 3rem 0 1rem;
}

.design-page .design-chapter-delivery h2 {
  max-width: none;
  margin: 1.25rem 0 0.75rem;
  color: var(--color-cloud-white);
  font-size: clamp(2rem, 2.65vw, 2.5rem);
  line-height: 1.06;
}

.design-page .design-chapter-delivery .design-chapter-support {
  max-width: 44rem;
  font-size: 0.96rem;
}

@media (max-width: 800px) {
  .design-page .design-chapter-what {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.1rem;
  }

  .design-page .design-chapter-label::after {
    width: 3.25rem;
  }

  .design-page .design-chapter-delivery {
    padding: 2.15rem 0 0.5rem;
  }

  .design-page .design-chapter-delivery h2 {
    margin: 0.95rem 0 0.55rem;
    font-size: clamp(1.5rem, 7.8vw, 2rem);
  }

  .design-page .design-chapter-delivery .design-chapter-support {
    font-size: 0.9rem;
  }
}

@media (max-width: 800px) {
  .design-page .design-intro-object::after {
    right: 6%;
    width: 48%;
    opacity: 0.55;
  }

  .design-page .design-capability-card::before {
    right: -0.28rem;
    left: -0.28rem;
  }
}

/* ---------- INSIGHTS: COLOURED FROSTED CONTENT TILES ---------- */
/*
   The archive is the first test of the four-colour tile system. The colour
   belongs to the information surface itself, not to a halo, a gradient wash,
   or a competing call-to-action. Images can sit above this surface later.
*/
.insights-page .insight-card,
.homepage-blog-card {
  --insight-tile-surface: rgba(29, 55, 106, 0.86);
  --insight-tile-border: rgba(125, 161, 221, 0.48);
  --insight-tile-light: rgba(205, 225, 255, 0.06);
  --insight-tile-kicker: #dcb17c;
  --insight-tile-heading: var(--color-insight-heading);
  --insight-tile-copy: #f2f4f2;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--insight-tile-border);
  background: var(--insight-tile-surface);
  box-shadow:
    inset 0 1px 0 var(--insight-tile-light),
    inset 0 -1px 0 rgba(4, 10, 21, 0.2),
    0 12px 28px rgba(3, 8, 19, 0.16);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

/* AI workflows: emerald. */
.insights-page .insight-card.training-theme,
.homepage-blog-card.training-theme {
  --insight-tile-surface: rgba(11, 73, 61, 0.87);
  --insight-tile-border: rgba(91, 177, 147, 0.5);
  --insight-tile-light: rgba(202, 249, 228, 0.07);
  border-color: var(--insight-tile-border);
  background: var(--insight-tile-surface);
}

/* AI search: burnt orange. */
.insights-page .insight-card.warm-theme,
.homepage-blog-card.warm-theme {
  --insight-tile-surface: rgba(83, 44, 24, 0.88);
  --insight-tile-border: rgba(196, 128, 72, 0.52);
  --insight-tile-light: rgba(255, 221, 180, 0.07);
  border-color: var(--insight-tile-border);
  background: var(--insight-tile-surface);
}

/* AI governance: blue. */
.insights-page .insight-card.hero-theme,
.homepage-blog-card.hero-theme {
  --insight-tile-surface: rgba(26, 50, 98, 0.87);
  --insight-tile-border: rgba(111, 147, 211, 0.5);
  --insight-tile-light: rgba(214, 229, 255, 0.06);
  border-color: var(--insight-tile-border);
  background: var(--insight-tile-surface);
}

/* Human-centred AI: plum. */
.insights-page .insight-card.bronze-theme,
.homepage-blog-card.bronze-theme {
  --insight-tile-surface: rgba(72, 24, 53, 0.88);
  --insight-tile-border: rgba(181, 93, 141, 0.48);
  --insight-tile-light: rgba(255, 214, 238, 0.06);
  border-color: var(--insight-tile-border);
  background: var(--insight-tile-surface);
}

.insights-page .insight-card:hover,
.insights-page .insight-card:focus-within {
  border-color: color-mix(in srgb, var(--insight-tile-border) 82%, white 18%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--insight-tile-light) 82%, white 18%),
    inset 0 -1px 0 rgba(4, 10, 21, 0.18),
    0 15px 30px rgba(3, 8, 19, 0.2);
  transform: translateY(-2px);
}

.insights-page .insight-card .eyebrow {
  color: var(--insight-tile-kicker);
}

.insights-page .insight-card h2,
.insights-page .insight-card h3 {
  color: var(--insight-tile-heading) !important;
}

.insights-page .insight-card p:not(.eyebrow) {
  color: var(--insight-tile-copy) !important;
}

/* The tile carries the colour; the action is quiet, dark frosted glass. */
.insights-page .insight-card .btn-primary,
.insights-page .insight-card .btn-primary.btn-bronze {
  border-color: rgba(218, 164, 104, 0.52);
  background: rgba(5, 13, 27, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 222, 184, 0.08);
  color: #e1ae78;
  text-shadow: 0 1px 0 rgba(38, 17, 13, 0.64);
}

.insights-page .insight-card .btn-primary::before {
  display: none;
}

.insights-page .insight-card .btn-primary:hover,
.insights-page .insight-card .btn-primary:focus-visible {
  border-color: rgba(239, 191, 132, 0.72);
  background: rgba(5, 13, 27, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 228, 193, 0.12);
  color: #f2c78f;
  outline: 1px solid rgba(218, 164, 104, 0.32);
}

/* ---------- PLATINUM / CHAMPAGNE INTERACTION MATERIAL ----------
   Keep the jewel colours on content surfaces. Interactive hardware uses one
   cooler metal treatment across navigation, cards, readers and Arthur. */
.nav-desktop a.nav-home,
.nav-mobile a.nav-home {
  color: var(--color-champagne-platinum);
  border-color: rgba(231, 221, 212, 0.46);
  background: rgba(87, 75, 73, 0.24);
}

.nav-desktop a.nav-home:hover,
.nav-desktop a.nav-home:focus-visible,
.nav-desktop a.nav-home.is-active,
.nav-mobile a.nav-home:hover,
.nav-mobile a.nav-home:focus-visible,
.nav-mobile a.nav-home.is-active {
  color: var(--color-champagne-platinum-bright);
  border-color: rgba(247, 239, 232, 0.72);
  background: rgba(126, 111, 106, 0.34);
  outline-color: rgba(231, 221, 212, 0.28);
}

.nav-desktop a.nav-home::after,
.nav-mobile a.nav-home::after {
  display: none;
  border: 0;
  background: none;
}

.nav-desktop a.nav-cta,
.nav-mobile a.nav-cta,
.btn-primary.btn-bronze,
.bento-card.outbound-theme .btn-primary,
.insight-return-row .btn-primary {
  color: var(--color-champagne-platinum);
  border-color: var(--color-champagne-platinum-border);
  background: var(--gradient-champagne-platinum);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 246, 0.2),
    inset 0 -8px 16px rgba(22, 18, 27, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(231, 221, 212, 0.035);
  text-shadow: 0 1px 0 rgba(20, 17, 24, 0.72);
}

.nav-desktop a.nav-cta:hover,
.nav-desktop a.nav-cta:focus-visible,
.nav-mobile a.nav-cta:hover,
.nav-mobile a.nav-cta:focus-visible,
.btn-primary.btn-bronze:hover,
.btn-primary.btn-bronze:focus-visible,
.bento-card.outbound-theme .btn-primary:hover,
.bento-card.outbound-theme .btn-primary:focus-visible,
.insight-return-row .btn-primary:hover,
.insight-return-row .btn-primary:focus-visible {
  color: var(--color-champagne-platinum-bright);
  border-color: rgba(250, 243, 237, 0.78);
  background: var(--gradient-champagne-platinum-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 249, 0.28),
    0 10px 25px rgba(0, 0, 0, 0.26),
    0 0 20px var(--color-champagne-platinum-glow);
  outline-color: rgba(231, 221, 212, 0.34);
}

/* Insight tile actions stay quiet over their four jewel surfaces, but the
   rim and lettering now match the site's platinum/champagne hardware. */
.insights-page .insight-card .btn-primary,
.insights-page .insight-card .btn-primary.btn-bronze {
  color: var(--color-champagne-platinum);
  border-color: rgba(231, 221, 212, 0.52);
  background: linear-gradient(135deg, rgba(231, 221, 212, 0.1), rgba(5, 13, 27, 0.48));
  box-shadow: inset 0 1px 0 rgba(255, 249, 243, 0.1);
  text-shadow: 0 1px 0 rgba(18, 16, 23, 0.74);
}

.insights-page .insight-card .btn-primary:hover,
.insights-page .insight-card .btn-primary:focus-visible,
.insights-page .insight-card .btn-primary.btn-bronze:hover,
.insights-page .insight-card .btn-primary.btn-bronze:focus-visible {
  color: var(--color-champagne-platinum-bright);
  border-color: rgba(250, 243, 237, 0.74);
  background: linear-gradient(135deg, rgba(244, 236, 229, 0.16), rgba(5, 13, 27, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 252, 249, 0.14), 0 0 16px rgba(231, 221, 212, 0.08);
  outline-color: rgba(231, 221, 212, 0.34);
}

.ai-talk-send,
.insight-download-button,
.insight-page-button,
.insight-audio-button,
.insights-library-year,
.insights-page-link {
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.ai-talk-send,
.insight-download-button {
  color: var(--color-champagne-platinum);
  border-color: rgba(231, 221, 212, 0.5);
  background: rgba(111, 96, 92, 0.2);
}

.ai-talk-send:hover,
.ai-talk-send:focus-visible,
.insight-download-button:hover,
.insight-download-button:focus-visible {
  color: var(--color-champagne-platinum-bright);
  border-color: rgba(250, 243, 237, 0.72);
  background: rgba(145, 128, 121, 0.3);
  box-shadow: 0 0 16px rgba(231, 221, 212, 0.11);
  outline-color: rgba(231, 221, 212, 0.32);
}

.ai-talk-close,
.portfolio-sound-toggle,
.portfolio-carousel-control {
  color: var(--color-champagne-platinum);
  border-color: rgba(231, 221, 212, 0.46);
}

.ai-talk-close:hover,
.ai-talk-close:focus-visible,
.portfolio-sound-toggle:hover,
.portfolio-sound-toggle:focus-visible,
.portfolio-carousel-control:hover,
.portfolio-carousel-control:focus-visible {
  color: var(--color-champagne-platinum-bright);
  border-color: rgba(250, 243, 237, 0.72);
  background: rgba(145, 128, 121, 0.22);
  outline-color: rgba(231, 221, 212, 0.3);
}

.ai-search-text-cta {
  color: var(--color-champagne-platinum);
  border-color: var(--color-champagne-platinum-border);
  background: var(--gradient-champagne-platinum);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 246, 0.2),
    inset 0 -8px 16px rgba(22, 18, 27, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.24);
}

.ai-search-text-cta:hover,
.ai-search-text-cta:focus-visible {
  color: var(--color-champagne-platinum-bright);
  border-color: rgba(250, 243, 237, 0.78);
  background: var(--gradient-champagne-platinum-hover);
  box-shadow: inset 0 1px 0 rgba(255, 252, 249, 0.28), 0 10px 25px rgba(0, 0, 0, 0.26);
  outline-color: rgba(231, 221, 212, 0.34);
}

.insights-library-year:hover,
.insights-library-year:focus-visible,
.insights-library-year.is-active {
  color: var(--color-champagne-platinum-bright);
  border-color: rgba(231, 221, 212, 0.58);
  background: rgba(117, 101, 97, 0.2);
}

.insights-page-link {
  color: var(--color-champagne-platinum-mid);
}

.insights-page-link:hover,
.insights-page-link:focus-visible {
  color: var(--color-champagne-platinum-bright);
}

.ai-talker,
.ai-talker-label,
.ai-talk-kicker,
.ai-talk-status,
.ai-talk-limit,
.insight-chat-limit {
  color: var(--color-champagne-platinum);
}

.ai-talker-a {
  stroke: var(--color-champagne-platinum);
}

.ai-talker-label,
.ai-talk-prompts button {
  border-color: rgba(231, 221, 212, 0.4);
}

.ai-talk-human {
  color: var(--color-champagne-platinum-mid);
}

.ai-talk-human:hover,
.ai-talk-human:focus-visible {
  color: var(--color-champagne-platinum-bright);
}

@media (max-width: 1120px) {
  .ai-talker::before {
    background: linear-gradient(
      to bottom,
      rgba(231, 221, 212, 0.52),
      rgba(231, 221, 212, 0.05)
    );
  }

  .ai-talker::after {
    border-bottom-color: rgba(231, 221, 212, 0.56);
  }
}

/* ---------- AI SERVICES: FOUR ROUTE DIRECTORY ---------- */
/* The Services page is a compact directory, built in the same visual family
   as the Design overview: framed artwork, deep sapphire ground and four
   distinct, muted route colours. */
.services-router-grid {
  gap: clamp(1.7rem, 3.5vw, 3.6rem);
}

.services-router-grid .services-catalogue-lead {
  border-color: rgba(209, 151, 119, 0.46);
  background: rgba(32, 20, 32, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 220, 192, 0.08), 0 18px 44px rgba(2, 7, 20, 0.2);
}

.services-route-section {
  padding-top: 0;
}

.services-route-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 16rem;
  gap: clamp(0.9rem, 1.5vw, 1.25rem);
  align-items: stretch;
}

.service-route-card {
  --route-surface: rgba(13, 23, 42, 0.96);
  --route-border: rgba(206, 162, 127, 0.42);
  --route-frame: rgba(205, 224, 228, 0.24);
  --route-gold: #d5a174;
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0.72rem;
  overflow: hidden;
  border: 1px solid var(--route-border);
  border-radius: 1.15rem;
  color: #edf2ef;
  background: var(--route-surface);
  box-shadow: inset 0 1px 0 rgba(255, 241, 223, 0.05), 0 18px 40px rgba(1, 6, 18, 0.17);
  text-decoration: none;
  transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
}

.service-route-card::before {
  content: '';
  position: absolute;
  top: 0.72rem;
  right: 0.72rem;
  left: 0.72rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--route-border) 86%, white 14%), transparent);
  opacity: 0.72;
}

.service-route-card:hover,
.service-route-card:focus-visible {
  border-color: color-mix(in srgb, var(--route-border) 76%, white 24%);
  box-shadow: inset 0 1px 0 rgba(255, 241, 223, 0.1), 0 22px 46px rgba(1, 6, 18, 0.28);
  outline: none;
  transform: translateY(-5px);
}

.service-route-card--transparency {
  --route-surface: rgba(8, 37, 39, 0.96);
  --route-border: rgba(103, 173, 156, 0.52);
  --route-frame: rgba(125, 204, 184, 0.43);
}

.service-route-card--search {
  --route-surface: rgba(54, 31, 29, 0.96);
  --route-border: rgba(208, 146, 96, 0.52);
  --route-frame: rgba(215, 151, 102, 0.48);
}

.service-route-card--agents {
  --route-surface: rgba(32, 19, 40, 0.96);
  --route-border: rgba(167, 89, 130, 0.5);
  --route-frame: rgba(174, 87, 130, 0.46);
}

.service-route-card--a2a {
  --route-surface: rgba(17, 34, 65, 0.96);
  --route-border: rgba(100, 146, 210, 0.52);
  --route-frame: rgba(102, 153, 216, 0.48);
}

/* A deliberate 7/5, 5/7, full-width rhythm makes the directory scan as a
   bento composition instead of eight identical service boxes. */
.service-route-card--transparency {
  grid-column: span 7;
  grid-row: span 2;
}

.service-route-card--search {
  display: grid;
  grid-column: span 5;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 0.9rem;
}

.service-route-card--agents {
  display: grid;
  grid-column: span 5;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 0.9rem;
}

.service-route-card--a2a {
  display: grid;
  grid-column: span 12;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  gap: clamp(1rem, 2vw, 2rem);
}

.service-route-media {
  position: relative;
  display: block;
  aspect-ratio: 1.12 / 1;
  overflow: hidden;
  border: 1px solid var(--route-frame);
  border-radius: 0.9rem;
  background: rgba(3, 10, 23, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 240, 222, 0.08);
}

.service-route-card--search .service-route-media,
.service-route-card--agents .service-route-media,
.service-route-card--a2a .service-route-media {
  min-height: 0;
  aspect-ratio: auto;
  align-self: stretch;
}

.service-route-card--a2a .service-route-media {
  order: 2;
}

.service-route-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 12, 24, 0.02) 24%, color-mix(in srgb, var(--route-surface) 70%, transparent) 100%);
  pointer-events: none;
}

.service-route-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.66) brightness(0.73) contrast(1.06);
  opacity: 0.9;
  transition: filter var(--transition-medium), transform var(--transition-medium), opacity var(--transition-medium);
}

.service-route-card:hover .service-route-media img,
.service-route-card:focus-visible .service-route-media img {
  filter: saturate(0.82) brightness(0.82) contrast(1.04);
  opacity: 1;
  transform: scale(1.025);
}

.service-route-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 1.1rem 0.28rem 0.22rem;
}

.service-route-card--search .service-route-content,
.service-route-card--agents .service-route-content,
.service-route-card--a2a .service-route-content {
  padding: 0.28rem 0.18rem;
}

.service-route-card--search .service-route-content strong,
.service-route-card--agents .service-route-content strong {
  font-size: clamp(1.28rem, 1.7vw, 1.72rem);
}

.service-route-card--search .service-route-copy,
.service-route-card--agents .service-route-copy,
.service-route-card--a2a .service-route-copy {
  font-size: 0.86rem;
  line-height: 1.45;
}

.service-route-content .service-catalogue-number,
.service-route-content .service-catalogue-label,
.service-route-content .service-catalogue-link {
  color: var(--route-gold);
}

.service-route-content .service-catalogue-label {
  margin-top: 0.7rem;
  color: color-mix(in srgb, var(--route-gold) 76%, white 24%);
}

.service-route-content strong {
  display: block;
  margin: 0.58rem 0 0.75rem;
  color: #c8d8df;
  font-family: var(--font-display);
  font-size: clamp(1.48rem, 2.1vw, 2.18rem);
  font-weight: 700;
  line-height: 1.03;
}

.service-route-copy {
  display: block;
  color: rgba(230, 238, 236, 0.78);
  font-size: 0.93rem;
  line-height: 1.55;
}

.service-route-content .service-catalogue-link {
  margin-top: auto;
  padding-top: 1.2rem;
}

@media (max-width: 1100px) {
  .services-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .service-route-card,
  .service-route-card--transparency,
  .service-route-card--search,
  .service-route-card--agents,
  .service-route-card--a2a {
    display: flex;
    min-height: 30rem;
    grid-column: auto;
    grid-row: auto;
  }
  .service-route-card--a2a .service-route-media { order: 0; }
  .service-route-card--search .service-route-media,
  .service-route-card--agents .service-route-media,
  .service-route-card--a2a .service-route-media {
    aspect-ratio: 1.55 / 1;
  }
  .service-route-card--search .service-route-content,
  .service-route-card--agents .service-route-content,
  .service-route-card--a2a .service-route-content { padding: 1.1rem 0.28rem 0.22rem; }
}

@media (max-width: 620px) {
  .services-route-grid { grid-template-columns: 1fr; }
  .service-route-card { min-height: 0; }
  .service-route-media { aspect-ratio: 1.45 / 1; }
}

/* ---------- HERMES AGENTS MARKETPLACE ---------- */
.hermes-marketplace-intro {
  max-width: 960px;
}

.hermes-marketplace-intro h1 {
  max-width: 17ch;
}

.hermes-marketplace-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.72fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: end;
}

.hermes-marketplace-section-heading h2 {
  max-width: 18ch;
  margin-top: 0.35rem;
}

.hermes-marketplace-section-heading > p {
  margin-bottom: 0.35rem;
  color: #c2d0d6;
  font-size: 1rem;
}

.hermes-work-trace,
.hermes-marketplace-agent-section,
.hermes-marketplace-skills,
.hermes-capability-section {
  padding: clamp(1.5rem, 3.5vw, 3rem);
  overflow: hidden;
}

.hermes-work-trace {
  border-color: rgba(199, 160, 112, 0.38);
  background:
    radial-gradient(circle at 90% 0%, rgba(191, 129, 71, 0.17), transparent 32%),
    radial-gradient(circle at 15% 90%, rgba(62, 119, 102, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(13, 22, 32, 0.98), rgba(24, 24, 32, 0.97));
}

.hermes-trace {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.72rem;
  margin: clamp(1.7rem, 3vw, 2.7rem) 0 1rem;
  list-style: none;
}

.hermes-trace li {
  position: relative;
  display: flex;
  min-height: 10.8rem;
  flex-direction: column;
  padding: 1.1rem 0.9rem;
  border: 1px solid rgba(222, 231, 228, 0.2);
  border-radius: 0.9rem;
  background: linear-gradient(145deg, rgba(238, 237, 224, 0.09), rgba(13, 20, 29, 0.48));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 12px 25px rgba(0, 0, 0, 0.12);
}

.hermes-trace li:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -0.58rem;
  width: 0.45rem;
  height: 1px;
  background: linear-gradient(90deg, #c59b7a, rgba(197, 155, 122, 0.08));
  box-shadow: 0 0 0.55rem rgba(213, 168, 123, 0.6);
  content: '';
}

.hermes-trace-index {
  color: #d9a978;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.hermes-trace strong {
  margin: auto 0 0.45rem;
  color: #dce7e8;
  font-family: var(--font-headline);
  font-size: 1rem;
  line-height: 1.18;
}

.hermes-trace small {
  color: rgba(211, 220, 223, 0.72);
  font-size: 0.76rem;
  line-height: 1.42;
}

.hermes-trace .hermes-trace-gate {
  border-color: rgba(236, 190, 120, 0.56);
  background: linear-gradient(145deg, rgba(119, 69, 41, 0.3), rgba(35, 28, 31, 0.68));
}

.hermes-trace-note {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding-top: 1rem;
  border-top: 1px solid rgba(224, 231, 227, 0.14);
  color: rgba(209, 219, 221, 0.72);
  font-size: 0.85rem;
}

.hermes-trace-note span {
  flex: 0 0 auto;
  color: #e2bb87;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

.hermes-marketplace-agent-section {
  border-color: rgba(142, 194, 171, 0.34);
  background:
    radial-gradient(circle at 6% 0%, rgba(57, 111, 99, 0.22), transparent 28%),
    radial-gradient(circle at 96% 90%, rgba(103, 70, 55, 0.2), transparent 31%),
    linear-gradient(135deg, rgba(10, 20, 32, 0.98), rgba(14, 29, 33, 0.95));
}

.hermes-agent-market-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: clamp(1.6rem, 3vw, 2.3rem);
}

.hermes-market-agent {
  --market-accent: #89c4ad;
  position: relative;
  display: flex;
  min-height: 20rem;
  flex-direction: column;
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--market-accent) 42%, transparent);
  border-radius: 1.15rem;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--market-accent) 12%, transparent), transparent 42%),
    linear-gradient(150deg, rgba(24, 37, 48, 0.94), rgba(8, 15, 26, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 14px 28px rgba(0, 0, 0, 0.16);
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.hermes-market-agent[id] {
  scroll-margin-top: calc(var(--header-height) + 1.25rem);
}

.hermes-market-agent:hover {
  border-color: color-mix(in srgb, var(--market-accent) 82%, white 18%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), 0 1.1rem 2.5rem rgba(0, 0, 0, 0.26), 0 0 1.4rem color-mix(in srgb, var(--market-accent) 17%, transparent);
  transform: translateY(-4px);
}

.hermes-market-agent[data-market-tone="plum"] { --market-accent: #bd9dbd; }
.hermes-market-agent[data-market-tone="brass"] { --market-accent: #deb87e; }
.hermes-market-agent[data-market-tone="blue"] { --market-accent: #98b7e6; }
.hermes-market-agent[data-market-tone="rose"] { --market-accent: #dba5a3; }
.hermes-market-agent[data-market-tone="sage"] { --market-accent: #a3d0b0; }
.hermes-market-agent[data-market-tone="copper"] { --market-accent: #d59f7c; }

.hermes-market-agent-featured {
  grid-column: span 2;
  background:
    radial-gradient(circle at 85% 12%, rgba(210, 139, 92, 0.16), transparent 27%),
    linear-gradient(150deg, rgba(47, 39, 41, 0.94), rgba(15, 21, 31, 0.96));
}

.hermes-market-agent-top,
.hermes-market-meta,
.hermes-skill-card > div {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}

.hermes-market-agent-top > span:first-child {
  color: var(--market-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.hermes-market-status,
.hermes-market-meta span,
.hermes-skill-card > div span {
  display: inline-flex;
  align-items: center;
  min-height: 1.4rem;
  padding: 0.2rem 0.46rem;
  border: 1px solid color-mix(in srgb, var(--market-accent) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--market-accent) 9%, transparent);
  color: color-mix(in srgb, var(--market-accent) 76%, white 24%);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.07em;
  line-height: 1;
  white-space: nowrap;
}

.hermes-market-agent .eyebrow {
  margin-top: 1.2rem;
  color: var(--market-accent);
  font-size: 0.61rem;
}

.hermes-market-agent h3 {
  margin: 0.45rem 0 0.58rem;
  color: #d7e2e4;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.08;
}

.hermes-market-agent > p:not(.eyebrow) {
  color: rgba(218, 226, 229, 0.78);
  font-size: 0.85rem;
  line-height: 1.52;
}

.hermes-market-meta {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid color-mix(in srgb, var(--market-accent) 20%, transparent);
}

.hermes-market-agent ul {
  display: grid;
  gap: 0.28rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.hermes-market-agent li {
  color: rgba(217, 226, 228, 0.68);
  font-size: 0.77rem;
}

.hermes-market-agent li::before {
  margin-right: 0.42rem;
  color: var(--market-accent);
  content: '•';
}

.hermes-market-link {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--market-accent);
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hermes-market-link:hover,
.hermes-market-link:focus-visible { color: #fff; }

.hermes-marketplace-skills {
  border-color: rgba(159, 185, 211, 0.36);
  background:
    radial-gradient(circle at 85% 0%, rgba(87, 111, 158, 0.18), transparent 31%),
    radial-gradient(circle at 1% 91%, rgba(80, 137, 119, 0.16), transparent 27%),
    linear-gradient(135deg, rgba(12, 22, 38, 0.98), rgba(14, 25, 35, 0.96));
}

.hermes-skill-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

.hermes-skill-controls button {
  display: inline-flex;
  gap: 0.42rem;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.48rem 0.76rem;
  border: 1px solid rgba(177, 198, 217, 0.26);
  border-radius: 999px;
  background: rgba(10, 18, 31, 0.38);
  color: #c7d5dc;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.hermes-skill-controls button span {
  display: grid;
  min-width: 1.12rem;
  min-height: 1.12rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(192, 212, 227, 0.13);
  color: #dceaf0;
  font-size: 0.56rem;
}

.hermes-skill-controls button:hover,
.hermes-skill-controls button:focus-visible,
.hermes-skill-controls button.is-active {
  border-color: rgba(184, 218, 224, 0.7);
  background: linear-gradient(145deg, rgba(128, 180, 173, 0.23), rgba(16, 34, 51, 0.68));
  color: #f3fbfb;
  outline: none;
}

.hermes-skill-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.72rem;
  margin-top: 1rem;
}

.hermes-skill-card {
  --market-accent: #b4d9d5;
  position: relative;
  min-height: 14.4rem;
  padding: 1rem;
  border: 1px solid rgba(181, 211, 220, 0.22);
  border-radius: 0.9rem;
  background: linear-gradient(145deg, rgba(139, 191, 188, 0.11), rgba(9, 17, 29, 0.54));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.hermes-skill-card:nth-child(3n) { --market-accent: #ddbc88; }
.hermes-skill-card:nth-child(4n) { --market-accent: #b9c7eb; }

.hermes-skill-card[hidden] { display: none; }

.hermes-skill-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--market-accent) 44%, transparent);
  border-radius: 0.58rem;
  background: color-mix(in srgb, var(--market-accent) 9%, transparent);
  color: var(--market-accent);
  font-family: var(--font-mono);
  font-size: 1.05rem;
}

.hermes-skill-card .eyebrow {
  margin-top: 1.1rem;
  color: var(--market-accent);
  font-size: 0.56rem;
}

.hermes-skill-card h3 {
  margin: 0.42rem 0 0.45rem;
  color: #d4e0e3;
  font-size: 1.05rem;
  line-height: 1.12;
}

.hermes-skill-card > p:not(.eyebrow) {
  color: rgba(211, 224, 228, 0.7);
  font-size: 0.75rem;
  line-height: 1.46;
}

.hermes-skill-card > div {
  position: absolute;
  right: 0.85rem;
  bottom: 0.78rem;
  left: 0.85rem;
  justify-content: flex-start;
}

.hermes-skill-card > div span {
  padding: 0.18rem 0.3rem;
  font-size: 0.47rem;
}

.hermes-skills-footer {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(193, 212, 223, 0.16);
}

.hermes-skills-footer p {
  color: rgba(197, 215, 220, 0.74);
  font-size: 0.84rem;
}

.hermes-capability-section {
  border-color: rgba(210, 170, 111, 0.32);
  background:
    radial-gradient(circle at 96% 80%, rgba(152, 87, 53, 0.17), transparent 31%),
    linear-gradient(135deg, rgba(23, 25, 35, 0.98), rgba(22, 30, 40, 0.96));
}

.hermes-capability-levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.hermes-capability-levels article {
  min-height: 10rem;
  padding: 1rem;
  border-left: 2px solid rgba(221, 174, 116, 0.6);
  background: linear-gradient(135deg, rgba(232, 198, 145, 0.08), rgba(7, 14, 26, 0.28));
}

.hermes-capability-levels span {
  color: #d9a978;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.hermes-capability-levels strong {
  display: block;
  margin: 1.5rem 0 0.4rem;
  color: #e2e9e6;
  font-family: var(--font-headline);
  font-size: 1.2rem;
}

.hermes-capability-levels p {
  color: rgba(208, 218, 218, 0.7);
  font-size: 0.79rem;
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .hermes-agent-market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hermes-skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hermes-trace { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hermes-trace li:not(:last-child)::after { display: none; }
}

@media (max-width: 760px) {
  .hermes-marketplace-section-heading { grid-template-columns: 1fr; gap: 0.65rem; }
  .hermes-marketplace-section-heading h2 { max-width: 20ch; }
  .hermes-agent-market-grid,
  .hermes-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hermes-market-agent-featured { grid-column: span 2; }
  .hermes-capability-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hermes-trace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .hermes-work-trace,
  .hermes-marketplace-agent-section,
  .hermes-marketplace-skills,
  .hermes-capability-section { padding: 1.1rem; }
  .hermes-agent-market-grid,
  .hermes-skill-grid,
  .hermes-trace,
  .hermes-capability-levels { grid-template-columns: 1fr; }
  .hermes-market-agent-featured { grid-column: auto; }
  .hermes-market-agent { min-height: 17.5rem; }
  .hermes-trace li { min-height: 8.2rem; }
  .hermes-skill-card { min-height: 13.5rem; }
  .hermes-skills-footer { flex-direction: column; align-items: flex-start; }
}

/* ---------- HERMES FIELD GUIDE / ATLAS EDITORIAL LANGUAGE ----------
   The Hermes area is intentionally not another AiGENCY bento page. It uses
   a warm, indexed field-guide treatment so agents and skills read as a real
   catalogue of operational material, rather than a family of product tiles. */
.hermes-atlas-page {
  --hermes-ink: #0e0d0b;
  --hermes-ink-raised: #15130f;
  --hermes-paper: #e8e3d6;
  --hermes-muted: #b8b1a0;
  --hermes-rule: rgba(232, 227, 214, 0.2);
  --hermes-brass: #d6a85f;
  --hermes-brass-deep: #aa7837;
  background:
    radial-gradient(circle at 12% 8%, rgba(61, 92, 137, 0.25), transparent 34rem),
    radial-gradient(circle at 86% 22%, rgba(170, 120, 55, 0.09), transparent 26rem),
    linear-gradient(145deg, #09101f 0%, var(--hermes-ink) 48%, #10121b 100%);
  color: var(--hermes-paper);
}

.hermes-atlas-page .header,
.hermes-atlas-page .nav-mobile {
  background: rgba(14, 13, 11, 0.94);
  border-color: var(--hermes-rule);
}

.hermes-atlas-page .main {
  max-width: none;
  padding: 0 0 clamp(3.5rem, 8vw, 8rem);
}

.hermes-atlas-page .page-intro {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 8.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2.25rem, 5vw, 4rem);
  border-bottom: 1px solid var(--hermes-rule);
}

.hermes-atlas-wordmark {
  margin-bottom: clamp(1.2rem, 2.5vw, 2.1rem);
  color: var(--hermes-paper);
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 1;
}

.hermes-atlas-page .page-intro > .eyebrow,
.hermes-atlas-page .eyebrow {
  color: var(--hermes-brass);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.hermes-atlas-page .hermes-marketplace-intro h1 {
  max-width: 12ch;
  margin-top: 0.9rem;
  background: none;
  color: var(--hermes-paper);
  font-size: clamp(3.5rem, 9.1vw, 8rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.93;
  -webkit-text-fill-color: currentColor;
}

.hermes-atlas-page .hermes-marketplace-intro h1 em {
  color: var(--hermes-brass);
  font-style: normal;
}

.hermes-atlas-page .page-intro .subtitle {
  max-width: 41ch;
  margin: clamp(1.8rem, 3vw, 3rem) 0 0 auto;
  color: var(--hermes-muted);
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1.35vw, 0.95rem);
  line-height: 1.72;
}

.hermes-atlas-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 46rem;
  margin-top: clamp(2.3rem, 5vw, 4.8rem);
  border-top: 1px solid var(--hermes-rule);
  border-bottom: 1px solid var(--hermes-rule);
}

.hermes-atlas-stats > div {
  min-height: 6.6rem;
  padding: 1rem 1.1rem;
  border-right: 1px solid var(--hermes-rule);
}

.hermes-atlas-stats > div:last-child { border-right: 0; }

.hermes-atlas-stats dt {
  color: var(--hermes-brass);
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  letter-spacing: -0.07em;
}

.hermes-atlas-stats dd {
  margin: 0.25rem 0 0;
  color: var(--hermes-muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hermes-atlas-page .bento-grid {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.hermes-atlas-page .bento-grid > .bento-card {
  grid-column: auto;
  min-height: 0;
  margin: 0;
  padding: clamp(2.25rem, 5vw, 4.2rem) 0;
  border: 0;
  border-bottom: 1px solid var(--hermes-rule);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(55, 91, 145, 0.075), transparent 36%, transparent 72%, rgba(214, 168, 95, 0.035));
  box-shadow: none;
}

/* A reference catalogue is available immediately. The site's generic
   scroll-reveal choreography made it look as if records were missing while
   arriving in the index, so it is deliberately disabled in this one area. */
.hermes-atlas-page .motion-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.hermes-atlas-page .bento-card.motion-reveal::before { display: none; }

.hermes-atlas-page .hermes-bridge-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(20rem, 1.18fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: center;
}

.hermes-atlas-page .hermes-bridge-copy h2,
.hermes-atlas-page h2,
.hermes-atlas-page h3 {
  background: none;
  color: var(--hermes-paper);
  -webkit-text-fill-color: currentColor;
}

.hermes-atlas-page .hermes-bridge-copy h2 {
  max-width: 13ch;
  margin: 0.65rem 0 1.25rem;
  font-size: clamp(2.15rem, 4.8vw, 4.8rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hermes-atlas-page p,
.hermes-atlas-page .hermes-marketplace-section-heading > p,
.hermes-atlas-page .hermes-bridge-copy > p {
  color: var(--hermes-muted);
}

.hermes-atlas-page .hermes-bridge-visual {
  position: relative;
  min-height: 21rem;
  overflow: hidden;
  border: 1px solid rgba(214, 168, 95, 0.35);
  border-radius: 0;
  background: linear-gradient(145deg, #111d35, #18140e);
}

.hermes-atlas-page .hermes-bridge-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(9, 18, 35, 0.5), rgba(191, 138, 68, 0.13));
  content: '';
  pointer-events: none;
}

.hermes-atlas-page .hermes-bridge-visual img {
  width: 100%;
  height: 100%;
  min-height: 21rem;
  object-fit: cover;
  filter: grayscale(1) sepia(0.65) saturate(0.8) contrast(1.13);
  opacity: 0.68;
}

.hermes-atlas-page .hermes-bridge-visual figcaption,
.hermes-atlas-page .service-page-feature-disclosure {
  z-index: 1;
  color: var(--hermes-paper);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}

.hermes-atlas-page .hero-actions { gap: 0.6rem; margin-top: 1.75rem; }

.hermes-atlas-page .btn-primary,
.hermes-atlas-page .btn-bronze,
.hermes-atlas-page .btn-secondary {
  border: 1px solid rgba(214, 168, 95, 0.62);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--hermes-paper);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hermes-atlas-page .btn-primary:hover,
.hermes-atlas-page .btn-primary:focus-visible {
  background: var(--hermes-brass);
  color: var(--hermes-ink);
  transform: none;
}

.hermes-atlas-page .service-page-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(20rem, 1.26fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
}

.hermes-atlas-page .service-page-feature-copy {
  display: block;
  width: auto;
  min-height: 0;
  flex: none;
}

.hermes-atlas-page .service-page-feature-copy h2 {
  max-width: 12ch;
  margin-top: 0.55rem;
  font-size: clamp(2rem, 4vw, 4.1rem);
  font-weight: 500;
  line-height: 1;
}

.hermes-atlas-page .service-page-feature-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  max-height: none;
  border: 1px solid rgba(214, 168, 95, 0.3);
  border-radius: 0;
  filter: grayscale(1) sepia(0.52) saturate(0.9) contrast(1.12);
  opacity: 0.74;
}

.hermes-atlas-page .hermes-work-trace,
.hermes-atlas-page .hermes-marketplace-agent-section,
.hermes-atlas-page .hermes-marketplace-skills,
.hermes-atlas-page .hermes-capability-section {
  overflow: visible;
}

.hermes-atlas-page .hermes-marketplace-section-heading {
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.55fr);
  align-items: end;
  margin-bottom: 2.4rem;
}

.hermes-atlas-page .hermes-marketplace-section-heading h2 {
  max-width: 12ch;
  font-size: clamp(2.25rem, 4.2vw, 4rem);
  font-weight: 500;
  line-height: 1;
}

.hermes-atlas-page .hermes-trace {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--hermes-rule);
  border-bottom: 1px solid var(--hermes-rule);
}

.hermes-atlas-page .hermes-trace li {
  min-height: 13rem;
  padding: 1.1rem;
  border: 0;
  border-right: 1px solid var(--hermes-rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hermes-atlas-page .hermes-trace li:last-child { border-right: 0; }
.hermes-atlas-page .hermes-trace li:not(:last-child)::after { display: none; }
.hermes-atlas-page .hermes-trace .hermes-trace-gate { background: rgba(214, 168, 95, 0.09); }
.hermes-atlas-page .hermes-trace strong { color: var(--hermes-paper); font-weight: 500; }
.hermes-atlas-page .hermes-trace small { color: var(--hermes-muted); }
.hermes-atlas-page .hermes-trace-index,
.hermes-atlas-page .hermes-trace-note span { color: var(--hermes-brass); }
.hermes-atlas-page .hermes-trace-note { border-color: var(--hermes-rule); color: var(--hermes-muted); }

.hermes-atlas-page .hermes-agent-market-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(118, 156, 208, 0.32);
  border-left: 1px solid rgba(118, 156, 208, 0.32);
}

.hermes-atlas-page .hermes-market-agent,
.hermes-atlas-page .hermes-market-agent-featured {
  --market-accent: var(--hermes-brass);
  min-height: 0;
  padding: clamp(1.35rem, 2vw, 2rem);
  border: 0;
  border-right: 1px solid rgba(118, 156, 208, 0.23);
  border-bottom: 1px solid rgba(118, 156, 208, 0.23);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hermes-atlas-page .hermes-market-agent:hover {
  background: linear-gradient(108deg, rgba(68, 107, 165, 0.15), rgba(214, 168, 95, 0.05));
  border-color: rgba(139, 176, 225, 0.48);
  box-shadow: none;
  transform: none;
}

.hermes-atlas-page .hermes-market-agent[data-market-tone] { --market-accent: var(--hermes-brass); }
.hermes-atlas-page .hermes-market-agent .eyebrow { margin-top: 2.3rem; color: var(--hermes-brass); }
.hermes-atlas-page .hermes-market-agent h3 { color: var(--hermes-paper); font-size: clamp(1.35rem, 2.35vw, 2rem); font-weight: 500; }
.hermes-atlas-page .hermes-market-agent > p:not(.eyebrow),
.hermes-atlas-page .hermes-market-agent li { color: var(--hermes-muted); }
.hermes-atlas-page .hermes-market-agent li::before { color: var(--hermes-brass); }
.hermes-atlas-page .hermes-market-meta { border-color: var(--hermes-rule); }
.hermes-atlas-page .hermes-market-status,
.hermes-atlas-page .hermes-market-meta span,
.hermes-atlas-page .hermes-skill-card > div span {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hermes-brass);
  padding: 0;
}
.hermes-atlas-page .hermes-market-link { color: var(--hermes-brass); }

.hermes-atlas-page .hermes-skill-controls {
  gap: 0;
  margin: 0 0 1.4rem;
}

.hermes-atlas-page .hermes-skill-controls button {
  min-height: 2.25rem;
  margin: 0 -1px -1px 0;
  border-color: var(--hermes-rule);
  border-radius: 0;
  background: transparent;
  color: var(--hermes-muted);
}

.hermes-atlas-page .hermes-skill-controls button span {
  border-radius: 0;
  background: rgba(214, 168, 95, 0.12);
  color: var(--hermes-brass);
}

.hermes-atlas-page .hermes-skill-controls button:hover,
.hermes-atlas-page .hermes-skill-controls button:focus-visible,
.hermes-atlas-page .hermes-skill-controls button.is-active {
  border-color: rgba(214, 168, 95, 0.65);
  background: rgba(214, 168, 95, 0.1);
  color: var(--hermes-paper);
}

.hermes-atlas-page .hermes-skill-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(118, 156, 208, 0.32);
  border-left: 1px solid rgba(118, 156, 208, 0.32);
}

.hermes-atlas-page .hermes-live-library {
  overflow: hidden;
  border: 1px solid rgba(118, 156, 208, 0.42);
  background: #0d0e14;
}

.hermes-atlas-page .hermes-live-library-bar {
  display: flex;
  gap: 0.85rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  min-height: 3.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(118, 156, 208, 0.3);
  background: linear-gradient(90deg, rgba(53, 86, 136, 0.27), rgba(214, 168, 95, 0.08));
  color: var(--hermes-brass);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
}

.hermes-atlas-page .hermes-live-library-bar a {
  flex: 0 0 auto;
  color: var(--hermes-paper);
  text-decoration: underline;
  text-underline-offset: 0.22rem;
}

.hermes-atlas-page .hermes-live-library iframe {
  display: block;
  width: 100%;
  height: min(72rem, 78vh);
  border: 0;
  background: #0d0e14;
}

.hermes-atlas-page .hermes-skill-card {
  --market-accent: var(--hermes-brass);
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-areas: 'icon eyebrow' 'icon title' 'icon description' 'icon metadata';
  column-gap: 1rem;
  min-height: 0;
  padding: 1.15rem;
  border: 0;
  border-right: 1px solid rgba(118, 156, 208, 0.23);
  border-bottom: 1px solid rgba(118, 156, 208, 0.23);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hermes-atlas-page .hermes-skill-card:nth-child(3n),
.hermes-atlas-page .hermes-skill-card:nth-child(4n) { --market-accent: var(--hermes-brass); }
.hermes-atlas-page .hermes-skill-icon { grid-area: icon; width: 2.25rem; height: 2.25rem; border-color: rgba(214, 168, 95, 0.55); border-radius: 0; background: transparent; color: var(--hermes-brass); }
.hermes-atlas-page .hermes-skill-card .eyebrow { grid-area: eyebrow; margin: 0; color: var(--hermes-brass); }
.hermes-atlas-page .hermes-skill-card h3 { grid-area: title; margin: 0.25rem 0 0; color: var(--hermes-paper); font-size: 1.08rem; font-weight: 500; }
.hermes-atlas-page .hermes-skill-card > p:not(.eyebrow) { grid-area: description; margin-top: 0.35rem; color: var(--hermes-muted); }
.hermes-atlas-page .hermes-skill-card > div { position: static; grid-area: metadata; margin-top: 0.7rem; }
.hermes-atlas-page .hermes-skills-footer { border-color: var(--hermes-rule); }
.hermes-atlas-page .hermes-skills-footer p { color: var(--hermes-muted); }

.hermes-atlas-page .hermes-capability-levels {
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--hermes-rule);
}

.hermes-atlas-page .hermes-capability-levels article {
  min-height: 11rem;
  padding: 1.25rem;
  border: 0;
  border-right: 1px solid var(--hermes-rule);
  background: transparent;
}

.hermes-atlas-page .hermes-capability-levels article:last-child { border-right: 0; }
.hermes-atlas-page .hermes-capability-levels span { color: var(--hermes-brass); }
.hermes-atlas-page .hermes-capability-levels strong { margin-top: 2rem; color: var(--hermes-paper); font-weight: 500; }
.hermes-atlas-page .hermes-capability-levels p { color: var(--hermes-muted); }

.hermes-atlas-page .hermes-layer-grid,
.hermes-atlas-page .homepage-section-heading,
.hermes-atlas-page .hero-theme,
.hermes-atlas-page .training-theme,
.hermes-atlas-page .warm-theme,
.hermes-atlas-page .hermes-bridge-cta {
  background: transparent;
}

.hermes-atlas-page .footer { border-color: var(--hermes-rule); background: var(--hermes-ink); }

@media (max-width: 760px) {
  .hermes-atlas-page .hermes-bridge-hero,
  .hermes-atlas-page .service-page-feature { grid-template-columns: 1fr; }
  .hermes-atlas-page .hermes-marketplace-section-heading { grid-template-columns: 1fr; }
  .hermes-atlas-page .hermes-atlas-stats,
  .hermes-atlas-page .hermes-trace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hermes-atlas-page .hermes-trace li:nth-child(2n) { border-right: 0; }
  .hermes-atlas-page .hermes-trace li:nth-child(-n + 4) { border-bottom: 1px solid var(--hermes-rule); }
}

@media (max-width: 560px) {
  .hermes-atlas-page .bento-grid { padding: 0 1rem; }
  .hermes-atlas-page .hermes-atlas-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hermes-atlas-page .hermes-atlas-stats > div:nth-child(2n) { border-right: 0; }
  .hermes-atlas-page .hermes-atlas-stats > div:nth-child(-n + 2) { border-bottom: 1px solid var(--hermes-rule); }
  .hermes-atlas-page .hermes-agent-market-grid,
  .hermes-atlas-page .hermes-skill-grid { grid-template-columns: 1fr; }
  .hermes-atlas-page .hermes-market-agent,
  .hermes-atlas-page .hermes-skill-card { border-right: 0; }
  .hermes-atlas-page .hermes-capability-levels { grid-template-columns: 1fr; }
  .hermes-atlas-page .hermes-capability-levels article { border-right: 0; border-bottom: 1px solid var(--hermes-rule); }
  .hermes-atlas-page .hermes-live-library-bar { align-items: flex-start; flex-direction: column; }
  .hermes-atlas-page .hermes-live-library iframe { height: 52rem; }
}

/* Keep second-level page and section headings in the established light jade. */
h2 {
  background-image: none !important;
  color: var(--color-insight-heading) !important;
  -webkit-text-fill-color: var(--color-insight-heading) !important;
  text-shadow: 0 0 0.62rem rgba(191, 217, 215, 0.1);
}